@charset "UTF-8";
/* ────────────────────────────────────────────────────────────
   서울에너지플러스 · 공통 디자인 시스템 (v3 기준)
   브랜드: 함께하는사랑밭 — Main #0046FF + Neon Green #C6FF29
   ──────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #eef1f7;
  --fg: #000514;
  --fg-soft: #1a1f33;
  --muted: #5b6378;
  --desc: #3d4459;
  --border: #e6e9f1;
  --border-strong: #c8ceda;
  --brand: #0046FF;
  --brand-deep: #0037BE;
  --brand-soft: #e6edff;
  --accent-green: #C6FF29;
  --accent-pink: #FF4B8C;
  --accent-yellow:#FAE132;
  --accent-violet:#915AF0;
  --accent-cyan: #8CFFF5;
  --font-display: 'Pretendard', 'NanumSquare Neo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Poppins', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --container: 1200px;
  --gutter: 28px;
  --radius: 10px;
  --radius-lg: 16px;
  /* 가독성 폰트 스케일 — PC 확대 / 모바일 제한 (clamp: min=모바일, max=PC) */
  --fs-body: clamp(15.5px, 1.25vw, 17px);
  --fs-desc: clamp(14px, 1.15vw, 16px);
  --fs-lead: clamp(16.5px, 1.4vw, 20px);
  --fs-card-title: clamp(17.5px, 1.4vw, 20px);
  --fs-btn: clamp(15px, 1.1vw, 16.5px);
}

