@charset "UTF-8";/* ============================================================
 SURGINUS — 제품 페이지 (PRODUCT) 데스크톱 스타일
 ※ @media 는 m.product.css 에 작성한다.
 ============================================================ */

/* ── 섹션 공통 ──────────────────────────────────────────── */
.sec-title { text-align: center; font-size: 60px; font-weight: 500; line-height: 1.2; letter-spacing: -.32px; } 
.sec-lead { margin: 0 auto; text-align: center; font-size: 20px; font-weight: 300; line-height: 30px; color: var(--c-text); } 
.sec-lead--w877 { width: 877px; } 
.sec-lead--w958 { width: 958px; } 
.sec-lead--w1033 { width: 1033px; } 

.c-blue { color: #205d9c; font-style: normal; } 
.c-navy { color: var(--c-navy); font-style: normal; } 

/* ── hero ───────────────────────────────────────────────── */
.phero { position: relative; height: 1080px; overflow: hidden; } 
/* 좌우 반전(시안이 반전된 상태)은 img 가 아니라 래퍼에 준다 —
 img 에 두면 GSAP 이 scaleX(-1) 을 rotate(180deg) 로 분해해 물려받아
 줌아웃 트윈이 돌 때 사진이 뒤집힌다 */
.phero__bg { position: absolute; inset: 0; } 
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; opacity: .6; } 
.phero .container { position: relative; height: 100%; width: var(--w-header); } 
.phero__title { position: absolute; left: 0; top: 776px; font-size: 60px; font-weight: 500; line-height: 1.2; } 

/* ── smart thermometer ──────────────────────────────────── */
.smart { padding-top: 150px; } 
.smart__title { text-align: center; font-size: 54px; font-weight: 500; line-height: 1.2; letter-spacing: -1.08px; } 
.smart__logo { margin-top: 10px; text-align: center; } 
.smart__logo img { display: inline-block; width: 337px; height: 70px; } 
.smart__line { display: block; margin: 39px auto 0; width: 2px; height: 52px; } 
.smart__line img { width: 2px; height: 52px; } 

.smart__visual { position: relative; width: var(--w-header); height: 730px; margin: 59px auto 0; } 
.smart__photo { width: 100%; height: 100%; object-fit: cover; } 
.smart__txt { position: absolute; left: 189px; top: 105px; width: 474px; } 
.smart__sub { display: block; font-size: 32px; font-weight: 700; line-height: 38px; } 
.smart__desc { margin-top: 30px; font-size: 20px; line-height: 30px; letter-spacing: -.2px; } 

/* ── 1-minute intervals ─────────────────────────────────── */
.intervals { padding-top: 180px; } 
.intervals .sec-lead { margin-top: 30px; } 
.intervals__bg { height: 836px; margin-top: 59px; background-image: linear-gradient(122.41deg, rgba(118, 141, 235, .24) 1.39%, rgba(238, 169, 210, .24) 99.96%); } 
/* 1920 고정이면 그보다 좁은 화면에서 margin:auto 가 먹지 않아(넘침) 왼쪽으로 붙고 가로 스크롤이 생긴다 */
.intervals__inner { position: relative; width: 100%; height: 100%; margin: 0 auto; } 
/* 시안은 1920 기준 left:347 = 중앙에서 2.5px 왼쪽. 화면 폭과 무관하게 가운데로 잡는다.
 transform 은 GSAP(js-m-fig)이 쓰는 자리라 calc 로 중앙 정렬한다 */
.intervals__chart { position: absolute; left: calc(50% - 615.5px); top: 87px; width: 1231px; max-width: none; --wipe: 28%; } 
.intervals__chart img { width: 100%; height: auto; max-width: none; } 
/* '1분 간격' 그래프는 위에 겹쳐두고 마스크를 왼→오로 밀어 훑듯이 드러낸다.
 두 그래프는 왼쪽 앱 화면이 완전히 같고 그래프 영역(가로 31%~98%)만 다르므로
 --wipe 시작값을 28% 로 둬야 첫 순간부터 '바뀌는 부분'이 보인다.
 JS 가 죽어도 아래 원본 그래프가 남아야 하므로 숨김은 CSS 로 둔다 (MOTION.md §8-d) */
