/* 대치루트 랜딩페이지 공통 시각 규칙
   히어로의 이미지·흰 그라데이션 효과는 기존 디자인을 그대로 유지합니다. */

.page-home{
  --landing-gutter:40px;
  --landing-section-top:48px;
  --landing-section-bottom:54px;
  --landing-line:#d8dfe5;
  --landing-line-soft:#e5e9ed;
  --landing-surface:var(--dr-surface,#f6f7f9);
  --landing-ink:var(--dr-ink,#202833);
  --landing-muted:var(--dr-muted,#68737e);
  --landing-blue:#486784;
  --landing-blue-dark:#355873;
  --landing-radius:8px;
  --landing-control-radius:6px;
}

/* 한 글꼴·한 포인트 색 체계. 히어로의 사진과 흰 효과는 변경하지 않습니다. */
.page-home main#main-content>.funnel-trust-strip,
.page-home main#main-content>#models,
.page-home main#main-content>#different,
.page-home main#main-content>#home-faq,
.page-home main#main-content>.final{
  font-family:Pretendard,"Pretendard Variable","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.page-home .hero{
  border-radius:var(--landing-radius);
}
.page-home .nav .btn-blue{
  border-color:var(--landing-blue);
  border-radius:var(--landing-control-radius);
  background:var(--landing-blue);
  color:#fff;
  box-shadow:none;
}
.page-home .nav .btn-blue:hover{
  border-color:var(--landing-blue-dark);
  background:var(--landing-blue-dark);
}
.page-home .hero-cta-row .hero-counter::after,
.page-home .story-rail-progress span{background:var(--landing-blue)}
.page-home main#main-content :focus-visible{
  outline-color:rgba(72,103,132,.58);
}

/* 모든 라이브 섹션은 같은 좌우 기준선을 사용합니다. */
.page-home main#main-content>.funnel-trust-strip>.wrap,
.page-home main#main-content>#models>.wrap,
.page-home main#main-content>#different>.wrap,
.page-home main#main-content>#home-faq>.wrap,
.page-home main#main-content>.final>.wrap{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:var(--landing-gutter);
}

/* 히어로 다음의 각 섹션은 같은 선, 배경, 세로 리듬을 공유합니다. */
.page-home main#main-content>#models,
.page-home main#main-content>#different,
.page-home main#main-content>#home-faq{
  border-top:0;
  border-bottom:1px solid var(--landing-line);
}
.page-home main#main-content>#models{
  padding:40px 0 56px;
  background:#fff;
}
.page-home main#main-content>#different.compact-story-section,
.page-home main#main-content>#home-faq.funnel-faq{
  padding:var(--landing-section-top) 0 var(--landing-section-bottom);
}
.page-home main#main-content>#different.compact-story-section{
  background:var(--landing-surface);
}
.page-home main#main-content>#home-faq.funnel-faq{
  background:#fff;
}

/* 섹션 제목 체계: 킥커 12px, 제목 최대 38px, 설명 14px. */
.page-home .compact-story-head .sec-kicker,
.page-home .funnel-faq .sec-kicker{
  margin:0 0 8px;
  color:var(--landing-blue);
  font-family:inherit;
  font-size:12px;
  font-weight:740;
  line-height:1.4;
  letter-spacing:.01em;
}
.page-home .compact-story-head .sec-title,
.page-home .funnel-faq .sec-title{
  margin:0;
  color:var(--landing-ink);
  font-family:inherit;
  font-size:clamp(30px,3vw,38px);
  font-weight:760;
  line-height:1.2;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.page-home .compact-story-head .sec-title b,
.page-home .funnel-faq .sec-title b{font-weight:760}
.page-home .compact-story-sub{
  max-width:720px;
  margin:10px 0 0;
  color:var(--landing-muted);
  font-size:14px;
  line-height:1.65;
}
.page-home .compact-story-head,
.page-home .funnel-faq .sec-head{
  margin-bottom:24px;
}

/* 구매 전 확인 띠는 섹션과 같은 폭·선·텍스트 규칙을 사용합니다. */
.page-home .funnel-trust-strip{
  background:#fff;
}
.page-home .funnel-trust-strip ul{
  border-color:var(--landing-line);
}
.page-home .funnel-trust-strip li{
  min-height:82px;
  padding:14px 20px;
  border-color:var(--landing-line);
}
.page-home .funnel-trust-strip li:first-child{padding-left:0}
.page-home .funnel-trust-strip li:last-child{padding-right:0}
.page-home .funnel-trust-strip strong{
  font-size:14px;
  font-weight:760;
  line-height:1.4;
}
.page-home .funnel-trust-strip span{
  margin-top:5px;
  font-size:13px;
  line-height:1.55;
}

/* 두 솔루션 탭은 장식보다 선택 상태가 먼저 보이는 동일한 탭 언어를 사용합니다. */
.page-home #models .solution-tabs{
  gap:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--landing-line);
  border-radius:0;
  background:transparent;
}
.page-home #models .solution-tab{
  min-height:66px;
  margin-bottom:-1px;
  padding:10px 16px 11px;
  justify-items:center;
  gap:3px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  color:#68737e;
  text-align:center;
  box-shadow:none;
}
.page-home #models .solution-tab:hover{background:#f7f8fa;color:#344b61}
.page-home #models .solution-tab.is-active{
  border:0;
  border-bottom:2px solid var(--landing-blue);
  background:transparent;
  color:#263d50;
  box-shadow:none;
}
.page-home #models .solution-tab:focus-visible{
  outline:2px solid rgba(72,103,132,.58);
  outline-offset:2px;
}
.page-home #models .solution-tab span{
  font-family:inherit;
  font-size:11px;
  font-weight:720;
  line-height:1.35;
  letter-spacing:0;
}
.page-home #models .solution-tab strong{
  font-family:inherit;
  font-size:17px;
  font-weight:780;
  line-height:1.35;
}
.page-home #models .solution-tab-panel{margin-top:20px}