/* ── reset ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 한글 단어 중간 줄바꿈 방지 — CJK는 단어 단위 보호, 영문은 공백 단위 그대로 */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* URL·이메일·긴 숫자·코드는 컨테이너를 깨지 않도록 필요 시 문자 단위 줄바꿈 허용 */
a[href^="mailto:"], a[href^=http], code, .mono-break,
input, textarea {
  overflow-wrap: anywhere;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

/* form controls inherit the unified font family (no browser-default fallback) */
input, textarea, select, label, optgroup, option {
  font-family: inherit;
}

p {
  text-wrap: pretty;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  text-wrap: balance;
  margin: 0;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.018em;
  line-height: 1.2;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
 * Nuxt ENT layout.css `.container { max-width:100%; min-height:calc(100vh - 409px); margin:0 }`
 * 와 클래스명 충돌 대응 — .eplus-site 래퍼에서 특이도 상향 (파트너센터 영향 없음)
 */
.eplus-site .container,
.eplus-site .container-narrow {
  display: block;
  position: relative;
  width: 100%;
  max-width: var(--container);
  min-height: 0;
  margin-inline: auto;
  margin-block: 0;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.eplus-site .container-narrow {
  max-width: 880px;
}

.eplus-site .page-hero > .container,
.eplus-site .page-hero > .container-narrow {
  min-height: 0;
}

.section {
  padding-block: clamp(36px, 4.5vw, 64px);
}

.section-sm {
  padding-block: clamp(28px, 3.5vw, 44px);
}

.section + .section {
  border-top: 1px solid var(--border);
}

.surface-2 {
  background: var(--surface-2);
}

/* ── topbar (white sticky nav) ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 26px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.brand-mark .sq {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--brand);
  position: relative;
}

.brand-mark .sq::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-green);
}

.brand-mark small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1px;
}

.nav-main {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-soft);
}

.nav-main a {
  padding: 8px 4px;
  position: relative;
  transition: color 0.15s;
}

.nav-main a:hover {
  color: var(--brand);
}

.nav-main a.is-current {
  color: var(--brand);
}

.nav-main a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand);
}

.nav-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-actions .login {
  font-size: 13px;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
}

.nav-actions .login:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-2);
  align-items: center;
  justify-content: center;
}

.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  position: relative;
  transition: background 0.2s;
}

.nav-burger span::before, .nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fg);
  transition: transform 0.2s, top 0.2s;
}

.nav-burger span::before {
  top: -6px;
}

.nav-burger span::after {
  top: 6px;
}

/* ── buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.1s, background 0.15s, color 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: white;
}

.btn-primary:hover {
  background: var(--brand-deep);
}

.btn-primary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-green);
}

.btn-dark {
  background: var(--fg);
  color: var(--accent-green);
}

.btn-dark:hover {
  background: #1a1f33;
  color: var(--accent-green);
}

.btn-green {
  background: var(--accent-green);
  color: var(--fg);
}

.btn-green:hover {
  background: #b3eb1a;
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--fg);
}

.btn-ghost-light {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  color: #fff;
}

.btn-sm {
  padding: 8px 13px;
  font-size: clamp(13.5px, 0.95vw, 15px);
}

.btn-lg {
  padding: 12px 22px;
  font-size: clamp(15.5px, 1.15vw, 17px);
}

/* ── page hero (dark gradient) ── */
.page-hero {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: white;
  padding: clamp(40px, 5.5vw, 64px) 0 clamp(32px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(198, 255, 41, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero .crumb {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--accent-green);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.page-hero .crumb a {
  opacity: 0.7;
}

.page-hero .crumb a:hover {
  opacity: 1;
}

.page-hero .crumb .sep {
  opacity: 0.4;
}

.page-hero h1 {
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 820px;
}

.page-hero .lede {
  margin-top: 16px;
  max-width: 640px;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.page-hero .hero-meta {
  margin-top: 24px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 16px;
}

.page-hero .hero-meta .it {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-hero .hero-meta .it .k {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.page-hero .hero-meta .it .v {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-green);
}

/* ── eyebrow ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: var(--brand);
}

.eyebrow.on-dark {
  color: var(--accent-green);
}

.eyebrow.on-dark::before {
  background: var(--accent-green);
}

/* ── section heading ── */
.section-head {
  margin-bottom: clamp(22px, 2.8vw, 45px);
}

.section-head h2 {
  position: relative;
  color: #000514;
  font-size: clamp(24px, 2.8vw, 35px);
  letter-spacing: -0.022em;
  font-weight: 800;
  word-wrap: break-word;
  padding-top: 12px;
  max-width: 660px;
}

.section-head .desc {
  margin-top: 14px;
  margin-bottom: clamp(22px, 2.8vw, 45px);
  max-width: 740px;
  color: #3D4459;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  word-wrap: break-word;
}

.section-head.center {
  text-align: center;
}

.section-head.center .eyebrow {
  display: inline-flex;
}

.section-head.center h2 {
  margin-inline: auto;
}

.section-head.center .desc {
  margin-inline: auto;
}

.section-head .row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}

.section-head .row .more {
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(0, 5, 20, 0.1);
}

.card .ic {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  font-family: var(--font-mono);
  margin-bottom: 14px;
}

.card .ic.green {
  background: var(--accent-green);
  color: var(--fg);
}

.card .ic.dark {
  background: var(--fg);
  color: var(--accent-green);
}

.card .ic.pink {
  background: var(--accent-pink);
  color: white;
}

.card h3 {
  font-size: var(--fs-card-title);
  letter-spacing: -0.015em;
}

.card p {
  margin-top: 8px;
  color: var(--desc);
  font-size: var(--fs-desc);
  font-weight: 500;
  line-height: 1.72;
}

.card .meta-row {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.04em;
}

.card .meta-row span {
  background: var(--brand-soft);
  padding: 4px 8px;
  border-radius: 4px;
}

.card .meta-row span.green {
  background: var(--accent-green);
  color: var(--fg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* ── stat ── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
}

.stat-card .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.stat-card .num {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.stat-card .num .u {
  font-size: 0.5em;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 500;
}

.stat-card .desc {
  margin-top: 8px;
  font-size: var(--fs-desc);
  color: var(--desc);
  font-weight: 500;
  line-height: 1.72;
}

.stat-card.dark {
  background: var(--fg);
  color: white;
  border-color: transparent;
}

.stat-card.dark .lbl {
  color: rgba(255, 255, 255, 0.6);
}

.stat-card.dark .num {
  color: var(--accent-green);
}

.stat-card.dark .desc {
  color: rgba(255, 255, 255, 0.7);
}

.stat-card.accent {
  background: var(--brand);
  color: white;
  border-color: transparent;
}

.stat-card.accent .lbl {
  color: rgba(255, 255, 255, 0.7);
}

.stat-card.accent .num {
  color: white;
}

.stat-card.accent .num .u {
  color: rgba(255, 255, 255, 0.7);
}

.stat-card.accent .desc {
  color: rgba(255, 255, 255, 0.8);
}

/* ── list with check ── */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: var(--fs-desc);
}

.check-list li {
  padding-left: 26px;
  position: relative;
  color: var(--fg-soft);
  line-height: 1.7;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000514' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── flow diagram (steps) ── */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}

.flow.step3 {
  grid-template-columns: repeat(3, 1fr);
}

.flow.step5 {
  grid-template-columns: repeat(5, 1fr);
}

.flow .step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 18px;
  position: relative;
}

.flow .step .n {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--accent-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}

.flow .step h4 {
  font-size: 16.5px;
  letter-spacing: -0.01em;
}

.flow .step p {
  margin-top: 6px;
  color: var(--desc);
  font-size: var(--fs-desc);
  font-weight: 500;
  line-height: 1.72;
}

.flow .step.accent {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.flow .step.accent .n {
  background: var(--accent-green);
  color: var(--fg);
}

.flow .step.accent p {
  color: rgba(255, 255, 255, 0.85);
}

.flow .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  display: none; /* show with grid gap if you want — hidden by default */
}

/* ── timeline ── */
.tl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl .row {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.tl .row:last-child {
  border-bottom: 1px solid var(--border);
}

.tl .row .when {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--brand);
  letter-spacing: 0.04em;
}

.tl .row .what h4 {
  font-size: 17.5px;
}

.tl .row .what p {
  margin-top: 6px;
  color: var(--desc);
  font-size: var(--fs-desc);
  font-weight: 500;
  line-height: 1.72;
}

.tl .row .who {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tl .row.highlight {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  padding-inline: 16px;
  border-radius: 6px;
  margin-block: 4px;
  border-top-color: transparent;
}

.tl .row.highlight + .row {
  border-top-color: transparent;
}

/* ── faq ── */
.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  gap: 16px;
  align-items: start;
  font-size: clamp(16.5px, 1.25vw, 18px);
  font-weight: 700;
  color: var(--fg);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "Q";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}

.faq-item summary .qtxt {
  flex: 1;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item .a {
  padding: 0 0 22px 44px;
  color: var(--fg-soft);
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* ── tag pill ── */
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  color: var(--muted);
}

.tag.brand {
  background: var(--brand-soft);
  color: var(--brand);
}

.tag.green {
  background: var(--accent-green);
  color: var(--fg);
}

.tag.dark {
  background: var(--fg);
  color: var(--accent-green);
}

.tag.warn {
  background: #fff3da;
  color: #8a5a00;
}

/* ── notice strip ── */
.notice {
  background: var(--fg);
  color: white;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  gap: 24px;
  align-items: start;
  flex-wrap: wrap;
}

.notice .ic-lock {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-green);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.notice .body {
  flex: 1;
  min-width: 280px;
}

.notice .body h4 {
  font-size: 19px;
  color: var(--accent-green);
  margin-bottom: 8px;
}

.notice .body p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-desc);
  line-height: 1.72;
}

/* ── cta band ── */
.cta-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cta-band .cb {
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
}

.cta-band .cb.primary {
  background: var(--brand);
  color: white;
}

.cta-band .cb.dark {
  background: var(--fg);
  color: white;
}

.cta-band .cb .eye {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.cta-band .cb.primary .eye {
  color: var(--accent-green);
}

.cta-band .cb.dark .eye {
  color: var(--accent-green);
}

.cta-band .cb h3 {
  font-size: clamp(22px, 2.3vw, 29px);
  letter-spacing: -0.02em;
}

.cta-band .cb p {
  font-size: var(--fs-desc);
  opacity: 0.86;
  line-height: 1.65;
}

.cta-band .cb .btn {
  margin-top: auto;
  align-self: start;
}

/* ── form ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.field label .req {
  color: var(--accent-pink);
  margin-left: 4px;
}

.field input, .field select, .field textarea {
  font: inherit;
  font-size: var(--fs-body);
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: white;
  color: var(--fg);
  transition: border-color 0.15s;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.field .hint {
  font-size: 13px;
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-row {
  display: flex;
  gap: 12px;
  align-items: end;
}

.form-row .field {
  flex: 1;
}

/* ── partner logos ── */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.partner-grid .lg {
  aspect-ratio: 16/9;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 6px;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: border-color 0.15s, color 0.15s;
}

.partner-grid .lg:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ── board list ── */
.board {
  border-top: 1px solid var(--fg);
}

.board .row {
  display: grid;
  grid-template-columns: 80px 1fr 120px 100px;
  gap: 24px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.board .row.head {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board .row .no {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}

.board .row .title {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}

.board .row .ttl {
  font-weight: 600;
  font-size: 16.5px;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.board .row .ttl .pin {
  background: var(--brand);
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.board .row .date {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}

.board .row .views {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}

.board .row:hover:not(.head) {
  background: #fafbfd;
}

.board .row:hover .ttl {
  color: var(--brand);
}

/* ── footer (HTML, responsive) ── */
.site-footer {
  background: #eee;
  color: #212121;
  border-top: 1px solid #eee;
}

.footer-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 30px var(--gutter) 22px;
}

.ft-policy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  padding-bottom: 15px;
  margin-bottom: 18px;
  border-bottom: 1px solid #ccc;
}

.ft-policy a {
  position: relative;
  padding: 4px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: #212121;
  line-height: 1.3;
}

.ft-policy a:first-child {
  padding-left: 0;
}

.ft-policy a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: #212121;
}

.ft-policy a:hover {
  color: #212121;
}

.ft-policy a.strong {
  color: #212121;
  font-weight: 700;
}

.ft-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 40px;
  align-items: flex-start;
}

.ft-left {
  flex: 1 1 460px;
  min-width: 0;
}

.ft-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.ft-brand .div {
  width: 1px;
  height: 18px;
  background: #212121;
  align-self: flex-end;
}

/* 두 로고는 원본 내부 여백이 달라(서울시 콘텐츠 64%, 사랑밭 96%) 같은 height 면 사랑밭이 더 커 보임.
   → 화면상 한글 텍스트 높이가 비슷하게 보이도록 사랑밭 렌더 높이를 낮춤(비율 유지). */
.ft-logo-seoul {
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

.ft-logo-sb {
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

.ft-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 16px;
  max-width: 620px;
}

.ft-info dt {
  color: #212121;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ft-info dd {
  color: #212121;
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.ft-info dd a {
  color: #212121;
}

.ft-info dd a:hover {
  color: #212121;
}

.ft-certs {
  flex: 1 0 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid #ccc;
}

.ft-certs img {
  height: 84px;
  width: auto;
  flex: 0 1 auto;
  max-width: 100%;
  object-fit: contain;
}

.ft-copy {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ccc;
  font-size: 13px;
  color: #212121;
  line-height: 1.5;
}

.ft-copy b {
  color: var(--accent-green);
  font-weight: 700;
}

@media (max-width: 720px) {
  .footer-inner {
    padding: 30px 22px 26px;
  }
  .ft-policy {
    gap: 8px 0;
  }
  .ft-policy a {
    font-size: 13.5px;
    padding: 6px 14px;
  }
  .ft-main {
    flex-direction: column;
    gap: 20px;
  }
  .ft-left {
    flex: 1 1 auto;
  }
  .ft-info {
    grid-template-columns: 86px 1fr;
    gap: 8px 12px;
  }
  .ft-certs {
    flex: 0 0 auto;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    padding-top: 18px;
  }
  .ft-certs img {
    height: 56px;
  }
  .ft-logo-seoul {
    height: 26px;
  }
  .ft-logo-sb {
    height: 26px;
  }
  .ft-copy {
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
  }
}
/* ── responsive ── */
@media (max-width: 980px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow.step5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cta-band {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .tl .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tl .row .who {
    font-size: 11px;
  }
  .board .row {
    grid-template-columns: 50px 1fr 90px;
  }
  .board .row .views {
    display: none;
  }
  .board .row.head .views {
    display: none;
  }
}
@media (max-width: 720px) {
  :root {
    --gutter: 20px;
  }
  .nav-main {
    display: none;
  }
  .nav-actions .login {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav-actions .btn-primary {
    padding: 9px 14px;
    font-size: 13px;
  }
  /* mobile GNB drawer — burger toggles .topbar.nav-open */
  .topbar.nav-open .nav-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px rgba(0, 18, 51, 0.1);
    padding: 6px var(--gutter) 12px;
    z-index: 49;
  }
  .topbar.nav-open .nav-main a {
    padding: 14px 4px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }
  .topbar.nav-open .nav-main a:last-child {
    border-bottom: 0;
  }
  .topbar.nav-open .nav-main a.is-current {
    color: var(--brand);
  }
  .topbar.nav-open .nav-main a.is-current::after {
    display: none;
  }
  .topbar.nav-open .nav-burger span {
    background: transparent;
  }
  .topbar.nav-open .nav-burger span::before {
    top: 0;
    transform: rotate(45deg);
  }
  .topbar.nav-open .nav-burger span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .flow {
    grid-template-columns: 1fr;
  }
  .flow.step3 {
    grid-template-columns: 1fr;
  }
  .flow.step5 {
    grid-template-columns: 1fr;
  }
  .partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .index .page-hero .hero-meta {
    gap: 18px;
  }
  .topbar-inner {
    gap: 16px;
  }
  .nav-actions {
    gap: 6px;
  }
  .section-head .row {
    flex-direction: column;
    align-items: start;
  }
}
@media (max-width: 420px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .board .row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .board .row .no, .board .row .date {
    display: none;
  }
  .board .row.head {
    display: none;
  }
}
/* official CI header logo */
.brand-ci {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 720px) {
  .brand-ci {
    height: 30px;
  }
}
/* ── floating back-to-top (TOP) button ── */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 5, 20, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.15s ease, border-color 0.15s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  color: #fff;
}

.to-top:hover {
  background: var(--brand-deep);
  border-color: var(--accent-green);
}

.to-top:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

.to-top .arr {
  font-size: 13px;
  line-height: 1;
}

.to-top .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .to-top {
    right: 16px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
}
@media print {
  .to-top {
    display: none !important;
  }
}
/* GNB dropdown */
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 100px;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-top {
  padding: 8px 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
  cursor: pointer;
}

.nav-top:hover, .nav-item:hover > .nav-top, .nav-item.open > .nav-top {
  color: var(--brand);
}

.nav-top.is-current {
  color: var(--brand);
}

.nav-top.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 2px;
  background: var(--brand);
}

.nav-top .caret {
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
  opacity: 0.65;
}

.nav-item:hover > .nav-top .caret, .nav-item.open > .nav-top .caret {
  transform: rotate(-135deg) translateY(0);
  opacity: 1;
}

.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 18, 51, 0.15);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav-item:hover > .nav-sub, .nav-item.open > .nav-sub, .nav-sub:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-sub a {
  display: block;
  padding: 10px 15px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-soft);
  position: static;
}

.nav-sub a::after {
  display: none !important;
}

.nav-sub a:hover, .nav-sub a:focus-visible {
  background: var(--brand-soft);
  color: var(--brand);
  outline: none;
}

.nav-sub a.is-current {
  color: var(--brand);
  font-weight: 700;
  background: var(--brand-soft);
}

/* 2026-07-14 "전체"(상위 페이지) 링크 — PC 는 숨김, 모바일 드로어에서만 노출 */
.nav-sub a.nav-sub-all {
  display: none;
}

/* GNB 소메뉴 단독 페이지(?sub=): 히어로 없이 GNB 바로 아래부터 콘텐츠 — 최소 상단 여백 */
.submenu-lead {
  padding-top: clamp(24px, 2.4vw, 36px) !important;
  border-top: 0 !important;
}

@media (max-width: 720px) {
  .submenu-lead {
    padding-top: 20px !important;
  }
}
@media (max-width: 720px) {
  .topbar.nav-open .nav-item {
    display: block;
  }
  .topbar.nav-open .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 4px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }
  .topbar.nav-open .nav-top .caret {
    transform: rotate(45deg);
    opacity: 0.6;
  }
  .topbar.nav-open .nav-item.open > .nav-top .caret {
    transform: rotate(-135deg);
    opacity: 1;
  }
  .topbar.nav-open .nav-item::after {
    display: none;
  }
  .topbar.nav-open .nav-sub {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    z-index: auto;
    display: none;
    background: var(--surface-2);
  }
  .topbar.nav-open .nav-item.open > .nav-sub {
    display: flex;
  }
  .topbar.nav-open .nav-sub a {
    padding: 12px 16px 12px 18px;
    font-size: 14px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    color: var(--fg-soft);
  }
  /* 2026-07-14 모바일 드로어: "전체"(상위 페이지) 링크 노출  */
  .topbar.nav-open .nav-sub a.nav-sub-all {
    display: block;
  }
}
/* /GNB dropdown */
/* ── GNB 소메뉴 랜딩 안내 UI (submenu landing indicator) ────────
   소메뉴 클릭으로 섹션 이동했을 때만 잠깐 노출되는 floating 안내바.
   원복: 이 블록 + assets/gnb-landing.js + 각 페이지 indicator div/script 제거. */
.submenu-landing-indicator {
  position: fixed;
  top: calc(var(--header-height, 64px) + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: calc(100vw - 32px);
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(11, 99, 255, 0.12);
  box-shadow: 0 10px 24px rgba(15, 35, 80, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.26s ease, transform 0.26s ease;
  font-size: 14px;
  line-height: 1.2;
}

.submenu-landing-indicator.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.submenu-landing-indicator .gl-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  flex: none;
}

.submenu-landing-indicator .gl-home svg {
  width: 13px;
  height: 13px;
}

.submenu-landing-indicator .gl-parent {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-size: 14px;
}

.submenu-landing-indicator .gl-sep {
  width: 12px;
  height: 12px;
  color: rgba(11, 99, 255, 0.3);
  flex: none;
}

.submenu-landing-indicator .gl-section {
  color: #0b63ff;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-size: 14px;
  background: #f2f7ff;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(11, 99, 255, 0.12);
  cursor: default; /* 버튼 아님 — 현재 위치 표시용 badge */
}

@media (max-width: 720px) {
  .submenu-landing-indicator {
    top: calc(var(--header-height, 56px) + 8px);
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: translateY(-6px);
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
  .submenu-landing-indicator.is-visible {
    transform: translateY(0);
  }
  .submenu-landing-indicator .gl-section {
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* 슬라이드(translateY) 애니메이션만 제거 — 위치(translateX) 변형은 브레이크포인트별로 유지 */
  .submenu-landing-indicator {
    transition: opacity 0.2s ease;
  }
}
/* /submenu landing indicator */
/* ── home-only overrides ── */
.hero-home {
  background: #001233;
  color: white;
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.hero-skyline {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-skyline {
  opacity: 0;
}

.hero-skyline.is-active {
  opacity: 1;
}

/* manual toggle button */
.hero-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 18, 51, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-toggle:hover {
  background: rgba(0, 18, 51, 0.78);
  border-color: var(--accent-green);
}

.hero-toggle .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(198, 255, 41, 0.7);
}

.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 18, 51, 0.2) 0%, rgba(0, 18, 51, 0) 30%, rgba(0, 18, 51, 0) 70%, rgba(0, 18, 51, 0.55) 100%), linear-gradient(100deg, rgba(0, 18, 51, 0.55) 0%, rgba(0, 18, 51, 0.18) 38%, rgba(0, 18, 51, 0) 60%);
  pointer-events: none;
  z-index: 1;
}

.hero-home::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 480px;
  height: 480px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(198, 255, 41, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.hero-home-inner {
  width: 100%;
  box-sizing: border-box;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(54px, 5.5vw, 72px) var(--gutter) clamp(54px, 4.5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 3;
}

.hero-home-inner > div {
  min-width: 0;
}

.hero-home .tag-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--accent-green);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-home .tag-line::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--accent-green);
}

.hero-home h1 {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.hero-home h1 .accent {
  padding: 0 6px;
  color: white;
}

.hero-home .lede {
  margin-top: 18px;
  font-size: clamp(13.5px, 1.2vw, 15.5px);
  line-height: 1.65;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.86);
}

.hero-home .h-cta {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.hero-home .h-meta {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
}

.hero-home .h-meta .it {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-home .h-meta .k {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

.hero-home .h-meta .v {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-green);
}

/* Right: rotating banner */
.hero-banner {
  background: rgba(8, 18, 42, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 430px;
  min-height: 430px;
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}

.hero-banner .slide h3, .hero-banner .slide p, .hero-banner .slide .stamp, .hero-banner .slide .img-stub {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hero-banner .slide {
  flex: 1;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.hero-banner .slide .stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-green);
  font-weight: 600;
  text-transform: uppercase;
}

.hero-banner .slide h3 {
  margin-top: 12px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.22;
  color: white;
}

.hero-banner .slide p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.55;
}

.hero-banner .slide .img-stub {
  flex: 1;
  margin: 16px 0;
  border-radius: 10px;
  min-height: 90px;
  background: linear-gradient(135deg, rgba(198, 255, 41, 0.3) 0%, rgba(143, 90, 240, 0.25) 100%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  overflow: hidden;
}

.hero-banner .slide h3, .hero-banner .slide p {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.hero-banner .slide .hb-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-banner .slide .hb-btn {
  margin-top: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.hero-banner .ctrl {
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-banner .ctrl .pager {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.hero-banner .ctrl .pager b {
  color: var(--accent-green);
  font-weight: 700;
}

.hero-banner .ctrl .dots {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.hero-banner .ctrl .dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.15s, width 0.2s;
}

.hero-banner .ctrl .dots i.on {
  background: var(--accent-green);
  width: 18px;
}

.hero-banner .ctrl .nav {
  display: flex;
  gap: 4px;
}

.hero-banner .ctrl .nav button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-family: var(--font-mono);
  font-size: 15.5px;
}

.hero-banner .ctrl .nav button:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* programs (4대 사업) */
.programs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.program {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, transform 0.15s;
}

.program:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.program .ic-big {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 18.5px;
}

.program.g .ic-big {
  background: var(--accent-green);
  color: var(--fg);
}

.program.p .ic-big {
  background: var(--accent-pink);
  color: white;
}

.program.v .ic-big {
  background: var(--accent-violet);
  color: white;
}

.program h3 {
  font-size: 17px;
}

.program p {
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.program .more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.04em;
}

/* impact area */
.impact {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 12% 18%, rgba(255, 210, 120, 0.22), transparent 36%), radial-gradient(circle at 88% 12%, rgba(0, 126, 255, 0.08), transparent 34%), linear-gradient(135deg, #fff8ec 0%, #f8fbff 50%, #eef7ff 100%);
  color: #111827;
  border: 1px solid rgba(31, 92, 180, 0.08);
  box-shadow: 0 18px 48px rgba(27, 65, 120, 0.08);
  border-radius: 24px;
  padding: 36px 32px;
}

.impact .head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.impact .head h2 {
  color: #0b1020;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.022em;
  max-width: 540px;
}

.impact .head .ko-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #5f9400;
  text-transform: uppercase;
  font-weight: 600;
}

/* 상세 현황 버튼 — 밝은 배경용 */
.impact-detail-btn {
  background: #ffffff;
  color: #0b63ff;
  border: 1px solid rgba(11, 99, 255, 0.2);
}

.impact-detail-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.impact-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(20, 60, 120, 0.08);
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: 0 10px 28px rgba(32, 72, 120, 0.06);
  position: relative;
}

.impact-card .ic {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 26px;
  height: 26px;
  color: #6fa520;
  opacity: 1;
  pointer-events: none;
}

.impact-card .ic svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-card .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #4b5563;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding-right: 30px;
}

.impact-card .num {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.impact-card .num .u {
  font-size: 0.5em;
  color: #4b5563;
  margin-left: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.impact-card .num .u sub {
  font-size: 0.72em;
  vertical-align: -0.12em;
  margin: 0;
}

.impact-card .desc {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.6;
}

.impact .foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(20, 60, 120, 0.12);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.04em;
}

/* campaign carousel */
.camp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.camp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.camp .vis {
  aspect-ratio: 16/9;
  background: var(--surface-2);
  position: relative;
}

.camp.green .vis {
  background: #eef4e6;
}

.camp.dark .vis {
  background: var(--surface-3);
}

.camp .vis .lbl {
  position: absolute;
  top: 12px;
  left: 12px;
  background: white;
  color: var(--fg);
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.camp .vis .lbl.live {
  background: var(--brand);
  color: white;
}

.camp .body {
  padding: 16px 18px 18px;
}

.camp .body h4 {
  font-size: 16.5px;
  letter-spacing: -0.015em;
}

.camp .body p {
  margin-top: 6px;
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.camp .body .meta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.camp .body .meta b {
  color: var(--brand);
  font-weight: 700;
}

a.camp {
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

a.camp:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 18px 38px -20px rgba(0, 5, 20, 0.4);
}

a.camp .body h4, a.camp .body p {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* news strip */
.news-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.news-col h3 {
  font-size: 17px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.news-col h3 a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--brand);
  font-weight: 600;
}

.news-col ul {
  display: flex;
  flex-direction: column;
}

.news-col li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.news-col li .tt {
  font-size: 14.5px;
  color: var(--fg-soft);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-col li .tt:hover {
  color: var(--brand);
}

.news-col li .dt {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}

.news-col li .pin {
  background: var(--brand);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 6px;
}

@media (max-width: 980px) {
  .hero-home-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .programs {
    grid-template-columns: repeat(2, 1fr);
  }
  .impact {
    padding: 36px 28px;
  }
  .impact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .camp-row {
    grid-template-columns: 1fr;
  }
  .news-strip {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .programs {
    grid-template-columns: 1fr;
  }
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .impact {
    padding: 28px 20px;
  }
  .hero-home {
    min-height: 380px;
  }
  .hero-banner {
    height: 430px;
    min-height: 430px;
  }
  .hero-toggle {
    bottom: 10px;
  }
}
@media (max-width: 420px) {
  .impact-grid {
    grid-template-columns: 1fr;
  }
}
/* 2026-07-14 ── partner CI — 개별 로고 반응형 그리드 (PC 4열 / MO ≤720px 2열) ── */
.partners-ci-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC: 한 줄 4개 */
  gap: 16px;
  width: 100%;
  margin-inline: auto;
}

.partners-ci-grid .partner-ci-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.partners-ci-grid .partner-ci-item img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 2026-07-14 MO(720px 이하): 2개씩 정렬, 개수가 늘면 계속 2개씩 아래로 */
@media (max-width: 720px) {
  .partners-ci-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* compact partner section padding */
section[data-od-id=partners] {
  padding-block: 28px;
}

section[data-od-id=partners] .section-head {
  margin-bottom: 16px;
}

/* For Donors CTA 배너 — 밝은 하늘색 톤 + 부드러운 라임 버튼 (이 배너에만 적용) */
.cta-band .cb.primary.donor-cta {
  background: linear-gradient(135deg, #2b9bf0 0%, #0b6fe0 100%);
  position: relative;
  overflow: hidden;
}

.cta-band .cb.primary.donor-cta p {
  opacity: 0.95;
}

.donor-cta-icon {
  position: absolute;
  top: 30px;
  right: 36px;
  width: 84px;
  height: 84px;
  opacity: 0.95;
  pointer-events: none;
}

@media (max-width: 768px) {
  .donor-cta-icon {
    width: 50px;
    height: 50px;
    top: 16px;
    right: 16px;
    opacity: 0.72;
  }
}
.btn.donor-cta-btn {
  background: #c8ff4a;
  color: #0b1020;
}

.btn.donor-cta-btn:hover {
  background: #b8f23c;
  transform: translateY(-1px);
}

/* For Beneficiaries CTA 배너 — 밝은 화이트/스카이 톤 (이 배너에만 적용) */
.cta-band .cb.benef-cta {
  background: linear-gradient(135deg, #f7fbff 0%, #eaf5ff 55%, #f3ffe8 100%);
  color: #111827;
  border: 1px solid rgba(11, 99, 255, 0.1);
  box-shadow: 0 10px 28px rgba(20, 60, 120, 0.05);
}

.cta-band .cb.benef-cta .eye {
  color: var(--brand);
}

.cta-band .cb.benef-cta h3 {
  color: #0b1020;
}

.cta-band .cb.benef-cta p {
  color: #3d4459;
  opacity: 1;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.cta-band .cb.benef-cta .benef-cta-btn {
  background: #c8ff4a;
  color: #0b1020;
  border-radius: 999px;
}

.cta-band .cb.benef-cta .benef-cta-btn:hover {
  background: #b8f23c;
}

/* ────────────────────────────────────────────────────────────
   서울에너지플러스 · 후원안내   
   ──────────────────────────────────────────────────────────── */
/* donate page-specific */
/* hero banner — match home hero height */
.donation .page-hero {
  min-height: 460px;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(36px, 4.5vw, 56px);
  display: flex;
  align-items: center;
}

.donation .page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  z-index: 0;
}

.donation .page-hero .hero-bg {
  object-position: center;
}

/* 밝고 따뜻한 이미지 — 좌측만 은은한 크림 워시(따뜻함 유지) + 진한 네이비 텍스트 */
.donation .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 249, 240, 0.94) 0%, rgba(255, 249, 240, 0.74) 48%, rgba(255, 249, 240, 0.2) 74%, rgba(255, 249, 240, 0) 100%), linear-gradient(180deg, rgba(255, 249, 240, 0.24) 0%, rgba(255, 249, 240, 0) 46%);
  z-index: 1;
  pointer-events: none;
}

.donation .page-hero h1 {
  color: #0b1733;
}

.donation .page-hero h1 .hl {
  color: #0b1733;
}

.donation .page-hero .lede {
  color: #2f3a4d;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.donation .page-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (max-width: 720px) {
  .donation .page-hero {
    min-height: 380px;
  }
  .donation .page-hero::after {
    background: linear-gradient(180deg, rgba(255, 249, 240, 0.92) 0%, rgba(255, 249, 240, 0.6) 52%, rgba(255, 249, 240, 0.28) 100%), linear-gradient(90deg, rgba(255, 249, 240, 0.5) 0%, rgba(255, 249, 240, 0) 82%);
  }
}
.donate-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.donate-tab {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all 0.15s;
}

.donate-tab.is-on {
  background: var(--fg);
  color: white;
  border-color: var(--fg);
}

.donate-tab:hover {
  color: var(--fg);
}

.donate-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.donate-pick {
  background: var(--surface);
  border: 1.5px solid rgba(11, 99, 255, 0.28);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
}

.donate-pick:hover {
  border-color: rgba(11, 99, 255, 0.42);
  box-shadow: 0 14px 34px rgba(11, 99, 255, 0.08);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .donate-pick {
    border-width: 1px;
  }
}
/* 에코마일리지 로고 박스 — 좌측 개인후원 카드 아이콘(.card .ic, 38px)과 동일 크기 */
.eco-mileage-logo-box {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #f3ffe1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.eco-mileage-logo-box img,
.eco-mileage-logo-box svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* 개인후원·에코마일리지 2카드 — 높이 동일 + 버튼 하단 기준선 정렬 */
.grid-2 .card {
  display: flex;
  flex-direction: column;
}

.grid-2 .donate-card-cta {
  margin-top: auto;
  padding-top: 22px;
}

.donate-pick .num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  border: 1px solid transparent;
}

.donate-pick.alt .num {
  background: var(--surface);
  color: var(--accent-violet);
  border-color: var(--accent-violet);
}

.donate-pick.alt .go {
  background: var(--accent-violet);
  color: #fff;
  border-color: var(--accent-violet);
}

.donate-pick.alt .go:hover {
  background: #7d45e0;
  border-color: #7d45e0;
}

.donate-pick.last .num {
  background: var(--surface);
  color: var(--accent-pink);
  border-color: var(--accent-pink);
}

.donate-pick.last .go {
  background: var(--accent-pink);
  color: #fff;
  border-color: var(--accent-pink);
}

.donate-pick.last .go:hover {
  background: #f02d75;
  border-color: #f02d75;
}

.donate-pick h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.donate-pick p {
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.donate-pick .meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--desc);
  letter-spacing: 0.04em;
}

.donate-pick .meta b {
  color: var(--fg);
  font-weight: 700;
}

.donate-pick .go {
  margin-top: 6px;
}

.receipt-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.receipt-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.receipt-step .n {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--fg);
  color: var(--accent-green);
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 10px;
}

.receipt-step h4 {
  font-size: 15.5px;
}

.receipt-step p {
  margin-top: 4px;
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.receipt-step .tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10.5px;
  padding: 2px 6px;
}

.receipt-step.accent {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.receipt-step.accent .n {
  background: var(--accent-green);
  color: var(--fg);
}

.receipt-step.accent p {
  color: rgba(255, 255, 255, 0.85);
}

/* 복지포인트 기부 — 사진형 4단계 플로우 */
.wp-lede {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -2px auto 30px;
  max-width: 880px;
  text-align: left;
}

.wp-lede svg {
  flex: none;
}

.wp-lede p {
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.45;
}

.wp-lede b {
  font-weight: 800;
}

.wp-lede .pink {
  color: #e6356f;
}

.wp-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.wp-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wp-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(0, 70, 255, 0.1);
}

.wp-photo {
  position: relative;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border-radius: 16px 16px 0 0;
}

.wp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 35, 80, 0.14);
}

.wp-body {
  padding: 16px 16px 20px;
  text-align: center;
  flex: 1;
}

.wp-step {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-weight: 700;
}

.wp-body h4 {
  font-size: 17.5px;
  margin-top: 4px;
}

.wp-body h4::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-green);
  margin: 9px auto 0;
}

.wp-body p {
  margin-top: 11px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* 카드 사이 화살표 제거 */
.wp-card:not(:last-child)::after {
  display: none;
}

.lookup-grid {
  display: block;
}

.lookup-form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.lookup-form-box h3 {
  font-size: 18.5px;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}

.lookup-form-box .sub {
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.65;
}

/* 전체폭 가로 폼 행 */
.lookup-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

.lookup-row .btn {
  white-space: nowrap;
  height: 42px;
}

.lookup-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* 하단 안내 배너 — 밝은 블루/화이트 톤 */
.lookup-note {
  margin-top: 16px;
  background: #f7fbff;
  border: 1px solid rgba(11, 99, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 16px 22px;
  box-shadow: 0 10px 28px rgba(20, 60, 120, 0.05);
  display: flex;
  gap: 16px;
  align-items: center;
}

.lookup-note .ln-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #d9ff73;
  display: grid;
  place-items: center;
}

.lookup-note .ln-tx h5 {
  color: var(--brand);
  font-size: 15.5px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.lookup-note .ln-tx p {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* ── 기부내역 조회 (고객 검토용 프론트) ── */
.dl-form {
  margin-top: 6px;
}

.dl-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.9fr;
  gap: 14px;
}

.dl-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dl-field > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.dl-field .req {
  color: var(--accent-pink);
  margin-left: 2px;
}

.dl-field input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dl-field input::placeholder {
  color: var(--muted);
}

.dl-field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.dl-field input.is-invalid {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(255, 75, 140, 0.12);
}

.dl-err {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-pink);
  line-height: 1.4;
  word-break: keep-all;
}

.dl-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.dl-guide-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.dl-sample {
  margin-top: 8px;
  font-size: 12px;
  color: #aab2c2;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* 결과 카드 */
.dl-result {
  margin-top: 18px;
}

.dl-card {
  border-radius: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(20, 60, 120, 0.06);
  background: #fff;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.dl-card-info {
  background: #f7fbff;
  border-color: rgba(11, 99, 255, 0.12);
}

.dl-card-warn {
  background: #fffdf4;
  border-color: rgba(214, 158, 22, 0.2);
}

.dl-card-success {
  background: #f6fff0;
  border-color: rgba(120, 200, 40, 0.24);
}

.dl-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.dl-card-ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.dl-card-ic svg {
  width: 22px;
  height: 22px;
}

.dl-card-ic.info {
  background: var(--brand-soft);
  color: var(--brand);
}

.dl-card-ic.warn {
  background: #fceec9;
  color: #b8801a;
}

.dl-card-ic.success {
  background: #e7f8d6;
  color: #5f9400;
}

.dl-card-title {
  font-size: 18px;
  letter-spacing: -0.015em;
  color: #0b1020;
}

.dl-card-sub {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--desc);
  line-height: 1.62;
  font-weight: 500;
}

.dl-card-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.dl-info-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.dl-info-grid > div {
  background: #fff;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dl-info-grid dt {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

.dl-info-grid dd {
  font-size: 15.5px;
  color: #0b1020;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.dl-badge.done {
  background: #eef7ff;
  color: var(--brand);
  border: 1px solid rgba(11, 99, 255, 0.18);
}

.dl-contact {
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.dl-contact-lead {
  font-size: 13.5px;
  color: var(--desc);
  line-height: 1.6;
  margin-bottom: 8px;
}

.dl-contact-name {
  font-size: 15px;
  font-weight: 800;
  color: #0b1020;
  margin-bottom: 6px;
}

.dl-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand);
  margin-right: 18px;
  overflow-wrap: anywhere;
}

.dl-contact-link svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.dl-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.dl-btn-retry {
  background: var(--accent-green);
  color: var(--fg);
}

.dl-btn-retry:hover {
  background: #b3eb1a;
}

/* 최하단 우측 CTA — FOR COMPANIES (밝은 블루/화이트 톤) */
.cta-band .cb.forco-cta {
  background: linear-gradient(135deg, #f7fbff 0%, #eaf5ff 50%, #f5fbff 100%);
  color: #111827;
  border: 1px solid rgba(11, 99, 255, 0.12);
  box-shadow: 0 10px 28px rgba(20, 60, 120, 0.05);
}

.cta-band .cb.forco-cta .eye {
  color: var(--brand);
}

.cta-band .cb.forco-cta h3 {
  color: #0b1020;
}

.cta-band .cb.forco-cta p {
  color: #3d4459;
  opacity: 1;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.cta-band .cb.forco-cta .forco-cta-btn {
  background: #c8ff4a;
  color: #0b1020;
  border-radius: 999px;
}

.cta-band .cb.forco-cta .forco-cta-btn:hover {
  background: #b8f23c;
}

/* 기업 사회공헌 — 지원사업 4카드 + 전체폭 제휴 폼 */
.corp-grid {
  display: block;
}

.corp-lead {
  font-size: 18.5px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.csr-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.csr-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
}

.csr-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: translateZ(0);
}

.csr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 18, 42, 0.28) 0%, rgba(8, 18, 42, 0.7) 66%, rgba(8, 18, 42, 0.88) 100%);
}

.csr-card .csr-body {
  position: relative;
  z-index: 1;
  padding: 18px 16px;
  width: 100%;
  text-align: left;
}

.csr-card .csr-ic {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  color: var(--accent-green);
}

.csr-card .csr-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}

.csr-card h5 {
  color: #fff;
  font-size: 17px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.csr-card p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 기업사회공헌 형태 — 통합 이미지 1장 */
html {
  scroll-behavior: smooth;
}

#welfare-points-donation {
  scroll-margin-top: 110px;
}

.csr-forms {
  margin-bottom: 22px;
}

.csr-forms-head {
  font-size: 18.5px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* 기업사회공헌 참여 방법 — 3개 개별 카드(이미지 + 경계 원형 아이콘 + HTML 텍스트) */
.csr-pm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 16px 0 4px;
  align-items: stretch;
}

.csr-pm-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(20, 60, 120, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 35, 80, 0.05);
  display: block;
  color: inherit;
  text-decoration: none;
}

.csr-pm-thumb {
  width: 100%;
  aspect-ratio: 642/463;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.csr-pm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.csr-pm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.14);
  border: 1px solid rgba(20, 60, 120, 0.06);
  margin: -27px auto 12px;
  position: relative;
  z-index: 2;
}

.csr-pm-icon svg {
  width: 27px;
  height: 27px;
}

.csr-pm-body {
  padding: 0 20px 26px;
  text-align: center;
}

.csr-pm-body h4 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  color: #0b1020;
  letter-spacing: -0.01em;
}

.csr-pm-body p {
  margin-top: 8px;
  font-size: clamp(15px, 1.4vw, 16.5px);
  font-weight: 500;
  line-height: 1.65;
  color: #3d4459;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.csr-pm-link {
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.csr-pm-link:hover {
  box-shadow: 0 14px 32px rgba(15, 35, 80, 0.12);
  transform: translateY(-2px);
}

.csr-pm-link:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .csr-pm {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .csr-pm-body {
    padding: 0 22px 22px;
  }
  .csr-pm-icon {
    width: 50px;
    height: 50px;
    margin-top: -25px;
  }
  .csr-pm-icon svg {
    width: 25px;
    height: 25px;
  }
  .csr-pm-body h4 {
    font-size: clamp(20px, 6vw, 24px);
  }
  .csr-pm-body p {
    font-size: clamp(15px, 4.2vw, 16px);
  }
}
/* 제휴 문의 — 전체폭 폼 */
.corp-form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.corp-form-box .cf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding-bottom: 16px;
  user-select: none;
}

/* 제휴 문의 미개발 시 — donation.vue PARTNERSHIP_INQUIRY_INTERACTIVE=false → .is-disabled */
.corp-form-box.is-disabled .cf-head {
  cursor: default;
}

.corp-form-box.is-disabled .cf-chev {
  opacity: 0.35;
}

.corp-form-box.is-open .cf-head {
  border-bottom: 1px solid var(--border);
}

.corp-form-box .cf-head-text {
  min-width: 0;
}

.corp-form-box .cf-chev {
  flex: none;
  color: var(--brand);
  margin-top: 3px;
  transition: transform 0.3s ease;
}

.corp-form-box.is-open .cf-chev {
  transform: rotate(180deg);
}

.corp-form-box .cf-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s ease;
}

.corp-form-box.is-open .cf-body {
  grid-template-rows: 1fr;
}

.corp-form-box .cf-body-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: 20px;
}

