/* CANDO 랜딩 페이지 전용 스타일. 관리자/고객 포털의 --color-* 토큰(variables.css)과는
   완전히 분리된 브랜드다 — 기존 company.aibidcando.com 실측 CSS 변수값을 그대로 옮겼다
   (homepage.md #2 "기존 브랜드 컬러... 최대한 재사용"). */

/* landing.ejs 레이아웃은 partials/styles.ejs(공통 reset)를 로드하지 않으므로
   브라우저 기본 body margin(8px)이 그대로 남아 페이지 가장자리에 여백이 생긴다. */
html, body { margin: 0; padding: 0; width: 100%; }

@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.cando-landing {
  --cando-point-blue: #0079ff;
  --cando-point-blue-bold: #086ad6;
  --cando-title: #000000;
  --cando-text-primary: #2c3449;
  --cando-text-secondary: #656e85;
  --cando-caption: #8d96a9;
  --cando-line: #cbd2dc;
  --cando-fill-primary: #fafafb;
  --cando-fill-secondary: #f1f1f1;
  --cando-white: #ffffff;

  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  color: var(--cando-text-primary);
  background: var(--cando-white);
  /* 한글은 공백 없이도 단어 중간에서 줄바꿈될 수 있어("확인하세" + "요") 좁은 화면에서
     보기 흉하게 잘리는 경우가 있다. 띄어쓰기 단위로만 줄바꿈되도록 강제한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  width: 100%;
  overflow-x: hidden;
}

.cando-landing * { box-sizing: border-box; }
.cando-landing img { max-width: 100%; display: block; }
/* a:not(.cando-btn) - ".cando-landing a"가 타입+클래스 결합으로 .cando-btn류 색상 규칙보다
   명시도가 높아 버튼 글자색을 항상 덮어써버리는 문제가 있었다 (예: 서비스 구독하기 버튼이
   흰색이 아닌 주변 상속색으로 보이던 버그). 버튼은 이 규칙에서 제외한다. */
.cando-landing a { text-decoration: none; }
.cando-landing a:not(.cando-btn) { color: inherit; }
.cando-landing button { font-family: inherit; cursor: pointer; }
.cando-landing section { width: 100%; }

/* ---- Top announcement bar ---- */
.cando-topbar {
  width: 100%;
  height: 44px;
  background: var(--cando-point-blue-bold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 0 16px;
}

/* ---- Header ---- */
.cando-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 72px;
  background: var(--cando-white);
  border-bottom: 1px solid var(--cando-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 70px;
}
.cando-header__logo img { height: 40px; width: auto; }
.cando-header__actions { display: flex; align-items: center; gap: 12px; }
.cando-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--cando-line);
  background: #fff;
  color: var(--cando-text-primary);
  white-space: nowrap;
}
.cando-btn--primary {
  background: var(--cando-point-blue);
  border-color: var(--cando-point-blue);
  color: #fff;
}
.cando-btn--dark {
  background: var(--cando-title);
  border-color: var(--cando-title);
  color: #fff;
}
.cando-btn--block { width: 100%; }
.cando-btn--lg { height: 50px; padding: 0 32px; font-size: 16px; }
.cando-header__menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
}
.cando-header__menu-toggle span,
.cando-header__menu-toggle span::before,
.cando-header__menu-toggle span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cando-title);
  position: relative;
  transition: 0.2s;
}
.cando-header__menu-toggle span::before { position: absolute; top: -7px; }
.cando-header__menu-toggle span::after { position: absolute; top: 7px; }

/* 메뉴가 헤더 높이(72/64px)에 맞춰 top 오프셋을 픽셀로 맞추던 기존 방식은 값이 어긋나면
   메뉴가 다른 콘텐츠와 겹쳐 보이는 문제가 있었다. inset:0 전체화면 오버레이 + 헤더보다
   높은 z-index로 바꿔 항상 최상단에 나오도록 한다. */