/* 학습 기기와 디지털 디톡스는 카드 대신 같은 구분선 목록 구조를 공유합니다. */
.page-home #models .smartphone-check-entry-panel{
  gap:0;
  border-top:1px solid var(--landing-line);
  border-bottom:1px solid var(--landing-line);
}
.page-home #models .smartphone-check-entry-choice{
  min-height:252px;
  padding:28px 24px;
  column-gap:18px;
  row-gap:18px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-home #models .smartphone-check-entry-choice:nth-child(odd){padding-left:0;padding-right:28px}
.page-home #models .smartphone-check-entry-choice:nth-child(even){
  padding-left:28px;
  padding-right:0;
  border-left:1px solid var(--landing-line);
}
.page-home #models .smartphone-check-entry-choice:nth-child(n+3){border-top:1px solid var(--landing-line)}
.page-home #models .smartphone-check-entry-copy span{
  color:var(--landing-blue);
  font-size:12px;
  font-weight:760;
  line-height:1.4;
  letter-spacing:.01em;
}
.page-home #models .smartphone-check-entry-copy h2,
.page-home #models .smartphone-check-entry-copy h4{
  margin-top:6px;
  color:var(--landing-ink);
  font-family:inherit;
  font-size:22px;
  font-weight:760;
  line-height:1.3;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.page-home #models .smartphone-check-entry-copy p{
  margin-top:8px;
  color:var(--landing-muted);
  font-size:14px;
  line-height:1.65;
}
.page-home #models .solution-card-image{
  height:128px;
}
.page-home #models .smartphone-check-entry-button,
.page-home #models .smartphone-check-entry-consultation,
.page-home #models .smartphone-check-entry-survey,
.page-home #models .smartphone-check-entry-planner{
  min-height:48px;
  padding-inline:18px;
  border:1px solid var(--landing-blue);
  border-radius:var(--landing-control-radius);
  background:var(--landing-blue);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:740;
  box-shadow:none;
  transform:none;
}
.page-home #models .smartphone-check-entry-button:hover,
.page-home #models .smartphone-check-entry-consultation:hover,
.page-home #models .smartphone-check-entry-survey:hover,
.page-home #models .smartphone-check-entry-planner:hover{
  border-color:var(--landing-blue-dark);
  background:var(--landing-blue-dark);
  transform:none;
}

/* 개별 앱 변경은 월 케어와 분리된 독립 서비스입니다. */
.page-home #models .app-change-service{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  align-items:center;
  gap:32px;
  padding:28px 0;
  border-bottom:1px solid var(--landing-line);
  scroll-margin-top:100px;
}
.page-home #models .app-change-service-action{
  display:grid;
  gap:16px;
}
.page-home #models .app-change-service-price{
  display:grid;
  gap:4px;
  margin:0;
  color:var(--landing-muted);
  font-size:12px;
  line-height:1.5;
}
.page-home #models .app-change-service-price strong{
  color:var(--landing-blue);
  font-size:22px;
  font-weight:760;
  letter-spacing:-.035em;
}
.page-home #models .app-change-service-action .smartphone-check-entry-button{
  grid-column:auto;
  grid-row:auto;
  text-decoration:none;
}