.corp-form-box h4 {
  font-size: 20px;
  margin-bottom: 7px;
  letter-spacing: -0.015em;
}

/* 설명: PC에서 가로 한 줄로 보이도록 폰트 축소 / 070·팀명은 아래 작게 */
.corp-form-box .cf-sub {
  color: var(--desc);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.corp-form-box .cf-contact {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.corp-form-box .cf-tel-hi {
  color: var(--brand);
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* 모바일: 가독성 우선 — 폰트 키우고 자연 줄바꿈 */
@media (max-width: 760px) {
  .corp-form-box .cf-sub {
    font-size: 15px;
    line-height: 1.65;
  }
  .corp-form-box .cf-contact {
    font-size: 13px;
  }
}
.corp-form-box .cf-sub .cf-tel-hi {
  color: var(--brand);
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.cf-grid {
  display: grid;
  gap: 14px 16px;
}

.cf-grid + .cf-grid {
  margin-top: 14px;
}

.cf-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cf-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cf-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cf-field > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.cf-field .req {
  color: var(--accent-pink);
  margin-left: 2px;
}

.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cf-field textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.55;
}

.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.cf-field input::placeholder, .cf-field textarea::placeholder {
  color: var(--muted);
}

.cf-tel {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  gap: 6px;
  align-items: center;
}

.cf-tel select {
  padding-left: 8px;
  padding-right: 2px;
}

/* 2026-07-14 문의내용 + 개인정보 동의 세로 스택 (이미지 레이아웃) */
.cf-msg-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 16px;
}

.cf-textwrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* 2026-07-14 문의 내용 label — cf-field 스타일이 안 닿는 cf-textwrap 전용 */
.cf-textwrap .req {
  color: var(--accent-pink);
  margin-left: 2px;
}

.cf-textwrap > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

/* 2026-07-14 문의 내용 textarea — cf-field 와 동일 외형 + resize/min-height */
.cf-textwrap textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}

.cf-textwrap textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.cf-textwrap textarea::placeholder {
  color: var(--muted);
}

.cf-count {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.cf-side {
  display: flex;
  flex-direction: column;
}

.cf-agree {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 15px;
  border-radius: 10px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  line-height: 1.5;
}

.cf-agree input {
  margin-top: 1px;
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  flex: none;
}

.cf-agree .req {
  color: var(--accent-pink);
  margin-right: 2px;
}

/* 2026-07-14 개인정보 수집·이용 상세 불릿 — 동의 박스 안, 체크박스 줄 아래 전체폭 */
.cf-agree .cf-agree-detail {
  flex: 0 0 100%;
  margin: 10px 0 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--desc);
  cursor: default;
}

.cf-agree .cf-agree-detail li {
  position: relative;
  padding-left: 14px;
}

.cf-agree .cf-agree-detail li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-size: 11px;
}

