/* 키즈앤케어즈 · Kids & Cares — Landing styles
   Tokens consolidated from the design system (colors / typography / spacing /
   effects / fonts). Single accent: brush-up blue + signature gradient. */

/* ----- Webfont: Pretendard (jsDelivr) ----- */
@font-face {
  font-family: "Pretendard";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2")
    format("woff2-variations");
}

:root {
  /* Brand blue ramp */
  --kc-blue-300: #6C9DED;
  --kc-blue-400: #3D86EA;
  --kc-blue-500: #3175E3;
  --kc-blue-600: #0D63F0;
  --kc-blue-700: #0A4FBE;

  --kc-gradient-blue: linear-gradient(135deg, #6C9DED 0%, #0D63F0 100%);
  --kc-gradient-blue-h: linear-gradient(90deg, #6C9DED 0%, #0D63F0 100%);

  /* Neutrals (dark-first) */
  --kc-black: #000000;
  --kc-ink-900: #0B0B0D;
  --kc-ink-800: #141417;
  --kc-ink-700: #1F2024;
  --kc-ink-500: #3A3B40;

  --kc-white: #FFFFFF;
  --kc-gray-100: #F4F5F7;
  --kc-gray-300: #D7DAE0;
  --kc-gray-500: #9AA0AB;
  --kc-gray-600: #6B7280;

  /* Semantic aliases */
  --surface-page: var(--kc-black);
  --surface-card: var(--kc-ink-900);
  --surface-field: var(--kc-white);
  --surface-field-dark: var(--kc-ink-800);

  --text-primary: var(--kc-white);
  --text-secondary: var(--kc-gray-500);
  --text-placeholder: var(--kc-gray-600);
  --text-on-accent: var(--kc-white);
  --text-on-light: #141417;
  --text-accent: var(--kc-blue-500);

  --accent: var(--kc-blue-600);
  --border-dark: var(--kc-ink-700);
  --border-light: var(--kc-gray-300);
  --field-border: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui,
    sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Spacing & radii */
  --gutter: 32px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --w-mobile: 430px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 -8px 30px rgba(0, 0, 0, 0.55);
  --shadow-blue: 0 8px 24px rgba(13, 99, 240, 0.45);
  --ring-dark: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --press-scale: 0.97;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 끝 오버스크롤 시 커스텀 고무줄 바운스(JS)와 중복되지 않게 네이티브 억제 */
  overscroll-behavior-y: none;
  /* 한글 단어 단위 줄바꿈 강제(음절 중간에서 안 끊김 — 공백에서만 줄바꿈) */
  word-break: keep-all;
}

/* Mobile-first single column, centered on wide viewports */
.kc-shell {
  position: relative;
  max-width: var(--w-mobile);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--surface-page);
}

/* Bottom padding reserves space so the floating form never covers content.
   실제 값은 JS가 폼 높이에 맞춰 동적으로 설정(아래는 폴백). */
.kc-content {
  padding: 0 var(--gutter) 320px;
}

/* ----- Header ----- */
.kc-header {
  padding-top: 26px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kc-brushup__img {
  height: 26px;
  width: auto;
  display: block;
}

/* ----- Hero ----- */
.kc-hero {
  text-align: center;
}

.kc-hero__title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.kc-hero__num {
  background: linear-gradient(180deg, #8fb6f9 0%, #6e9cec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 80px;
  font-weight: 800;
  margin: 0;
}

.kc-hero__sub {
  margin: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

/* ----- CTAs ----- */
.kc-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 38px;
}

/* ----- Brand block ----- */
.kc-brand {
  text-align: center;
  margin-top: 44px;
}

.kc-brand__title {
  font-weight: 1000;
  font-size: 23px;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 2px;
}

.kc-brand__copy {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.6;
}

/* ----- Photo trio ----- */
.kc-photos {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.kc-photo {
  aspect-ratio: 311 / 504;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--kc-ink-800);
  box-shadow: var(--ring-dark);
}

.kc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Content blocks (problem / brand / home / teacher / trust) ----- */
.kc-block {
  text-align: center;
  margin-top: 40px;
}

.kc-block__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.36;
}

/* Problem hook title is the largest body headline */
.kc-block--problem .kc-block__title {
  font-size: 32px;
  line-height: 1.3;
}

.kc-block__lead {
  margin: 18px 0 0;
  font-size: 23px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.kc-block__desc {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #c9cdd6;
  line-height: 1.66;
}

/* Blue highlight for key phrases — design point color */
.kc-hl {
  color: #83b0f8;
}

/* Oversized brand wordmark ("키즈 앤 케어즈") — SVG from design (Group.svg, #83B0F8) */
.kc-brandmark {
  display: block;
  width: 92%;
  max-width: 352px;
  height: auto;
  margin: 0 auto 24px;
}

/* Rounded photo card used inside content blocks — design crops all to ~4:3 */
.kc-figure {
  margin: 26px 0 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--kc-ink-800);
  box-shadow: var(--ring-dark), var(--shadow-card);
}

.kc-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- App showcase mosaic ----- */
/* 좌측 열: 태블릿 2단 / 우측: 폰 2개(2행 span) */
.kc-apps {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  /* 고정 종횡비로 좌측 태블릿 2단 = 우측 폰 높이 정확히 정렬 */
  aspect-ratio: 16 / 9;
}

.kc-apps__cell {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--kc-ink-800);
  box-shadow: var(--ring-dark);
}

.kc-apps__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 좌측 열: 태블릿 2단(위 선생님 대시보드 / 아래 교실 키오스크) */
.kc-apps__cell--tablet:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}
.kc-apps__cell--tablet:nth-child(2) {
  grid-area: 2 / 1 / 3 / 2;
}
/* 우측: 폰 2개 각각 2행 span */
.kc-apps__cell--phone:nth-child(3) {
  grid-area: 1 / 2 / 3 / 3;
}
.kc-apps__cell--phone:nth-child(4) {
  grid-area: 1 / 3 / 3 / 4;
}