/* 핵심 안내 카드도 동일한 카드·타이포·버튼 규칙을 사용합니다. */
.page-home .story-card{
  min-height:336px;
  padding:24px;
  border:1px solid var(--landing-line);
  border-radius:var(--landing-radius);
  background:#fff;
  box-shadow:none;
}
.page-home .story-eyebrow{
  margin:0 0 10px;
  color:var(--landing-blue);
  font-size:12px;
  font-weight:760;
  line-height:1.4;
  letter-spacing:.01em;
}
.page-home .story-card h3{
  font-family:inherit;
  font-size:22px;
  font-weight:760;
  line-height:1.3;
}
.page-home .story-card>p:not(.story-eyebrow):not(.story-card-note),
.page-home .story-mini-list li,
.page-home .story-step-list li,
.page-home .story-order-list li,
.page-home .story-callout span,
.page-home .story-card-note,
.page-home .story-proof-grid span{
  color:var(--landing-muted);
  font-size:14px;
  line-height:1.62;
}
.page-home .story-mini-list li,
.page-home .story-step-list li,
.page-home .story-order-list li,
.page-home .story-card-note,
.page-home .story-proof-grid,
.page-home .story-proof-grid>div{
  border-color:var(--landing-line-soft);
}
.page-home .story-callout{border-color:var(--landing-line)}
.page-home .story-process-list{
  margin:18px 0 0;
  padding:0;
  border-top:1px solid var(--landing-line-soft);
  list-style:none;
}
.page-home .story-process-list li{
  min-height:52px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--landing-line-soft);
}
.page-home .story-process-list b{
  color:var(--landing-blue);
  font-size:11px;
  font-weight:780;
}
.page-home .story-step-list b,
.page-home .story-order-list b{
  color:var(--landing-blue);
}
.page-home .story-process-list strong{
  color:var(--landing-ink);
  font-size:14px;
  font-weight:740;
}
.page-home .hero-cta-row .hero-arrow,
.page-home .hero-cta-row .hero-arrow:hover,
.page-home .story-rail-arrow,
.page-home .story-rail-arrow:hover:not(:disabled){
  width:44px;
  height:44px;
  min-width:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--landing-ink);
  box-shadow:none;
  transform:none;
  cursor:pointer;
}
.page-home .hero-cta-row .hero-arrow:hover,
.page-home .story-rail-arrow:hover:not(:disabled){background:#e9edf1}
.page-home .story-rail-arrow:disabled{
  opacity:.28;
  cursor:default;
}
.page-home .hero-cta-row .hero-arrow svg,
.page-home .story-rail-arrow svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-home .story-rail-footer{
  min-height:44px;
  gap:2px;
  padding:6px 0 8px;
}
.page-home .story-rail-progress{width:72px}
.page-home .story-text-link,
.page-home .story-inline-links a,
.page-home .story-factbar a,
.page-home .funnel-faq-more{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--landing-blue-dark);
  font-size:14px;
  font-weight:740;
}
.page-home .story-factbar{
  min-height:60px;
  border-color:var(--landing-line);
  font-size:13px;
  line-height:1.55;
}
.page-home .story-factbar strong{font-size:14px}

/* FAQ는 같은 제목 체계와 14px 본문, 60px 행 높이를 사용합니다. */
.page-home .funnel-faq details{
  padding-inline:24px;
  border-color:var(--landing-line);
}
.page-home .funnel-faq details:first-of-type{
  border-top:1px solid var(--landing-line);
}
.page-home .funnel-faq summary{
  min-height:64px;
  padding:18px 46px 18px 0;
  color:var(--landing-ink);
  font-size:15px;
  font-weight:720;
  line-height:1.5;
}
.page-home .funnel-faq details>p,
.page-home .funnel-faq .funnel-faq-answer{
  max-width:840px;
  padding:0 42px 22px 0;
  color:var(--landing-muted);
  font-size:14px;
  line-height:1.72;
}
.page-home .funnel-faq .funnel-faq-more{margin-left:24px}