.cf-submit-row {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.cf-submit {
  min-width: 280px;
  justify-content: center;
}

.cf-notice {
  margin-top: 18px;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

/* 2026-07-14 hidden 상태 확실히 숨김 — display:flex 가 [hidden] 기본 display:none 을 덮어써
   빈 박스 + ::before(검은 점)가 보이던 문제 수정 */
.cf-notice[hidden] {
  display: none;
}

.cf-notice::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: currentColor;
  border-radius: 50%;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}

.cf-notice.is-error {
  background: color-mix(in srgb, var(--accent-pink) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-pink) 30%, transparent);
  color: #b32d5e;
}

.cf-notice.is-error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E");
}

.cf-notice.is-info {
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand-deep);
}

.cf-notice.is-info::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
}

.cf-field input.is-invalid, .cf-field select.is-invalid, .cf-textwrap textarea.is-invalid,
.cf-tel.is-invalid select, .cf-tel.is-invalid input {
  border-color: var(--accent-pink);
}

.cf-agree.is-invalid {
  border-color: var(--accent-pink);
}

/* 복지포인트 기부 문의 폼 */
.wpf-box {
  margin-top: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.wpf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  background: var(--brand-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
}

.wpf-head .bar {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--brand);
  flex: none;
}

.wpf-head h4 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.wpf-head .chev {
  margin-left: auto;
  color: var(--brand);
  display: flex;
}

.wpf-body {
  padding: 26px 24px;
}

.wpf-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 28px;
  align-items: start;
}

.wpf-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wpf-field > label, .wpf-group > .wpf-lbl {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}

.wpf-field .req, .wpf-group .req {
  color: var(--accent-pink);
  margin-left: 2px;
}

.wpf-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.wpf-field input, .wpf-field textarea, .wpf-platform input {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wpf-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}

.wpf-field input:focus, .wpf-field textarea:focus, .wpf-platform input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.wpf-field input::placeholder, .wpf-field textarea::placeholder, .wpf-platform input::placeholder {
  color: var(--muted);
}

/* 2026-07-16 미입력 에러 표시(문의자·연락처·이메일) — 제휴 문의(.cf-field) 와 동일 */
.wpf-field input.is-invalid {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(255, 75, 140, 0.12);
}

.wpf-count {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}

.wpf-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpf-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--fg);
  cursor: pointer;
}

.wpf-opt input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex: none;
}

.wpf-radios {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.wpf-platform {
  margin-top: 11px;
}

.wpf-info {
  margin-top: 2px;
  display: flex;
  gap: 9px;
  padding: 13px 14px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.wpf-info svg {
  flex: none;
  margin-top: 1px;
}

.wpf-info p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.wpf-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.wpf-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
}

.wpf-agree input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  flex: none;
}

.wpf-agree .req {
  color: var(--accent-pink);
}

.wpf-submit-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.wpf-submit {
  min-width: 250px;
  justify-content: center;
}

/* 첨부파일 (선택) */
.wpf-attach {
  margin-bottom: 18px;
}

.wpf-attach .wpf-lbl {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}

.wpf-attach .wpf-lbl .opt {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
}

.wpf-attach-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--desc);
  font-weight: 500;
  margin-bottom: 10px;
}

.wpf-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 20px 18px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.wpf-drop.is-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.wpf-drop .ic {
  color: var(--brand);
  margin-bottom: 6px;
}

.wpf-drop-t {
  font-size: 14px;
  color: var(--fg-soft);
}

.wpf-drop-t .pick-word {
  color: var(--brand);
  font-weight: 600;
}

.wpf-pick {
  margin-top: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wpf-pick:hover {
  background: var(--brand);
  color: #fff;
}

.wpf-drop-hint {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.wpf-attach-msg {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-pink);
  background: color-mix(in srgb, var(--accent-pink) 8%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
}

.wpf-files {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.wpf-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.wpf-files .fi-ic {
  color: var(--brand);
  flex: none;
}

.wpf-files .fi-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wpf-files .fi-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpf-files .fi-size {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.wpf-files .fi-del {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.wpf-files .fi-del:hover {
  background: color-mix(in srgb, var(--accent-pink) 12%, transparent);
  color: var(--accent-pink);
}

.wpf-attach-note {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.wpf-attach-note svg {
  flex: none;
  margin-top: 1px;
  color: var(--muted);
}

@media (max-width: 820px) {
  .wpf-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 560px) {
  .wpf-three {
    grid-template-columns: 1fr;
  }
  .wpf-body {
    padding: 20px 16px;
  }
  .wpf-head {
    padding: 13px 16px;
  }
  .wpf-radios {
    gap: 14px;
  }
  .wpf-agree {
    flex-wrap: wrap;
    gap: 6px;
  }
  .wpf-agree .view {
    margin-left: 0;
  }
  .wpf-submit {
    min-width: 0;
    width: 100%;
  }
  .wpf-drop-t .drag-only {
    display: none;
  }
  .wpf-pick {
    width: 100%;
  }
}
@media (max-width: 980px) {
  .csr-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cf-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .cf-msg-row {
    grid-template-columns: 1fr;
  }
  .cf-side {
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .csr-cards {
    grid-template-columns: 1fr;
  }
  .cf-grid-4, .cf-grid-3 {
    grid-template-columns: 1fr;
  }
  .corp-form-box {
    padding: 20px 16px;
  }
  .cf-submit {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 980px) {
  .donate-card-row {
    grid-template-columns: 1fr;
  }
  .receipt-flow {
    grid-template-columns: 1fr 1fr;
  }
  .lookup-row {
    grid-template-columns: 1fr 1fr;
  }
  .lookup-row .btn {
    grid-column: 1/-1;
    width: 100%;
  }
  .wp-flow {
    grid-template-columns: 1fr 1fr;
  }
  .wp-card:not(:last-child)::after {
    display: none;
  }
  .wp-lede {
    text-align: center;
  }
}
@media (max-width: 560px) {
  .wp-flow {
    grid-template-columns: 1fr;
  }
  .wp-lede {
    flex-direction: column;
    gap: 8px;
  }
  .lookup-row {
    grid-template-columns: 1fr;
  }
  .lookup-note {
    flex-direction: column;
    gap: 12px;
  }
  .dl-row {
    grid-template-columns: 1fr;
  }
  .dl-actions .btn, .dl-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .dl-info-grid {
    grid-template-columns: 1fr;
  }
  .dl-contact-link {
    display: flex;
    margin-right: 0;
  }
}
@media (max-width: 720px) {
  .receipt-flow {
    grid-template-columns: 1fr;
  }
}
/* CSR — 진행 프로세스 + 파트너십 혜택 */
.csr-block {
  margin-top: 42px;
}

.csr-subhead h3 {
  font-size: clamp(18px, 2.1vw, 22px);
  letter-spacing: -0.015em;
}

.csr-subhead p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 780px;
}

.csr-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.csr-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, transform 0.15s;
}

.csr-step:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.csr-step-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.csr-step-ic svg {
  width: 21px;
  height: 21px;
}

.csr-step .lbl {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--brand);
}

.csr-step h5 {
  font-size: 15.5px;
  letter-spacing: -0.01em;
}

.csr-step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.csr-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -7px;
  width: 14px;
  height: 2px;
  background: var(--accent-green);
  border-radius: 2px;
  z-index: 2;
}

.csr-benefits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.csr-benefit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.csr-benefit:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(15, 35, 80, 0.16);
}

.csr-photo {
  position: relative;
  height: 112px;
  background-size: cover;
  background-position: center;
}

.csr-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 30, 0) 45%, rgba(8, 14, 30, 0.16) 100%);
}

.csr-badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14.5px;
  border: 3px solid var(--surface);
  box-shadow: 0 5px 12px -3px rgba(15, 35, 80, 0.2);
  z-index: 2;
}

.csr-body {
  padding: 26px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  flex: 1;
}

.csr-body-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.csr-body-ic svg {
  width: 23px;
  height: 23px;
}

.csr-benefit h5 {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.csr-benefit .desc-row {
  display: flex;
  gap: 7px;
  text-align: left;
  align-self: stretch;
}

.csr-benefit .desc-row svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: #4a9e12;
  margin-top: 2px;
}

.csr-benefit p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.csr-cta-band {
  margin-top: 18px;
  border-radius: 16px;
  padding: 16px 22px;
  background: color-mix(in oklab, var(--accent-green) 20%, #fff);
  border: 1px solid color-mix(in oklab, var(--accent-green) 48%, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.csr-cta-band .lead {
  display: flex;
  align-items: center;
  gap: 13px;
}

.csr-cta-band .lead .gift {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.csr-cta-band .lead .gift svg {
  width: 20px;
  height: 20px;
}

.csr-cta-band .lead strong {
  font-size: 15.5px;
  color: var(--fg);
  letter-spacing: -0.01em;
  font-weight: 700;
}

.csr-cta-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.csr-cta-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.csr-cta-pills span svg {
  width: 13px;
  height: 13px;
  color: var(--brand);
  flex: none;
}

@media (max-width: 980px) {
  .csr-steps, .csr-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
  .csr-step:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 560px) {
  .csr-steps, .csr-benefits {
    grid-template-columns: 1fr;
  }
}
/* ===== Donation Guide Tabs ===== */
/* 2026-07-14 후원 분야 안내(#donation-guide) 섹션 스타일 — GNB ?sub=donation-guide 로 단독 노출 */
.gtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0 30px;
}

.gtab {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 280px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1.5px solid transparent;
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  white-space: nowrap;
}

.gtab:hover {
  color: var(--brand);
}

.gtab.is-on {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 2px 12px rgba(0, 70, 255, 0.1);
}

.gpanel {
  display: none;
}

.gpanel.is-on {
  display: block;
  animation: gfade 0.3s ease;
}

@keyframes gfade {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gp-title {
  text-align: center;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.gp-sub {
  text-align: center;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 620px;
}

/* field */
.gfield-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}

.gfield-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
}

.gfield-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(16, 24, 55, 0.08);
}

.gfield-ic {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.gfield-ic svg {
  width: 26px;
  height: 26px;
}

.gfield-ic.pink {
  background: #ffe6f2;
  color: #e6398b;
}

.gfield-ic.blue {
  background: var(--brand-soft);
  color: var(--brand);
}

.gfield-card h4 {
  font-size: 21px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.gfield-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}

.gfield-card .btn {
  width: 100%;
  justify-content: center;
}

/* tax box */
.gtax-box {
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.gtax-box h5 {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.gtax-box h5 svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.gtax-box ul {
  list-style: none;
  display: grid;
  gap: 8px;
}

.gtax-box li {
  position: relative;
  padding-left: 18px;
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.gtax-box li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

/* service */
.gserv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gserv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  transition: all 0.18s;
}

.gserv-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(16, 24, 55, 0.08);
}

.gserv-ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.gserv-ic svg {
  width: 23px;
  height: 23px;
}

.gserv-card h4 {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 8px;
}

.gserv-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
}

/* payment */
.gpay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.gpay-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  text-align: center;
  transition: all 0.18s;
}

.gpay-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(16, 24, 55, 0.08);
}

.gpay-ic {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  background: var(--surface-2);
  color: var(--brand);
  font-weight: 800;
  font-size: 15.5px;
}

.gpay-ic svg {
  width: 28px;
  height: 28px;
}

.gpay-ic.naver {
  background: #03c75a;
  color: #fff;
}

.gpay-ic.kakao {
  background: #fee500;
  color: #3c1e1e;
}

.gpay-card h4 {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 5px;
}

.gpay-card .dates {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* info list */
.ginfo-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}

.ginfo-box ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.ginfo-box li {
  position: relative;
  padding-left: 19px;
  color: var(--desc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.ginfo-box li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 38%, transparent);
}

/* faq */
.gfaq-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gfaq-cat {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.gfaq-cat.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.gfaq-cat:hover:not(.is-on) {
  color: var(--brand);
  border-color: var(--brand);
}

.gfaq-group {
  display: none;
}

.gfaq-group.is-on {
  display: block;
}

.gfaq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.gfaq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fg);
}

.gfaq-item summary::-webkit-details-marker {
  display: none;
}

.gfaq-item summary .qmark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.gfaq-item summary .qx {
  flex: 1;
  line-height: 1.5;
}

.gfaq-item summary .chev {
  flex: none;
  color: var(--muted);
  transition: transform 0.2s;
}

.gfaq-item[open] summary .chev {
  transform: rotate(180deg);
  color: var(--brand);
}

.gfaq-item[open] summary {
  color: var(--brand);
}

.gfaq-ans {
  padding: 0 20px 18px 56px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

@media (max-width: 920px) {
  .gserv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gpay-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .gtabs {
    gap: 7px;
  }
  .gtab {
    flex: 1 1 45%;
    max-width: none;
    font-size: 14px;
    padding: 11px 10px;
    white-space: normal;
    line-height: 1.35;
  }
  .gfield-grid {
    grid-template-columns: 1fr;
  }
  .gserv-grid {
    grid-template-columns: 1fr;
  }
  .gpay-grid {
    grid-template-columns: 1fr;
  }
  .gfaq-ans {
    padding-left: 20px;
  }
}
/* For Donors 계열 CTA — 밝은 하늘색 톤 + 부드러운 라임 버튼 (홈 CTA와 동일 톤) */
.cta-band .cb.primary.donor-cta {
  background: linear-gradient(135deg, #2b9bf0 0%, #0b6fe0 100%);
  position: relative;
  overflow: hidden;
}

.cta-band .cb.primary.donor-cta p {
  opacity: 0.95;
}

.btn.donor-cta-btn {
  background: #c8ff4a;
  color: #0b1020;
}

.btn.donor-cta-btn:hover {
  background: #b8f23c;
  transform: translateY(-1px);
}

.donor-cta-icon {
  position: absolute;
  top: 30px;
  right: 36px;
  width: 84px;
  height: 84px;
  opacity: 0.95;
  pointer-events: none;
}

@media (max-width: 768px) {
  .donor-cta-icon {
    width: 50px;
    height: 50px;
    top: 16px;
    right: 16px;
    opacity: 0.72;
  }
}
/* 문의 접수 완료 (mock) — 제휴 / 복지포인트 공통 */
.inq-done {
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e9f1);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
  max-width: 620px;
  margin: 6px auto 0;
}

.inq-done-ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-green, #C6FF29);
  color: #0b1020;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 14px;
}