.cando-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 100;
  padding: 24px 20px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.cando-mobile-nav.is-open { display: flex; }
.cando-mobile-nav__close {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--cando-title);
  margin-bottom: 8px;
}
.cando-mobile-nav a {
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--cando-fill-secondary);
}

/* 회원가입은 PC에서는 노출하지 않고, 모바일 폭에서만 햄버거 메뉴 안에 표시한다. */
.cando-mobile-nav__mobile-only { display: none; }

/* ---- Hero ---- */
.cando-hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--cando-title);
}
.cando-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* .cando-section과 동일한 max-width:1200px + 좌우 20px 패딩을 그대로 써서
   히어로 텍스트의 왼쪽 시작선이 아래 다른 섹션들의 시작선과 정확히 맞도록 한다. */
.cando-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
}
.cando-hero__overlay {
  text-align: left;
  color: #fff;
  max-width: 640px;
}
.cando-hero__overlay h1 {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 20px;
}
.cando-hero__overlay p {
  font-size: 18px;
  line-height: 1.6;
  color: #f1f1f1;
  margin: 0 0 32px;
}

/* ---- Section shells ---- */
.cando-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.cando-section--fill { background: var(--cando-fill-secondary); }
.cando-section--dark { background: #242424; }
.cando-section__eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: var(--cando-text-secondary);
  text-align: center;
  margin: 0 0 12px;
}
.cando-section__title {
  font-size: 30px;
  font-weight: 600;
  color: var(--cando-title);
  text-align: center;
  line-height: 1.4;
  margin: 0 0 16px;
}
.cando-section__desc {
  font-size: 16px;
  color: var(--cando-text-secondary);
  text-align: center;
  margin: 0 0 40px;
}

/* ---- 캔두만의 기술적 차별성 ---- */
/* 588px 고정폭 2장 + gap이 콘텐츠 실사용폭(1200 - 좌우 padding 40px = 1160px)보다
   커서 flex-wrap이 강제로 줄바꿈되던 문제 - 고정폭 대신 grid 2열 비율로 채운다. */
.cando-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1192px;
  margin: 32px auto 0;
}
.cando-diff-grid__item {
  border-radius: 12px;
  overflow: hidden;
}
.cando-diff-grid__item img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) {
  .cando-diff-grid { grid-template-columns: 1fr; max-width: 335px; }
}

/* ---- Video showcase ---- */
.cando-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.cando-video-card { position: relative; border-radius: 10px; overflow: hidden; background: #000; }
.cando-video-card video { width: 100%; aspect-ratio: 16/9; display: block; }
.cando-video-card__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 6px;
}

/* ---- Service step tabs ---- */
.cando-step-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.cando-step-tabs a {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--cando-line);
  background: #fff;
  color: var(--cando-text-primary);
}
.cando-step-tabs a.is-active {
  background: var(--cando-title);
  border-color: var(--cando-title);
  color: #fff;
}

