/* ============================================================
   Eco-Pass Inc. — Clean White/Green/Blue Theme
   색상: 흰색 배경 위주 · 연두(#6DBE45) · 블루(#1B9EE3) 포인트
   검정/다크 최소화
   ============================================================ */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: #fff;
  color: #2c3e50;
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Brand Colors ──────────────────────────────────── */
:root {
  --green:      #6DBE45;
  --green-lt:   #8dd165;
  --green-pale: #f0fbe8;
  --green-mid:  #e6f7d9;
  --blue:       #1B9EE3;
  --blue-lt:    #4db8f0;
  --blue-pale:  #edf7fd;
  --blue-mid:   #d6eefc;
  --teal:       #29B9B0;
  --white:      #ffffff;
  --bg-light:   #f7fbf4;   /* 매우 연한 녹색 흰색 */
  --text-main:  #2c3e50;
  --text-sub:   #5a7280;
  --text-light: #8fa8b4;
  --border:     #ddeee5;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow-sm:  0 2px 12px rgba(109,190,69,.10);
  --shadow:     0 4px 24px rgba(27,158,227,.10);
  --shadow-lg:  0 8px 40px rgba(27,158,227,.14);
  --trans:      0.25s ease;
  /* gradient */
  --grad:       linear-gradient(120deg, var(--green) 0%, var(--teal) 50%, var(--blue) 100%);
  --grad-text:  linear-gradient(90deg, var(--green), var(--teal), var(--blue));
  --grad-light: linear-gradient(120deg, var(--green-pale), var(--blue-pale));
}

/* ── Utility ──────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 88px 0; }
.bg-light   { background: var(--bg-light); }

.txt-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sec-label {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.sec-title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800; color: var(--text-main);
  line-height: 1.25; margin-bottom: 14px;
}
.sec-sub {
  font-size: 15px; color: var(--text-sub);
  margin-bottom: 40px;
}

/* ── Buttons ──────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad);
  color: #fff; font-size: 15px; font-weight: 600;
  padding: 13px 28px; border-radius: var(--radius);
  transition: var(--trans); border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(109,190,69,.25);
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(109,190,69,.3); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue);
  font-size: 15px; font-weight: 600;
  padding: 12px 26px; border-radius: var(--radius);
  border: 1.5px solid var(--blue);
  transition: var(--trans); cursor: pointer;
}
.btn-outline:hover { background: var(--blue); color: #fff; }

.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--green);
  font-size: 15px; font-weight: 700;
  padding: 13px 28px; border-radius: var(--radius);
  border: none; transition: var(--trans);
}
.btn-white:hover { background: var(--green-pale); }

.full-btn { width: 100%; justify-content: center; padding: 14px; }

/* ── Navbar ───────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: var(--trans);
}
.navbar.scrolled { box-shadow: 0 2px 16px rgba(109,190,69,.10); }
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 16px;
}
.nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.nav-logo-img { height: 42px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--text-sub);
  padding: 6px 14px; border-radius: 8px; transition: var(--trans);
}
.nav-link:hover, .nav-link.active { color: var(--green); background: var(--green-pale); }
.nav-login-btn {
  font-size: 13px; font-weight: 600; color: var(--green);
  padding: 8px 16px; border-radius: 8px;
  border: 1.5px solid var(--green);
  margin-left: 8px; transition: var(--trans);
}
.nav-login-btn:hover { background: var(--green); color: #fff; }
.nav-cta-btn {
  background: var(--grad);
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 8px;
  margin-left: 8px; transition: var(--trans);
}
.nav-cta-btn:hover { opacity: .85; }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; margin-left: auto; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text-sub); border-radius: 2px; transition: var(--trans); }

/* ── Hero ─────────────────────────────────────────── */
.hero {
  padding: 140px 0 90px;
  background: linear-gradient(160deg, var(--white) 55%, var(--green-pale) 100%);
  text-align: center;
}
.hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.hero-logo { height: 96px; width: auto; margin: 0 auto 32px; filter: drop-shadow(0 4px 20px rgba(109,190,69,.25)); }
.hero-title {
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 800; color: var(--text-main);
  line-height: 1.2; margin-bottom: 20px;
  white-space: nowrap;
}
.hero-desc { font-size: 16px; color: var(--text-sub); line-height: 1.8; margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Cards (3-column) ─────────────────────────────── */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px;
  transition: var(--trans);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: var(--grad);
  opacity: .06; pointer-events: none;
}
.card { position: relative; }
.card-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
}
.card-icon.green { background: var(--green-pale); color: var(--green); }
.card-icon.blue  { background: var(--blue-pale);  color: var(--blue);  }
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text-main); }
.card p  { font-size: 14px; color: var(--text-sub); line-height: 1.75; }

/* ── Badges (regulations) ─────────────────────────── */
.badges-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.reg-badge {
  background: #fff; border: 1.5px solid var(--border);
  color: var(--text-sub); font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; transition: var(--trans);
}
.reg-badge:hover { border-color: var(--green); color: var(--green); background: var(--green-pale); }

/* ── News Grid (home - 3up) ───────────────────────── */
.news-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; margin-bottom: 36px;
}
.news-loading { grid-column: 1/-1; text-align: center; padding: 48px; color: var(--text-light); font-size: 15px; }
.news-loading i { color: var(--green); margin-right: 8px; }
.news-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: var(--trans);
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green); }
.news-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.news-date  { font-size: 11px; color: var(--text-light); margin-left: auto; }