.inq-done-title {
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}

.inq-done-desc {
  color: var(--desc, #3d4459);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.inq-done-info {
  background: var(--surface-2, #f5f7fb);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inq-done-info > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
}

.inq-done-info dt {
  color: var(--muted, #5b6378);
  font-weight: 600;
  margin: 0;
}

.inq-done-info dd {
  margin: 0;
  font-weight: 700;
  color: var(--fg, #000514);
  text-align: right;
  word-break: keep-all;
}

.inq-badge.st {
  display: inline-block;
  background: var(--brand-soft, #e6edff);
  color: var(--brand, #0046FF);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 11px;
}

/* 제출 후 입력폼 숨김 */
#partnership-inquiry.is-submitted .cf-grid,
#partnership-inquiry.is-submitted .cf-msg-row,
#partnership-inquiry.is-submitted .cf-notice,
#partnership-inquiry.is-submitted .cf-submit-row {
  display: none;
}

#welfare-point-inquiry.is-submitted .wpf-grid,
#welfare-point-inquiry.is-submitted .wpf-foot {
  display: none;
}

/* ────────────────────────────────────────────────────────────
   서울에너지플러스 · 서울에너지플러스 소개   
   ──────────────────────────────────────────────────────────── */
/* about-specific */
/* hero banner image — match home hero height */
.about .page-hero {
  min-height: 460px;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(36px, 4.5vw, 56px);
  display: flex;
  align-items: center;
}

.about .page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.about .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 12, 40, 0.6) 0%, rgba(0, 12, 40, 0.38) 45%, rgba(0, 12, 40, 0.12) 100%), linear-gradient(180deg, rgba(0, 12, 40, 0.1) 0%, rgba(0, 12, 40, 0.34) 100%);
  z-index: 1;
  pointer-events: none;
}

.about .page-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (max-width: 720px) {
  .about .page-hero {
    min-height: 380px;
  }
  .about .page-hero .hero-bg {
    object-position: center bottom;
  }
  .about .page-hero::after {
    background: linear-gradient(90deg, rgba(0, 12, 40, 0.58) 0%, rgba(0, 12, 40, 0.4) 100%), linear-gradient(180deg, rgba(0, 12, 40, 0.18) 0%, rgba(0, 12, 40, 0.38) 100%);
  }
}
.quote-block {
  background: var(--fg);
  color: white;
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 28px;
  align-items: center;
}

.quote-block .q-eye {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-green);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.quote-block h3 {
  font-size: clamp(20px, 2.2vw, 28px);
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.32;
}

.quote-block h3 .hl {
  color: var(--accent-green);
}

.quote-block .sig {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

.quote-block .sig b {
  color: white;
  font-weight: 700;
  margin-right: 8px;
}

.quote-block .meta {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 24px;
}

.quote-block .meta dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.quote-block .meta dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 3px;
}

.quote-block .meta dd {
  font-size: 15.5px;
  font-weight: 700;
  color: white;
  margin: 0;
}

.quote-block .meta dd .acc {
  color: var(--accent-green);
}

/* program detail */
.prog-row {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: 40px;
  padding-block: 36px;
  border-top: 1px solid var(--border);
  align-items: start;
}

.prog-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.prog-row.flip {
  grid-template-columns: 0.55fr 0.45fr;
  direction: rtl;
}

.prog-row.flip > * {
  direction: ltr;
}

.prog-row .meta-side .nr {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.prog-row .meta-side h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.02em;
}

.prog-row .meta-side p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.prog-row .body-side {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.prog-row .body-side h4 {
  font-size: 15.5px;
  margin-bottom: 12px;
}

.prog-row .body-side ul.bul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.prog-row .body-side ul.bul li {
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg-soft);
  border: 1px solid var(--border);
}

.prog-row .body-side ul.bul li b {
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-right: 6px;
}

.prog-row .body-side .legend {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* timeline (history) */
.hist {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hist .yr {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.hist .yr:last-child {
  border-bottom: 1px solid var(--border);
}

.hist .yr .y {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1;
}

.hist .yr ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hist .yr ul li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  font-size: 14.5px;
  color: var(--fg-soft);
  line-height: 1.55;
}

.hist .yr ul li .m {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

/* CI block */
.ci-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
}

.ci-logo-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  position: relative;
}

.ci-logo-box .logo-mock {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 29.5px;
  letter-spacing: -0.02em;
}

.ci-logo-box .logo-mock .sq-lg {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand);
  position: relative;
}

.ci-logo-box .logo-mock .sq-lg::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent-green);
}

.ci-logo-box .stamp {
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.ci-rules {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.ci-rules h4 {
  font-size: 14.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.ci-rules ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ci-rules ul li {
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.55;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
}

.ci-rules ul li::before {
  content: "×";
  color: var(--accent-pink);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1;
}

.ci-rules .palette {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.ci-rules .palette .sw {
  aspect-ratio: 1;
  border-radius: 8px;
  position: relative;
}

.ci-rules .palette .sw span {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: white;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.ci-rules .palette .sw.lt span {
  color: var(--fg);
}

/* CI — brand guide layout */
.ci-sub-head {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  margin: 36px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ci-sub-head:first-of-type {
  margin-top: 4px;
}

.ci-main-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 7vw, 84px) 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.ci-main-img {
  width: min(440px, 78%);
  height: auto;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

.ci-sub-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.semark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.semark .ico {
  width: 36px;
  height: 36px;
  flex: none;
}

.semark .wm {
  text-align: left;
  line-height: 1;
}

.semark .wm b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17.5px;
  letter-spacing: -0.03em;
  color: var(--brand);
}

.semark .wm small {
  display: block;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 4px;
}

.ci-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ci-logo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 26px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ci-logo-card .stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  width: 100%;
}

.ci-logo-card .cap {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

.ci-logo-card.dark {
  background: var(--fg);
  border-color: transparent;
}

.ci-logo-card.dark .semark .wm b {
  color: #fff;
}

.ci-logo-card.dark .semark .wm small {
  color: rgba(255, 255, 255, 0.6);
}

.ci-logo-card.dark .cap {
  color: rgba(255, 255, 255, 0.65);
}

.semark.mono .wm b {
  color: var(--fg);
}

.semark.mono .ico .p1 {
  fill: var(--fg);
}

.semark.mono .ico .p2 {
  fill: var(--fg);
}

.ci-usage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ci-use {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px 18px;
}

.ci-use .u-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ci-use .u-ico .num24 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.ci-use h5 {
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 6px;
}

.ci-use p {
  font-size: 13px;
  color: var(--fg-soft);
  line-height: 1.55;
}

.ci-no {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 22px 24px;
}

.ci-no ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 28px;
}

.ci-no ul li {
  font-size: 14.5px;
  color: var(--fg-soft);
  line-height: 1.5;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
}

.ci-no ul li::before {
  content: "×";
  color: var(--accent-pink);
  font-weight: 800;
  font-size: 16.5px;
  line-height: 1.3;
}

.ci-colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ci-col .chip {
  height: 80px;
  border-radius: 12px;
  border: 1px solid rgba(10, 14, 26, 0.07);
}

.ci-col .nm {
  font-weight: 800;
  font-size: 14.5px;
  margin-top: 11px;
}

.ci-col .hx {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.ci-col .us {
  font-size: 13px;
  color: var(--fg-soft);
  margin-top: 5px;
  line-height: 1.5;
}

/* BI 의미 / 메인 컬러 */
/* BI 의미 — 강조 다크 히어로 블록 */
.bi-meaning {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 52%, #f3ffe8 100%);
  border: 1px solid rgba(11, 99, 255, 0.1);
  box-shadow: 0 10px 28px rgba(20, 60, 120, 0.05);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 58px) clamp(22px, 4vw, 52px);
  margin-bottom: 6px;
}

.bi-meaning::before {
  content: "+";
  position: absolute;
  top: clamp(-60px, -6vw, -30px);
  right: -8px;
  font-family: var(--font-display);
  font-size: clamp(180px, 26vw, 280px);
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
  opacity: 0.07;
  pointer-events: none;
}

.bi-meaning > * {
  position: relative;
}

.bi-meaning .bi-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--brand);
  font-weight: 700;
}

.bi-meaning .bi-lead {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0b1020;
  margin: 14px 0 0;
  line-height: 1.08;
}

.bi-meaning .bi-lead .hl {
  color: #8cc63f;
}

.bi-meaning .bi-lead .plus {
  color: var(--brand);
}

.bi-meaning .bi-sub {
  font-size: clamp(14px, 1.6vw, 16.5px);
  color: #3d4459;
  margin: 16px 0 0;
  line-height: 1.65;
  max-width: 640px;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.bi-meaning .bi-sub b {
  color: #111827;
  font-weight: 800;
}

.bi-colorgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.bi-cc {
  border-radius: 16px;
  padding: 22px 24px;
}

.bi-cc.green {
  background: #C6FF29;
}

.bi-cc.blue {
  background: var(--brand);
}

.bi-cc-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-bottom: 14px;
}

.bi-cc.green .bi-cc-dot {
  background: #0a0e1a;
}

.bi-cc.blue .bi-cc-dot {
  background: #C6FF29;
}

.bi-cc-name {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.bi-cc-name span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.55;
  margin-left: 7px;
  letter-spacing: 0.06em;
}

.bi-cc-desc {
  font-size: 14.5px;
  margin-top: 6px;
  line-height: 1.5;
}

.bi-cc.green .bi-cc-name {
  color: #0a0e1a;
}

.bi-cc.green .bi-cc-desc {
  color: #0a0e1a;
  opacity: 0.78;
}

.bi-cc.blue .bi-cc-name {
  color: #fff;
}

.bi-cc.blue .bi-cc-desc {
  color: #fff;
  opacity: 0.86;
}

.bi-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.bi-kw {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #0b63ff;
  background: #ffffff;
  border: 1px solid rgba(11, 99, 255, 0.16);
  border-radius: 100px;
  padding: 6px 14px;
}

.bi-kw.on {
  color: #0b1020;
  background: #c8ff4a;
  border-color: #c8ff4a;
}

.bi-cs-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
  margin: 2px 0 10px;
}

.bi-maincolors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.bi-mc {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.bi-mc .sw {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  border: 1px solid rgba(10, 14, 26, 0.07);
}

.bi-mc.green .sw {
  background: #C6FF29;
}

.bi-mc.blue .sw {
  background: var(--brand);
}

.bi-mc .mc-t {
  font-weight: 800;
  font-size: 15.5px;
}

.bi-mc .mc-d {
  font-size: 14px;
  color: var(--fg-soft);
  margin-top: 3px;
}

/* board */
.board-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.board-head .total {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

.board-head .total b {
  color: var(--brand);
  font-weight: 700;
}

.board-head .filter {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* 2026-07-14 게시판 필터 검색 버튼 — 필터 입력 높이(약 36px)에 맞춤 */
.board-head .filter .jsearch-btn {
  width: 36px;
  height: 36px;
}

.board-head .filter select {
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  height: 38px;
}

.board-head .filter input {
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  min-width: 180px;
  height: 38px;
}

/* 2026-07-16 클릭(focus) 시 파란 보더 — journey 필터(.journey-board .filter)와 동일 (select·input 모두) */
.board-head .filter select:focus,
.board-head .filter input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* 2026-07-14 모바일: 필터가 컨테이너를 넘치지 않도록 전체폭 + 입력 축소 허용 */
@media (max-width: 720px) {
  .board-head .filter {
    width: 100%;
  }
  .board-head .filter input {
    flex: 1;
    min-width: 0;
  }
}
.pager-row {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.pager-row button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.pager-row button.is-on {
  background: var(--brand);
  color: white;
}

/* 2026-07-14 페이징 비활성(맨앞/맨뒤) 버튼 */
.pager-row button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 2026-07-14 상세보기 시 hidden 확실히 적용 — display:flex 가 [hidden] 기본 display:none 을 덮어쓰는 문제 수정 */
.board-head[hidden], .pager-row[hidden], .section-head[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .quote-block {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .quote-block .meta {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 0;
    padding-top: 20px;
  }
  .prog-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 26px;
  }
  .prog-row.flip {
    direction: ltr;
    grid-template-columns: 1fr;
  }
  .prog-row .body-side ul.bul {
    grid-template-columns: 1fr;
  }
  .ci-grid {
    grid-template-columns: 1fr;
  }
  .ci-logo-box {
    min-height: 160px;
    padding: 22px;
  }
  .ci-logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .ci-usage {
    grid-template-columns: repeat(2, 1fr);
  }
  .ci-colors {
    grid-template-columns: repeat(2, 1fr);
  }
  .ci-no ul {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .ci-logos {
    grid-template-columns: 1fr;
  }
  .ci-usage {
    grid-template-columns: 1fr;
  }
  .bi-maincolors {
    grid-template-columns: 1fr;
  }
  .bi-colorgrid {
    grid-template-columns: 1fr;
  }
  .bi-meaning::before {
    opacity: 0.05;
    font-size: 150px;
  }
}
@media (max-width: 720px) {
  .hist .yr {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hist .yr ul li {
    grid-template-columns: 60px 1fr;
    gap: 12px;
  }
}
/* journey board (게시판형) */
.journey-board .board-head {
  align-items: flex-end;
  margin-bottom: 24px;
}

.board-intro h2 {
  position: relative;
  color: #000514;
  font-size: clamp(24px, 2.8vw, 35px);
  letter-spacing: -0.022em;
  font-weight: 800;
  word-wrap: break-word;
  padding-top: 12px;
}

.board-intro .desc {
  margin-top: 14px;
  margin-bottom: clamp(22px, 2.8vw, 45px);
  max-width: 560px;
  color: #3D4459;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  word-wrap: break-word;
}

.journey-board .filter {
  display: flex;
  gap: 8px;
  align-items: center;
}

.journey-board .filter select,
.journey-board .filter input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  font: inherit;
  font-size: 14.5px;
  background: var(--surface);
}

.journey-board .filter input {
  min-width: 200px;
}

.journey-board .filter select:focus,
.journey-board .filter input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

.jsearch-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.jsearch-btn:hover {
  background: #0037BE;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.jcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 5, 20, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.jcard:hover, .jcard:focus-visible {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 14px 30px rgba(0, 5, 20, 0.1);
  outline: none;
}

.jthumb {
  aspect-ratio: 16/10;
  background: var(--surface-2);
  overflow: hidden;
}

.jthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jcard-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.jtitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.jdate {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  margin-top: auto;
}

.journey-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
  font-size: 15px;
}

/* journey detail (상세) */
.jdetail-head {
  border-bottom: 2px solid var(--fg);
  padding-bottom: 20px;
}

.jdetail-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.jdetail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.jdetail-meta b {
  color: var(--fg-soft);
  font-weight: 600;
  margin-left: 5px;
}

.jdetail-body {
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}

.jdetail-body img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 26px;
}

.jdetail-body p {
  font-size: 16px;
  color: var(--fg-soft);
  line-height: 1.85;
  margin-bottom: 16px;
}

.jdetail-body p:last-child {
  margin-bottom: 0;
}

.jdetail-foot {
  padding-top: 24px;
  display: flex;
  justify-content: center;
}

.jback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.jback:hover {
  background: #0037BE;
}

.jback svg {
  width: 15px;
  height: 15px;
}

/* 게시판 상세 (텍스트형) — jdetail-* 스타일 재사용, 첨부파일/URL복사 추가 */
.board-detail {
  margin-top: 8px;
}

.board-detail .jdetail-meta {
  align-items: center;
}

.bd-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.bd-copy svg {
  width: 14px;
  height: 14px;
}

.bd-copy:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.bd-copy.copied {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.bd-files {
  margin-top: 26px;
  border-top: 1px dashed var(--border-strong);
  padding-top: 18px;
}

.bd-files-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 10px;
}

.bd-files ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bd-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14px;
  color: var(--fg-soft);
}

.bd-files li svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand);
}

.bd-fname {
  word-break: break-all;
  overflow-wrap: break-word;
}

.bd-fsize {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .board-detail .jdetail-meta {
    gap: 12px;
  }
  .bd-copy {
    margin-left: 0;
  }
}
@media (max-width: 980px) {
  .journey-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .journey-board .board-head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .journey-board .filter {
    width: 100%;
  }
  .journey-board .filter input {
    flex: 1;
    min-width: 0;
  }
  .journey-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Business Intro (사업 소개) campaign ===== */
.section-head.center .eyebrow {
  justify-content: center;
}

/* S1 flow */
.biz-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.biz-flow-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 18px 22px;
  text-align: center;
}

.biz-flow-card .ic {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.biz-flow-card .ic svg {
  width: 24px;
  height: 24px;
}

.biz-flow-card h4 {
  font-size: 17.5px;
  letter-spacing: -0.01em;
}

.biz-flow-card .biz-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--brand);
  letter-spacing: 0.02em;
}

