/* ==========================================================
   channeltalk clone — header.css (GNB 72px sticky)
   원본: 채널톡/채널웍스/고객 사례/가격 안내/리소스 + 검색·로그인·CTA
   ========================================================== */

.gnb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.gnb.is-scrolled,
.page-home .gnb { border-bottom-color: var(--line); }
.gnb__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 로고 — TODO: 원본 Channel 로고 대신 자체 제작 플레이스홀더 (로고 복제 금지) */
.gnb__logo { display: inline-flex; align-items: center; gap: 8px; }
.gnb__logotext {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
}

/* 내비 */
.gnb__nav { flex: 1 1 auto; min-width: 0; }
.gnb__list { display: flex; align-items: center; gap: 4px; }
.gnb__item { position: relative; }
.gnb__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-body);
  white-space: nowrap;
}
.gnb__link:hover { background: var(--chip); color: var(--ink); }
.gnb__item.is-active > .gnb__link { color: var(--ink); }
.gnb__item.is-active > .gnb__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.gnb__caret { transition: transform 0.2s var(--ease-out); }
.gnb__item--sub:hover .gnb__caret,
.gnb__item--sub:focus-within .gnb__caret { transform: rotate(180deg); }

/* 드롭다운 패널 */
.gnb__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  min-width: 320px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.gnb__item--sub:hover .gnb__panel,
.gnb__item--sub:focus-within .gnb__panel,
.gnb__item--sub.is-open .gnb__panel {
  display: block;
  animation: ct-dropdown 0.18s var(--ease-out);
}
@keyframes ct-dropdown { from { opacity: 0; transform: translateY(-6px); } }
.gnb__menu {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
}
.gnb__menu:hover { background: var(--chip); }
.gnb__menu strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.gnb__menu span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-sub); }
.gnb__panel--mega { display: none; min-width: 560px; }
.gnb__item--sub:hover .gnb__panel--mega,
.gnb__item--sub:focus-within .gnb__panel--mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gnb__coltitle {
  grid-column: 1 / -1;
  padding: 8px 14px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-cap);
  text-transform: uppercase;
}

/* 유틸 영역 */
.gnb__util { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.gnb__search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-sub);
}
.gnb__search:hover { background: var(--chip); color: var(--ink); }
.gnb__login { padding: 8px 10px; font-size: 15px; font-weight: 600; color: var(--ink-body); }
.gnb__login:hover { color: var(--ink); }

/* 모바일 버거 */
.gnb__burger { display: none; }

@media (max-width: 1024px) {
  .gnb__list { gap: 0; }
  .gnb__link { padding: 10px 10px; font-size: 15px; }
  .gnb__panel--mega { min-width: 480px; }
}
/* 원본 실측: 1024 = PC 내비, 768~900 = 모바일 헤더(로고 + CTA + 검색 아이콘 + 버거, 로그인 숨김) */
@media (max-width: 900px) {
  .gnb__inner { gap: 12px; }
  .gnb__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 10px;
    order: 4;
    position: relative;
    z-index: 102;
  }
  .gnb__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.25s var(--ease-out), opacity 0.2s;
  }
  .gnb.is-open .gnb__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .gnb.is-open .gnb__burger span:nth-child(2) { opacity: 0; }
  .gnb.is-open .gnb__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 전체화면 화이트 메뉴 (원본 MobileMenuModal 패턴)
     주의: .gnb의 backdrop-filter가 fixed 자손의 컨테이닝 블록이 되므로
     bottom:0 대신 height calc로 전체 화면 높이를 잡는다 */
  .gnb__nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    display: none;
    overflow-y: auto;
    background: #fff;
    padding: 8px var(--gutter) 48px;
  }
  .gnb.is-open .gnb__nav { display: block; animation: ct-fadein 0.25s var(--ease-out); }
  .gnb__list { display: block; }
  .gnb__link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    border-radius: 0;
  }
  .gnb__link:hover { background: none; }
  .gnb__item.is-active > .gnb__link::after { display: none; }
  .gnb__caret {
    width: 12px;
    height: 12px;
    transform: rotate(-90deg); /* 원본: 펼침 전 우측 › */
    transition: transform 0.25s var(--ease-out);
  }
  .gnb__item.is-open .gnb__caret,
  .gnb__item:focus-within .gnb__caret { transform: rotate(0deg); }

  /* 서브 패널: 아코디언 — 기본 숨김, is-open(모바일 JS 토글)일 때만 펼침 */
  .gnb__panel,
  .gnb__item--sub:hover .gnb__panel,
  .gnb__item--sub:focus-within .gnb__panel,
  .gnb__panel--mega,
  .gnb__item--sub:hover .gnb__panel--mega,
  .gnb__item--sub:focus-within .gnb__panel--mega { display: none; }
  .gnb__item--sub.is-open .gnb__panel,
  .gnb__item--sub.is-open .gnb__panel--mega {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 14px 8px;
    animation: none;
  }
  .gnb__menu { padding: 10px 12px; }
  .gnb__menu strong { font-size: 15px; }
  .gnb__menu span { font-size: 12px; }
  .gnb__coltitle { padding: 10px 12px 2px; }

  /* 유틸: 검색 아이콘 + CTA는 유지(원본과 동일), 텍스트·로그인은 숨김 */
  .gnb__util { margin-left: auto; order: 3; gap: 8px; position: relative; z-index: 102; }
  .gnb__util .btn--sm { order: 1; padding: 10px 16px; font-size: 14px; }
  .gnb__search { order: 2; padding: 8px; }
  .gnb__search-text { display: none; }
  .gnb__login { display: none; }
}
@media (max-width: 640px) {
  .gnb__util .btn--sm { padding: 9px 12px; font-size: 13px; }
}
/* ==========================================================
   channeltalk clone — footer.css (흰 배경 4컬럼 + 하단 회사정보)
   ========================================================== */

.footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 72px 0 48px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 48px;
}
.footer__brand svg { margin-bottom: 16px; }
.footer__desc { font-size: 14px; color: var(--ink-sub); line-height: 1.7; }
.footer__coltitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer__col li + li { margin-top: 10px; }
.footer__link { font-size: 14px; color: var(--ink-sub); }
.footer__link:hover { color: var(--ink); }

.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.footer__company { font-size: 13px; color: var(--ink-cap); }
.footer__legal { display: flex; gap: 20px; }

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer { padding: 56px 0 40px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================
   channeltalk clone — components.css (전 페이지 공용 모듈)
   ========================================================== */

/* ── 히어로: 제품 페이지 중앙형 ─────────────────────────── */
.phero { padding: 96px 0 72px; text-align: center; }
.phero__title { margin: 0 auto; max-width: 760px; }
.phero__sub { margin: 20px auto 0; max-width: 560px; font-size: 17px; color: var(--ink-sub); }
.phero__cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── 히어로: 홈 좌정렬형 ───────────────────────────────── */
.home-hero { padding: 56px 0 40px; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: center; }
.home-hero__cta { margin-top: 32px; display: flex; gap: 12px; }
.home-hero__note { margin-top: 16px; font-size: 14px; color: var(--ink-cap); }

/* 오로라 그라디언트 목업 (홈·talk 제품 이미지 대체) */
.aurora {
  border-radius: var(--radius-mock);
  padding: 40px;
  background:
    radial-gradient(80% 90% at 12% 8%, rgba(255, 214, 236, 0.9), rgba(255, 214, 236, 0) 60%),
    radial-gradient(70% 80% at 88% 12%, rgba(214, 197, 255, 0.9), rgba(214, 197, 255, 0) 60%),
    radial-gradient(90% 90% at 80% 90%, rgba(198, 233, 255, 0.95), rgba(198, 233, 255, 0) 62%),
    radial-gradient(80% 80% at 18% 88%, rgba(205, 244, 222, 0.9), rgba(205, 244, 222, 0) 58%),
    linear-gradient(135deg, #fdeef7, #eef0ff 55%, #e9f7ff);
}
.aurora--flat { padding: 24px; }

/* ── 로고 컬렉션 ───────────────────────────────────────── */
.logorow__label { text-align: center; font-size: 14px; color: var(--ink-cap); margin-bottom: 28px; }
.logorow__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 24px;
  align-items: center;
  justify-items: center;
}
/* 원본 LogoReel/LogoMarquee 패턴 — 무한 마퀴 (hover 시 정지) */
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: ct-marquee 32s linear infinite;
}
.marquee__set { display: flex; align-items: center; gap: 24px; padding-right: 24px; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes ct-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.38);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  filter: grayscale(1);
  white-space: nowrap;
}
.logo-chip::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.7;
}

/* ── 인트로 밴드 (민트 신제품 배너 등) ───────────────────── */
.band {
  border-radius: var(--radius-card);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.band--mint { background: var(--mint); color: #06342a; }
.band__title { font-size: 24px; font-weight: 700; color: inherit; }
.band__title em { font-style: normal; color: var(--mint-deep); }
.band__desc { margin-top: 8px; font-size: 15px; color: inherit; opacity: 0.75; }
.band .btn { flex: 0 0 auto; }

/* ── 섹션 헤드 + 아이콘 탭 행 ──────────────────────────── */
.icontabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.icontabs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-sub);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.icontabs__item:hover { background: var(--chip-strong); color: var(--ink); }
.icontabs__item.is-on { background: var(--pill-dark); color: #fff; }
.icontabs__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* ── 대화(챗) 데모 모형 ─────────────────────────────────── */
.chatbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-mock);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.06);
}
.chatbox__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-body);
}
.chatbox__head::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lavender-2);
}
.bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.bubble + .bubble { margin-top: 10px; }
.bubble--bot { background: var(--chip); color: var(--ink-body); border-top-left-radius: 4px; }
.bubble--user { margin-left: auto; background: var(--indigo-deep); color: #fff; border-top-right-radius: 4px; }
.bubble--ai { background: #efe9ff; color: #3a2380; border-top-left-radius: 4px; }

/* ── 폰 목업 ───────────────────────────────────────────── */
.phone {
  width: min(320px, 100%);
  margin: 0 auto;
  border: 10px solid #101014;
  border-radius: 40px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14);
}
.phone__notch { height: 24px; display: flex; justify-content: center; align-items: flex-end; }
.phone__notch::before { content: ""; width: 90px; height: 14px; border-radius: 0 0 12px 12px; background: #101014; }
.phone__body { padding: 16px; }

/* ── 대시보드 목업 ─────────────────────────────────────── */
.mockapp {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-mock);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}
.mockapp__bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.mockapp__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.12); }
.mockapp__layout { display: grid; grid-template-columns: 160px 1fr; min-height: 340px; }
.mockapp__side { border-right: 1px solid var(--line); padding: 16px 12px; }
.mockapp__side i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--chip-strong);
  margin: 12px 8px;
}
.mockapp__side i:first-child { width: 60%; background: var(--lavender-2); }
.mockapp__main { padding: 20px; }
.mockapp__main .row { display: flex; gap: 12px; margin-bottom: 12px; }
.mockapp__main .row i {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  background: var(--chip);
}
.skel { display: block; height: 12px; border-radius: 6px; background: var(--chip-strong); }
.skel--60 { width: 60%; }
.skel--40 { width: 40%; }
.skel--80 { width: 80%; }
.skel + .skel { margin-top: 10px; }