/* 카테고리 뱃지 */
.news-cat-badge {
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; letter-spacing: .04em;
}
.badge-lca    { background: #e8f8e8; color: #2a8a2a; }
.badge-dpp    { background: #e8f0fd; color: #2a5ec4; }
.badge-cbam   { background: #fff3e0; color: #b85c00; }
.badge-policy { background: var(--blue-pale); color: var(--blue); }

/* 국내/해외 뱃지 */
.news-region-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: #f0f0f0; color: #666;
}
.news-region-badge.kr { background: #fff0f0; color: #c0392b; }

.news-card h3 { font-size: 14px; font-weight: 600; color: var(--text-main); line-height: 1.55; flex: 1; }
.news-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; gap: 8px;
}
.news-source-name { font-size: 11px; color: var(--text-light); }
.news-card a.news-link {
  font-size: 12px; color: var(--green); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  transition: var(--trans); white-space: nowrap;
}
.news-card a.news-link:hover { color: var(--blue); }
.news-empty {
  grid-column: 1/-1; text-align: center; padding: 56px 24px;
  color: var(--text-light); line-height: 1.8;
}
.news-empty i { font-size: 28px; display: block; margin-bottom: 12px; color: var(--green); }

.center-btn { text-align: center; }

/* ── News Grid (resources - full) ─────────────────── */
.news-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filt {
  font-size: 13px; font-weight: 600;
  padding: 7px 18px; border-radius: 999px;
  border: 1.5px solid var(--border);
  color: var(--text-sub); background: #fff;
  cursor: pointer; transition: var(--trans);
}
.filt:hover, .filt.active { border-color: var(--green); color: var(--green); background: var(--green-pale); }
.news-grid-lg {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px; margin-bottom: 20px;
}
.updated-at { font-size: 12px; color: var(--text-light); text-align: right; }

/* ── CTA Band ─────────────────────────────────────── */
.cta-band {
  background: var(--grad);
  padding: 80px 0; text-align: center; color: #fff;
}
.cta-band h2 { font-size: clamp(22px, 3.5vw, 36px); font-weight: 800; margin-bottom: 28px; line-height: 1.3; }

/* ── Page Hero ────────────────────────────────────── */
.page-hero {
  background: linear-gradient(160deg, var(--white) 50%, var(--green-pale) 100%);
  padding: 120px 0 60px; border-bottom: 1px solid var(--border);
}
.page-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.page-desc  { font-size: 16px; color: var(--text-sub); max-width: 540px; }

/* ── About ────────────────────────────────────────── */
.about-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
.about-logo img { width: 100%; border-radius: var(--radius-lg); }
.about-text p { font-size: 15px; color: var(--text-sub); line-height: 1.85; margin-bottom: 14px; }
.info-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.info-row { display: flex; gap: 16px; font-size: 14px; }
.info-label { font-weight: 700; color: var(--text-main); min-width: 72px; flex-shrink: 0; }
.info-row span { color: var(--text-sub); line-height: 1.6; }

/* ── Timeline ─────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
.tl-item {
  display: flex; gap: 28px; align-items: flex-start;
  padding: 24px 0; border-bottom: 1px solid var(--border);
  position: relative;
}
.tl-item:last-child { border-bottom: none; }
.tl-year {
  font-size: 20px; font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  min-width: 64px; flex-shrink: 0; line-height: 1;
  padding-top: 4px;
}
.tl-content strong { font-size: 15px; font-weight: 700; color: var(--text-main); display: block; margin-bottom: 6px; }
.tl-content p  { font-size: 14px; color: var(--text-sub); line-height: 1.65; }
.tl-date { font-size: 13px; font-weight: 500; color: var(--teal); margin-left: 8px; }

/* ── Cert List ────────────────────────────────────── */
.cert-list { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.cert-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 14px; font-weight: 600; color: var(--text-main);
  transition: var(--trans);
}
.cert-item:hover { border-color: var(--green); color: var(--green); background: var(--green-pale); }
.cert-item i { font-size: 18px; color: var(--green); width: 22px; text-align: center; }

/* ── FAQ ──────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto; }
.faq-item {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: border-color var(--trans);
}
.faq-item:hover, .faq-item.open { border-color: var(--green); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; font-size: 15px; font-weight: 600; gap: 12px;
}
.faq-icon { color: var(--text-light); transition: transform var(--trans); flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--green); }
.faq-a {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: var(--text-sub); line-height: 1.75;
  padding: 0 20px; transition: max-height .4s ease, padding .3s ease;
}
.faq-item.open .faq-a { max-height: 160px; padding: 0 20px 18px; }

/* ── Contact ──────────────────────────────────────── */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.contact-info h2, .contact-form-box h2 { font-size: 20px; font-weight: 700; color: var(--text-main); margin-bottom: 24px; }
.ci-list { display: flex; flex-direction: column; gap: 20px; }
.ci-row { display: flex; gap: 14px; align-items: flex-start; }
.ci-row i { font-size: 16px; color: var(--green); width: 20px; margin-top: 3px; flex-shrink: 0; }
.ci-row strong { font-size: 13px; font-weight: 700; display: block; margin-bottom: 3px; }
.ci-row p { font-size: 14px; color: var(--text-sub); margin: 0; line-height: 1.6; }

/* ── Forms ────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fg label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.req { color: #e74c3c; }
.fg input, .fg select, .fg textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px; font-family: inherit;
  color: var(--text-main); background: #fff;
  outline: none; transition: border-color var(--trans), box-shadow var(--trans);
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(109,190,69,.12);
}
.fg textarea { resize: vertical; }
.form-chk { display: flex; align-items: flex-start; gap: 8px; }
.form-chk input { width: 15px; height: 15px; margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
.form-chk label { font-size: 13px; color: var(--text-sub); }
.form-result { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600; display: none; }
.form-result.success { background: var(--green-pale); color: var(--green); border: 1.5px solid rgba(109,190,69,.3); display: block; }
.form-result.error   { background: #fef0ef; color: #c0392b; border: 1.5px solid #f5b7b1; display: block; }

/* ── Footer ───────────────────────────────────────── */
.site-footer { background: #f5faf2; border-top: 1px solid var(--border); }
.footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 40px 24px 32px;
}
.footer-logo { height: 44px; width: auto; margin-bottom: 20px; display: block; }
.footer-info-wrap { display: flex; flex-direction: column; }
.footer-info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-info-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-sub); line-height: 1.6; }
.fi-label { font-weight: 700; color: var(--text-main); min-width: 76px; flex-shrink: 0; }
.fi-val { color: var(--text-sub); }
.footer-bottom-bar { border-top: 1px solid var(--border); }
.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom span { font-size: 12px; color: var(--text-light); }
.footer-designed a { color: var(--text-light); text-decoration: none; }
.footer-designed a:hover { color: var(--green); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   HOME — INFOGRAPHIC SECTIONS
   ══════════════════════════════════════════════════════════ */

/* ── 서비스 3열 인포그래픽 카드 ──────────────────── */
.ig-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.ig-card {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 24px 28px;
  text-align: center; transition: var(--trans);
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.ig-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.ig-icon-wrap {
  width: 100px; height: 100px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.ig-icon-wrap svg { width: 76px; height: 76px; }
.ig-icon-wrap.green { background: var(--green-pale); }
.ig-icon-wrap.blue  { background: var(--blue-pale); }
.ig-icon-wrap.teal  { background: #e6faf8; }
.ig-card h3 { font-size: 18px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.ig-tag { font-size: 12px; color: var(--text-light); font-weight: 600; letter-spacing: .04em; margin: 0; }

/* ── FA 아이콘 래퍼 (ig-3col 카드용) ─────────────── */
.ig-fa-icon {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; position: relative;
}
.ig-fa-icon i { font-size: 28px; line-height: 1; }
.ig-fa-icon.green { color: var(--green); }
.ig-fa-icon.blue  { color: var(--blue); }
.ig-fa-icon.teal  { color: var(--teal); }
.ig-fa-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  color: inherit; opacity: .75;
}

/* ── 픽토그램 대상기업 4열 ────────────────────────── */
.picto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.picto-item {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 16px 22px;
  text-align: center; transition: var(--trans);
  gap: 12px;
}
.picto-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal); }
.picto-svg { width: 80px; height: 80px; }
.picto-svg svg { width: 100%; height: 100%; }
.picto-item strong { font-size: 14px; font-weight: 700; color: var(--text-main); }
.picto-item span { font-size: 12px; color: var(--text-sub); line-height: 1.5; }

/* ── FA 아이콘 래퍼 (picto-grid용) ──────────────── */
.picto-fa-wrap {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  transition: var(--trans);
}
.picto-fa-wrap.green { background: var(--green-pale); color: var(--green); }
.picto-fa-wrap.blue  { background: var(--blue-pale);  color: var(--blue); }
.picto-fa-wrap.teal  { background: #e6faf8;            color: var(--teal); }
.picto-item:hover .picto-fa-wrap { transform: scale(1.1); }

/* ── EU 규제 타임라인 ─────────────────────────────── */
.reg-timeline { position: relative; padding: 20px 0 8px; }
.rtl-track {
  position: absolute; top: 52px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--teal), var(--blue));
  border-radius: 2px;
}
.rtl-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.rtl-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-top: 8px; text-align: center;
}
.rtl-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px currentColor;
  z-index: 1; flex-shrink: 0;
}
.rtl-dot.cbam { background: #c05c00; color: #c05c00; }
.rtl-dot.espr { background: #6DBE45; color: #6DBE45; }
.rtl-dot.batt { background: #29B9B0; color: #29B9B0; }
.rtl-dot.dpp  { background: #1B9EE3; color: #1B9EE3; }
.rtl-dot.issb { background: #7b5ea7; color: #7b5ea7; }
.rtl-year { font-size: 13px; font-weight: 800; color: var(--text-main); }
.rtl-badge {
  font-size: 11px; font-weight: 800; padding: 3px 12px;
  border-radius: 999px; letter-spacing: .06em;
}
.rtl-badge.cbam { background: #fff3e0; color: #c05c00; }
.rtl-badge.espr { background: var(--green-pale); color: #2a7a2a; }
.rtl-badge.batt { background: #e6faf8; color: var(--teal); }
.rtl-badge.dpp  { background: var(--blue-pale); color: var(--blue); }
.rtl-badge.issb { background: #f0ebff; color: #7b5ea7; }
.rtl-desc { font-size: 11px; color: var(--text-sub); line-height: 1.55; }

/* ══════════════════════════════════════════════════════════
   SERVICE PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Big Flow (서비스 프로세스 4단계) ────────────── */
.big-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center; gap: 0; margin-bottom: 48px;
}
.bf-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 16px 8px;
}
.bf-circle {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: var(--trans);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.bf-circle svg { width: 56px; height: 56px; }
.bf-circle.green { background: var(--green-pale); border: 2px solid var(--green); color: var(--green); }
.bf-circle.blue  { background: var(--blue-pale);  border: 2px solid var(--blue);  color: var(--blue); }
.bf-circle.teal  { background: #e6faf8;            border: 2px solid var(--teal);  color: var(--teal); }
.bf-circle i { font-size: 28px; }
.bf-item:hover .bf-circle { transform: scale(1.08); box-shadow: var(--shadow-lg); }
.bf-arrow {
  font-size: 20px; color: var(--text-light);
  padding: 0 6px; margin-top: -16px;
  display: flex; align-items: center;
}
.bf-num {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  color: var(--text-light);
}
.bf-item h4 { font-size: 13px; font-weight: 700; color: var(--text-main); margin: 0; }

/* ── SCOPE 픽토그램 행 ────────────────────────────── */
.scope-picto-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.sp-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  text-align: center; transition: var(--trans);
}
.sp-item:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.sp-badge {
  font-size: 11px; font-weight: 800; padding: 3px 14px;
  border-radius: 999px; letter-spacing: .06em;
}
.sp-badge.s1 { background: #fff3e0; color: #c05c00; border: 1.5px solid #fbd4b4; }
.sp-badge.s2 { background: #e8f0fd; color: #2a5ec4; border: 1.5px solid #bcd0f8; }
.sp-badge.s3 { background: var(--green-pale); color: #2a7a2a; border: 1.5px solid #b8dda0; }
.sp-svg { width: 100%; max-width: 200px; height: 56px; }

/* ── SCOPE FA 아이콘 박스 (신규) ─────────────────── */
.sp-fa-box {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; transition: var(--trans);
}
.sp-fa-box.s1 { background: #fff3e0; color: #c05c00; }
.sp-fa-box.s2 { background: #e8f0fd; color: #2a5ec4; }
.sp-fa-box.s3 { background: var(--green-pale); color: #2a7a2a; }
.sp-item:hover .sp-fa-box { transform: scale(1.1); }
.sp-label { font-size: 14px; font-weight: 700; color: var(--text-main); }
.sp-desc  { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin: 0; }

/* ── LCA CSS 순환 다이어그램 (신규) ──────────────── */
.lca-cycle-wrap {
  display: flex; align-items: center; justify-content: center;
}
.lca-cycle {
  position: relative;
  width: 300px; height: 300px; flex-shrink: 0;
}
/* 중심 원 */
.lca-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--grad);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; z-index: 3;
  box-shadow: 0 4px 20px rgba(109,190,69,.35);
}
.lca-center i { font-size: 18px; margin-bottom: 3px; }
.lca-center span { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.3; }
/* 4개 노드 공통 */
.lca-node {
  position: absolute; z-index: 2;
}
.lca-node-inner {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; border: 2.5px solid transparent;
  transition: var(--trans); box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.lca-node-inner i { font-size: 22px; line-height: 1; }
.lca-node-inner span { font-size: 9px; font-weight: 700; line-height: 1; }
.lca-node-inner.green { background: var(--green-pale); border-color: var(--green); color: var(--green); }
.lca-node-inner.blue  { background: var(--blue-pale);  border-color: var(--blue);  color: var(--blue); }
.lca-node-inner.teal  { background: #e6faf8;            border-color: var(--teal);  color: var(--teal); }
.lca-node-inner:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.15); }
/* 노드 위치 */
.lca-node.top    { top: 0;    left: 50%; transform: translate(-50%, 0); }
.lca-node.right  { top: 50%;  right: 0;  transform: translate(0, -50%); }
.lca-node.bottom { bottom: 0; left: 50%; transform: translate(-50%, 0); }
.lca-node.left   { top: 50%;  left: 0;   transform: translate(0, -50%); }
/* 외곽 링 */
.lca-cycle::before {
  content: ''; position: absolute; inset: 10px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  z-index: 1;
}
/* 화살표 호 (4개 분면) */
.lca-arc {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 2px solid transparent;
  z-index: 0;
}
.arc-tr {
  top: 10px; right: 10px;
  border-top-color: var(--green);
  transform: rotate(0deg);
}
.arc-rb {
  bottom: 10px; right: 10px;
  border-right-color: var(--blue);
}
.arc-bl {
  bottom: 10px; left: 10px;
  border-bottom-color: var(--teal);
}
.arc-lt {
  top: 10px; left: 10px;
  border-left-color: var(--green);
}

/* ── LCA 인포그래픽 레이아웃 ─────────────────────── */
.lca-infographic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.lca-big-svg svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.lca-feat-icons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.lfi-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 22px 16px;
  text-align: center; transition: var(--trans);
}
.lfi-item:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.lfi-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--green-pale); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.lfi-icon.cert  { background: var(--blue-pale); color: var(--blue); }
.lfi-icon.globe { background: #e6faf8; color: var(--teal); }
.lfi-icon.edu   { background: #f0ebff; color: #7b5ea7; }
.lfi-item span { font-size: 13px; font-weight: 700; color: var(--text-main); }

/* ── DPP CSS 흐름도 (신규) ────────────────────────── */
.dpp-flow-wrap { margin-bottom: 36px; }
.dpp-css-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  padding: 8px 0;
}
.dpp-box {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  border-radius: var(--radius-lg); padding: 22px 18px;
  text-align: center; border: 2px solid transparent;
  min-width: 100px; transition: var(--trans);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.dpp-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dpp-box.green  { background: var(--green-pale); border-color: var(--green); }
.dpp-box.blue   { background: var(--blue-pale);  border-color: var(--blue); }
.dpp-box.teal   { background: #e6faf8;            border-color: var(--teal); }
.dpp-box.orange { background: #fff3e0;            border-color: #f5a623; }
.dpp-box.indigo { background: #e8f0fd;            border-color: #2a5ec4; }
.dpp-box-main { padding: 28px 22px; min-width: 120px; }
.dpp-box-group {
  display: flex; flex-direction: column; gap: 10px;
}
.dpp-box.sm { padding: 16px 14px; min-width: 90px; }
.dpp-box-icon { font-size: 28px; line-height: 1; }
.dpp-box.green  .dpp-box-icon { color: var(--green); }
.dpp-box.blue   .dpp-box-icon { color: var(--blue); }
.dpp-box.teal   .dpp-box-icon { color: var(--teal); }
.dpp-box.orange .dpp-box-icon { color: #c05c00; }
.dpp-box.indigo .dpp-box-icon { color: #2a5ec4; }
.dpp-box-label { font-size: 13px; font-weight: 800; color: var(--text-main); }
.dpp-box-sub   { font-size: 11px; color: var(--text-sub); line-height: 1.5; }
.dpp-arrow {
  font-size: 20px; color: var(--text-light);
  padding: 0 10px; flex-shrink: 0;
}

/* ── DPP 플로우 다이어그램 (구형 — 유지용) ──────── */
.dpp-flow-wrap-old { margin-bottom: 32px; }
.dpp-flow-diagram svg { width: 100%; height: auto; max-height: 180px; }

/* ── DPP 아이콘 6그리드 ──────────────────────────── */
.dpp-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.dig-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 20px 8px;
  text-align: center; transition: var(--trans);
}
.dig-item:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.dig-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.dig-icon.green { background: var(--green-pale); color: var(--green); }
.dig-icon.blue  { background: var(--blue-pale);  color: var(--blue); }
.dig-icon.teal  { background: #e6faf8;            color: var(--teal); }
.dig-item span { font-size: 12px; font-weight: 700; color: var(--text-main); }

/* ── 컨설팅 로드맵 ───────────────────────────────── */
.roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 16px;
}
.rm-track {
  position: absolute; top: 46px; left: 12.5%; right: 12.5%;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--teal), var(--blue));
  border-radius: 2px;
}
.rm-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; position: relative; padding: 0 8px;
}
.rm-dot {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; z-index: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: var(--trans);
}
.rm-dot.green { background: var(--green); color: #fff; }
.rm-dot.blue  { background: var(--blue);  color: #fff; }
.rm-dot.teal  { background: var(--teal);  color: #fff; }
.rm-item:hover .rm-dot { transform: scale(1.12); box-shadow: var(--shadow-lg); }
.rm-num { font-size: 11px; font-weight: 800; color: var(--text-light); letter-spacing: .08em; }
.rm-item > span { font-size: 14px; font-weight: 700; color: var(--text-main); }

/* ── Step Flow (데이터 수집 4단계) ───────────────── */
.svc-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
  margin: 8px 0 56px;
}
.svc-flow-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  text-align: center;
  transition: var(--trans);
  position: relative;
}
.svc-flow-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green);
}
.svc-flow-num {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
  letter-spacing: .06em;
}
.svc-flow-icon {
  width: 52px; height: 52px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--green);
  margin: 8px auto 14px;
}
.svc-flow-item h4 { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.svc-flow-item p  { font-size: 12px; color: var(--text-sub); line-height: 1.65; }
.svc-flow-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; color: var(--text-light); font-size: 16px;
  margin-top: 60px;
}

/* ── SCOPE Grid ───────────────────────────────────── */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.scope-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: var(--trans);
}
.scope-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.scope-badge {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.scope-badge.s1 { background: #fff0e8; color: #c05c00; border: 1.5px solid #fbd4b4; }
.scope-badge.s2 { background: #e8f0fd; color: #2a5ec4; border: 1.5px solid #bcd0f8; }
.scope-badge.s3 { background: var(--green-pale); color: #2a7a2a; border: 1.5px solid #b8dda0; }
.scope-card h4 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 10px; }
.scope-card p  { font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-bottom: 16px; }
.scope-list { display: flex; flex-direction: column; gap: 8px; }
.scope-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--text-sub); line-height: 1.5;
}
.scope-list li i { color: var(--green); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

/* ── LCA Split Layout ─────────────────────────────── */
.lca-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}
.lca-visual { display: flex; justify-content: center; align-items: center; }
.lca-cycle {
  position: relative;
  width: 280px; height: 280px;
  background: linear-gradient(135deg, var(--green-pale), var(--blue-pale));
  border-radius: 50%;
  border: 2px solid var(--border);
}
.lca-node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-sub);
  width: 64px; text-align: center;
}
.lca-node i {
  width: 40px; height: 40px;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--green);
  box-shadow: 0 2px 12px rgba(109,190,69,.2);
}
.lca-node.top    { top: -24px;  left: 50%; transform: translateX(-50%); }
.lca-node.right  { top: 50%;    right: -30px; transform: translateY(-50%); }
.lca-node.bottom { bottom: -24px; left: 50%; transform: translateX(-50%); }
.lca-node.left   { top: 50%;    left: -30px; transform: translateY(-50%); }
.lca-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px;
  background: var(--grad);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px;
  box-shadow: 0 4px 20px rgba(41,185,176,.3);
}
.lca-features { display: flex; flex-direction: column; gap: 20px; }
.lca-feat-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); transition: var(--trans);
}
.lca-feat-item:hover { border-color: var(--green); background: var(--green-pale); }
.lca-feat-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--green-pale); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--green);
}
.lca-feat-item h4 { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
.lca-feat-item p  { font-size: 13px; color: var(--text-sub); line-height: 1.65; margin: 0; }

/* ── DPP Grid ─────────────────────────────────────── */
.dpp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dpp-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: var(--trans);
  display: flex; flex-direction: column; gap: 10px;
}
.dpp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal);
}
.dpp-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #e6faf8, var(--blue-pale));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--teal);
}
.dpp-card h4 { font-size: 15px; font-weight: 700; color: var(--text-main); }
.dpp-card p  { font-size: 13px; color: var(--text-sub); line-height: 1.7; }