.biz-flow-card p {
  margin-top: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--desc);
  line-height: 1.65;
}

.biz-flow-card .biz-arrow {
  position: absolute;
  top: 42px;
  right: -12px;
  z-index: 3;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(15, 35, 80, 0.16);
}

.biz-flow-card .biz-arrow svg {
  width: 13px;
  height: 13px;
}

.biz-flow-card:last-child .biz-arrow {
  display: none;
}

/* S2 poverty deep band */
.biz-stat {
  background: var(--fg);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
}

.biz-stat-eye {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}

.biz-stat .big {
  margin-top: 14px;
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 1.42;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.biz-stat .big b {
  color: var(--accent-green);
}

.biz-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
  text-align: left;
}

.biz-life-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  overflow: hidden;
}

.biz-life-card .ph {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.28), rgba(0, 5, 20, 0.1));
}

.biz-life-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.biz-life-card .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 5, 20, 0) 55%, rgba(0, 5, 20, 0.28) 100%);
}

.biz-life-card .cap {
  padding: 15px 16px 17px;
}

.biz-life-card h5 {
  font-size: 16px;
  color: #fff;
}

.biz-life-card p {
  margin-top: 6px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  line-height: 1.65;
}

.biz-stat-note {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* S3 solution */
.biz-sol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.biz-sol-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: 0.2s;
}

.biz-sol-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 70, 255, 0.25);
}

.biz-sol-card .ic {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.biz-sol-card .ic svg {
  width: 26px;
  height: 26px;
}

.biz-sol-card h3 {
  font-size: 21px;
  letter-spacing: -0.01em;
}

.biz-sol-sub {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--brand);
  font-weight: 600;
}

.biz-check {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.biz-check li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--fg-soft);
  line-height: 1.5;
}

.biz-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-green);
}

.biz-check li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 5px;
  height: 3px;
  border-left: 1.6px solid var(--fg);
  border-bottom: 1.6px solid var(--fg);
  transform: rotate(-45deg);
}

/* S4 coop */
.biz-coop {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.biz-coop-h {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.32;
  margin-top: 10px;
}

.biz-coop p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.biz-coop p b {
  color: var(--fg);
}

.biz-coop-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.biz-coop-flow .cf {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.biz-coop-flow .cf-n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand);
  font-weight: 700;
}

.biz-coop-flow .cf-t {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.biz-coop-flow .cf-d {
  font-size: 13px;
  color: var(--muted);
}

.biz-coop-flow .cf-hl {
  background: #f3ffe8;
  border-color: rgba(11, 99, 255, 0.18);
  box-shadow: 0 8px 22px rgba(20, 60, 120, 0.06);
}

.biz-coop-flow .cf-hl .cf-n {
  color: var(--brand);
}

.biz-coop-flow .cf-hl .cf-t {
  color: #0b1020;
}

.biz-coop-flow .cf-hl .cf-d {
  color: #3d4459;
}

.biz-coop-flow .cf-arrow {
  align-self: center;
  color: var(--brand);
  font-weight: 700;
  font-size: 20px;
}

/* How to Join — WITH 라벨 + 로고 */
.section-head .with-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  max-width: none;
}

.with-join .wj-lbl {
  font-size: 0.52em;
  font-weight: inherit;
  letter-spacing: -0.01em;
}

.with-join .wj-logo {
  display: inline-flex;
  align-items: center;
}

.with-join .wj-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent;
}

.with-join .wj-comma {
  margin-left: -7px;
  align-self: center;
  font-size: 0.5em;
}

.with-join .wj-tail {
  margin-left: 2px;
}

/* S5 fund */
.biz-fund {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.biz-fund-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: 0.2s;
}

.biz-fund-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 70, 255, 0.22);
}

.biz-fund-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.biz-fund-top .ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.biz-fund-top .ic svg {
  width: 24px;
  height: 24px;
}

.biz-fund-n {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--border-strong);
}

.biz-fund-card h4 {
  font-size: 17.5px;
  letter-spacing: -0.01em;
}

.biz-fund-card p {
  margin-top: 9px;
  font-size: 15px;
  color: var(--desc);
  font-weight: 500;
  line-height: 1.65;
}

/* S6 participate */
.biz-part {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.biz-part-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: 0.2s;
}

.biz-part-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 70, 255, 0.22);
}

.biz-part-card .ic {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.biz-part-card .ic svg {
  width: 28px;
  height: 28px;
}

.biz-part-card h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.biz-part-card p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

.biz-part-card p b {
  color: var(--fg);
}

.biz-part-note {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  width: fit-content;
  margin-inline: auto;
}

.biz-part-note svg {
  color: var(--brand);
}

/* S7 citizen */
.biz-citizen {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
}

.biz-citizen-txt h2 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.34;
  margin-top: 10px;
}

.biz-citizen-txt h2 .hl {
  color: var(--brand);
}

.biz-citizen-txt p {
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.biz-citizen-txt .biz-citizen-sub {
  margin-top: 12px;
  font-size: 14px;
  color: #5b6378;
  line-height: 1.65;
}

.biz-citizen-btns {
  margin-top: 24px;
}

.biz-citizen-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.biz-citizen-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* S9 sdgs */
.biz-sdgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.biz-sdg-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
}

.biz-sdg-n {
  flex: none;
  width: 62px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  line-height: 1.3;
  padding-top: 2px;
}

.biz-sdg-n b {
  display: block;
  font-size: 27.5px;
  color: var(--brand);
  letter-spacing: 0;
  margin-top: 2px;
}

.biz-sdg-body h4 {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.biz-sdg-body p {
  margin-top: 7px;
  font-size: 15px;
  color: var(--desc);
  font-weight: 500;
  line-height: 1.65;
}

/* 2026-07-14 SDGs 카드 — 3개 이미지를 간격 없이 가로로 붙여 균등폭 배치 */
.biz-sdg-img {
  width: 100%;
  padding: 12px 0 4px;
  display: flex;
  gap: 0;
  align-items: stretch;
}

.biz-sdg-img img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sdg-lead {
  margin: 10px auto 0;
  max-width: 740px;
  text-wrap: balance;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: -0.01em;
  color: #1f2937;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.sdg-note {
  margin: 24px auto 0;
  max-width: 1100px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.78;
  color: #8a93a5;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

@media (max-width: 980px) {
  .biz-flow, .biz-fund {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .biz-flow-card .biz-arrow {
    display: none;
  }
  .biz-sol, .biz-part, .biz-sdgs, .biz-stat-cards {
    grid-template-columns: 1fr;
  }
  /* 2026-07-14 SDGs 카드 3분할 이미지 — 모바일에서 세로로 쌓기 */
  .biz-sdg-img {
    flex-direction: column;
  }
  .biz-citizen {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .biz-citizen-img {
    aspect-ratio: 16/10;
  }
  .biz-coop-flow .cf-arrow {
    transform: rotate(90deg);
  }
  .biz-coop-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .biz-coop-flow .cf {
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .biz-flow, .biz-fund {
    grid-template-columns: 1fr;
  }
  .biz-sdg-card {
    padding: 18px;
  }
  .with-join .wj-logo img {
    height: 28px;
  }
  .sdg-note {
    font-size: 13.5px;
    text-align: left;
  }
}
/* For Donors 계열 CTA — 밝은 하늘색 톤 + 부드러운 라임 버튼 (홈 CTA와 동일 톤) */
.cta-band .cb.primary.donor-cta {
  background: linear-gradient(135deg, #2b9bf0 0%, #0b6fe0 100%);
  position: relative;
  overflow: hidden;
}

.cta-band .cb.primary.donor-cta p {
  opacity: 0.95;
}

.btn.donor-cta-btn {
  background: #c8ff4a;
  color: #0b1020;
}

.btn.donor-cta-btn:hover {
  background: #b8f23c;
  transform: translateY(-1px);
}

.donor-cta-icon {
  position: absolute;
  top: 30px;
  right: 36px;
  width: 84px;
  height: 84px;
  opacity: 0.95;
  pointer-events: none;
}

@media (max-width: 768px) {
  .donor-cta-icon {
    width: 50px;
    height: 50px;
    top: 16px;
    right: 16px;
    opacity: 0.72;
  }
}
/* For Partners CTA 배너 — 밝은 화이트/스카이 톤 (이 배너에만 적용) */
.cta-band .cb.partners-cta {
  background: linear-gradient(135deg, #f7fbff 0%, #eaf5ff 55%, #f3ffe8 100%);
  color: #111827;
  border: 1px solid rgba(11, 99, 255, 0.1);
  box-shadow: 0 10px 28px rgba(20, 60, 120, 0.05);
}

.cta-band .cb.partners-cta .eye {
  color: var(--brand);
}

.cta-band .cb.partners-cta h3 {
  color: #0b1020;
}

.cta-band .cb.partners-cta p {
  color: #3d4459;
  opacity: 1;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.cta-band .cb.partners-cta .partners-cta-btn {
  background: #c8ff4a;
  color: #0b1020;
  border-radius: 999px;
}

.cta-band .cb.partners-cta .partners-cta-btn:hover {
  background: #b8f23c;
}

/* ────────────────────────────────────────────────────────────
   서울에너지플러스 · 소식   
   ──────────────────────────────────────────────────────────── */
/* news-specific */
/* hero banner image — match home hero height */
.news .page-hero {
  min-height: 460px;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(36px, 4.5vw, 56px);
  display: flex;
  align-items: center;
}

.news .page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  z-index: 0;
}

.news .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.34) 32%, rgba(0, 0, 0, 0.18) 54%, rgba(0, 0, 0, 0.04) 76%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.news .page-hero h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.news .page-hero .lede {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.news .page-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (max-width: 720px) {
  .news .page-hero {
    min-height: 380px;
  }
  .news .page-hero::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.24) 55%, rgba(0, 0, 0, 0.08) 100%);
  }
}
/* ── 자치구 지도 + 우측 통계 패널 ── */
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.map-wrap, .stats-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.map-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 10px;
  gap: 12px;
}

.map-title {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.map-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.seoul-map {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
  border-radius: 12px;
}

.seoul-map .d rect {
  fill: white;
  stroke: rgba(0, 70, 255, 0.22);
  stroke-width: 1;
  transition: all 0.15s;
  cursor: pointer;
}

.seoul-map .d text {
  fill: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  font-family: var(--font-body);
}

.seoul-map .d:hover rect {
  fill: var(--brand-soft);
  stroke: var(--brand);
  stroke-width: 1.5;
}

.seoul-map .d.is-on rect {
  fill: var(--brand);
  stroke: var(--brand);
}

.seoul-map .d.is-on text {
  fill: white;
}

.map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}

.reset-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--brand);
  transition: all 0.15s;
}

.reset-btn:hover {
  background: var(--brand);
  color: white;
}

.map-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

.map-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.map-legend .dot.brand {
  background: var(--brand);
}

.map-legend .dot.idle {
  background: white;
  border: 1px solid var(--border-strong);
}

/* Stats panel (right) */
.stats-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stats-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--fg);
  padding: 6px 11px;
  background: var(--accent-green);
  border-radius: 7px;
  letter-spacing: -0.01em;
}

.loc-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
}

.loc-edit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px dashed var(--border-strong);
}

.stat-basedate {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .stat-basedate {
    margin-left: 0;
  }
}
.big-stat .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.big-stat .num {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  color: var(--brand);
  letter-spacing: -0.03em;
  line-height: 1;
}

.big-stat .num .u {
  font-size: 0.42em;
  color: var(--fg);
  font-weight: 700;
  margin-left: 6px;
}

.metaphor {
  background: var(--surface-2);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-soft);
  border-left: 3px solid var(--accent-green);
}

.metaphor b {
  color: var(--brand);
  font-weight: 800;
}

.metaphor .mq {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--accent-green);
  line-height: 0.4;
  margin-bottom: 6px;
}

.sub-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sub-stats > div {
  padding: 11px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}

.sub-stats .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.sub-stats .v {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.sub-stats b {
  font-family: var(--font-mono);
  font-size: 18.5px;
  color: var(--fg);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.sub-stats .u {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* ── 피드백 카드 (사진 + 태그) ── */
.fb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* 2026-07-14 피드백 스와이퍼 — 우→좌 자동 + PC 버튼 + MO 드래그 */
.fb-swiper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* padding: hover 시 카드가 위로 떠도(translateY) overflow:hidden 에 상단이 잘리지 않도록 여백 확보 */
.fb-roller {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 12px 0;
}

.fb-track {
  display: flex;
  gap: 14px;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: pan-y;
  user-select: none;
}

.fb-track.is-drag {
  transition: none;
}

.fb-track > .fb {
  flex: 0 0 calc((100% - 30px) / 3);
}

.fb {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}

.fb:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.fb-photo {
  width: 100%;
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e7eef7 0%, #d4def0 100%);
}

.fb-photo.summer {
  background: linear-gradient(135deg, #fbf4e6 0%, #f1e2c6 100%);
}

.fb-photo.winter {
  background: linear-gradient(135deg, #eef4fb 0%, #dbe7f5 100%);
}

.fb-photo.scene {
  background: linear-gradient(135deg, #f2efe6 0%, #e4dccd 100%);
}

.fb-photo svg.ic {
  width: 56px;
  height: 56px;
  opacity: 0.55;
}

.fb-photo .ph-label {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 4px 9px;
  background: rgba(0, 5, 20, 0.4);
  border-radius: 5px;
}

.fb-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.fb-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fb-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
}

.fb-tag.brand {
  background: var(--brand-soft);
  color: var(--brand);
}

.fb-tag.green {
  background: rgba(198, 255, 41, 0.32);
  color: var(--fg);
}

.fb-tag.pink {
  background: rgba(255, 75, 140, 0.12);
  color: var(--accent-pink);
}

.fb-tag.violet {
  background: rgba(145, 90, 240, 0.12);
  color: var(--accent-violet);
}

.fb-quote {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  font-weight: 500;
}

.fb-quote::before {
  content: "“";
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--brand);
  line-height: 0.4;
  display: block;
  margin-bottom: 4px;
}

.fb-by {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.fb-by b {
  color: var(--fg);
  font-weight: 800;
}

.fb-clickable {
  cursor: pointer;
}

.fb-clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 2026-07-14 스와이퍼 버튼 — 롤러 밖 양옆, 이미지 버튼 (모바일은 CSS로 숨김) */
.fb-nav {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.fb-nav img {
  display: block;
  width: 44px;
  height: 44px;
}

.fb-nav:hover {
  opacity: 0.85;
}

/* ── 게시판 내부 상세 화면 (공통: 피드백·복지정보·언론보도/공지 재사용) ── */
.post-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 36px);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.post-detail .pd-head {
  border-bottom: 2px solid var(--fg);
  padding-bottom: 18px;
}

.post-detail .pd-head h3 {
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.post-detail .pd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.post-detail .pd-meta b {
  color: var(--fg-soft);
  font-weight: 600;
  margin-left: 5px;
}

.post-detail .pd-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(0, 70, 255, 0.16);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.15s;
}

.post-detail .pd-copy:hover {
  background: #dbe7ff;
}

.post-detail .pd-copy.copied {
  background: var(--accent-green);
  color: var(--fg);
  border-color: transparent;
}

.post-detail .pd-copy svg {
  width: 14px;
  height: 14px;
}

.post-detail .pd-body {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

.post-detail .pd-body img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  display: block;
}

.post-detail .pd-body img[src=""], .post-detail .pd-body img:not([src]) {
  display: none;
}

.post-detail .pd-body p {
  font-size: 16px;
  color: var(--fg-soft);
  line-height: 1.85;
  margin-bottom: 16px;
}

.post-detail .pd-body p:last-child {
  margin-bottom: 0;
}

.post-detail .pd-foot {
  padding-top: 22px;
  display: flex;
  justify-content: center;
}

.post-detail .pd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 22px;
  transition: border-color 0.15s, color 0.15s;
}

.post-detail .pd-back:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.post-detail .pd-back svg {
  width: 18px;
  height: 18px;
}

.post-detail .pd-files {
  margin-top: 24px;
  border-top: 1px dashed var(--border-strong);
  padding-top: 18px;
}

.post-detail .pd-files-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 10px;
}

.post-detail .pd-files ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-detail .pd-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14px;
  color: var(--fg-soft);
}

.post-detail .pd-files li svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand);
}