.intervals__chart-after { position: absolute; left: 0; top: 0; opacity: 0; -webkit-mask-image: linear-gradient(90deg, #000 var(--wipe), transparent calc(var(--wipe) + 5%)); mask-image: linear-gradient(90deg, #000 var(--wipe), transparent calc(var(--wipe) + 5%)); } 
/* 훑는 경계를 따라 달리는 측정선 — 세로 범위는 그래프 카드(이미지의 8%~74%)에만 걸친다.
 경계가 부드러운 5% 폭이라 그 한가운데(+2.5%)에 세워야 선과 경계가 붙어 보인다 */
.intervals__scan { position: absolute; top: 8%; bottom: 26%; left: calc(var(--wipe) + 2.5%); width: 2px; margin-left: -1px; background: linear-gradient(180deg,
 rgba(99, 116, 208, 0) 0%, rgba(99, 116, 208, .9) 20%,
 rgba(99, 116, 208, .9) 80%, rgba(99, 116, 208, 0) 100%); box-shadow: 0 0 18px 3px rgba(99, 116, 208, .28); opacity: 0; pointer-events: none; } 

/* ── temperature trend alert ────────────────────────────── */
.alert { padding-top: 180px; } 
.alert .sec-lead { margin-top: 24px; } 

/* 패널은 화면 왼쪽 끝에 붙고 오른쪽 모서리만 둥글다.
 시안(1920 기준) 1233×696 을 화면 폭 비율로 환산해 잡는다 — 1233/1920 = 64.219%,
 높이는 aspect-ratio 로 묶어 폭이 달라져도 안쪽 구도가 그대로 따라간다.
 패널 안 요소도 전부 패널 대비 % 라서 배율이 한 번에 맞는다.
 높이는 시안 비율만 따른다 — min-height 로 붙잡아 두면 폭이 줄었을 때
 내용보다 패널이 크게 높아져 위쪽이 빈다 */
.alert__panel { position: relative; width: 64.219%; aspect-ratio: 1233 / 696; margin-top: 61px; background: #f5f6f8; border-radius: 0 20px 20px 0; } 
/* 시안 x159 y96 w1000 → 패널(1233×696) 대비 %.
 세로는 패널 바닥에 붙인다 — 시안에서도 96+600=696 으로 바닥과 딱 맞고,
 패널이 시안보다 높아지는 폭(min-height 구간)에서도 바닥 정렬이 유지된다 */
.alert__chart { position: absolute; left: 12.895%; bottom: 0; width: 81.103%; max-width: none; } 
.alert__chart img { width: 100%; height: auto; max-width: none; } 
/* 시안 그룹(1000×600) 안에서 폰 목업이 있던 자리 — x630 w370, 세로는 전체.
 비율로 잡아야 박스 폭이 바뀌는 브레이크포인트에서도 그래프와 같이 움직인다.
 영상 원본(1110×1800)이 같은 비율이라 폭만 맞추면 그대로 들어가고,
 배경이 패널색(#f5f6f8)으로 렌더된 영상이라 모서리를 깎을 필요가 없다 */
.alert__phone { position: absolute; left: 63%; top: 0; width: 37%; } 
.alert__phone-vid { display: block; width: 100%; height: auto; } 
/* 시안 x1317 w443 — 패널 오른쪽 밖으로 나가므로 left 가 100% 를 넘는다.
 세로는 패널 기준 중앙 정렬 (줄 수가 폭에 따라 달라져도 가운데를 유지한다) */
.alert__txt { position: absolute; left: 106.813%; top: 50%; transform: translateY(-50%); width: 35.929%; } 
.alert__sub { display: block; font-size: 30px; font-weight: 700; line-height: 40px; } 
.alert__desc { margin-top: 30px; font-size: 20px; line-height: 30px; letter-spacing: -.2px; } 

/* ── temperature rising / high-fever alerts ─────────────── */
.notify { padding-top: 180px; } 
.notify__inner { display: flex; align-items: center; width: 1223px; margin: 0 auto; gap: 9.81%; } 
/* 영상 원본(1110×1800)은 기기 바깥에 패널색 여백이 좌우 6px·위 3px 있다.
 기기 폭(1097)이 시안 380 이 되도록 키우고 그 여백만큼 잘라낸다.
 영상은 기기 하단이 잘린 상태로 렌더돼 있어 높이는 622(=380×1800/1097 − 여백) */
.notify__phone { position: relative; flex: none; width: 31.07%; aspect-ratio: 380 / 622; overflow: hidden; border-radius: 16px 16px 0 0; } 
.notify__phone video { position: absolute; left: -.547%; top: -.167%; display: block; width: 101.185%; height: auto; } 
.notify__txt { width: 59.12%; } 
.notify__title { font-size: 60px; font-weight: 500; line-height: 1.28; letter-spacing: -.32px; } 
/* 이 섹션 강조색만 시안이 #205d9c 로 다르다 (다른 섹션은 --c-navy #3c5c90) */
.notify__title em { font-style: normal; color: #205d9c; } 
.notify__desc { margin-top: 47px; font-size: 20px; font-weight: 300; line-height: 30px; color: var(--c-text); } 

/* ── real-time family sharing ───────────────────────────── */
.family { padding-top: 180px; } 
.family .sec-lead { margin-top: 30px; } 
/* export 이미지에는 원 테두리 여유분(아래 20px)이 포함돼 있어 레이아웃 높이에서는 뺀다 */
.family__diagram { width: 1220px; height: 508px; margin: 41px auto 0; } 
.family__diagram img { display: block; width: 100%; } 

/* ── symptom / medication records ───────────────────────── */
.record { padding-top: 180px; } 
.record .sec-lead { margin-top: 30px; } 
/* 시안 그룹 931×650 — 같은 크기(430×650) 카드 두 장을 71px 띄워 나란히 둔다.
 영상 원본도 430×650 이라 그대로 들어맞는다 */
/* report 섹션과 같은 [콘텐츠 + 화살표 + 콘텐츠] 구성 — 컨테이너 폭과 세 요소 비율을
 .report__imgs 와 동일하게 맞춰 두 섹션의 콘텐츠 크기가 같아 보이게 한다.
 (932px / 콘텐츠 42.553% / 화살표 7.465%, 남는 폭은 space-between 이 좌우 간격으로)
 카드 자체 비율은 소재 그대로 430:650 — 여기서 440:650 을 쓰면 위아래가 잘린다 */
.record__imgs { display: flex; align-items: center; justify-content: space-between; width: 932px; margin: 77px auto 0; } 
.record__card { flex: none; display: block; width: 42.553%; aspect-ratio: 430 / 650; object-fit: cover; border-radius: 30px; box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.18); } 
.record__arrow { flex: none; display: block; width: 7.465%; height: auto; } 
/* 이 자리 이미지는 폰 목업이라 자체 외곽선이 있다 — 카드 그림자를 겹치지 않는다 (영상 카드는 유지) */
.record__imgs img.record__card { box-shadow: none; } 

/* ── temperature report ─────────────────────────────────── */
.report { padding-top: 180px; } 
.report .sec-lead { margin-top: 26px; } 
/* 시안 그룹 1034×650 — 폰 440 + 화살표 77.2 + 폰 440.
 좌우 간격(38.4px)은 space-between 이 그대로 만들어 준다 */
.report__imgs { display: flex; align-items: center; justify-content: space-between; width: 932px; margin: 60px auto 0; } 
.report__phone { flex: none; width: 42.553%; } 
/* 이 자리 이미지는 폰 목업이 아닌 납작한 화면 캡처 — record 카드(.record__card)와 같은 규격으로 맞춘다 */
.report__phone--img { display: block; aspect-ratio: 430 / 650; object-fit: cover; border-radius: 30px; box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.18); } 
/* 영상 원본은 1320×2100(=440×700) 이라 시안 높이(650)에 맞춰 아래를 잘라낸다(위 기준 정렬).
 영상 배경이 검은색이라 폰 라운드 바깥에 검은 각이 남는 것은 래퍼의 라운드+overflow 로 자른다.
 아래 11.1% 페이드는 시안(image 23)처럼 흰 그라디언트를 덮어서 만든다 —
 video 에 mask-image 를 걸면 프레임마다 마스크 합성이 일어나 재생이 무거워진다 */
.report__vid { position: relative; overflow: hidden; aspect-ratio: 440 / 650; border-radius: 19.5% 19.5% 0 0 / 12.8% 12.8% 0 0; } 
.report__vid video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } 
.report__vid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 11.1%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; } 
/* 시안에서 화살표는 폰 세로 중앙보다 14.7px 위에 있다 */
.report__arrow { flex: none; position: relative; top: -13px; width: 7.465%; height: auto; } 