/* ── Consult Timeline ─────────────────────────────── */
.consult-timeline {
  display: flex; flex-direction: column; gap: 0;
  max-width: 780px; margin: 0 auto;
}
.ct-item {
  display: flex; gap: 24px; align-items: flex-start;
}
.ct-step {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 44px;
}
.ct-num {
  width: 44px; height: 44px;
  background: var(--grad);
  color: #fff; font-size: 16px; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ct-line {
  width: 2px; flex: 1; min-height: 40px;
  background: var(--border);
  margin: 6px 0;
}
.ct-content {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  flex: 1;
  margin-bottom: 16px;
  transition: var(--trans);
}
.ct-content:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.ct-content h4 {
  font-size: 15px; font-weight: 700; color: var(--text-main);
  margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
}
.ct-content h4 i { color: var(--teal); }
.ct-content p { font-size: 14px; color: var(--text-sub); line-height: 1.7; }

/* ── Reg Alert Bar ────────────────────────────────── */
.reg-alert-bar {
  background: linear-gradient(90deg, #fff3e0 0%, #fff8ec 100%);
  border-top: 3px solid #f5a623;
  border-bottom: 1px solid #fde8b8;
  padding: 14px 0;
}
.reg-alert-inner {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.reg-alert-icon {
  font-size: 18px; color: #e67e22; flex-shrink: 0;
}
.reg-alert-text {
  font-size: 14px; color: #7d4e00; line-height: 1.55;
}
.reg-alert-text strong { color: #c0580a; }
.reg-alert-text a {
  color: var(--blue); font-weight: 600; margin-left: 10px;
  text-decoration: underline; white-space: nowrap;
}
.reg-alert-text a:hover { color: var(--green); }

/* ── Card List (체크리스트 within card) ───────────── */
.card-list {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 9px;
  list-style: none; padding: 0;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.card-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-sub); line-height: 1.5;
}
.card-list li i {
  color: var(--green); font-size: 11px; margin-top: 3px; flex-shrink: 0;
}

/* ── Card Icon: Teal variant ──────────────────────── */
.card-icon.teal { background: #e6faf8; color: var(--teal); }

/* ── Target Grid (서비스 대상 기업) ───────────────── */
.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.target-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
  transition: var(--trans); text-align: left;
}
.target-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal);
}
.target-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--green-pale) 0%, var(--blue-pale) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--teal);
  margin-bottom: 16px;
}
.target-card h4 {
  font-size: 15px; font-weight: 700;
  color: var(--text-main); margin-bottom: 8px;
}
.target-card p {
  font-size: 13px; color: var(--text-sub); line-height: 1.7;
}