.post-detail .pd-fname {
  word-break: break-all;
  overflow-wrap: break-word;
}

.post-detail .pd-fsize {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.press-clickable {
  cursor: pointer;
}

@media (max-width: 720px) {
  .post-detail .pd-meta {
    gap: 10px 14px;
  }
  .post-detail .pd-copy {
    margin-left: 0;
  }
}
/* partner filter + logo grid */
.pf-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.pf-tab {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.pf-tab:hover {
  color: var(--fg);
}

.pf-tab.is-on {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--brand);
}

.pf-tab .n {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.65;
  margin-left: 6px;
  font-weight: 700;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.pf-card {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

/* 2026-07-14 파트너 카드 hover 확대 효과 제거 (border 강조만 유지) */
.pf-card:hover {
  border-color: var(--brand);
}

.pf-card[hidden] {
  display: none;
}

/* 2026-07-14 파트너 카드 이미지 (mono/name/kind 대체) */
.pf-card img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pf-mono {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pf-card.is-company .pf-mono {
  background: color-mix(in oklab, var(--accent-green) 30%, white);
  color: var(--fg);
}

.pf-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.pf-kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

/* news tabs */
.news-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--surface-2);
}

.news-tab {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}

.news-tab.is-on {
  color: var(--fg);
  border-bottom-color: var(--brand);
}

.news-tab:hover {
  color: var(--fg);
}

.news-tabpanel {
  display: none;
}

.news-tabpanel.is-on {
  display: block;
}

/* 2026-07-14 목록 비었을 때 안내 (about.html .journey-empty 와 동일) */
.list-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
  font-size: 15px;
}

.board-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.board-head .total {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

.board-head .total b {
  color: var(--brand);
  font-weight: 700;
}

/* 2026-07-14 필터: input 안 아이콘 → input + 검색 버튼(journey 필터와 동일, select 없음) */
.board-head .filter {
  display: flex;
  gap: 6px;
  align-items: center;
}

.board-head .filter input {
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  min-width: 180px;
}

/* 2026-07-14 포커스 보더 색 통일 (about.html 과 동일 — 검정 기본 아웃라인 대신 브랜드색) */
.board-head .filter input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

.board-head .filter .jsearch-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.board-head .filter .jsearch-btn:hover {
  background: var(--brand-deep);
}

/* 2026-07-14 모바일: 필터가 컨테이너를 넘치지 않도록 전체폭 + 입력 축소 */
@media (max-width: 720px) {
  .board-head .filter {
    width: 100%;
  }
  .board-head .filter input {
    flex: 1;
    min-width: 0;
  }
}
.pager-row {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.pager-row button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.pager-row button.is-on {
  background: var(--brand);
  color: white;
}

/* press cards */
.press-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.press {
  min-width: 0; /* 2026-07-14 긴 텍스트로 카드 폭이 늘어나지 않도록(기존 2열 넓이 유지) */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: border-color 0.15s, transform 0.15s;
}

.press:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.press .pub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}

/* 2026-07-14 제목·요약 최대 2줄 노출, 초과 시 말줄임(...) */
.press h4 {
  margin-top: 6px;
  font-size: 15.5px;
  letter-spacing: -0.015em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--desc);
  font-weight: 500;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press .foot {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
  .fb-grid {
    grid-template-columns: 1fr;
  }
  .fb-track > .fb {
    flex-basis: 100%;
  }
  /* 2026-07-14 모바일: 화살표 버튼 숨김 (드래그로 넘김) */
  .fb-nav {
    display: none;
  }
  .pf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .press-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .sub-stats {
    grid-template-columns: 1fr;
  }
  .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-tab {
    padding: 8px 14px;
    font-size: 14px;
  }
}
/* ────────────────────────────────────────────────────────────
   서울에너지플러스 · 에너지복지몰   
   ──────────────────────────────────────────────────────────── */
/* ── hero (회원 전용 폐쇄몰 고지) ── */
.welfare-mall .page-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
}

.welfare-mall .page-hero > .container {
  width: 100%;
  position: relative;
  z-index: 2;
}

.welfare-mall .page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.welfare-mall .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 5, 20, 0.58) 0%, rgba(0, 5, 20, 0.44) 40%, rgba(0, 5, 20, 0.24) 60%, rgba(0, 5, 20, 0.07) 80%, rgba(0, 5, 20, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.welfare-mall .page-hero h1 {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.welfare-mall .page-hero .lede {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.mall-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 14px;
}

.mall-hero-label::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--accent-green);
}

.mall-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent-green);
  color: var(--fg);
  font-weight: 800;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: -0.01em;
  padding: 9px 20px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.mall-hero-badge svg {
  width: 17px;
  height: 17px;
}

.welfare-mall .page-hero h1 {
  color: #fff;
}

.mall-hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.mall-hero-notice {
  margin-top: 24px;
  max-width: 580px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.mall-hero-notice .lock {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--accent-green);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mall-hero-notice .lock svg {
  width: 17px;
  height: 17px;
}

.mall-hero-notice p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
  line-height: 1.65;
}

.mall-hero-notice p b {
  color: var(--accent-green);
  font-weight: 700;
}

/* ── intro meta ── */
.intro-lead {
  font-size: clamp(14.5px, 1.4vw, 16.5px);
  line-height: 1.75;
  color: var(--fg-soft);
  max-width: 1000px;
  margin-bottom: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* core values — 소개 섹션 하단 통합 카드 그룹 */
.cv-group {
  margin-top: 36px;
}

.cv-head {
  margin-bottom: 18px;
}

.cv-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.cv-title {
  margin-top: 8px;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: #0b1020;
}

.cv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cv-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11, 99, 255, 0.1);
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: 0 8px 22px rgba(20, 60, 120, 0.05);
  display: flex;
  flex-direction: column;
}

.cv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0b63ff;
}

.cv-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #eef7ff;
  color: #0b63ff;
  margin-bottom: 16px;
}

.cv-ic svg {
  width: 30px;
  height: 30px;
}

.cv-card h4 {
  font-size: 17.5px;
  letter-spacing: -0.01em;
  color: #0b1020;
}

.cv-card p {
  margin-top: 9px;
  font-size: 15px;
  color: #3d4459;
  line-height: 1.7;
  font-weight: 500;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* ── concept diagram ── */
.concept-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}

.concept-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.concept-node.accent {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
}

.concept-node.green {
  background: #f6fff0;
  border-color: rgba(11, 99, 255, 0.12);
  color: var(--fg);
}

.concept-node .step-eye {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.concept-node.accent .step-eye {
  color: var(--accent-green);
}

.concept-node.green .step-eye {
  color: #2f8f2e;
}

.concept-node.green .benef-cta-btn {
  margin-top: auto;
  align-self: start;
}

.concept-node h4 {
  font-size: 17.5px;
  letter-spacing: -0.015em;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.concept-node p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--desc);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.concept-node.accent p {
  color: rgba(255, 255, 255, 0.84);
}

.concept-node.green p {
  color: var(--desc);
}

.concept-node .icn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.concept-node.accent .icn {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.concept-node.green .icn {
  background: #e9ffc4;
  color: #2f8f2e;
}

.concept-node .icn svg {
  width: 20px;
  height: 20px;
}

.concept-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.concept-arrow::before {
  content: "→";
  font-size: 27.5px;
  font-weight: 300;
  color: var(--brand);
}

.concept-key {
  margin-top: 22px;
  background: linear-gradient(90deg, #f7fbff 0%, #f4ffe8 100%);
  color: var(--fg);
  border: 1px solid rgba(11, 99, 255, 0.12);
  box-shadow: 0 12px 32px rgba(15, 35, 80, 0.08);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.concept-key .ck-ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--accent-green);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.concept-key .ck-ic svg {
  width: 24px;
  height: 24px;
}

.concept-key .ck-body {
  flex: 1;
  min-width: 260px;
}

.concept-key .ck-body h4 {
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: -0.018em;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.concept-key .ck-body h4 .hl {
  color: var(--brand);
}

/* ── category grid ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cat-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, transform 0.15s;
}

.cat-chip:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.cat-chip .ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-chip .ic svg {
  width: 21px;
  height: 21px;
}

.cat-chip h5 {
  font-size: 16px;
  letter-spacing: -0.015em;
}

.cat-chip p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ── restricted note ── */
.restrict-note {
  margin-top: 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-pink);
  border-radius: 12px;
  padding: 18px 22px;
}

.restrict-note h4 {
  font-size: 15.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.restrict-note h4 .x {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent-pink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}

.restrict-note p {
  font-size: 15px;
  color: var(--desc);
  font-weight: 500;
  line-height: 1.65;
}

/* ── responsive ── */
@media (max-width: 980px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .concept-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .concept-arrow {
    padding: 10px 0;
  }
  .concept-arrow::before {
    content: "↓";
  }
}
@media (max-width: 560px) {
  .page-hero {
    min-height: 480px;
  }
  .page-hero .hero-bg {
    object-position: center right;
  }
  .page-hero::after {
    background: linear-gradient(180deg, rgba(0, 5, 20, 0.44) 0%, rgba(0, 5, 20, 0.32) 45%, rgba(0, 5, 20, 0.58) 100%);
  }
  .cat-grid {
    grid-template-columns: 1fr;
  }
  .cv-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mall-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .mall-hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}
/* ────────────────────────────────────────────────────────────
   서울에너지플러스 · 운영단체 소개
   ──────────────────────────────────────────────────────────── */
/* ===== Sarangbat scroll story ===== */
html {
  scroll-behavior: smooth;
}

.story-screen {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vh, 80px) clamp(24px, 6vw, 80px);
  scroll-margin-top: 60px;
}

.story-inner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.sb-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 14px;
}

/* ===== 사랑이 삶을 바꿉니다 (love — sticky step story) ===== */
.love-section {
  position: relative;
  background: #fff;
  min-height: 240vh;
}

.love-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(80px, 11vh, 116px) clamp(24px, 6vw, 80px) clamp(28px, 5vh, 56px);
}

.love-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  text-align: left;
  gap: clamp(22px, 3.2vh, 44px);
}

.love-head {
  text-align: left;
}

.love-copy {
  max-width: 560px;
  margin-left: auto;
  text-align: left;
}

.love-title {
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 800;
  color: var(--fg);
  line-height: 1.2;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.love-title-en {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 800;
  color: #0046FF;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.love-believe {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.love-desc {
  margin-top: 14px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.love-desc + .love-desc {
  margin-top: 20px;
}

.love-image-wrap {
  width: 100%;
  aspect-ratio: 16/6;
  max-height: 38vh;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 30px 70px -42px rgba(0, 5, 20, 0.35);
}

.love-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) brightness(1.03);
}

