@charset "UTF-8";/* ============================================================
 SURGINUS — 반응형 전용 (@media 는 전부 이 파일에 모은다)
 시안은 PC 1920 만 있어 태블릿 이하 구성은 이 파일에서 정의한다.
 브레이크포인트: 1680 / 1300 / 1024 / 768 / 480
 ============================================================ */

/* ── ≤1680 : 헤더·푸터·CTA 컨테이너(1600) 를 화면 폭에 맞춘다 ── */
@media (max-width: 1680px){
 .header__inner,
 .footer__inner,
 .cta__box { width: calc(100% - 80px); } 
 }

/* ── ≤1300 : 본문 컨테이너(1220) 를 화면 폭에 맞춘다 ── */
@media (max-width: 1300px){
 .container { width: calc(100% - 80px); } 

 /* 카드 그리드를 고정폭 → 유동폭으로 */
 .fcards { grid-template-columns: repeat(3, 1fr); } 
 .steps { grid-template-columns: repeat(2, 1fr); } 
 .step__thumb { width: 100%; } 
 .step__title { white-space: normal; } /* 카드가 좁아지면 한 줄 고정을 푼다 */
 .fcard__desc { width: auto; padding: 0 40px; } 

 /* 말풍선 — 폭·높이를 컨테이너 비율로 (SVG 왜곡 방지) */
 .bubble--01 { left: 0; width: 75%; height: auto; aspect-ratio: 915 / 183.5; } 
 .bubble--02 { left: 39.34%; width: 60.74%; height: auto; aspect-ratio: 741 / 183.5; } 
 .bubble--03 { left: 0; width: 58.28%; height: auto; aspect-ratio: 711 / 183; } 
 .bubble--04 { left: 19.67%; width: 80.41%; height: auto; aspect-ratio: 981 / 183.5; } 
 .bubble__txt { padding: 30px 30px 0; font-size: 24px; line-height: 34px; } 

 /* 앱 배너 — 이미지 기준을 vw 로 바꿔 폭에 따라 같이 줄어들게 */
 .appbanner { height: 28.49vw; } 
 .appbanner__img { left: 50%; top: -26.61vw; transform: translateX(-50%); width: 91.72%; height: auto; } 

 .feature__visual { width: min(598px, 100%); height: auto; aspect-ratio: 1 / 1; } 
 }

/* ── ≤1200 : CTA 왼쪽 장식이 타이틀 위로 올라오기 시작하는 지점 ── */
@media (max-width: 1200px){
 .cta__deco--clock,
 .cta__deco--circle,
 .cta__deco--cal1,
 .cta__deco--cal2,
 .cta__deco--cal3,
 .cta__deco--date { display: none; } 
 }