/* ----- Offer / pricing (7월 한정 도입 혜택) ----- */
.kc-offer {
  margin-top: 44px;
  text-align: center;
}

.kc-offer__title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.kc-offer__sub {
  margin: 16px 0 0;
  font-size: 23px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.kc-offer__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.kc-offer__list li {
  position: relative;
  padding-left: 16px;
  margin: 14px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #c9cdd6;
}

.kc-offer__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9aa0ab;
}

.kc-offer__list b {
  color: #ffffff;
  font-weight: 700;
}

/* Cost card — 디자인 SVG 를 그대로 사용(픽셀 정합) */
.kc-offer__card {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px 0 0;
}

/* Cost card — 헤더(톤 배경) + 바디(흰색) 2톤 구조 */
.kc-cost {
  margin: 24px 18px 0;
  border-radius: 24px;            /* 20px → 24px */
  overflow: hidden;
  background: #ffffff;            /* #f6f7fe → 순백 (바디 흰색) */
  color: #141417;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  /* min-height: 300px 제거 — 내용이 높이를 결정 */
}

.kc-cost--accent {
  border: 3px solid #83b0f8;      /* 1.5px → 3px */
}

/* 헤더 밴드: 기본(학부모)=회색, accent(기관)=하늘색 */
.kc-cost__head {
  padding: 18px 20px 14px;
  background: #f0f3f6;
}

.kc-cost--accent .kc-cost__head {
  background: #ebf2ff;
}

.kc-cost__body {
  padding: 2px 20px 18px;
  background: #ffffff;
}

.kc-cost__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

/* 태그: 채운 배경 + 흰 글자 (기본=슬레이트, --blue=브랜드 블루) */
.kc-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: #5b6472;
  color: #ffffff;
}

.kc-tag--blue {
  background: #83b0f8;
  color: #ffffff;
}

.kc-cost__name {
  font-size: 22px;                /* 16px → 22px */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #141417;
}

.kc-cost__cond {
  margin-top: 5px;
  font-size: 14px;                /* 11px → 14px */
  font-weight: 600;
  color: #6b7280;
}

/* 행: margin 간격 → 상하 padding + 헤어라인 구분 */
.kc-cost__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 19px 0;
  font-size: 15px;                /* 12px → 15px */
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #eceff3;
}

.kc-cost__row b {
  font-weight: 700;
  color: #141417;
}

/* 구분선을 행 border 로 처리하므로 기존 hr 은 숨김 (HTML 수정 불필요) */
.kc-cost__hr {
  display: none;
}

.kc-cost__row--final {
  font-size: 16px;
  font-weight: 700;
  color: #141417;
  border-bottom: 0;               /* 마지막 행 밑줄 제거 */
}

