@charset "UTF-8"; /* ============================================================
 SURGINUS — 데스크톱 기본 스타일 (1920 시안 기준)
 ※ @media 는 이 파일에 쓰지 않는다. 반응형은 m.style.css 에.
 ============================================================ */

/* ── 토큰 ───────────────────────────────────────────────── */
:root { /* 시안 폰트는 유료 Aktiv Grotesk Ex → 오픈소스 Archivo(확장형 그로테스크)로 대체.
 라이선스를 확보하면 아래 스택 맨 앞에 'Aktiv Grotesk Ex' 를 넣기만 하면 된다. */
 --font-en: 'Archivo', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-wide: 123%; /* Archivo 를 시안(Aktiv Grotesk Ex)의 글자 폭에 맞춘 값 — 실측 대조로 산출 */

 --c-navy: #3c5c90; --c-purple: #ba5fb9; --c-text: #070707; --c-gray: #616161; --c-line: #eee; 
 --w-container: 1220px; /* 본문 컨테이너 (시안 350~1570) */
 --w-header: 1600px; /* 헤더·푸터 컨테이너 (시안 160~1760) */ } 

/* ── reset ──────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; } 
html { -webkit-text-size-adjust: 100%; } 
body { font-family: var(--font-en); font-stretch: var(--font-wide); font-weight: 400; color: #000; background: #fff; line-height: 1.2; -webkit-font-smoothing: antialiased; overflow-x: hidden; } 
img { display: block; border: 0; max-width: 100%; } 
ul, ol { list-style: none; } 
a { color: inherit; text-decoration: none; } 
em, address { font-style: normal; } 
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } 

.container { width: var(--w-container); margin: 0 auto; } 

/* 그라디언트 텍스트 — 시안 각도별로 변형 클래스를 둔다.
 글자 자리는 비워 두고 그라디언트 폭(--grad-fill)만 0%→100% 로 늘려
 글자가 왼쪽부터 색과 함께 드러나게 한다.
 폴백이 100% 라서 JS 가 없거나 죽어도 시안 정지 상태가 그대로 남는다. */