.cando-step {
  display: flex;
  align-items: center;
  gap: 82px;
  padding: 60px 0;
  border-top: 1px solid var(--cando-fill-secondary);
}
.cando-step:first-of-type { border-top: none; }
.cando-step__text { flex: 1; min-width: 280px; }
.cando-step__eyebrow {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--cando-title);
  margin-bottom: 8px;
}
.cando-step__title {
  font-size: 26px;
  font-weight: 600;
  color: var(--cando-title);
  line-height: 1.4;
  margin: 0 0 16px;
}
.cando-step__desc {
  font-size: 16px;
  color: var(--cando-text-primary);
  line-height: 1.6;
  margin: 0 0 20px;
}
.cando-step__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cando-step__tags span {
  font-size: 13px;
  color: var(--cando-point-blue);
  background: var(--cando-fill-primary);
  border: 1px solid var(--cando-line);
  border-radius: 20px;
  padding: 6px 14px;
}
.cando-step__visual {
  flex: 1;
  min-width: 280px;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cando-fill-secondary);
}
.cando-step__visual img { width: 100%; height: auto; }
.cando-step__visual--stack {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cando-step__visual--stack img {
  border: 1px solid var(--cando-line);
  border-radius: 8px;
}

/* ---- 탐색 서비스: 파란 배경 프레임 안에서 검색 결과가 하나씩 아래에서 위로 올라오는 애니메이션 ---- */
.cando-notify {
  position: relative;
  background: #4472c4;
  aspect-ratio: 3 / 2;
}
.cando-notify__frame {
  position: absolute;
  inset: 10%;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 8%;
  padding: 8%;
}
.cando-notify__pill {
  width: 100%;
  height: auto;
  border: 1px solid var(--cando-line);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cando-notify__pill.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 서비스 안내 이미지 캐러셀 (원본 swiper 대체: transform 슬라이드 + 자동재생 + 드래그) ----
   네이티브 스크롤(scroll-snap + scrollTo smooth)은 브라우저마다 이징이 달라 전환이
   부자연스러웠다. transform: translateX + transition으로 직접 애니메이션해 항상
   오른쪽에서 왼쪽으로 동일하게 슬라이드되도록 한다. */
.cando-carousel { position: relative; padding: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.cando-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  cursor: grab;
  will-change: transform;
  backface-visibility: hidden;
}
.cando-carousel__track.is-dragging { cursor: grabbing; }
.cando-carousel__slide { flex: 0 0 100%; }
.cando-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cando-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.cando-carousel__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.cando-carousel__dots button.is-active { background: #fff; }

/* ---- 어려운 입찰은 이제 그만 배너 ---- */
.cando-banner {
  width: 100%;
  padding: 91px 20px;
  background: url('/images/landing/section08/background.jpg') center center / cover no-repeat #000;
  text-align: center;
}
.cando-banner__inner { max-width: 1200px; margin: 0 auto; }
.cando-banner__logo { width: 133px; height: auto; margin: 0 auto 24px; }
.cando-banner h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}
@media (max-width: 768px) {
  .cando-banner { padding: 60px 20px; }
  .cando-banner h2 { font-size: 22px; line-height: 1.5; }
}

/* ---- 월간/연간 토글 ---- */
/* 버튼마다 border-radius:999px를 따로 주면 알약 두 개가 붙어있는 것처럼 보였다.
   바깥 트랙 하나만 pill 모양으로 둥글리고(overflow:hidden으로 클리핑), 안쪽 절반들은
   각지게 붙여 하나의 스위치처럼 보이게 한다. */
.cando-plan-toggle {
  position: relative;
  display: inline-flex;
  width: 220px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto 32px;
}
.cando-plan-toggle__btn {
  position: relative;
  z-index: 1;
  flex: 1;
  border: none;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--cando-text-primary);
  transition: color 0.2s ease;
}
.cando-plan-toggle__btn.is-active { background: transparent; color: #fff; }
.cando-plan-toggle__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #000;
  transition: transform 0.25s ease;
}
.cando-pricing-wrapper.is-yearly .cando-plan-toggle__indicator {
  transform: translateX(100%);
}

/* ---- Pricing ---- */
.cando-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto 32px;
}
.cando-price-card {
  background: #fff;
  border: 1px solid var(--cando-line);
  border-radius: 12px;
  padding: 32px 24px;
  transition: border-color 0.2s ease;
}
.cando-price-card:hover { border-color: var(--cando-point-blue); }
.cando-price-card--featured { border-color: var(--cando-point-blue); box-shadow: 0 4px 20px rgba(0, 121, 255, 0.12); }
.cando-price-card h3 { font-size: 18px; font-weight: 600; color: var(--cando-title); margin: 0 0 16px; line-height: 1.4; }
.cando-price-card__amount { font-size: 20px; font-weight: 600; color: var(--cando-point-blue); margin-bottom: 20px; }
.cando-price-card__amount small { font-size: 13px; font-weight: 400; color: var(--cando-caption); margin-left: 4px; }