/* ── Reg Grid (규제 & 표준 섹션) ─────────────────── */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.reg-item {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  transition: var(--trans);
}
.reg-item:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateX(3px);
}
.reg-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
/* reg-icon 색상 변형 */
.reg-icon.green  { background: var(--green-pale);  color: var(--green); }
.reg-icon.blue   { background: var(--blue-pale);   color: var(--blue);  }
.reg-icon.teal-c { background: #e6faf8;             color: var(--teal);  }

.reg-info { display: flex; flex-direction: column; gap: 3px; }
.reg-info strong { font-size: 14px; font-weight: 700; color: var(--text-main); }
.reg-info span   { font-size: 12px; color: var(--text-sub); line-height: 1.5; }

/* ── CTA Sub Text ─────────────────────────────────── */
.cta-sub {
  font-size: 15px;
  color: rgba(255,255,255,.82);
  margin-bottom: 28px;
  margin-top: -12px;
  letter-spacing: .02em;
}

/* ── Scroll Reveal ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--d, 0s); }
.reveal.visible { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .about-wrap   { grid-template-columns: 1fr; }
  .about-logo   { max-width: 200px; }
  .contact-wrap { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-info-list li { flex-direction: column; gap: 2px; }
  /* Home infographic */
  .ig-3col      { grid-template-columns: 1fr; }
  .picto-grid   { grid-template-columns: repeat(2, 1fr); }
  .rtl-items    { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rtl-track    { display: none; }
  /* Service */
  .big-flow     { grid-template-columns: 1fr 1fr; gap: 16px; }
  .bf-arrow     { display: none; }
  .scope-picto-row { grid-template-columns: 1fr; }
  .lca-infographic { grid-template-columns: 1fr; }
  .lca-cycle    { width: 260px; height: 260px; }
  .lca-feat-icons  { grid-template-columns: repeat(2, 1fr); }
  .dpp-css-flow { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .dpp-arrow    { display: none; }
  .dpp-box-group { flex-direction: row; }
  .dpp-icon-grid   { grid-template-columns: repeat(3, 1fr); }
  .roadmap         { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .rm-track        { display: none; }
  /* Old service */
  .svc-flow     { grid-template-columns: 1fr; gap: 20px; }
  .svc-flow-arrow { display: none; }
  .scope-grid   { grid-template-columns: 1fr; }
  .lca-split    { grid-template-columns: 1fr; }
  .lca-cycle    { width: 220px; height: 220px; }
  .dpp-grid     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .section { padding: 64px 0; }
  .hero { padding: 110px 0 70px; }
  .page-hero { padding: 100px 0 48px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 68px; left: 0; right: 0;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    gap: 4px; z-index: 998;
  }
  .nav-links.open .nav-cta-btn { display: flex; justify-content: center; margin-top: 6px; }
  .hamburger { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .fi-label { min-width: unset; }
  .cards-3 { grid-template-columns: 1fr; }
  .news-grid, .news-grid-lg { grid-template-columns: 1fr; }
  .target-grid { grid-template-columns: 1fr; }
  .reg-grid    { grid-template-columns: 1fr; }
  .hero-title  { white-space: normal; }
  /* Home infographic mobile */
  .ig-3col     { grid-template-columns: 1fr; }
  .picto-grid  { grid-template-columns: 1fr; }
  .rtl-items   { grid-template-columns: 1fr 1fr; }
  /* Service mobile */
  .big-flow    { grid-template-columns: 1fr; gap: 12px; }
  .bf-arrow    { display: none; }
  .dpp-css-flow { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .dpp-arrow   { display: none; }
  .dpp-box-group { flex-direction: row; }
  .dpp-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .roadmap     { grid-template-columns: 1fr 1fr; gap: 16px; }
  .dpp-grid    { grid-template-columns: 1fr; }
  .scope-grid  { grid-template-columns: 1fr; }
  /* ESG diagram */
  .esg-cols    { grid-template-columns: 1fr 1fr; gap: 12px; }
  .esg-blockchain .esg-bc-chain { flex-wrap: wrap; gap: 4px; }
  /* SCM diagram */
  .scm-diagram { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .scm-mid-arrows { display: none; }
  .scm-tree { flex-direction: column; align-items: center; }
  .scm-tier { flex-direction: column; align-items: center; }
  /* cycle6 */
  .cycle6 { width: 340px; height: 340px; }
  .c6-item { font-size: 11px; }
  .c6-pill { font-size: 10px; padding: 3px 8px; }
  /* signup */
  .signup-wrap { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   ESG 데이터 취합 다이어그램 (Step01)
   ══════════════════════════════════════════════════════════ */
.esg-diagram {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* 상단 헤더 바 */
.esg-header-bar {
  background: #1a2332;
  color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 14px 24px;
  display: flex; align-items: center;
  letter-spacing: .02em;
}

/* 4열 그리드 */
.esg-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: none;
}
.esg-col {
  border-right: 1.5px solid var(--border);
  display: flex; flex-direction: column;
}
.esg-col:last-child { border-right: none; }

.esg-col-header {
  padding: 12px 16px;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; gap: 6px;
  letter-spacing: .02em;
}
.esg-col-header.green { background: var(--green); color: #fff; }
.esg-col-header.dark  { background: #1a2332; color: #fff; }
.esg-col-header.teal  { background: var(--teal); color: #fff; }

.esg-col-body {
  flex: 1; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
}

/* 카드 */
.esg-card {
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-main);
  position: relative; line-height: 1.4;
  transition: var(--trans);
}
.esg-card:hover { transform: translateX(3px); }
.esg-card i { font-size: 14px; flex-shrink: 0; }
.esg-card.green      { background: var(--green-pale); border: 1.5px solid #b8dda0; }
.esg-card.green i    { color: var(--green); }
.esg-card.dark-border{ background: #f4f7fb; border: 2px solid #1a2332; font-weight: 700; }
.esg-card.gray       { background: #f4f4f6; border: 1.5px solid #dde2ea; color: var(--text-sub); }
.esg-card.teal-border{ background: #e6faf8; border: 2px solid var(--teal); font-weight: 700; }
.esg-card.teal-border i { color: var(--teal); }
.esg-card.co2-card   { padding-right: 44px; }

/* CO2 배지 */
.co2-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--green); color: #fff;
  font-size: 10px; font-weight: 800;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* 수집/요청 버튼 */
.esg-collect-btn {
  margin-top: auto;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; gap: 6px;
  justify-content: center;
  cursor: pointer; transition: var(--trans);
}
.esg-collect-btn.green { background: var(--green-pale); border: 2px solid var(--green); color: #2a7a2a; }
.esg-collect-btn.dark  { background: #eef1f6; border: 2px solid #1a2332; color: #1a2332; }
.esg-collect-btn.goal-btn { background: #1a2332; color: #fff; border-color: #1a2332; }
.esg-collect-btn:hover { filter: brightness(.93); }

/* 블록체인 */
.esg-blockchain {
  background: #f4f7fb;
  border-top: 1.5px solid var(--border);
  padding: 14px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.esg-bc-label {
  font-size: 11px; font-weight: 800; color: var(--text-sub);
  letter-spacing: .1em; text-transform: uppercase;
}
.esg-bc-chain {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.esg-bc-block {
  background: #e0e4ea; color: var(--text-sub);
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
}
.esg-bc-block.genesis { background: #d0d4db; }
.esg-bc-block.active  { background: #d4ede9; color: var(--teal); border: 1.5px solid var(--teal); }
.esg-bc-arrow {
  color: var(--text-light); font-size: 11px;
}
.esg-bc-arrow.dashed { letter-spacing: 2px; font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   SCM 공급망 연계 다이어그램 (Step02)
   ══════════════════════════════════════════════════════════ */
.scm-top-labels {
  display: flex; justify-content: space-between; gap: 24px;
  margin-bottom: 20px;
}
.scm-top-label {
  background: #f4f7fb;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 12px; color: var(--text-sub);
  line-height: 1.6; text-align: center;
  flex: 1;
}

.scm-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 0;
}

/* A기업 */
.scm-company {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scm-biz-icon {
  font-size: 36px; color: var(--blue);
  background: var(--blue-pale); border-radius: 12px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.scm-biz-node {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(27,158,227,.35);
}

/* 양방향 화살표 */
.scm-mid-arrows {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.scm-arrow { font-size: 22px; }
.scm-arrow.right { color: var(--blue); }
.scm-arrow.left  { color: var(--green); }

/* EcoPass 허브 */
.scm-hub {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scm-hub-logo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff;
  border: 2.5px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 16px 24px 14px;
  box-shadow: var(--shadow-lg);
  min-width: 150px;
  transition: var(--trans);
}
.scm-hub-logo:hover { box-shadow: 0 8px 40px rgba(109,190,69,.25); transform: translateY(-2px); }
.scm-hub-img {
  width: 140px; height: auto;
  display: block;
  object-fit: contain;
}
.scm-hub-sub {
  font-size: 11px; font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* 협력사 트리 */
.scm-tree {
  display: flex; gap: 8px; align-items: center;
}
.scm-tier {
  display: flex; flex-direction: column; gap: 8px;
}
.scm-node {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap; text-align: center;
  transition: var(--trans);
}
.scm-node:hover { transform: translateX(3px); }
.scm-node.gray { background: #b0b8c8; color: #fff; }
.scm-node.sm   { font-size: 11px; padding: 6px 12px; background: #c8cfd8; }
.scm-node.xs   { font-size: 10px; padding: 5px 10px; background: #dde2ea; color: var(--text-sub); }

/* 하단 라벨 */
.scm-bot-labels {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 8px;
}
.scm-bot-label {
  font-size: 12px; font-weight: 700; color: var(--green);
  padding: 8px 0; flex: 1; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ════════════════════════════════════════════════════════════
   탄소중립 컨설팅 6단계 순환 다이어그램 (Step04)
   ══════════════════════════════════════════════════════════ */
.cycle6-wrap {
  display: flex; justify-content: center; padding: 40px 0;
}
.cycle6 {
  position: relative;
  width: 580px; height: 580px;
}

/* 외곽 링 */
.cycle6::before {
  content: '';
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 2.5px dashed #c8ddd0;
}

/* 중심 */
.c6-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px; border-radius: 50%;
  background: #fff;
  border: 3px solid #c8ddd0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 14px; font-weight: 800; color: var(--teal);
  line-height: 1.4;
  z-index: 3;
  box-shadow: var(--shadow);
}

/* 각 아이템 공통 */
.c6-item {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; z-index: 2;
  width: 160px;
}

/* 6개 위치 (중심 290,290 / 반경 220) */
.c6-pos-1 { top: 0;    left: 50%; transform: translateX(-50%); }   /* 12시 */
.c6-pos-2 { top: 60px; right: 0; }                                   /* 2시 */
.c6-pos-3 { bottom: 60px; right: 0; }                                /* 4시 */
.c6-pos-4 { bottom: 0; left: 50%; transform: translateX(-50%); }    /* 6시 */
.c6-pos-5 { bottom: 60px; left: 0; }                                 /* 8시 */
.c6-pos-6 { top: 60px; left: 0; }                                    /* 10시 */

/* 아이콘 */
.c6-icon-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: #eef8f3; border: 2px solid #a8d8bc;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--green);
  box-shadow: 0 2px 8px rgba(109,190,69,.2);
}
.c6-pos-3 .c6-icon-wrap,
.c6-pos-4 .c6-icon-wrap { background: #e6faf8; border-color: var(--teal); color: var(--teal); }
.c6-pos-5 .c6-icon-wrap,
.c6-pos-6 .c6-icon-wrap { background: var(--blue-pale); border-color: var(--blue); color: var(--blue); }

/* 번호 */
.c6-num {
  font-size: 22px; font-weight: 900; color: #1a2332;
  line-height: 1;
}

/* 캡슐 필 */
.c6-pill {
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px; font-weight: 800;
  white-space: nowrap;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.c6-pill.green { background: var(--green);  color: #fff; }
.c6-pill.teal  { background: var(--teal);   color: #fff; }
.c6-pill.blue  { background: var(--blue);   color: #fff; }

/* 설명 리스트 */
.c6-desc {
  list-style: none; padding: 0; margin: 0;
  font-size: 10px; color: var(--text-sub); line-height: 1.7;
  text-align: left;
}
.c6-desc li::before { content: '- '; }

/* ════════════════════════════════════════════════════════════
   회원가입 페이지 (Signup)
   ══════════════════════════════════════════════════════════ */
.signup-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px; align-items: start;
}
.signup-box {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
}

/* 진행 단계 */
.signup-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 36px;
}
.su-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 80px;
}
.su-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: #e8edf2; color: var(--text-light);
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: var(--trans);
}
.su-step.active .su-step-num { background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(109,190,69,.4); }
.su-step-label { font-size: 11px; color: var(--text-light); font-weight: 600; }
.su-step.active .su-step-label { color: var(--green); }
.su-step-line {
  flex: 1; height: 2px; background: #e8edf2;
  margin-bottom: 18px; min-width: 40px;
}

/* 패널 제목 */
.su-panel-title {
  font-size: 18px; font-weight: 800; color: var(--text-main);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px;
}
.su-panel-title i { color: var(--green); }

/* 폼 공통 */
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fg label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.fg input, .fg select, .fg textarea {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; font-size: 14px; font-family: inherit;
  color: var(--text-main); background: #fff;
  transition: var(--trans); outline: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(109,190,69,.12);
}
.req { color: #e74c3c; }

/* 인증번호 입력 */
.input-btn-row {
  display: flex; gap: 8px; align-items: stretch;
}
.input-btn-row input { flex: 1; }
.sm-btn {
  padding: 0 14px; font-size: 12px; white-space: nowrap;
  border-radius: var(--radius); border: 1.5px solid var(--green);
  color: var(--green); background: #fff;
  font-weight: 700; cursor: pointer; transition: var(--trans);
}
.sm-btn:hover { background: var(--green); color: #fff; }
.verify-hint { font-size: 12px; margin-top: 4px; }

/* 동의 박스 */
.su-agree-box {
  background: #f8fbf6; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}
.agree-row {
  display: flex; align-items: center; gap: 8px;
}
.agree-row input { width: 16px; height: 16px; accent-color: var(--green); }
.agree-row label { font-size: 13px; color: var(--text-main); cursor: pointer; }
.view-link { color: var(--green); font-size: 11px; }

/* 체크 그룹 */
.su-check-group {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.su-chk-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-main);
  background: #f4f7fb; border: 1.5px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
  cursor: pointer; transition: var(--trans);
}
.su-chk-label:hover { border-color: var(--green); background: var(--green-pale); }
.su-chk-label input { accent-color: var(--green); }

/* 버튼 행 */
.su-btn-row {
  display: flex; gap: 12px; margin-top: 8px;
}
.full-btn { width: 100%; justify-content: center; }

/* 완료 화면 */
.su-complete {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 40px 0; gap: 16px;
}
.su-complete-icon { font-size: 64px; color: var(--green); }
.su-complete h3 { font-size: 22px; font-weight: 800; color: var(--text-main); }
.su-complete p { font-size: 14px; color: var(--text-sub); line-height: 1.7; }
.su-complete-btns { display: flex; gap: 12px; margin-top: 8px; }

/* 우측 혜택 안내 */
.signup-benefits {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow);
}
.signup-benefits h3 {
  font-size: 18px; font-weight: 800; color: var(--text-main);
  margin-bottom: 20px;
}
.sb-list { display: flex; flex-direction: column; gap: 18px; }
.sb-item {
  display: flex; align-items: flex-start; gap: 14px;
}
.sb-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sb-icon.green { background: var(--green-pale); color: var(--green); }
.sb-icon.blue  { background: var(--blue-pale);  color: var(--blue); }
.sb-icon.teal  { background: #e6faf8;            color: var(--teal); }
.sb-item strong { font-size: 14px; font-weight: 700; color: var(--text-main); display: block; margin-bottom: 2px; }
.sb-item p { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin: 0; }
.su-already {
  margin-top: 24px; text-align: center;
  font-size: 13px; color: var(--text-sub);
}
.su-already a { color: var(--green); font-weight: 700; }

}

/* ════════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════════ */
.login-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0faf4 0%, #e8f5e9 50%, #e3f2fd 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.login-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.10);
  padding: 48px 44px 40px;
  width: 100%; max-width: 440px;
}
.login-logo-wrap { text-align: center; margin-bottom: 20px; }
.login-logo { height: 48px; width: auto; }
.login-title {
  text-align: center; font-size: 24px; font-weight: 800;
  color: var(--text-main); margin-bottom: 6px;
}
.login-sub {
  text-align: center; font-size: 14px; color: var(--text-light);
  margin-bottom: 32px;
}

/* 필드 */
.login-field { margin-bottom: 18px; }
.login-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 7px; }
.login-input-wrap { position: relative; display: flex; align-items: center; }
.login-ico {
  position: absolute; left: 14px;
  color: var(--text-light); font-size: 14px; pointer-events: none;
}
.login-input {
  width: 100%; padding: 12px 44px 12px 40px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 14px; color: var(--text-main); background: #fafafa;
  transition: var(--trans); outline: none;
}
.login-input:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(52,168,83,.12); }
.pw-toggle {
  position: absolute; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--text-light); font-size: 14px; padding: 4px;
}
.pw-toggle:hover { color: var(--green); }

/* 옵션 행 */
.login-opts {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.login-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-sub); cursor: pointer; }
.login-remember input { accent-color: var(--green); }
.login-forgot { font-size: 13px; color: var(--green); font-weight: 600; }
.login-forgot:hover { text-decoration: underline; }

/* 에러 */
.login-error {
  min-height: 20px; font-size: 13px; color: #e53935;
  margin-bottom: 12px; text-align: center;
}

/* 로그인 버튼 */
.login-submit-btn {
  width: 100%; padding: 14px;
  background: var(--grad); color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; transition: var(--trans);
}
.login-submit-btn:hover { opacity: .88; transform: translateY(-1px); }

/* 구분선 */
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 20px; color: var(--text-light); font-size: 12px;
}
.login-divider::before,
.login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* 소셜 버튼 */
.login-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.social-btn {
  width: 100%; padding: 12px;
  border-radius: 10px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: var(--trans);
}
.social-ico { width: 18px; height: 18px; flex-shrink: 0; }
.social-btn.kakao { background: #FEE500; color: #3C1E1E; }
.social-btn.kakao:hover { background: #f0d800; }
.social-btn.naver { background: #03C75A; color: #fff; }
.social-btn.naver:hover { background: #02b350; }

/* 회원가입 링크 */
.login-signup-link {
  text-align: center; font-size: 13px; color: var(--text-sub);
}
.login-signup-link a { color: var(--green); font-weight: 700; }
.login-signup-link a:hover { text-decoration: underline; }

/* 반응형 */
@media (max-width: 480px) {
  .login-card { padding: 36px 24px 32px; }
  .login-title { font-size: 20px; }
}