.kc-pill {
  font-size: 22px;                /* 15px → 22px */
  font-weight: 800;
  color: #ffffff;
  background: #83b0f8;
  padding: 10px 28px;             /* 6px 20px → 10px 28px */
  border-radius: var(--radius-pill);
  letter-spacing: -0.01em;
}

.kc-cost__hl {
  font-size: 17px;
  font-weight: 800;
  color: #83b0f8;                 /* 시안이 보라 톤이면 #8a7bf0 등으로 교체 */
}

/* 하단 안내: 원형 체크 배지 + 텍스트. 기본=회색, accent 카드=블루 */
.kc-cost__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f0f2f5;
  font-size: 13px;                /* 10px → 13px */
  font-weight: 600;
  line-height: 1.45;
  color: #57606e;
}

.kc-cost--accent .kc-cost__note {
  background: #e9f0fb;
  color: #5b7bb5;
}

.kc-cost__note::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #57606e;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.kc-cost--accent .kc-cost__note::before {
  background: #5b7bb5;
}

/* ----- Promo stack ----- */
.kc-promos {
  margin-top: 50px;
}

.kc-promo {
  text-align: center;
  margin: 26px 0;
}

.kc-promo__small {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  margin: 43px 0 -1px;
  line-height: 1.5;
}

.kc-promo__big {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

.kc-promo__big .accent {
  color: inherit;
}

/* ----- Footer ----- */
.kc-footer {
  text-align: center;
  margin: 36px 0 0;
  font-size: 11px;
  font-weight: 400;
  color: #dbdfe6;
  line-height: 1.6;
}

/* ----- Buttons ----- */
.kc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  padding: 17px 37px;
  font-size: 14px;
  transition: transform var(--dur-fast) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
}

.kc-btn-temp {
  width: 100%;
}

.kc-btn:active {
  transform: scale(var(--press-scale));
}

.kc-btn:hover {
  filter: brightness(1.06);
}

.kc-btn--secondary {
  background: var(--kc-white);
  color: #141417;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  margin-top: 8px;
}

.kc-btn--ghost {
  background: transparent;
  color: #ffffff;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  font-weight: 700;
  margin-top: 8px;
}

.kc-btn--primary {
  background: var(--kc-gradient-blue);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-blue);
}

.kc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* ----- Floating inquiry form ----- */
.kc-inquiry {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(358px, calc(100% - 24px));
  z-index: 50;
  box-sizing: border-box;
  background: var(--surface-card);
  border: 1.5px solid #ffffff;
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-float);
}

.kc-inquiry__title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.kc-inquiry__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.kc-inquiry__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kc-inquiry__names {
  display: flex;
  gap: 8px;
}

.kc-input {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  outline: none;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 12px;
  background: var(--kc-white);
  color: var(--text-on-light);
  border: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.kc-input::placeholder {
  color: var(--text-placeholder);
}

.kc-input:focus {
  box-shadow: 0 0 0 2px rgba(13, 99, 240, 0.55);
}

.kc-input--invalid {
  box-shadow: 0 0 0 2px rgba(240, 70, 70, 0.7);
}

.kc-submit {
  flex: none;
  width: 60px;
  border-radius: var(--radius-md);
  align-self: stretch;
  height: auto;
  font-size: 16px;
}

/* Honeypot — visually hidden, off-screen */
.kc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.kc-inquiry__error {
  margin-top: 8px;
  font-size: 11px;
  color: #ff8a8a;
  min-height: 0;
}

/* ----- Success state ----- */
.kc-success {
  text-align: center;
  padding: 22px 16px;
}

.kc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--kc-gradient-blue);
  color: var(--text-on-accent);
}

.kc-success__title {
  margin-top: 12px;
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.kc-success__sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 소개서 보기 / 공유하기 — 같은 행 동일 폭 2버튼 */
.kc-ctas .kc-btn {
  flex: 0 0 auto;
  width: 145px; /* ← 이 값만 바꾸면 두 버튼이 같은 너비로 */
  box-sizing: border-box;
  margin-top: 0;
}

/* ----- Toast ----- */
.kc-toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  transform: translateX(-50%) translateY(-8px);
  max-width: calc(100vw - 40px);
  background: rgba(20, 20, 23, 0.94);
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-align: center;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
  z-index: 60;
}

.kc-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[hidden] {
  display: none !important;
}