.cando-price-period--yearly { display: none; }
.cando-pricing-wrapper.is-yearly .cando-price-period--monthly { display: none; }
.cando-pricing-wrapper.is-yearly .cando-price-period--yearly { display: inline; }
.cando-price-period__original {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--cando-caption);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.cando-price-period__final { color: var(--cando-point-blue); }
.cando-price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cando-price-card li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cando-text-primary); }
.cando-price-card li img { width: 16px; height: 16px; flex-shrink: 0; }

.cando-pricing-cta { text-align: center; }
.cando-discount-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.cando-discount-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cando-text-primary);
}
.cando-discount-badges img { width: 18px; height: 18px; }

/* ---- 플랜 비교 표 ---- */
.cando-compare {
  max-width: 900px;
  margin: 40px auto 0;
  overflow-x: auto;
  border: 1px solid var(--cando-line);
  border-radius: 12px;
}
.cando-compare table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.cando-compare th,
.cando-compare td {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--cando-fill-secondary);
}
.cando-compare td:first-child { text-align: left; color: var(--cando-text-primary); }
.cando-compare thead th {
  background: var(--cando-fill-primary);
  font-weight: 600;
  color: var(--cando-title);
}
.cando-compare thead th:first-child { text-align: left; }
.cando-compare tbody tr:last-child th,
.cando-compare tbody tr:last-child td { border-bottom: none; }
.cando-compare img { width: 20px; height: 20px; margin: 0 auto; }

/* ---- Dark CTA ---- */
.cando-cta {
  text-align: center;
  color: #fff;
}
.cando-cta h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 32px;
}

/* ---- Footer ---- */
.cando-footer {
  background: #fff;
  border-top: 1px solid var(--cando-line);
  padding: 40px 40px 60px;
}
.cando-footer__inner { max-width: 1200px; margin: 0 auto; }
.cando-footer__links { display: flex; gap: 16px; margin-bottom: 24px; }
.cando-footer__links a { font-size: 14px; color: var(--cando-text-secondary); font-weight: 500; }
.cando-footer__links a strong { color: var(--cando-title); }
.cando-footer__logo { width: 110px; margin-bottom: 20px; }
.cando-footer__info { font-size: 12px; line-height: 1.7; color: var(--cando-text-primary); margin-bottom: 16px; }
.cando-footer__disclaimer { font-size: 12px; color: var(--cando-text-secondary); line-height: 1.6; margin-bottom: 16px; }
.cando-footer__copyright { font-size: 12px; color: var(--cando-caption); }

/* ---- Scroll reveal animation ----
   기본(.cando-reveal)은 아래에서 위로 살짝 떠오르는 fade-up이고,
   방향 수식자로 좌/우에서 날아오거나(--left/--right) 확대되며 나타나는(--zoom)
   효과를 섞어 쓴다. 그룹(.cando-stagger) 안의 자식들은 부모가 보일 때
   nth-child 순서대로 조금씩 지연되어 차례차례 나타난다. */