/* ── all-in-one ─────────────────────────────────────────── */
.allinone { padding-top: 180px; } 
.allinone__title { font-size: 60px; font-weight: 600; line-height: 70px; } 
.allinone__lead { margin-top: 20px; font-size: 20px; font-weight: 300; line-height: 30px; color: var(--c-text); } 

.ai-cards { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 588px); gap: 43px; } 
/* 카드 배경(연회색 라운드 + 앱 목업)은 시안 노드를 통째로 export 한 이미지다 */
.ai-card { position: relative; height: 594px; } 
.ai-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; } 
.ai-card__txt { position: relative; padding: 49px 50px 0; } 
.ai-card__head { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } 
.ai-card__no { font-size: 30px; font-weight: 700; color: #205d9c; } 
.ai-card__title { font-weight: 700; color: #000; } 
.ai-card__title--sm { font-size: 28px; } 
.ai-card__title--lg { font-size: 30px; } 
.ai-card__desc { margin-top: 12px; width: 488px; font-size: 18px; line-height: 27px; color: #333; } 

/* ── specifications ─────────────────────────────────────── */
.spec { margin-top: 150px; padding: 151px 0 148px; background: #f5f6f8; } 
.spec__title { text-align: center; font-size: 60px; font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; } 
/* 카드 아래 여백은 스토어 배지 기준 — 시안이 배지 하단에서 89px */
.spec__card { position: relative; width: 1220px; margin: 84px auto 0; padding: 78px 0 89px; background: #fff; border-radius: 10px; } 

.spec__table { width: 693px; margin: 0 auto 0 263px; border-collapse: collapse; } 
.spec__table th,
.spec__table td { height: 56px; border-bottom: 1px solid #e6e6e6; font-size: 16px; text-align: left; vertical-align: middle; } 
.spec__table th { width: 298px; font-weight: 700; color: #000; } 
.spec__table td { color: #333; white-space: nowrap; } /* 시안도 한 줄 고정 */

/* 제품 3컷(정면·빗면·패치) + 치수 — 시안 그룹 1281×774 기준으로 내부를 % 배치해
 폭이 줄어도 구도가 유지된다. 시안 그룹이 카드(1220)보다 61px 넓어서
 max-width 로 카드 폭에 맞춰 전체를 약 4.8% 축소해 넣는다 */
.spec__views { position: relative; width: 1281px; max-width: 100%; margin: 101px auto 0; aspect-ratio: 1281 / 774; } 
.spec__view { position: absolute; max-width: none; } 
.spec__view--front { left: 0; top: 0; width: 38.486%; height: 95.995%; } 
.spec__view--incl { left: 32.006%; top: 8.527%; width: 35.519%; height: 88.243%; } 
.spec__view--patch { left: 59.797%; top: 0; width: 40.203%; height: 100%; } 

.spec__dim { position: absolute; max-width: none; } 
.spec__dim--w { left: 13.895%; top: 19.122%; width: 11.878%; height: 1.938%; } 
.spec__dim--d { left: 53.318%; top: 19.251%; width: 2.099%; height: 1.938%; } 
.spec__dim--h { left: 56.642%; top: 23.385%; width: 1.172%; height: 59.948%; } 

/* 치수 숫자는 각 치수선 중앙에 건다 — 대체 폰트라 글자 폭이 시안과 달라
 왼쪽 끝을 맞추면 오른쪽이 어긋난다 */
.spec__mm { position: absolute; font-size: 16px; line-height: 1; color: #333; white-space: nowrap; } 
.spec__mm--w { left: 19.835%; top: 16.537%; transform: translateX(-50%); } 
.spec__mm--d { left: 54.296%; top: 16.537%; transform: translateX(-50%); } 
/* 세로 치수 표기 — 글자를 눕혀 세로로 흐르게 (sideways 가 없으면 글자가 세로로 쌓인다) */
.spec__mm--h { /* 회전 텍스트라 시안 메타의 bbox 가 회전 전 좌표다 — 시안 캡처에서 실측한 위치로 맞춘다 */
 left: 57.791%; top: 53.359%; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: sideways; } 

.spec__label { position: absolute; top: 90.181%; font-size: 16px; font-weight: 600; line-height: 1; color: #333; text-align: center; white-space: nowrap; transform: translateX(-50%); } 
.spec__label--front { left: 19.874%; } 
/* 시안 텍스트는 소문자 'inclined' + capitalize 로 첫 글자만 대문자로 보인다 */
.spec__label--incl { left: 50.623%; text-transform: capitalize; } 
.spec__label--patch { left: 79.498%; top: 90.052%; line-height: 1.2; } 

/* 제품 페이지는 사양 배경이 푸터까지 이어진다 */
/* 스토어 배지 — 시안은 카드(1222) 오른쪽에서 109px 안쪽, 두 배지 간격 9px */
.spec__stores { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 24px; padding-right: 8.93%; } 
.spec__store { display: block; width: auto; height: 86px; } 

.spec + .footer { margin-top: 0; }