.grad { background-image: linear-gradient(158deg, #3c5c90 64.416%, #ba5fb9 90.482%); background-size: var(--grad-fill, 100%) 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; } 
.grad--wide { background-image: linear-gradient(135.81deg, #3c5c90 53.043%, #ba5fb9 77.212%); font-weight: 700; } 
.grad--title { background-image: linear-gradient(155.33deg, #3c5c90 64.416%, #ba5fb9 90.482%); font-weight: 700; } 

/* ── header ─────────────────────────────────────────────── */
.header { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; } 
.header__inner { width: var(--w-header); margin: 0 auto; padding-top: 24px; display: flex; align-items: flex-start; justify-content: space-between; } 
.header__logo img { width: 190px; height: 52px; } 
.gnb { padding-top: 9px; } 
.gnb__list { display: flex; gap: 100px; } 
.gnb__item a { font-size: 16px; font-weight: 500; color: #fff; line-height: 1.2; transition: opacity .2s; } 
.gnb__item a:hover { opacity: .7; } 
.header__toggle { display: none; } 

/* 밝은 배경 위에 얹히는 페이지(제품 등)용 다크 헤더 */
.header--dark .gnb__item a { color: #000; } 
.header--dark .header__toggle span { background: #000; } 
/* 메뉴가 열리면 어두운 오버레이 위로 올라오므로 다시 흰색 */
.is-menu-open .header--dark .header__toggle span { background: #fff; } 

/* ── hero ───────────────────────────────────────────────── */
.hero { position: relative; height: 1080px; overflow: hidden; } 
.hero__bg { position: absolute; inset: 0; } 
.hero__bg img { width: 100%; height: 100%; object-fit: cover; } 
.hero__bg video { width: 100%; height: 100%; object-fit: cover; } 
.hero__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); } 
.hero__inner { position: absolute; inset: 0; } 

.hero__logo { position: absolute; left: 50%; top: 564px; transform: translateX(-50%); width: 479px; height: 96px; } 
.hero__logo img { width: 100%; height: 100%; object-fit: contain; } 

.hero__copy { position: absolute; left: 50%; top: 416px; transform: translateX(-50%); text-align: center; color: #fff; white-space: nowrap; } 
.hero__copy-1 { display: block; font-size: 40px; font-weight: 400; letter-spacing: -.4px; } 
.hero__copy-2 { display: block; font-size: 42px; font-weight: 600; letter-spacing: -.42px; } 

.hero__scroll { position: absolute; left: 50%; top: 917px; transform: translateX(-50%); text-align: center; } 
.hero__mouse { display: block; position: relative; width: 31px; height: 50px; margin: 0 auto; border: 1px solid #fff; border-radius: 30px; } 
.hero__mouse img { position: absolute; left: 11px; top: 10px; width: 7px; height: 7px; } 
.hero__scroll-txt { display: block; margin-top: 14px; font-size: 16px; font-weight: 300; letter-spacing: .8px; color: #fff; } 

/* ── our problems ───────────────────────────────────────── */
.problems { background-image: linear-gradient(117.26deg,
 rgba(118, 141, 235, .24) 0%, rgba(118, 141, 235, .24) 2%,
 rgba(238, 169, 210, .24) 50%,
 rgba(118, 141, 235, .24) 98%, rgba(118, 141, 235, .24) 100%); background-size: 200% 200%; background-position: 0% 50%; animation: bgShift 24s ease infinite; } 
.problems__inner { position: relative; height: 1030px; } 
.problems__title { position: absolute; left: 0; top: 143px; font-size: 75px; font-weight: 500; line-height: 90px; letter-spacing: -1.5px; white-space: nowrap; } 

.bubble { position: absolute; } 
.bubble--01 { left: 0; top: 291px; width: 915px; height: 183.5px; } 
.bubble--02 { left: 480px; top: 423px; width: 741px; height: 183.5px; } 
.bubble--03 { left: 0; top: 558px; width: 711px; height: 183px; } 
.bubble--04 { left: 240px; top: 703px; width: 981px; height: 183.5px; } 

/* SVG 는 도형 bounding box 밖으로 그림자만큼(좌우 10, 상 6, 하 14) 더 크다 */
.bubble__bg { position: absolute; left: -10px; top: -6px; width: calc(100% + 20px); height: calc(100% + 20px); max-width: none; } 
.bubble__bg--flip { transform: scaleX(-1); } /* 꼬리가 오른쪽에 오는 말풍선 */

.bubble__txt { position: relative; padding: 35px 40px 0; font-size: 29px; line-height: 42px; letter-spacing: -.58px; white-space: nowrap; } 

/* ── feature ────────────────────────────────────────────── */
.feature { padding-top: 221px; } 

.feature__lead { text-align: center; color: var(--c-gray); } 
.feature__lead-1 { display: block; font-size: 24px; font-weight: 500; } 
.feature__lead-2 { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.6px; } 

.feature__dots { display: block; width: 5px; height: 39px; margin: 34px auto 0; } 
.feature__dots img { width: 5px; height: 39px; } 

.feature__title { margin-top: 22px; text-align: center; font-size: 52px; font-weight: 500; letter-spacing: -1.04px; } 

/* 제품 비주얼 — 원 4겹 + 그림자 + 제품.
 가장 큰 원(598px)을 기준 박스로 삼고 내부는 % 로 배치해 폭이 줄어도 구도가 유지된다. */
.feature__visual { position: relative; width: 598px; height: 598px; margin: 74px auto 0; } 
.feature__ring { position: absolute; max-width: none; } 
.feature__ring--598 { left: 0; top: 0; width: 100%; height: 100%; } 
.feature__ring--535 { left: 5.35%; top: 5.18%; width: 89.46%; height: 89.46%; } 
.feature__ring--490 { left: 9.03%; top: 9.03%; width: 81.94%; height: 81.94%; } 
.feature__ring--453 { left: 12.21%; top: 12.04%; width: 75.75%; height: 75.75%; border-radius: 50%; opacity: .2; /* 시안 ring-dotted.svg 의 fill-opacity */
 background-image: linear-gradient(105.5deg,
 #3c5c90 0%, #3c5c90 7%,
 #ba5fb9 45%, #ba5fb9 55%,
 #3c5c90 93%, #3c5c90 100%); background-size: 200% 200%; background-position: 0% 50%; animation: bgShift 14s ease infinite; } 

.feature__shadow { position: absolute; left: 14.88%; top: 0; width: 79.57%; height: 106.39%; display: flex; align-items: center; justify-content: center; } 
.feature__shadow-rot { transform: rotate(7.89deg); } 
.feature__shadow-mask { display: block; position: relative; width: 399px; height: 587px; -webkit-mask-image: url('../../images/main/product-shadow-mask.svg'); mask-image: url('../../images/main/product-shadow-mask.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -16px 72px; mask-position: -16px 72px; -webkit-mask-size: 453px 453px; mask-size: 453px 453px; } 
.feature__shadow-mask img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; mix-blend-mode: multiply; } 
.feature__product { position: absolute; left: 0%; top: 1.27%; width: 100%; height: 98.16%; object-fit: contain; } 

/* feature 카드 6개 */
.fcards { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 386px); gap: 30px 31px; } 
.fcard { height: 420px; padding-top: 41px; border-radius: 10.67px; text-align: center; } 
.fcard--purple { background: rgba(222, 226, 254, .34); } 
.fcard--blue { background: #ebf7ff; } 
.fcard--gray { background: #f5f6f8; } 

.fcard__no { display: block; font-size: 14px; font-weight: 500; line-height: 20px; } 
.fcard__icon { display: block; position: relative; width: 119px; height: 119px; margin: 15px auto 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .161); } 
.fcard__icon-img { display: block; position: absolute; overflow: hidden; } 
.fcard__icon-img img { position: absolute; max-width: none; } 

/* 아이콘별 크롭·위치 (원 기준) — 시안 좌표 그대로 */
.fcard__icon-img--crop-01 { left: 26px; top: 11px; width: 67px; height: 94px; } 
.fcard__icon-img--crop-01 img { left: -25px; top: -12px; width: 117px; height: 117px; } 
.fcard__icon-img--plain-94 { left: 11px; top: 11px; width: 94px; height: 94px; } 
.fcard__icon-img--plain-94 img { left: 0; top: 0; width: 100%; height: 100%; } 
.fcard__icon-img--plain-bell { left: 34.1px; top: 27.9px; width: 55.9px; height: 60.8px; } 
.fcard__icon-img--plain-bell img { left: 0; top: 0; width: 100%; height: 100%; } 
.fcard__icon-img--crop-04 { left: 13px; top: 17px; width: 94px; height: 81px; } 
.fcard__icon-img--crop-04 img { left: -12.7px; top: 0; width: 117.4px; height: 88.2px; } 
.fcard__icon-img--plain-cal { left: -2px; top: 10.8px; width: 120.7px; height: 94.2px; } 
.fcard__icon-img--plain-cal img { left: 0; top: 0; width: 100%; height: 100%; } 
.fcard__icon-img--plain-doc { left: 13px; top: 15.6px; width: 91px; height: 83px; } 
.fcard__icon-img--plain-doc img { left: 0; top: 0; width: 100%; height: 100%; } 

.fcard__title { display: block; margin-top: 18.5px; font-size: 24px; font-weight: 600; letter-spacing: -.24px; } 
.fcard__desc { margin: 16px auto 0; font-size: 16px; font-weight: 300; line-height: 24px; padding: 0 30px; } 

/* ── app banner ─────────────────────────────────────────── */
.appbanner { position: relative; height: 547px; margin-top: 180px; overflow: hidden; /* 시안 banner-bg.svg 의 그라디언트를 CSS 로 옮긴 것 (SVG 이미지로는 흐르게 할 수 없다) */
 background-image: linear-gradient(134.1deg,
 rgba(118, 141, 235, .24) 0%, rgba(118, 141, 235, .24) 2%,
 rgba(238, 169, 210, .24) 50%,
 rgba(118, 141, 235, .24) 98%, rgba(118, 141, 235, .24) 100%); background-size: 200% 200%; background-position: 0% 50%; animation: bgShift 20s ease infinite; } 
.appbanner__img { position: absolute; left: calc(50% - 948.5px); top: -511px; width: 1761px; height: 1970px; max-width: none; } 

/* ── how to use ─────────────────────────────────────────── */
.howto { margin-top: 180px; } 
.howto__title { text-align: center; font-size: 60px; font-weight: 500; } 
.howto__lead { margin-top: 20px; text-align: center; font-size: 20px; font-weight: 300; color: var(--c-text); } 

.steps { margin-top: 61px; display: grid; grid-template-columns: repeat(2, 600px); gap: 21px 20px; } 
/* 하단 여백은 min-height 로 잡는다 (padding-bottom 을 주면 시안 카드 높이를 넘는다) */
.step { padding: 40px 40px 0; border-radius: 20px; } 
.step--purple { background: #dfe4fa; } 
.step--gray { background: #f5f6f8; } 
.step:nth-child(-n+2) { min-height: 506px; } 
.step:nth-child(n+3) { min-height: 540px; } 

.step__thumb { display: block; position: relative; width: 520px; height: 325px; border-radius: 10px; overflow: hidden; } 
.step__thumb img { position: absolute; max-width: none; } 
/* 시안의 크롭 비율 그대로 (%) — 폭이 줄어도 같은 구도가 유지된다 */
.step__thumb--a img { left: 0; top: -77.06%; width: 100%; height: 240.26%; } 
.step__thumb--b img { left: -42.94%; top: -66.21%; width: 185.87%; height: 198.3%; } 
.step__thumb--c img { left: 0; top: -69.15%; width: 100%; height: 213.48%; } 
.step__thumb--d img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } 

/* 시안은 한 줄 고정(03 은 좌우 padding 안쪽을 살짝 넘긴다) — 좁은 폭에서는 m.style.css 에서 해제 */
.step__title { display: block; margin-top: 40px; font-size: 22px; font-weight: 600; letter-spacing: -.44px; color: var(--c-text); white-space: nowrap; } 
.step__no { color: var(--c-navy); } 
.step__desc { margin-top: 15px; font-size: 18px; font-weight: 300; line-height: 27px; letter-spacing: -.36px; color: var(--c-text); } 

/* ── review ─────────────────────────────────────────────── */
.review { margin-top: 180px; height: 940px; background: #f5f6f8; } 

.review__title { padding-top: 137px; text-align: center; font-size: 60px; font-weight: 500; } 
/* 흐름에 영향 없이 타이틀 왼쪽 위에 점 장식을 얹는다 */
.review__title-dot { display: inline-block; position: relative; width: 0; height: 0; vertical-align: top; } 
.review__title-dot img { position: absolute; left: -21px; top: -4px; width: 21px; height: 28px; max-width: none; } 

.review__lead { margin-top: 31px; text-align: center; font-size: 20px; font-weight: 300; color: var(--c-text); } 

/* 리뷰 슬라이더 (Swiper) — 좌우 padding 은 카드 그림자가 잘리지 않게 하는 여유분 */
.rcards { margin: 71px -10px 0; padding: 10px; } 
.rcards .swiper-slide { height: auto; } 
.rcard { position: relative; margin-top: 38.6px; /* 가운데(활성) 슬라이드만 위로 올라온 시안 구성 */
 min-height: 343px; padding: 34px 36px 30px; background: #fff; border-radius: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, .161); } 
.rcards .swiper-slide-active .rcard { margin-top: 0; } 

.rcard__stars { display: flex; gap: 2.8px; } 
.rcard__stars img { width: 21px; height: 20px; } 
.rcard__quote { position: absolute; right: 36px; top: 32px; width: 44px; height: 35px; } 
.rcard__text { margin-top: 40px; font-size: 16px; font-weight: 300; line-height: 27px; } 

.rpager { margin-top: 50px; display: flex; align-items: center; justify-content: center; gap: 33px; } 
.rpager__btn { position: relative; width: 33px; height: 33px; } 
.rpager__btn img { position: absolute; left: -6px; top: -6px; width: 45px; height: 45px; max-width: none; } 
.rpager__btn.swiper-button-disabled { opacity: .4; cursor: default; } 

/* Swiper 페이지네이션을 시안 점 디자인으로 (12px 점, 중심 간격 29px).
 Swiper 기본 규칙과 specificity 다툼을 피하려고 공식 CSS 변수로 지정한다.
 단 width 는 변수가 없어 .rpager 를 붙여 덮는다 (기본값 100% 라 버튼이 밀린다). */
.rpager__dots { --swiper-pagination-bullet-width: 12px; --swiper-pagination-bullet-height: 12px; --swiper-pagination-bullet-horizontal-gap: 8.5px; --swiper-pagination-bullet-inactive-color: #dadbdd; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-color: #205d9c; display: flex; align-items: center; } 
.rpager .rpager__dots { position: static; width: auto; } 

/* ── FAQ ────────────────────────────────────────────────── */
.faq { margin-top: 180px; } 
.faq__title { text-align: center; font-size: 75px; font-weight: 500; } 
.faq__list { margin-top: 64px; border-top: 1px solid #000; } 
.faq__item { border-bottom: 1px solid var(--c-line); } 

.faq__q { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 24px 0; text-align: left; } 
.faq__q-txt { max-width: 1090px; font-size: 22px; font-weight: 600; line-height: 33px; } 
.faq__icon { flex: none; position: relative; width: 21px; height: 21px; margin-top: 6px; } 
.faq__icon-plus { width: 21px; height: 21px; } 
.faq__icon-minus { position: absolute; left: 2px; top: 9.5px; width: 17px; height: 2px; } 

.faq__item .faq__icon-minus { display: none; } 
.faq__item.is-open .faq__icon-plus { display: none; } 
.faq__item.is-open .faq__icon-minus { display: block; } 
.faq__item.is-open .faq__q-txt { color: var(--c-navy); } 

/* 열린 항목은 질문 아래 여백을 줄이고 답변이 그 자리를 채운다 (시안 아이템 높이 149px).
 슬라이드 중 이 여백이 순간 바뀌면 튀어 보이므로 함께 전환시킨다. */
.faq__q { transition: padding-bottom .36s ease; } 
.faq__item.is-open .faq__q { padding-bottom: 11px; } 

/* 높이를 접었다 펴려면 display:none 이 아니라 height 0 + overflow hidden 이어야 한다.
 아래 여백은 안쪽 p 로 옮겨야 접혔을 때 완전히 사라진다. */
.faq__a { height: 0; overflow: hidden; } 
.faq__item.is-open .faq__a { height: auto; } 
.faq__a p { max-width: 1090px; padding-bottom: 27px; font-size: 18px; line-height: 27px; color: #999; } 

/* 기본은 4개만 노출하고 나머지는 View More 로 펼친다 */
.faq__item.is-hidden { display: none; } 

.faq__more { margin-top: 60px; text-align: center; } 
.btn-more { display: inline-flex; align-items: center; justify-content: center; gap: 24px; width: 213px; height: 62px; border-radius: 44px; background: #000; color: #fff; font-size: 16px; } 
.btn-more img { width: 9px; height: 4.5px; transition: transform .3s ease; } 
.btn-more.is-expanded img { transform: rotate(180deg); } 

/* ── inquiry CTA ────────────────────────────────────────── */
.cta { margin-top: 175px; } 
/* 배경은 시안 SVG(cta-bg.svg) 의 그라디언트를 CSS 로 옮긴 것이다.
 SVG 이미지로는 background-position 을 움직일 수 없어 흐르는 연출이 불가능하다.
 색(#3c5c90 → #ba5fb9)과 방향(145deg)은 원본 stop·벡터 그대로,
 가운데에 반대 방향 구간을 하나 더 두어 왕복해도 이음새가 없게 했다. */
.cta__box { position: relative; width: var(--w-header); height: 310px; margin: 0 auto; border-radius: 20px; overflow: hidden; background-image: linear-gradient(145deg,
 #3c5c90 0%, #3c5c90 23%, /* 시안은 화면 46% 지점부터 보라로 넘어간다 (실측) */
 #ba5fb9 50%,
 #3c5c90 77%, #3c5c90 100%); /* 되돌아오는 구간 — 왕복해도 이음새가 없다 */
 background-size: 200% 200%; background-position: 0% 50%; animation: bgShift 16s ease infinite; } 

/* 배경 위치 애니메이션이라 매 프레임 리페인트가 일어난다(MOTION.md §5 의 transform 원칙 예외).
 대상이 배너 하나뿐이고 주기가 길어 부담은 크지 않다. */
@keyframes bgShift { 
 0% { background-position: 0% 50%; } 
 50% { background-position: 100% 50%; } 
 100% { background-position: 0% 50%; } 
 } 
/* 장식 위치는 배너 폭(시안 1600) 대비 % — 컨테이너가 줄어도 같은 자리에 붙는다 */
.cta__deco { position: absolute; max-width: none; } 
.cta__deco--clock { left: -.74%; top: 94.7px; width: 104.5px; height: 119px; } 
.cta__deco--circle { left: 8.36%; top: 94.7px; width: 65px; height: 63px; } 
.cta__deco--cal1 { left: 10.43%; top: 126.6px; width: 123px; height: 88px; } 
.cta__deco--cal2 { left: 10.4%; top: 126.6px; width: 123px; height: 88px; } 
.cta__deco--cal3 { left: 10.43%; top: 126.6px; width: 123px; height: 18px; } 
.cta__deco--person { left: 81.61%; top: 95.7px; width: 123px; height: 118px; } 
.cta__deco--ball { left: 91.84%; top: 111.1px; width: 142px; height: 90px; } 
.cta__deco--date { left: 12.24%; top: 163.1px; font-size: 25px; font-weight: 600; color: #fff; line-height: 1; } 
.cta__deco--date em { margin-left: 12px; font-size: 13px; font-weight: 400; } 

.cta__body { position: relative; z-index: 1; } 
.cta__label { padding-top: 66.7px; text-align: center; font-size: 24px; font-weight: 300; color: #fff; } 
.cta__title { margin-top: 10px; text-align: center; font-size: 38px; font-weight: 500; letter-spacing: -.76px; color: #fff; } 
.cta__title strong { font-weight: 700; } 
.cta__btn { display: flex; align-items: center; justify-content: center; gap: 27px; width: 198px; height: 57px; margin: 34.6px auto 0; border-radius: 5.35px; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .161); font-size: 16px; font-weight: 500; color: var(--c-navy); transition: transform .2s; } 
.cta__btn:hover { transform: translateY(-2px); } 
.cta__btn img { width: 12.4px; height: 12.4px; } 

/* ── footer ─────────────────────────────────────────────── */
.footer { height: 298px; margin-top: 152px; background: #fafafa; } 
.footer__inner { display: flex; width: var(--w-header); margin: 0 auto; padding-top: 51px; } 
.footer__logo { flex: none; width: 190px; } 
.footer__logo img { width: 190px; height: 42px; } 
.footer__body { margin-left: 65px; } 
.footer__nav { margin-top: 19px; font-size: 18px; font-weight: 500; line-height: 27px; } 
.footer__nav a { transition: color .2s; } 
.footer__nav a:hover { color: var(--c-navy); } 
.footer__addr { margin-top: 27px; font-size: 16px; font-weight: 300; line-height: 27px; }