/* 마지막 CTA는 인접 섹션의 구분선 사이를 채우는 전체 폭 마감 섹션입니다. */
.page-home main#main-content>.final{
  width:100%;
  max-width:none;
  margin:0;
  padding:56px 0;
  border-radius:0;
  background:#eef3f8;
  color:var(--landing-ink);
  box-shadow:none;
}
.page-home main#main-content>.final>.wrap{max-width:960px}
.page-home .final h2{
  color:var(--landing-ink);
  font-family:inherit;
  font-size:clamp(30px,3.5vw,42px);
  font-weight:760;
  line-height:1.2;
  letter-spacing:-.04em;
}
.page-home .final p{
  margin-top:14px;
  color:var(--landing-muted);
  font-size:14px;
  line-height:1.65;
}
.page-home .final .final-micro-actions{
  margin-top:24px;
  gap:18px;
}
.page-home .final .btn-blue{
  min-height:48px;
  margin-top:0;
  padding-inline:22px;
  border:1px solid var(--landing-blue);
  border-radius:var(--landing-control-radius);
  background:var(--landing-blue);
  color:#fff;
  font-size:14px;
  font-weight:740;
  box-shadow:none;
}
.page-home .final .btn-blue:hover{
  border-color:var(--landing-blue-dark);
  background:var(--landing-blue-dark);
  color:#fff;
}
.page-home .final .final-micro-actions>a.final-secondary-link{
  color:var(--landing-blue-dark);
  font-size:14px;
}

/* 랜딩의 카드형 요소는 그림자·외곽선 없이 면으로만 구분합니다. */
.page-home main#main-content>#different .story-card,
.page-home main#main-content>#home-faq details,
.page-home main#main-content>.final{
  border:0!important;
  box-shadow:none!important;
}
.page-home main#main-content>#home-faq details{
  margin-bottom:8px;
  border-radius:var(--landing-radius);
  background:var(--landing-surface);
  overflow:hidden;
}
.page-home main#main-content>#home-faq details:last-of-type{margin-bottom:0}

/* 4050 학부모가 작은 법인·정책 정보도 무리 없이 읽을 수 있게 합니다. */
.page-home footer .f-brand p,
.page-home footer .f-policy,
.page-home footer .legal{
  font-size:12.5px;
  line-height:1.72;
}

/* 구성 화면 안에서 연락처 입력과 접수까지 끝내는 마지막 단계입니다. */
.page-home #builderContact{
  padding-bottom:12px;
  border-bottom:0;
  scroll-margin-top:76px;
  outline:none;
}
.page-home #builderContact .step-h{margin-bottom:10px}
.page-home .builder-contact-intro{
  max-width:680px;
  margin:0 0 22px;
  color:#556270;
  font-size:14px;
  line-height:1.7;
}
.page-home .builder-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.page-home #builderContact .field{margin-bottom:16px}
.page-home #builderContact .field label,
.page-home #builderContact .field-label{
  margin-bottom:8px;
  color:var(--landing-ink);
  font-size:14px;
  font-weight:700;
}
.page-home #builderContact .field input,
.page-home #builderContact .field textarea{
  min-height:52px;
  border:1px solid var(--landing-line);
  border-radius:var(--landing-control-radius);
  background:#fff;
  font-size:16px;
  box-shadow:none;
}
.page-home #builderContact .field textarea{min-height:100px}
.page-home #builderContact .consent-row{
  margin-top:2px;
  padding:14px;
  border:0;
  border-radius:var(--landing-control-radius);
  background:var(--landing-surface);
  color:#556270;
  font-size:14px;
  line-height:1.65;
}
.page-home #builderContact .builder-submit{
  width:100%;
  min-height:52px;
  margin-top:18px;
  border-radius:var(--landing-control-radius);
  font-size:15px;
  box-shadow:none;
}
.page-home #builderContact .builder-submit:disabled{
  cursor:wait;
  opacity:.68;
}
.page-home #builderContact .order-submit-status{
  min-height:22px;
  margin:10px 0 0;
  color:#556270;
  font-size:14px;
  font-weight:600;
  line-height:1.55;
}
.page-home #builderContact .order-submit-status[data-state="success"]{color:#245d45}
.page-home #builderContact .order-submit-status[data-state="error"]{color:#9b2f2f}
.page-home #builderContact .order-honeypot{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.page-home #builderContact .mhint{
  max-width:720px;
  margin-top:14px;
  color:#556270;
  font-size:14px;
  line-height:1.65;
  text-align:left;
}

@media(min-width:901px){
  .page-home .logo-type small{
    font-size:9.5px;
    line-height:1.15;
  }
  .page-home .hero-slide-lead{
    max-width:550px;
    font-size:15px;
    line-height:1.7;
  }
  .page-home main#main-content>#different.compact-story-section{
    padding-top:44px;
    padding-bottom:48px;
  }
  .page-home .story-card{padding:22px}
  .page-home .story-factbar{min-height:56px}
}