.cando-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cando-reveal--left { transform: translateX(-44px); }
.cando-reveal--right { transform: translateX(44px); }
.cando-reveal--zoom {
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cando-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.cando-video-grid .cando-reveal:nth-child(2),
.cando-pricing-grid .cando-reveal:nth-child(2),
.cando-diff-grid .cando-reveal:nth-child(2) {
  transition-delay: 0.15s;
}

/* 태그/체크리스트 등 짧은 목록은 부모가 보이는 순간 자식이 하나씩 차례로 튀어 오른다.
   간격이 너무 촘촘하면(80ms) 거의 동시에 보여 순차 효과가 눈에 안 띄므로 넉넉히 벌린다. */
.cando-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.cando-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.cando-stagger > *:nth-child(1) { transition-delay: 0s; }
.cando-stagger > *:nth-child(2) { transition-delay: 0.18s; }
.cando-stagger > *:nth-child(3) { transition-delay: 0.36s; }
.cando-stagger > *:nth-child(4) { transition-delay: 0.54s; }
.cando-stagger > *:nth-child(5) { transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  .cando-reveal,
  .cando-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Legal pages (terms/privacy) ---- */
.cando-legal { max-width: 800px; margin: 0 auto; padding: 60px 20px 100px; }
.cando-legal h1 { font-size: 28px; font-weight: 600; color: var(--cando-title); margin-bottom: 32px; }
.cando-legal h2 { font-size: 17px; font-weight: 600; color: var(--cando-title); margin: 32px 0 12px; }
.cando-legal p { font-size: 14px; line-height: 1.8; color: var(--cando-text-primary); margin: 0 0 8px; white-space: pre-line; }
.cando-legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.cando-legal table th, .cando-legal table td { border: 1px solid var(--cando-line); padding: 10px; text-align: left; }
.cando-legal table th { background: var(--cando-fill-secondary); }
.cando-legal__back { display: inline-block; margin-top: 40px; font-size: 14px; color: var(--cando-point-blue); font-weight: 500; }

/* =========================================================================
   반응형 (homepage.md #30: Desktop 1200+, Tablet 768~1199, Mobile ~767)
   ========================================================================= */
@media (max-width: 1439px) {
  .cando-topbar { display: none; }
}

@media (max-width: 1199px) {
  .cando-header { padding-inline: 24px; }
  .cando-video-grid { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 768px) {
  .cando-header { padding: 0 20px; height: 64px; }
  .cando-header__actions { display: none; }
  .cando-header__menu-toggle { display: flex; }
  .cando-mobile-nav__mobile-only { display: block; }

  .cando-hero { min-height: 520px; padding-inline: 20px; }
  .cando-hero__overlay h1 { font-size: 28px; }
  .cando-hero__overlay p { font-size: 15px; }

  .cando-section { padding: 60px 20px; }
  .cando-section__title { font-size: 24px; }

  .cando-step-tabs { flex-direction: column; }
  .cando-step-tabs a { text-align: center; }

  .cando-step { flex-direction: column; gap: 24px; padding: 40px 0; }
  .cando-step__visual { max-width: 100%; }

  .cando-pricing-grid { grid-template-columns: 1fr; max-width: 360px; }

  /* 플랜 비교 표: 좁은 화면에서 가로 스크롤 없이 한 화면에 보이도록 표를 카드형
     목록으로 재구성한다(마크업은 그대로, thead 숨기고 각 셀을 세로로 쌓은 뒤
     ::before로 열 이름을 라벨처럼 붙인다). */
  .cando-compare { overflow-x: visible; }
  .cando-compare table,
  .cando-compare thead,
  .cando-compare tbody,
  .cando-compare tr,
  .cando-compare th,
  .cando-compare td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .cando-compare thead { display: none; }
  .cando-compare tbody tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cando-fill-secondary);
  }
  .cando-compare tbody tr:last-child { border-bottom: none; }
  .cando-compare td {
    border: none;
    padding: 4px 0;
    text-align: left;
  }
  .cando-compare td:first-child {
    font-weight: 500;
    color: var(--cando-title);
    padding-bottom: 8px;
  }
  .cando-compare td:nth-child(2),
  .cando-compare td:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--cando-text-secondary);
  }
  .cando-compare td:nth-child(2)::before { content: "엔터프라이즈"; }
  .cando-compare td:nth-child(3)::before { content: "AI 입찰 지원"; }
  .cando-compare img { margin: 0; }

  .cando-footer { padding: 40px 20px 60px; }
  .cando-footer__links { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .cando-hero__overlay h1 { font-size: 24px; }
  .cando-btn--lg { width: 100%; }
}