/* ── ≤1024 : 태블릿 ── */
@media (max-width: 1024px) { /* hero — 높이를 뷰포트에 맞추고 요소는 비율로 배치 */
 .hero { height: 100vh; min-height: 640px; max-height: 1080px; } 
 .hero__logo { top: 52.2%; width: 340px; height: 68px; } 
 .hero__copy { top: 38.5%; } 
 .hero__copy-1 { font-size: 28px; } 
 .hero__copy-2 { font-size: 30px; } 
 .hero__scroll { top: auto; bottom: 60px; } 

 /* our problems — 절대배치를 풀고 세로로 쌓는다 (SVG 말풍선 → CSS 말풍선) */
 .problems { padding: 90px 0 100px; } 
 .problems__inner { height: auto; } 
 .problems__title { position: static; font-size: 52px; line-height: 62px; letter-spacing: -1px; white-space: normal; } 
 .bubble { position: static; width: 100%; height: auto; margin-top: 24px; aspect-ratio: auto; } 
 .bubble--01 { margin-top: 44px; } 
 .bubble__bg { display: none; } 
 .bubble__txt { padding: 24px 28px; background: #fff; border-radius: 24px; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); font-size: 20px; line-height: 32px; white-space: normal; } 

 /* feature */
 .feature { padding-top: 110px; } 
 .feature__lead-1 { font-size: 20px; } 
 .feature__lead-2 { font-size: 24px; } 
 .feature__dots { margin-top: 24px; } 
 .feature__title { font-size: 40px; letter-spacing: -.8px; } 
 .feature__visual { margin-top: 50px; } 
 .feature__shadow { display: none; } /* 마스크·회전이 px 고정이라 좁은 폭에서 어긋난다 */
 .fcards { margin-top: 50px; grid-template-columns: repeat(2, 1fr); gap: 20px; } 
 .fcard { height: auto; padding: 36px 24px 40px; } 
 .fcard__desc { padding: 0; } 
 .fcard__desc br { display: none; } /* 시안 폭 기준의 강제 개행을 푼다 */

 /* how to use */
 .howto { margin-top: 110px; } 
 .howto__title { font-size: 42px; } 
 .howto__lead { font-size: 18px; } 
 .steps { margin-top: 40px; grid-template-columns: 1fr; gap: 20px; } 
 .step { padding: 28px; } 
 .step:nth-child(-n+2),
 .step:nth-child(n+3) { min-height: 0; } 
 .step__thumb { height: auto; aspect-ratio: 520 / 325; } 
 .step__title { margin-top: 28px; font-size: 20px; white-space: normal; } 
 .step__desc { margin-top: 12px; font-size: 16px; line-height: 26px; } 

 /* review */
 .review { margin-top: 110px; height: auto; padding-bottom: 90px; } 
 .review__title { padding-top: 90px; font-size: 42px; } 
 .review__title-dot img { left: -15px; top: -2px; width: 15px; height: 20px; } 
 .review__lead { margin-top: 20px; font-size: 18px; } 
 .rcards { margin-top: 30px; } /* 슬라이드 1장씩 노출 (JS breakpoints 1025 미만) */
 .rcards .swiper-slide .rcard { margin-top: 0; min-height: 0; padding: 28px 28px 30px; } 
 .rcard__text { margin-top: 24px; letter-spacing: normal !important; } 
 .rpager { margin-top: 30px; } 

 /* FAQ */
 .faq { margin-top: 110px; } 
 .faq__title { font-size: 48px; } 
 .faq__list { margin-top: 40px; } 
 .faq__q-txt { max-width: none; padding-right: 24px; font-size: 18px; line-height: 28px; } 
 .faq__icon { margin-top: 4px; } 
 .faq__a p { max-width: none; font-size: 16px; line-height: 26px; } 
 .faq__more { margin-top: 40px; } 

 /* CTA — 좌우 장식은 텍스트와 겹칠 여지가 있어 축소 배치 */
 .cta { margin-top: 110px; } 
 .cta__box { height: auto; padding: 50px 30px 56px; } 
 .cta__deco--person { left: auto; right: 2%; top: 58px; transform: scale(.7); transform-origin: top right; } 
 .cta__deco--ball { left: auto; right: -4%; top: 72px; transform: scale(.7); transform-origin: top right; } 
 .cta__label { padding-top: 0; font-size: 20px; } 
 .cta__title { font-size: 28px; } 
 .cta__btn { margin-top: 26px; } 

 /* footer */
 .footer { height: auto; margin-top: 110px; padding: 40px 0 46px; } 
 .footer__inner { display: block; padding-top: 0; } 
 .footer__body { margin-left: 0; margin-top: 24px; } 
 .footer__nav { margin-top: 0; font-size: 16px; } 
 .footer__addr { margin-top: 16px; font-size: 15px; line-height: 24px; } 
 }

/* ── ≤768 : 모바일 ── */
@media (max-width: 768px){
 .container { width: calc(100% - 40px); } 
 .header__inner,
 .footer__inner,
 .cta__box { width: calc(100% - 40px); } 

 /* 헤더 — 햄버거 토글 */
 .header__inner { padding-top: 16px; align-items: center; } 
 .header__logo img { width: 140px; height: 38px; } 
 .header__toggle { display: block; position: relative; width: 28px; height: 20px; z-index: 30; } 
 .header__toggle span { display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: transform .25s, opacity .25s; } 
 .header__toggle span:nth-child(1) { top: 0; } 
 .header__toggle span:nth-child(2) { top: 9px; } 
 .header__toggle span:nth-child(3) { top: 18px; } 
 .is-menu-open .header__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); } 
 .is-menu-open .header__toggle span:nth-child(2) { opacity: 0; } 
 .is-menu-open .header__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } 

 .gnb { position: fixed; inset: 0; padding-top: 0; background: rgba(10, 14, 30, .95); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 25; } 
 .is-menu-open .gnb { opacity: 1; visibility: visible; } 
 .gnb__list { flex-direction: column; gap: 32px; align-items: center; justify-content: center; height: 100%; } 
 .gnb__item a { font-size: 20px; } 
 .header--dark .gnb__item a { color: #fff; } 
 .is-menu-open { overflow: hidden; } 

 /* hero */
 .hero__logo { top: 48%; width: 240px; height: 48px; } 
 .hero__copy { top: 34%; white-space: normal; width: calc(100% - 40px); } 
 .hero__copy-1 { font-size: 20px; } 
 .hero__copy-2 { font-size: 22px; } 
 .hero__scroll { bottom: 40px; } 
 .hero__scroll-txt { font-size: 14px; } 

 /* our problems */
 .problems { padding: 60px 0 70px; } 
 .problems__title { font-size: 36px; line-height: 44px; } 
 .bubble--01 { margin-top: 30px; } 
 .bubble__txt { padding: 20px 22px; font-size: 16px; line-height: 26px; border-radius: 18px; } 

 /* feature */
 .feature { padding-top: 70px; } 
 .feature__lead-1 { font-size: 16px; } 
 .feature__lead-2 { font-size: 19px; } 
 .feature__dots { height: 28px; margin-top: 18px; } 
 .feature__dots img { height: 28px; } 
 .feature__title { margin-top: 16px; font-size: 26px; letter-spacing: -.5px; } 
 .feature__visual { margin-top: 30px; } 
 .fcards { margin-top: 36px; grid-template-columns: 1fr; } 
 .fcard { padding: 28px 20px 32px; } 
 .fcard__title { margin-top: 14px; font-size: 20px; } 
 .fcard__desc { margin-top: 10px; font-size: 15px; line-height: 22px; } 

 /* how to use */
 .howto { margin-top: 70px; } 
 .howto__title { font-size: 28px; } 
 .howto__lead { margin-top: 12px; font-size: 15px; } 
 .steps { margin-top: 28px; } 
 .step { padding: 20px; border-radius: 16px; } 
 .step__title { margin-top: 20px; font-size: 17px; } 
 .step__desc { font-size: 15px; line-height: 24px; } 

 /* review */
 .review { margin-top: 70px; padding-bottom: 60px; } 
 .review__title { padding-top: 60px; font-size: 28px; } 
 .review__lead { font-size: 15px; } 
 .rcards { margin-top: 18px; } 
 .rcards .swiper-slide .rcard { padding: 22px 22px 24px; } 
 .rcard__quote { right: 22px; top: 22px; width: 34px; height: 27px; } 
 .rcard__text { margin-top: 20px; font-size: 15px; line-height: 25px; } 

 /* FAQ */
 .faq { margin-top: 70px; } 
 .faq__title { font-size: 34px; } 
 .faq__list { margin-top: 28px; } 
 .faq__q { padding: 18px 0; } 
 .faq__q-txt { padding-right: 16px; font-size: 16px; line-height: 25px; } 
 .faq__icon { width: 18px; height: 18px; margin-top: 3px; } 
 .faq__icon-plus { width: 18px; height: 18px; } 
 .faq__icon-minus { left: 1px; top: 8px; width: 15px; } 
 .faq__a { padding: 6px 0 20px; } 
 .faq__a p { font-size: 15px; line-height: 24px; } 
 .btn-more { width: 180px; height: 54px; gap: 16px; } 

 /* CTA */
 .cta { margin-top: 70px; } 
 .cta__box { padding: 40px 20px 44px; border-radius: 16px; } 
 .cta__deco--clock,
 .cta__deco--circle,
 .cta__deco--cal1,
 .cta__deco--cal2,
 .cta__deco--cal3,
 .cta__deco--date,
 .cta__deco--ball,
 .cta__deco--person { display: none; } /* 좁은 폭에서는 잘려 보여 전부 숨긴다 */
 .cta__label { font-size: 16px; } 
 .cta__title { font-size: 21px; letter-spacing: -.4px; } 
 .cta__btn { width: 176px; height: 52px; gap: 18px; margin-top: 22px; } 

 /* footer */
 .footer { margin-top: 70px; padding: 32px 0 38px; } 
 .footer__logo img { width: 160px; height: 35px; } 
 .footer__addr { font-size: 13px; line-height: 21px; } 
 .footer__nav { font-size: 0; line-height: 18px; } 
 .footer__nav a { font-size: 14px; display: block; } 
 
 }

/* ── ≤480 : 소형 모바일 ── */
@media (max-width: 480px){
 .hero__logo { width: 200px; height: 40px; } 
 .hero__copy-1 { font-size: 17px; } 
 .hero__copy-2 { font-size: 19px; } 

 .problems__title { font-size: 30px; line-height: 38px; } 
 .bubble__txt { font-size: 15px; line-height: 24px; } 

 .feature__title { font-size: 22px; } 
 .howto__title { font-size: 24px; } 
 .review__title { font-size: 24px; } 
 .faq__title { font-size: 28px; } 
 .faq__q-txt { font-size: 15px; line-height: 23px; } 
 .cta__title { font-size: 18px; } 
 .footer__addr { font-size: 12px; line-height: 20px; } 
 }

/* ── 동작 최소화 설정 — CSS 로 도는 모션을 끈다 (MOTION.md §2) ── */
@media (prefers-reduced-motion: reduce){
 .cta__box,
 .problems,
 .appbanner,
 .feature__ring--453 { animation: none; } 
 .faq__q { transition: none; } 
 }