@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%); } 
.intervals__inner { position: relative; width: 1920px; height: 100%; margin: 0 auto; } 
.intervals__chart { position: absolute; left: 347px; 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; } 

/* 패널은 화면 왼쪽 끝에 붙고 오른쪽 모서리만 둥글다 (시안 1233px) */
.alert__panel { position: relative; width: 1233px; height: 696px; margin-top: 61px; background: #f5f6f8; border-radius: 0 20px 20px 0; } 
.alert__chart { position: absolute; left: 159px; top: 79px; width: 1039px; 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; } 
.alert__txt { position: absolute; left: 1317px; top: 120px; width: 443px; } 
.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; } 

/* ── 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 이라 그대로 들어맞는다 */
.record__imgs { display: flex; justify-content: center; gap: 71px; margin-top: 77px; } 
.record__imgs img,
.record__imgs video { display: block; width: 430px; height: 650px; border-radius: 30px; box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.18); } 

/* ── temperature report ─────────────────────────────────── */
.report { padding-top: 180px; } 
.report .sec-lead { margin-top: 26px; } 
.report__imgs { position: relative; width: 932px; margin: 60px auto 0; } 
.report__imgs img { width: 100%; } 
/* 시안 그룹(1027×650) 안에서 오른쪽 폰이 있던 자리 — x587 w440, 세로는 전체.
 비율로 잡아야 폭이 유동인 브레이크포인트에서도 왼쪽 폰과 같이 움직인다.
 영상 원본은 440×700 이라 시안 높이(650)에 맞춰 아래 50px 을 잘라낸다(위 기준 정렬).
 아래 11.1% 는 왼쪽 폰처럼 흰 배경으로 흐려지게 마스크를 건다 (시안 image 22) */
.report__phone { /* 치환 요소(video)는 height:auto 면 top/bottom 을 줘도 원본 높이를 쓴다 —
 높이를 명시해야 시안 높이(650)에 맞춰 잘린다 */
 position: absolute; left: 57.157%; top: 0; width: 42.843%; height: 100%; object-fit: cover; object-position: top; /* 영상 배경이 검은색이라 폰 라운드 바깥에 검은 각이 남는다. 폰 본체 라운드
 (원본 440px 중 약 64px = 14.55%)만큼 잘라낸다. 아래는 마스크로 사라지므로 각지게 둔다.
 세로 9.84% 는 박스 비율(440:650)상 가로 14.55% 와 같은 px 이 되는 값 */
 border-radius: 19.5% 19.5% 0 0 / 12.8% 12.8% 0 0; -webkit-mask-image: linear-gradient(to bottom, #000 88.9%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88.9%, transparent 100%); } 

/* ── 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; } 
.spec__card { position: relative; width: 1220px; min-height: 2045px; /* 3컷 구성으로 바뀌며 views 가 171px 높아졌다 — 아래 여백(120px)을 그대로 유지 */
 margin: 84px auto 0; padding-top: 78px; 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; } 

/* 제품 페이지는 사양 배경이 푸터까지 이어진다 */
.spec + .footer { margin-top: 0; }