/* 초기(숨김) 상태 */
.love-head, .love-copy {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.love-image-wrap {
  opacity: 0;
  transform: scale(1.08) translateY(20px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 데스크톱: 섹션 step 클래스(스크롤 진행도) — 누적 노출 */
.love-section.step-1 .love-head {
  opacity: 1;
  transform: none;
}

.love-section.step-2 .love-head,
.love-section.step-2 .love-copy {
  opacity: 1;
  transform: none;
}

.love-section.step-3 .love-head,
.love-section.step-3 .love-copy {
  opacity: 1;
  transform: none;
}

.love-section.step-3 .love-image-wrap {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 모바일: 요소별 fade-up(.r-in) */
.love-head.r-in, .love-copy.r-in {
  opacity: 1;
  transform: none;
}

.love-image-wrap.r-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ===== UN ECOSOC — 풀와이드 이미지 배너 (텍스트 내장 이미지) ===== */
.un-ecosoc-section {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.un-ecosoc-bg {
  width: 100%;
  height: auto;
  max-height: 100vh;
  display: block;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.un-ecosoc-section.is-visible .un-ecosoc-bg {
  opacity: 1;
  transform: scale(1);
}

/* 2026-07-14 섹션 내부 래퍼 — 모바일 상하 여백만 추가 (love-sticky 참고) */
.un-ecosoc-inner {
  width: 100%;
}

/* 2026-08-10 UN ECOSOC 배너 — 반응형 이미지 교체 (마크업/JS 변경 없이 CSS 만 사용)
· PC(기본)      : withgo-un-ecosoc.png     — 아래 <img class="un-ecosoc-bg"> 그대로
· MO(≤720px)   : withgo-un-ecosoc-mo.png  — content 로 렌더 이미지만 교체 */
@media (max-width: 720px) {
  .un-ecosoc-inner {
    padding: clamp(56px, 9vh, 80px) 20px;
  }
  .un-ecosoc-bg {
    content: url("/pc/resource/images/SEOUL_ENERGY_PLUS/withgo-un-ecosoc-mo.png");
  }
}
/* ===== 사랑으로 함께하는 세상을 꿈꾸며 (대표 인사 — sticky 단계 전환) ===== */
.dream-section {
  position: relative;
  height: 320vh;
  background: #fff;
}

.dream-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dream-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(40px, 5vh, 64px) var(--gutter);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* 왼쪽 고정 비주얼 */
.dream-left {
  display: flex;
  flex-direction: column;
}

.dream-title {
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--fg);
  word-break: keep-all;
}

/* 이미지 + 서명을 하나의 서명 블록처럼: 이미지 왼쪽, 대표명·서명은 오른쪽 하단 */
.dream-left-visual {
  margin-top: clamp(20px, 2.4vw, 36px);
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 1.6vw, 26px);
}

.dream-visual {
  flex: none;
  width: clamp(150px, 12vw, 200px);
}

.dream-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.signature-block {
  padding-bottom: clamp(8px, 1.4vw, 18px);
}

.signature-label {
  font-size: clamp(13.5px, 1vw, 15.5px);
  font-weight: 600;
  color: #303747;
  margin: 0 0 8px;
  line-height: 1.45;
  word-break: keep-all;
}

.signature-name {
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  color: #0b1020;
  font-style: italic;
  line-height: 1;
}

/* 오른쪽 단계 전환 텍스트 (같은 위치에 겹쳐두고 활성 그룹만 노출) */
.dream-text-stage {
  position: relative;
  min-height: clamp(400px, 52vh, 520px);
}

.dream-text-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(90px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.dream-text-group.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.dream-text-group.is-prev {
  opacity: 0;
  transform: translateX(-70px);
}

/* 모든 단계 동일한 텍스트 스타일 (스크롤 전환 시 크기·굵기·줄간격 불변), 여백감 위해 작고 가볍게 */
.dream-text-group p {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.8;
  font-weight: 500;
  color: #1a2233;
  max-width: 740px;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.dream-text-group p + p {
  margin-top: clamp(18px, 1.6vw, 26px);
}

@media (max-width: 900px) {
  /* 모바일: sticky 해제, 1컬럼, 텍스트 그룹은 스크롤 진입 시 순차 노출(.m-in) */
  .dream-section {
    height: auto;
  }
  .dream-sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
  }
  .dream-inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 7vw, 40px);
    padding: clamp(48px, 9vh, 72px) 22px;
  }
  .dream-title {
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.2;
  }
  .dream-left-visual {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 4vw, 22px);
  }
  .dream-visual {
    width: clamp(150px, 42vw, 200px);
  }
  .signature-block {
    padding-bottom: 0;
  }
  .signature-name {
    font-size: clamp(28px, 8vw, 36px);
  }
  .dream-text-stage {
    position: static;
    min-height: 0;
  }
  .dream-text-group {
    position: static;
    inset: auto;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    margin-top: clamp(40px, 10vw, 64px);
  }
  .dream-text-group.is-active, .dream-text-group.is-prev {
    opacity: 0;
    transform: translateY(34px);
  }
  .dream-text-group.m-in {
    opacity: 1;
    transform: none;
  }
  .dream-text-group p {
    font-size: clamp(16px, 4.3vw, 18px);
    line-height: 1.78;
    font-weight: 500;
    max-width: none;
  }
  .dream-text-group p + p {
    margin-top: clamp(22px, 5.5vw, 32px);
  }
}
/* ===== 사랑으로 시작된 첫 걸음 (first-step story) ===== */
.first-step {
  position: relative;
  overflow: hidden;
  background: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(64px, 10vh, 120px) clamp(24px, 6vw, 80px);
  scroll-margin-top: 80px;
}

.first-step .fs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.9) 100%), url("/pc/resource/images/SEOUL_ENERGY_PLUS/withgo-first-step-bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.first-step .fs-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

/* top vertical line */
.fs-vline {
  display: block;
  width: 1px;
  height: 110px;
  background: #d4d8e0;
  margin: 0 auto clamp(48px, 7vh, 80px);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.first-step.is-visible .fs-vline {
  transform: scaleY(1);
}

.fs-title {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--fg);
  word-break: keep-all;
}

.fs-quote {
  margin-top: 18px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #0046FF;
  letter-spacing: -0.02em;
  line-height: 1.3;
  word-break: keep-all;
}

.fs-body {
  max-width: 1000px;
  margin: clamp(24px, 3.2vh, 36px) auto 0;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--fg-soft);
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 데스크톱: 문장별 강제 줄바꿈(기준 화면과 동일). 모바일에선 자연 줄바꿈 */
.fs-body br {
  display: inline;
}

.fs-body p + p {
  margin-top: 10px;
}

.fs-accent {
  margin-top: 24px;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 800;
  color: var(--fg);
  word-break: keep-all;
}

/* big year typography */
.fs-years {
  --line-max: 300px;
  width: min(100%, 1040px);
  margin: clamp(56px, 9vh, 96px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.4s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.first-step.is-visible .fs-years {
  opacity: 1;
  transform: none;
}

.fs-years .yr {
  font-family: var(--font-mono);
  font-size: clamp(90px, 10vw, 160px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  flex: none;
}

.fs-years .yr.a {
  color: #0b1020;
}

.fs-years .yr.b {
  color: #0046FF;
}

/* scroll-linked: 스크롤 내릴수록 가운데 라인이 자라며 두 연도가 멀어진다 (width는 JS가 제어) */
.fs-years .yr-line {
  flex: none;
  width: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b1020 0%, #0046FF 100%);
  transition: width 0.15s ease-out;
}

/* fade-up reveal */
.first-step .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.first-step.is-visible .reveal {
  opacity: 1;
  transform: none;
}

.first-step.is-visible .fs-title {
  transition-delay: 0.1s;
}

.first-step.is-visible .fs-quote {
  transition-delay: 0.2s;
}

.first-step.is-visible .fs-body {
  transition-delay: 0.3s;
}

.first-step.is-visible .fs-accent {
  transition-delay: 0.4s;
}

@media (max-width: 720px) {
  .first-step {
    min-height: auto;
    padding: clamp(56px, 10vh, 80px) 20px;
  }
  .fs-vline {
    height: 80px;
    margin-bottom: clamp(30px, 6vh, 48px);
  }
  .fs-title {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.32;
  }
  .fs-quote {
    font-size: clamp(24px, 6.6vw, 30px);
  }
  .fs-body {
    font-size: 17.5px;
    line-height: 1.78;
    padding: 0 4px;
  }
  .fs-body br {
    display: none;
  }
  .fs-accent {
    font-size: clamp(18px, 5vw, 20px);
  }
  .fs-years {
    --line-max: 56px;
    gap: clamp(6px, 2.5vw, 12px);
    margin-top: clamp(44px, 8vh, 64px);
  }
  .fs-years .yr {
    font-size: clamp(46px, 15vw, 80px);
  }
  .fs-years .yr-line {
    height: 5px;
  }
  .first-step .fs-bg {
    background-position: center center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-step .reveal, .fs-vline, .fs-years, .yr-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 820px) {
  .story-screen {
    min-height: auto;
    padding: clamp(40px, 7vh, 64px) 24px;
  }
}
/* 사랑이 삶을 바꿉니다 — 모바일: sticky 해제 + 일반 세로 fade-up */
@media (max-width: 720px) {
  .love-section {
    min-height: 0;
  }
  .love-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: clamp(56px, 9vh, 80px) 20px;
  }
  .love-inner {
    gap: clamp(28px, 6vw, 44px);
  }
  .love-copy {
    max-width: none;
    margin-left: 0;
  }
  .love-title {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.22;
  }
  .love-title-en {
    font-size: clamp(20px, 5.6vw, 24px);
  }
  .love-believe {
    font-size: clamp(22px, 6vw, 26px);
  }
  .love-desc {
    font-size: clamp(16px, 4.4vw, 17px);
    line-height: 1.78;
  }
  .love-image-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: none;
    border-radius: 24px;
    transform: scale(1.04) translateY(16px);
  }
}
/* ===== ABOUT hero banner ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(36px, 4.5vw, 56px);
  display: flex;
  align-items: center;
  scroll-snap-align: none;
}

.page-hero > .container {
  width: 100%;
  position: relative;
  z-index: 2;
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
  pointer-events: none;
}

/* warm light wash — keeps the photo's mood, lifts left text area for dark type */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 30%, rgba(255, 255, 255, 0.2) 56%, rgba(255, 255, 255, 0) 74%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 42%);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0b1733;
  word-break: keep-all;
}

.hero-headline .withgo-blue {
  color: #0046FF;
}

@media (max-width: 720px) {
  .page-hero {
    min-height: 380px;
  }
  .page-hero .hero-bg {
    object-position: center right;
  }
  .page-hero::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.46) 46%, rgba(255, 255, 255, 0) 82%), linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.22) 72%);
  }
  .hero-headline {
    font-size: clamp(34px, 9.4vw, 44px);
  }
}
/* ===== 오시는 길 (Location) ===== */
.loc-sec {
  background: var(--surface);
  padding: clamp(40px, 6vh, 64px) clamp(24px, 6vw, 80px) clamp(48px, 7vh, 72px);
  scroll-snap-align: none;
}

.loc-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* map head */
.loc-maphead {
  margin-bottom: 14px;
}

.loc-maphead .mh-addr {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--fg);
  font-weight: 600;
}

.loc-maphead .mh-addr svg {
  width: 17px;
  height: 17px;
  color: var(--brand);
  flex: none;
}

.loc-maphead .mh-addr .sub {
  color: var(--muted);
  font-weight: 400;
}

/* map card */
.map-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 64px -36px rgba(0, 5, 20, 0.32);
  touch-action: pan-x pan-y pinch-zoom;
}

.map-canvas {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(0, 70, 255, 0.04), rgba(0, 70, 255, 0.04)), #eef2f6;
}

.map-inner {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: transform 0.18s ease;
  background-image: linear-gradient(rgba(0, 5, 20, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 5, 20, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 5, 20, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 5, 20, 0.1) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
}

.map-inner .road {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 5, 20, 0.06);
}

.map-inner .road.r1 {
  left: 0;
  right: 0;
  top: 47%;
  height: 26px;
}

.map-inner .road.r2 {
  top: 0;
  bottom: 0;
  left: 38%;
  width: 22px;
}

.map-inner .road.r3 {
  left: 0;
  right: 0;
  top: 74%;
  height: 14px;
  transform: rotate(-4deg);
}

.map-inner .green {
  position: absolute;
  right: 8%;
  top: 12%;
  width: 22%;
  height: 26%;
  background: rgba(120, 180, 90, 0.22);
  border-radius: 14px;
}

.map-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-marker svg {
  width: 40px;
  height: 40px;
  color: var(--brand);
  filter: drop-shadow(0 10px 16px rgba(0, 5, 20, 0.32));
}

.map-marker .lbl {
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 5, 20, 0.3);
}

.map-guard {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.map-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px -10px rgba(0, 5, 20, 0.4);
}

.map-zoom button {
  width: 40px;
  height: 40px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-zoom button:first-child {
  border-bottom: 1px solid var(--border);
}

.map-zoom button:hover {
  background: var(--surface-2);
  color: var(--brand);
}

.map-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  max-width: 86%;
  text-align: center;
  background: rgba(8, 12, 26, 0.86);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 12px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.map-toast.show {
  opacity: 1;
}

/* info cards */
.loc-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(22px, 3vw, 32px);
}

.loc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 24px;
}

.loc-card .lc-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft, rgba(0, 70, 255, 0.08));
  margin-bottom: 14px;
}

.loc-card .lc-ic svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.loc-card h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 7px;
}

.loc-card .lc-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.loc-card .lc-sub {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.loc-card.span2 {
  grid-column: span 2;
}

.loc-card .trans-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.loc-card .trans-row + .trans-row {
  margin-top: 10px;
}

.loc-card .trans-row .tr-key {
  flex: none;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  width: 52px;
  padding-top: 3px;
}

.loc-card .trans-row .tr-val {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.loc-card .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.loc-card .bdg {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft, rgba(0, 70, 255, 0.08));
  border-radius: 7px;
  padding: 3px 9px;
}

.loc-card .bdg.g {
  color: #3c7a0f;
  background: color-mix(in srgb, var(--accent-green) 26%, #fff);
}

@media (max-width: 820px) {
  .loc-info {
    grid-template-columns: 1fr;
  }
  .loc-card.span2 {
    grid-column: auto;
  }
  .map-canvas {
    height: 300px;
  }
}
/* network */
.net-sec {
  background: var(--bg, #f6f7fa);
  padding: clamp(48px, 7vh, 76px) clamp(24px, 6vw, 80px) clamp(56px, 8vh, 88px);
  scroll-snap-align: none;
}

.net-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.net-logos {
  margin-top: clamp(24px, 3.5vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.nl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
}

.nl-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 240px;
  height: 96px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -20px rgba(0, 5, 20, 0.28);
}

.nl-card img {
  width: 100%;
  max-height: 64px;
  object-fit: contain;
  display: block;
}

.nl-card .nl-text {
  text-align: center;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.nl-card .nl-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.07em;
  margin-top: 3px;
}

.net-grid {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.net-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 48px -32px rgba(0, 5, 20, 0.3);
}

.net-col .nc-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft, rgba(0, 70, 255, 0.08));
  color: var(--brand);
  margin-bottom: 14px;
}

.net-col .nc-ic.g {
  background: color-mix(in srgb, var(--accent-green) 22%, #fff);
  color: #3c7a0f;
}

.net-col .nc-ic svg {
  width: 22px;
  height: 22px;
}

.net-col h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.net-col .nc-desc {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.net-col .nc-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.net-col .nc-list li {
  display: flex;
  gap: 9px;
  font-size: 15px;
  color: var(--fg);
  line-height: 1.55;
  word-break: keep-all;
}

.net-col .nc-list li svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex: none;
  margin-top: 2px;
}

.net-col .nc-sub {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px dashed var(--border);
  font-size: 15px;
  color: var(--desc);
  font-weight: 500;
}

.net-col .nc-name {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 4px;
}

.net-col .nc-contact {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.net-col .nc-contact a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}

.net-col .nc-contact a svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex: none;
}

.net-col .nc-contact a:hover {
  color: var(--brand);
}

.net-note {
  margin: clamp(26px, 3.5vw, 38px) auto 0;
  max-width: 820px;
  text-align: center;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.net-note b {
  color: var(--fg);
  font-weight: 700;
}

@media (max-width: 820px) {
  .net-grid {
    grid-template-columns: 1fr;
  }
  .nl-card {
    width: 100%;
    max-width: 320px;
    height: 84px;
  }
}
/* ===== 캠페인 소개 ===== */
.camp-sec {
  background: var(--surface, #fff);
  padding: clamp(48px, 7vh, 76px) clamp(24px, 6vw, 80px) clamp(56px, 8vh, 92px);
  scroll-snap-align: none;
}

.camp-wrap {
  max-width: 1160px;
  margin: 0 auto;
}

.camp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: clamp(22px, 3vw, 32px);
}

.camp-filters button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, #f6f7fa);
  color: var(--muted);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.camp-filters button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.camp-filters button.on {
  background: #fff;
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 4px 14px -8px rgba(0, 70, 255, 0.5);
}

.camp-group {
  margin-top: clamp(34px, 4.5vw, 52px);
}

.camp-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.camp-group-head h3 {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.camp-group-head .gdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.camp-group-head .gdot.live {
  background: var(--accent-green);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-green) 28%, transparent);
}

.camp-group-head .gdot.past {
  background: var(--muted);
}

.camp-group-head .gcount {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.camp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.camp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.camp-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 18px 38px -20px rgba(0, 5, 20, 0.4);
}

.camp-thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.camp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.camp-card:hover .camp-thumb img {
  transform: scale(1.04);
}

/* placeholder thumbnail */
.camp-thumb.ph {
  display: flex;
  align-items: center;
  justify-content: center;
}

.camp-thumb.ph.t1 {
  background: linear-gradient(135deg, #0046FF 0%, #2f6bff 100%);
}

.camp-thumb.ph.t2 {
  background: linear-gradient(135deg, #0037BE 0%, #0046FF 100%);
}

.camp-thumb.ph.t3 {
  background: linear-gradient(135deg, #1f2a44 0%, #324063 100%);
}

.camp-thumb.ph svg {
  width: 46px;
  height: 46px;
  color: rgba(255, 255, 255, 0.9);
}

.camp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--fg);
  backdrop-filter: none;
  box-shadow: 0 4px 12px -6px rgba(0, 5, 20, 0.45);
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camp-card.live .camp-badge {
  box-shadow: 0 0 0 1.5px var(--accent-green), 0 4px 12px -6px rgba(0, 5, 20, 0.45);
}

.camp-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.camp-title {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.camp-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
}

.camp-meta .st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.camp-card.live .camp-meta .st {
  color: color-mix(in oklab, var(--accent-green) 72%, #2e7d10);
}

.camp-card.past .camp-meta .st {
  color: var(--muted);
}

.camp-meta .st .dt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.camp-card.past {
  opacity: 0.94;
}

.camp-card.past .camp-thumb img {
  filter: saturate(0.82);
}

.camp-group[hidden] {
  display: none;
}

.camp-card[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .camp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .camp-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .camp-filters {
    gap: 8px;
  }
  .camp-filters button {
    padding: 8px 16px;
    font-size: 14.5px;
  }
}