@media(max-width:900px){
  .page-home .funnel-trust-strip ul{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,72vw);
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .page-home .funnel-trust-strip ul::-webkit-scrollbar{display:none}
  .page-home .funnel-trust-strip li,
  .page-home .funnel-trust-strip li:first-child,
  .page-home .funnel-trust-strip li:last-child{
    padding:14px 18px;
    scroll-snap-align:start;
  }
  .page-home .funnel-trust-strip li:first-child{padding-left:0}
}

@media(max-width:700px){
  .page-home #models .app-change-service{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    padding:24px 0;
  }
  .page-home{
    --landing-gutter:18px;
    --landing-section-top:40px;
    --landing-section-bottom:44px;
  }
  .page-home .nav-in,
  .page-home .catalog-rail-inner{
    padding-inline:var(--landing-gutter);
  }
  .page-home .hero{
    width:100%;
    max-width:none;
    margin-inline:0;
    border-radius:0;
  }
  .page-home .builder-contact-grid{grid-template-columns:1fr;gap:0}
  .page-home #builderContact .step-h{align-items:flex-start;flex-wrap:wrap}
  .page-home #builderContact .step-h .shint{width:100%;margin-left:36px;text-align:left}
  body.builder-contact-visible .bo.open .mobilebar{display:none}
  .page-home main#main-content>#models{padding:28px 0 44px}
  .page-home .compact-story-head,
  .page-home .funnel-faq .sec-head{
    margin-bottom:18px;
  }
  .page-home .compact-story-head .sec-title,
  .page-home .funnel-faq .sec-title{
    font-size:28px;
    line-height:1.22;
  }
  .page-home .compact-story-sub{font-size:14px}
  .page-home #models .solution-tab{
    min-height:62px;
    padding:8px 7px 9px;
  }
  .page-home #models .solution-tab span{font-size:10px}
  .page-home #models .solution-tab strong{font-size:14px;line-height:1.35}
  .page-home #models .solution-tab-panel{margin-top:16px}
  .page-home #models .smartphone-check-entry-panel{gap:0}
  .page-home #models .smartphone-check-entry-choice{
    min-height:0;
    padding:22px 0;
    grid-template-columns:minmax(0,1fr) 104px;
    column-gap:14px;
    row-gap:16px;
    border-left:0;
  }
  .page-home #models .smartphone-check-entry-choice:nth-child(odd),
  .page-home #models .smartphone-check-entry-choice:nth-child(even){padding-inline:0;border-left:0}
  .page-home #models .smartphone-check-entry-choice:not(:first-child){border-top:1px solid var(--landing-line)}
  .page-home #models .smartphone-check-entry-copy h2,
  .page-home #models .smartphone-check-entry-copy h4{font-size:20px}
  .page-home #models .smartphone-check-entry-copy p{font-size:14px}
  .page-home #models .solution-card-image{height:100px}
  .page-home .compact-story-head{align-items:center}
  .page-home .funnel-trust-strip ul{
    grid-template-columns:none;
    grid-auto-columns:calc(100% - 20px);
    column-gap:8px;
    scroll-snap-type:x mandatory;
  }
  .page-home .story-rail{
    grid-auto-columns:100%;
    scroll-snap-type:x mandatory;
  }
  .page-home .story-card{scroll-snap-stop:always}
  .page-home .story-card{
    min-height:330px;
    padding:18px;
  }
  .page-home .story-card h3{font-size:20px}
  .page-home .story-factbar{
    padding:14px 0;
    font-size:13px;
  }
  .page-home .funnel-faq summary{min-height:60px;padding-block:16px}
  .page-home .funnel-faq details{padding-inline:18px}
  .page-home .funnel-faq .funnel-faq-more{margin-left:18px}
  .page-home main#main-content>.final{
    padding:44px 0;
  }
  .page-home main#main-content>.final>.wrap{padding-inline:18px}
  .page-home .final h2{font-size:30px}
  .page-home .final p{font-size:14px}
  .page-home .final .final-micro-actions{margin-top:20px;gap:12px}
  .page-home footer>.wrap{padding-inline:var(--landing-gutter)}
}

@media(max-width:390px){
  .page-home #models .smartphone-check-entry-choice{
    grid-template-columns:minmax(0,1fr) 84px;
  }
  .page-home #models .solution-card-image{height:84px}
}

@media(max-width:370px){
  .page-home .catalog-rail-inner{gap:14px}
}

@media(prefers-reduced-motion:reduce){
  .page-home .story-rail-arrow,
  .page-home #models .smartphone-check-entry-button,
  .page-home #models .smartphone-check-entry-consultation,
  .page-home #models .smartphone-check-entry-survey,
  .page-home #models .smartphone-check-entry-planner{transition:none}
}