/* ── 차트/산키 목업 ────────────────────────────────────── */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 4%;
  height: 260px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-mock);
}
.chart i { flex: 1; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--lavender-2), var(--blue-soft)); }
.chart i:nth-child(2) { height: 64%; }
.chart i:nth-child(3) { height: 38%; }
.chart i:nth-child(4) { height: 52%; }
.chart i:nth-child(5) { height: 28%; }
.chart i:first-child { height: 100%; }

/* ── 통계 밴드 ─────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stats__num { font-size: 48px; font-weight: 700; letter-spacing: -1px; color: var(--ink); }
.stats__label { margin-top: 8px; font-size: 15px; color: var(--ink-sub); }

/* ── 고객사례 모듈 (홈·talk): 탭↔캐러셀 양방향 동기화 ── */
.case { text-align: center; }
.case__lead { max-width: 640px; margin: 16px auto 0; }
.case__tabsrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 40px auto 32px;
}
.case__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  max-width: 100%;
}
.case__tab { padding: 9px 20px; border-radius: var(--radius-pill); font-size: 15px; color: var(--ink-sub); cursor: pointer; transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
.case__tab:hover { color: var(--ink); }
.case__tab.is-on { background: var(--pill-dark); color: #fff; font-weight: 600; }
.case__all { font-size: 15px; font-weight: 600; color: var(--ink-body); white-space: nowrap; }
.case__all:hover { color: var(--ink); }
.case__carousel { position: relative; overflow: hidden; border-radius: var(--radius-mock); }
.case__track {
  display: flex;
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}
.case__slide { flex: 0 0 100%; min-width: 0; display: flex; }
.case__slide .case__card { flex: 1 1 auto; width: 100%; }
.case__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.case__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.case__arrow--prev { left: 20px; }
.case__arrow--next { right: 20px; }
.case__card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: #111114;
  color: #fff;
  text-align: left;
}
.case__slide .case__card { overflow: hidden; }
.case__stat { padding: 48px 56px 48px 96px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.case__brand { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); }
.case__num { font-size: 64px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.case__numlabel { font-size: 16px; color: rgba(255, 255, 255, 0.75); }
.case__quote { margin-top: 16px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.case__who { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.case__detail { margin-top: 8px; font-size: 15px; font-weight: 600; color: #fff; }
.case__detail i { font-style: normal; margin-left: 4px; }
.case__photo {
  min-height: 420px;
  background:
    radial-gradient(60% 70% at 50% 42%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #3c3c46, #1c1c22 70%);
  position: relative;
}
.case__photo--2 { background: radial-gradient(60% 70% at 50% 42%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #46333f, #221a1e 70%); }
.case__photo--3 { background: radial-gradient(60% 70% at 50% 42%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #2f3c46, #161d22 70%); }
.case__photo--4 { background: radial-gradient(60% 70% at 50% 42%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #3a4633, #1b2216 70%); }
.case__photo--5 { background: radial-gradient(60% 70% at 50% 42%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #463a2f, #221b16 70%); }
.case__photo--6 { background: radial-gradient(60% 70% at 50% 42%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #463347, #221622 70%); }
.case__photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 55%;
  height: 62%;
  border-radius: 46% 46% 0 0;
  background: rgba(255, 255, 255, 0.14);
}
.case__more { margin-top: 32px; }

/* ── CTA 밴드 ──────────────────────────────────────────── */
.ctaband {
  border-radius: var(--radius-mock);
  background: var(--paper-warm);
  padding: 72px 48px;
  text-align: center;
}
.ctaband--dark { background: var(--pill-dark); color: #fff; }
.ctaband--dark .h2 { color: #fff; }
.ctaband__sub { margin-top: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.7); }
.ctaband .btn { margin-top: 32px; }
.ctaband__sub--ink { color: var(--ink-sub); }

/* ── 아코디언 FAQ ──────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; }
.faq .faq-item { border-bottom: 1px solid var(--line); }
.faq .faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 4px;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}
.faq .faq__q:hover { color: var(--pill-dark-hover); }
.faq .faq__q::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-sub);
  line-height: 1;
}
.faq .faq-item.is-open .faq__q::after { content: "–"; }
.faq__body { display: none; padding: 0 4px 22px; font-size: 15px; color: var(--ink-sub); line-height: 1.7; }
.faq .faq-item.is-open .faq__body { display: block; animation: ct-fadein 0.28s var(--ease-out); }
@keyframes ct-fadein { from { opacity: 0; transform: translateY(-4px); } }

/* ── 요금 비교표 ───────────────────────────────────────── */
.ptable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); }
.ptable { min-width: 880px; background: #fff; }
.ptable th, .ptable td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-body);
}
.ptable thead th { padding: 24px 18px; vertical-align: top; }
.ptable tbody th { text-align: left; font-weight: 500; color: var(--ink-sub); background: var(--gray-soft); }
.ptable thead th:first-child, .ptable tbody th { width: 220px; }
.ptable .plan-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.ptable .plan-price { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.ptable .plan-note { margin-top: 4px; font-size: 12px; color: var(--ink-cap); }
.ptable .is { color: var(--mint-deep); font-weight: 700; }
.ptable .no { color: var(--ink-cap); }
/* 원본처럼 좁은 폭에서도 전체 열을 뷰포트 안에 표시 (가로 스크롤 대신 압축) */
@media (max-width: 640px) {
  .ptable-wrap { overflow-x: visible; }
  .ptable { min-width: 0; }
  .ptable th, .ptable td { padding: 10px 6px; font-size: 12px; line-height: 1.45; word-break: break-all; }
  .ptable thead th { padding: 12px 6px; }
  .ptable thead th:first-child, .ptable tbody th { width: auto; min-width: 64px; }
  .ptable .plan-name { font-size: 13px; }
  .ptable .plan-price { font-size: 14px; margin-top: 4px; }
  .ptable .plan-note { display: none; }
}

/* ── 요금제 카드 (그로스 플랜) ──────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan {
  border-radius: var(--radius-card);
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.plan--hl { background: var(--mint); border-color: transparent; }
.plan__name { font-size: 18px; font-weight: 700; color: var(--ink); }
.plan__price { margin-top: 12px; font-size: 32px; font-weight: 700; letter-spacing: -1px; color: var(--ink); }
.plan__price small { font-size: 14px; font-weight: 500; color: var(--ink-sub); letter-spacing: 0; }
.plan__desc { margin-top: 12px; font-size: 14px; color: var(--ink-sub); }
.plan ul { margin-top: 20px; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-body); }
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint-deep);
  opacity: 0.85;
}
.plan .btn { margin-top: 28px; }

/* ── 계산기 박스 ───────────────────────────────────────── */
.calcbox {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px;
  text-align: center;
}
.calcbox__num { font-size: 44px; font-weight: 700; letter-spacing: -1px; color: var(--ink); }
.calcbox__row { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ── 전문가/팀/파트너 카드 ─────────────────────────────── */
.person {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
}
.person__photo {
  height: 220px;
  background:
    radial-gradient(56% 60% at 50% 44%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 70%),
    linear-gradient(150deg, var(--blue-pale), #fff 70%);
  position: relative;
}
.person__photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
}
.person__body { padding: 20px 24px 24px; }
.person__name { font-size: 17px; font-weight: 700; color: var(--ink); }
.person__role { margin-top: 4px; font-size: 13px; color: var(--ink-sub); }

/* ── 다운로드 카드 ─────────────────────────────────────── */
.dlcard {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 48px 40px;
  background: #fff;
}
.dlcard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }

/* ── 문서 페이지 (privacy/terms) ────────────────────────── */
.doc { max-width: 760px; margin: 0 auto; }
.doc h2 { font-size: 24px; margin: 48px 0 16px; }
.doc h3 { font-size: 18px; margin: 32px 0 12px; }
.doc p, .doc li { font-size: 15px; line-height: 1.8; color: var(--ink-body); }
.doc p + p { margin-top: 12px; }
.doc ul { list-style: disc; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc table { margin: 16px 0; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }

/* ── 탭 (라디오 방식) ──────────────────────────────────── */
.tabs__radios { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tabs__tab {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-sub);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-sub);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.tabs__tab:hover { background: var(--chip-strong); color: var(--ink); }
.tabs__tab.is-on { background: var(--pill-dark); color: #fff; }
.tabs__panel.is-active { display: block; }
.tabs__panel { display: none; margin-top: 48px; }

@media (max-width: 1024px) {
  .logorow__grid { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; }
  .home-hero__grid { grid-template-columns: 1fr; }
  .case__card { grid-template-columns: 1fr; }
  .mockapp__layout { grid-template-columns: 120px 1fr; }
}
@media (max-width: 768px) {
  .logorow__grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 40px; }
  .stats__num { font-size: 36px; }
  .case__num { font-size: 48px; }
  .case__stat { padding: 32px; }
  .band { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .calcbox { padding: 28px 20px; }
  .dlcard__grid { grid-template-columns: 1fr; }
  .phero { padding: 64px 0 48px; }
}
/* ==========================================================
   channeltalk clone — pages.css (페이지별 섹션)
   ========================================================== */

/* ── home ─────────────────────────────────────────────── */
.pg-home .home-hero { background: #fff; }
.pg-home .introband-mint { padding: 24px 0; }
.pg-home .works-tabs { text-align: center; }

/* 체험 데모 (원본 AiBuilderSection: 좌 헤딩·입력 위젯 / 우 오렌지 그라디언트 폰) */
.eyebrow { font-size: 14px; color: var(--ink-sub); margin: 0 0 14px; }
.demosec {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}
.demosec__title { margin-bottom: 28px; }
.demoinput {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 420px;
  padding: 6px 6px 6px 22px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(100deg, #c9b8ff, #b8d4ff 60%, #d9e4ff) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(94, 59, 238, 0.08);
}
.demoinput__ph { font-size: 14px; color: var(--ink-cap); }
.demoinput__btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pill-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.demochips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.demochips__label { font-size: 13px; color: var(--ink-cap); }
.demochip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  font-size: 13px;
  color: var(--ink-sub);
}
.demosec__visual {
  border-radius: 32px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 48px;
  background:
    radial-gradient(80% 90% at 82% 6%, rgba(217, 74, 40, 0.85), rgba(217, 74, 40, 0) 58%),
    radial-gradient(70% 80% at 100% 45%, rgba(240, 130, 84, 0.7), rgba(240, 130, 84, 0) 60%),
    radial-gradient(90% 80% at 20% 100%, rgba(247, 233, 220, 0.95), rgba(247, 233, 220, 0) 70%),
    linear-gradient(160deg, #f3e3d6, #fbe9dd 55%, #f6f0e8);
}
.demophone {
  width: min(320px, 88%);
  margin-bottom: -2px;
  border: 10px solid #23233c;
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  background: #fdf9f3;
  box-shadow: 0 30px 60px rgba(90, 30, 10, 0.18);
}
.demophone__url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(240px, 80%);
  margin: -6px auto 16px;
  padding: 9px 0;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-body);
}
.demophone__screen { padding: 0 22px 28px; }
.demophone__screen .skel { background: rgba(0, 0, 0, 0.07); }

/* 이유 섹션 (원본 ReasonsSection: 2단 헤드 + 목업 카드 3장, 제목은 카드 아래) */
.whyhead {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}
.whyhead__side { padding-top: 8px; }
.mockgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mockcard {
  margin: 0;
  border-radius: var(--radius-card);
  background: var(--paper-warm);
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mockcard__ui {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  min-height: 300px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.mockrule { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mockrule + .mockrule, .mockrule + .mockrule--plain { margin-top: 10px; }
.mockrule__title { font-size: 13px; font-weight: 700; color: var(--ink); }
.mockrule__desc { font-size: 11px; color: var(--ink-sub); margin-top: 4px; }
.mockrule__hl {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #e5f6ec;
  color: var(--mint-deep);
  font-size: 11px;
  font-weight: 600;
}
.mockrule--plain { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-body); }
.mockrule--plain i { font-style: normal; color: var(--ink-cap); }
.mocktable { font-size: 11px; color: var(--ink-body); }
.mocktable__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.mocktable__row--head { color: var(--ink-cap); font-weight: 600; border-bottom-width: 1px; }
.mocktable__row em { font-style: normal; font-weight: 600; color: var(--mint-deep); }
.mockcard__ui--flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.mockflow__node {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--blue-pale);
  font-size: 11px;
  font-weight: 600;
  color: #3a4a8a;
}
.mockflow__node--alt { background: var(--mint); color: var(--mint-deep); }
.mockflow__link { width: 18px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.12); }
.mockcard__title { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
@media (max-width: 1024px) {
  .demosec { grid-template-columns: 1fr; }
  .whyhead { grid-template-columns: 1fr; gap: 24px; }
  .mockgrid { grid-template-columns: 1fr; }
  .demosec__visual { min-height: 340px; }
}

/* ── 제품 페이지 공통: 히어로 아래 아우라 모형 배치 ────── */
.phero-visual { margin-top: 56px; }

/* ── talk: 산키/통계 ──────────────────────────────────── */
.pg-talk .sankey-note { text-align: center; margin-top: 24px; }

/* ── workflow: 딥 인디고 히어로 ────────────────────────── */
.pg-workflow .hero-dark {
  background:
    radial-gradient(70% 90% at 80% 10%, rgba(211, 167, 255, 0.35), rgba(211, 167, 255, 0) 60%),
    var(--indigo-deep);
  border-radius: 0 0 40px 40px;
  color: #fff;
  padding: 96px 0 120px;
}
/* 원본 실측: workflow 히어로 54px(≥1024) · 48px(768) · 34px(≤480) */
.pg-workflow .hero-dark .h1-page { color: #fff; font-size: 54px; line-height: 1.25; letter-spacing: -1px; }
.pg-workflow .hero-dark .h2 { color: #fff; }
.pg-workflow .hero-dark .sub { color: rgba(255, 255, 255, 0.72); }
.pg-workflow .accent-soft { background: var(--blue-pale); border-radius: var(--radius-mock); }
.pg-workflow .accent-lav { background: var(--lavender); border-radius: var(--radius-mock); }

/* ── meet-call ────────────────────────────────────────── */
.pg-meet-call .sec-blue { background: var(--blue-pale); border-radius: var(--radius-mock); }
.pg-meet-call .sec-gray { background: var(--gray-soft); border-radius: var(--radius-mock); }
.pg-meet-call .accent-lav { background: var(--lavender-2); border-radius: var(--radius-mock); }

/* ── cos · smallbiz: 웜 그레이 ─────────────────────────── */
.pg-cos .sec-warm, .pg-smallbiz .sec-warm {
  background: var(--paper-warm);
  border-radius: var(--radius-mock);
}
.pg-cos .accent-peri { background: var(--periwinkle); border-radius: var(--radius-mock); }

/* ── enterprise · partner · documents: 블루 포인트 ─────── */
.pg-enterprise .hero-blue, .pg-partner .hero-blue, .pg-documents .sec-blue {
  background: linear-gradient(160deg, var(--blue-soft), #6f8bef);
  border-radius: 0 0 40px 40px;
  color: #fff;
  padding: 88px 0 104px;
}
.pg-enterprise .hero-blue .h1-page, .pg-partner .hero-blue .h1-page { color: #fff; }
.pg-enterprise .hero-blue .sub, .pg-partner .hero-blue .sub { color: rgba(255, 255, 255, 0.8); }

/* ── next: 매니페스토 ─────────────────────────────────── */
.pg-next .manifesto { max-width: 720px; margin: 0 auto; text-align: center; }
.pg-next .manifesto p { font-size: 22px; line-height: 1.75; font-weight: 500; color: var(--ink); margin-top: 28px; }
.pg-next .manifesto p small { display: block; margin-top: 12px; font-size: 15px; font-weight: 400; color: var(--ink-sub); }

/* ── team ─────────────────────────────────────────────── */
.pg-team .valuegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-team .valuecard {
  border-radius: var(--radius-card);
  padding: 36px 32px;
  background: var(--paper-warm);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pg-team .valuecard:nth-child(2n) { background: var(--blue-pale); }
.pg-team .valuecard:nth-child(3n) { background: var(--mint); }

/* 일하는 방식 카드 (클릭 시 모달) */
.pg-team .culturegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-team .culturecard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  padding: 0;
  text-align: left;
  display: block;
}
.pg-team .culturecard__visual {
  display: block;
  height: 260px;
  background:
    radial-gradient(70% 80% at 50% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, #2b2b33, #101014 72%);
  transition: transform 0.35s var(--ease-out);
}
.pg-team .culturecard__visual--2 { background: linear-gradient(150deg, #3a2b5e, #17102a 72%); }
.pg-team .culturecard__visual--3 { background: linear-gradient(150deg, #1f3a5e, #0f1a2a 72%); }
.pg-team .culturecard:hover .culturecard__visual { transform: scale(1.03); }
.pg-team .culturecard__label {
  position: absolute;
  left: 24px;
  bottom: 20px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.pg-team .culturecard__open {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease-out);
}
.pg-team .culturecard:hover .culturecard__open { background: rgba(255, 255, 255, 0.32); }

/* 철학 모달 (원본: 다크 패널 + X 버튼) */
.culturemodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.55);
}
.culturemodal.is-open { display: flex; animation: ct-fadein 0.25s var(--ease-out); }
.culturemodal__panel {
  position: relative;
  width: min(1040px, 100%);
  border-radius: var(--radius-mock);
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 32%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 72%),
    linear-gradient(160deg, #26262e, #0c0c10 75%);
  color: #fff;
  padding: 96px 64px;
  text-align: center;
  animation: ct-modalup 0.3s var(--ease-out);
}
@keyframes ct-modalup { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
.culturemodal__title { font-size: 40px; font-weight: 700; letter-spacing: -1px; color: #fff; }
.culturemodal__body { margin: 24px auto 0; max-width: 620px; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); }
.culturemodal__close {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease-out);
}
.culturemodal__close:hover { background: rgba(255, 255, 255, 0.28); }

/* 우측 끝에 걸치는 블로그 캐러셀 (원본 /kr/team 하단: 카드 514×380, 간격 16, 우측 블리드) */
.bleedsec { padding: 96px 0 120px; }
.bleedsec__head {
  max-width: 1265px;
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.bleedcar__nav { display: flex; gap: 8px; }
.bleedcar__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), opacity 0.2s;
}
.bleedcar__arrow:hover { background: var(--chip); color: var(--ink); }
.bleedcar__arrow[disabled] { opacity: 0.35; cursor: default; }
.bleedcar { overflow: hidden; }
.bleedcar__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-left: max(var(--gutter), calc((100vw - 1265px) / 2 + var(--gutter)));
  /* 우측은 컨테이너를 넘어 뷰포트 끝까지 — 원본과 동일한 블리드 */
}
.bleedcar__track::-webkit-scrollbar { display: none; }
.bleedcard {
  position: relative;
  flex: 0 0 auto;
  width: min(514px, 82vw);
  height: 380px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 72%),
    linear-gradient(150deg, #3d3d47, #15151b 74%);
}
.bleedcard__photo { position: absolute; inset: 0; transition: transform 0.35s var(--ease-out); }
.bleedcard__photo--2 { background: linear-gradient(150deg, #2c3a52, #101722 74%); }
.bleedcard__photo--3 { background: linear-gradient(150deg, #4a3d2c, #1c1710 74%); }
.bleedcard__photo--4 { background: linear-gradient(150deg, #2c5240, #101c16 74%); }
.bleedcard:hover .bleedcard__photo { transform: scale(1.04); }
.bleedcard__tag {
  position: absolute;
  left: 24px;
  bottom: 64px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.bleedcard__title {
  position: absolute;
  left: 24px;
  right: 64px;
  bottom: 20px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.bleedcard::after {
  content: "↗";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
@media (max-width: 768px) {
  .pg-team .culturegrid { grid-template-columns: 1fr; }
  .culturemodal__panel { padding: 64px 28px; }
  .culturemodal__title { font-size: 28px; }
  .bleedsec { padding: 64px 0 80px; }
  .bleedcard { width: 82vw; height: 300px; }
  .bleedcard__title { font-size: 19px; }
}

/* ── careers ──────────────────────────────────────────── */
.pg-careers .joblist { border-top: 1px solid var(--line); }
.pg-careers .job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--line);
}
.pg-careers .job__title { font-size: 17px; font-weight: 600; color: var(--ink); }
.pg-careers .job__meta { font-size: 14px; color: var(--ink-sub); }
.pg-careers .perkgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ── pricing ──────────────────────────────────────────── */
.pg-pricing .sec-mint { background: var(--mint); border-radius: var(--radius-mock); }
.pg-pricing .sec-orange { background: #fdf3e7; border-radius: var(--radius-mock); }
.pg-pricing .svcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* 원본 실측: pricing 히어로 48px(≥1024) · 42px(768) · 32px(≤480) */
.pg-pricing .phero .h1-page { font-size: 48px; line-height: 1.3; }
@media (max-width: 768px) { .pg-pricing .phero .h1-page { font-size: 42px; } }
@media (max-width: 480px) { .pg-pricing .phero .h1-page { font-size: 32px; } }
.pg-pricing .toggle {
  display: inline-flex;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  gap: 4px;
}
.pg-pricing .toggle span { padding: 8px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-sub); }
.pg-pricing .toggle .is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }

/* ── pricing-simulator ────────────────────────────────── */
.pg-pricing-simulator .simwrap { background: var(--gray-soft); border-radius: var(--radius-mock); padding: 64px 32px; }

/* ── experts: 다크 인디고/퍼플 그라디언트 히어로 + 필터 사이드바 ── */
.pg-experts .hero-grad {
  background:
    radial-gradient(80% 100% at 20% 0%, rgba(148, 84, 245, 0.55), rgba(148, 84, 245, 0) 62%),
    radial-gradient(80% 100% at 85% 90%, rgba(94, 59, 238, 0.5), rgba(94, 59, 238, 0) 60%),
    linear-gradient(150deg, #2b1e6e, #443399 55%, #6d55c9);
  color: #fff;
  padding: 88px 0 96px;
}
.pg-experts .hero-grad .h1-page { color: #fff; }
.pg-experts .hero-grad .sub { color: rgba(255, 255, 255, 0.78); }
.pg-experts .processgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: -64px; position: relative; z-index: 2; }
.pg-experts .processtwin {
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.pg-experts .expertlayout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.pg-experts .expertfilter {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  background: #fff;
}
.pg-experts .expertfilter .filtertitle { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.pg-experts .expertfilter label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-sub);
  padding: 6px 0;
}
.pg-experts .expertfilter .cbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #fff;
  flex: none;
  position: relative;
}
.pg-experts .expertfilter .cbox.is-on { background: #5e3bee; border-color: #5e3bee; }
.pg-experts .expertfilter .cbox.is-on::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pg-experts .expertfilter .rangebar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #5e3bee 0 60%, rgba(0, 0, 0, 0.1) 60%);
  margin: 14px 0 8px;
}
.pg-experts .expertgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .pg-experts .expertlayout { grid-template-columns: 1fr; }
  .pg-experts .expertfilter { position: static; }
  .pg-experts .expertgrid { grid-template-columns: 1fr 1fr; }
  .pg-experts .processgrid { grid-template-columns: 1fr; }
}

/* ── wechat ───────────────────────────────────────────── */
.pg-wechat .sec-gray { background: rgba(0, 0, 0, 0.03); border-radius: var(--radius-mock); }

/* ── team-chat: 민트 톤 히어로 (원본 실측) ─────────────── */
.pg-team-chat .phero {
  background: linear-gradient(180deg, #e7f8f1 0%, #f4fbf8 70%, #fff 100%);
  border-radius: 0 0 32px 32px;
}

/* ── alf-team: 비비드 그라디언트 히어로 (원본 실측: 오렌지→핑크→블루) ── */
.pg-alf-team .hero-vivid {
  background: linear-gradient(120deg, #ffb37a 0%, #ff8fb0 38%, #b9a6ff 70%, #9fd0ff 100%);
  border-radius: 0 0 40px 40px;
  color: #fff;
  padding: 88px 0 104px;
}
.pg-alf-team .hero-vivid .h1-page { color: #fff; text-shadow: 0 2px 24px rgba(120, 60, 40, 0.18); }
.pg-alf-team .hero-vivid .sub { color: rgba(255, 255, 255, 0.9); }
.pg-alf-team .hero-vivid .badge { background: rgba(255, 255, 255, 0.24); color: #fff; }
.pg-alf-team .darkpair .card { background: #15151b; border: 1px solid rgba(255, 255, 255, 0.08); }
.pg-alf-team .darkpair .card__title { color: #fff; }
.pg-alf-team .darkpair .card__desc { color: rgba(255, 255, 255, 0.6); }

/* ── meet-call: 다크 네이비 섹션 (원본 중반부 실측) ─────── */
.pg-meet-call .sec-navy {
  background: #101225;
  border-radius: var(--radius-mock);
  padding: 64px 48px;
}
.pg-meet-call .sec-navy .h2, .pg-meet-call .sec-navy .h3 { color: #fff; }
.pg-meet-call .sec-navy .sub { color: rgba(255, 255, 255, 0.65); }
.pg-meet-call .sec-navy .card { background: #1b1b2c; border: 1px solid rgba(255, 255, 255, 0.08); }
.pg-meet-call .sec-navy .card__title { color: #fff; }
.pg-meet-call .sec-navy .card__desc { color: rgba(255, 255, 255, 0.6); }

/* ── user-chat · team-chat · alf-* · marketing · works · documents 공통 기능 그리드 */
.pg-user-chat .bignum { font-size: 40px; font-weight: 700; letter-spacing: -1px; color: var(--ink); }

/* ── marketing: 오렌지 그라디언트 배너 + 오렌지 액센트 ── */
.pg-marketing .hero-orange {
  border-radius: var(--radius-mock);
  color: #fff;
  padding: 88px 48px;
  text-align: center;
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(255, 176, 92, 0.55), rgba(255, 176, 92, 0) 60%),
    radial-gradient(90% 120% at 85% 100%, rgba(255, 122, 89, 0.5), rgba(255, 122, 89, 0) 60%),
    linear-gradient(135deg, #ff9d5c, #ff7a50 55%, #f4582e);
}
.pg-marketing .hero-orange .h1-page { color: #fff; }
.pg-marketing .hero-orange .sub { color: rgba(255, 255, 255, 0.85); }
.pg-marketing .accent-orange { background: #fff1e8; border-radius: var(--radius-card); }

/* ── alf-customer: 블랙 + 퍼플 다크 테마 ── */
.pg-alf-customer .hero-darkpurple {
  background:
    radial-gradient(70% 90% at 78% 8%, rgba(148, 84, 245, 0.5), rgba(148, 84, 245, 0) 62%),
    radial-gradient(60% 70% at 12% 90%, rgba(94, 59, 238, 0.35), rgba(94, 59, 238, 0) 60%),
    #0c0c10;
  border-radius: 0 0 40px 40px;
  color: #fff;
  padding: 88px 0 110px;
}
.pg-alf-customer .hero-darkpurple .h1-page { color: #fff; }
.pg-alf-customer .hero-darkpurple .sub { color: rgba(255, 255, 255, 0.72); }
.pg-alf-customer .hero-darkpurple .badge { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pg-alf-customer .sec-black {
  background: #0c0c10;
  border-radius: var(--radius-mock);
  color: #fff;
}
.pg-alf-customer .sec-black .h2, .pg-alf-customer .sec-black .h3 { color: #fff; }
.pg-alf-customer .sec-black .sub { color: rgba(255, 255, 255, 0.65); }
.pg-alf-customer .rag-card {
  border-radius: var(--radius-card);
  color: #2a1258;
  padding: 36px 32px;
  background: linear-gradient(135deg, #e7d5ff, #c9b2ff 55%, #b18cff);
}

/* ── next: 블랙 매니페스토 ── */
body.pg-next { background: #0a0a0c; }
.pg-next .gnb { background: #0a0a0c; border-bottom: 0; }
.pg-next .gnb__logotext, .pg-next .gnb__link, .pg-next .gnb__login, .pg-next .gnb__search { color: rgba(255, 255, 255, 0.85); }
.pg-next .gnb__link:hover, .pg-next .gnb__search:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pg-next .hero-black {
  background: #0a0a0c;
  color: #fff;
  padding: 120px 0 96px;
}
.pg-next .hero-black .h2, .pg-next .hero-black .h3 { color: #fff; }
.pg-next .hero-black p { color: rgba(255, 255, 255, 0.72); }
.pg-next .chiprow { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.pg-next .chiprow span {
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pg-next .sec-black {
  background: #0a0a0c;
  color: #fff;
}
.pg-next .sec-black .h2, .pg-next .sec-black .h3 { color: #fff; }
.pg-next .sec-black .sub { color: rgba(255, 255, 255, 0.65); }
.pg-next .footer { background: #0a0a0c; border-top-color: rgba(255, 255, 255, 0.1); }
.pg-next .footer__coltitle, .pg-next .footer__link:hover { color: #fff; }
.pg-next .footer__link, .pg-next .footer__desc, .pg-next .footer__company { color: rgba(255, 255, 255, 0.55); }

/* ── workflow: Coming soon 다크 네이비 그리드 ── */
.pg-workflow .soon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: #0e1440;
  border-radius: var(--radius-mock);
  padding: 40px;
}
.pg-workflow .soon-grid .card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
.pg-workflow .soon-grid .card__title { color: #fff; }
.pg-workflow .soon-grid .card__desc { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 1024px) {
  .pg-team .valuegrid { grid-template-columns: 1fr 1fr; }
  .pg-careers .perkgrid, .pg-pricing .svcgrid, .pg-experts .expertgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pg-team .valuegrid,
  .pg-careers .perkgrid,
  .pg-pricing .svcgrid,
  .pg-experts .expertgrid { grid-template-columns: 1fr; }
  .pg-workflow .hero-dark, .pg-enterprise .hero-blue, .pg-partner .hero-blue {
    border-radius: 0 0 24px 24px;
    padding: 64px 0 80px;
  }
  /* 원본 실측 스케일: workflow 히어로 48px(768) · soon-grid 2열 */
  .pg-workflow .hero-dark .h1-page { font-size: 48px; }
  .pg-workflow .soon-grid { grid-template-columns: 1fr 1fr; padding: 24px; }
}
@media (max-width: 480px) {
  /* 원본 실측 스케일: workflow 히어로 34px(≤480) · soon-grid 1열 */
  .pg-workflow .hero-dark .h1-page { font-size: 34px; }
  .pg-workflow .soon-grid { grid-template-columns: 1fr; }
}