/* =====================================================================
   의료장비 (devices) — Figma `의료장비 · Desktop` 247:16667 (2026-09-29 리터치)
   공통(site.css · sub.css)과 다른 부분만 페이지 범위로 지정 (artifact 빌드에서는 전역 병합되므로 스코프 필수)
   ===================================================================== */

/* ---------- Page hero: 레이저룸 사진 CROP(sx .793 · ty .36) — cover(1.5배) 위에 1.261배 확대, 좌측 기준 ---------- */
:is(body[data-page="devices"],#page-devices) .page-hero .bg img{transform:scale(1.261);transform-origin:0 246px}

/* ---------- Devices 섹션: #F8F8F8 · 상하 110 ---------- */
.devices-sec{background:#F8F8F8}
/* Section Head (Layout=Row): 제목 옆 설명(베이스라인 정렬) · 제목 #1E1B17 + 이탤릭 베이지 */
.devices-sec .sec-head{margin-bottom:56px}
.devices-sec .sec-head .title{flex-direction:row;align-items:baseline;gap:22px}
.devices-sec .sec-head .title h2{padding:0;color:var(--text)}/* Figma h2 행 64 (홈 75와 다름) */
.devices-sec .sec-head .title h2 em{color:var(--beige)}
.devices-sec .sec-head .title p{font-size:15px;line-height:1.7;color:var(--text-2)}

/* 장비 탭이 더 이어질 때만 보이는 비조작형 스크롤 힌트 — 스크롤 트랙 밖에 배치 */
.sub-nav--devices .sub-nav__shell{width:min(var(--container),calc(100% - var(--pad)*2));margin-inline:auto;position:relative}
.sub-nav--devices .container{width:calc(100% - 44px);margin-inline:0;scroll-padding-inline:18px}
.sub-nav__scroll-hint{display:none;position:absolute;right:0;top:50%;width:32px;height:32px;border:1px solid var(--hair);border-radius:50%;place-items:center;background:rgba(255,255,255,.96);box-shadow:0 3px 12px rgba(30,27,23,.12);font-size:24px;line-height:1;color:var(--brown);pointer-events:none;transform:translateY(-50%)}
.sub-nav--devices.has-horizontal-overflow:not(.is-at-horizontal-end) .sub-nav__scroll-hint{display:grid}
@media (min-width:768px) and (max-width:1279px){.sub-nav--devices .container{width:100%}.sub-nav__scroll-hint{display:none!important}}
@media (max-width:767px){.sub-nav--devices .sub-nav__shell{width:100%}.sub-nav--devices .container{width:calc(100% - 44px)}}

/* ---------- device-card (Figma 컴포넌트 396:8935) ---------- */
.device-list{display:grid;gap:24px}
.device-card{display:flex;gap:24px;height:360px;background:#fff;border:1px solid rgba(30,27,23,.05);border-radius:20px;transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.device-card:hover{border-color:var(--hair-gold);box-shadow:var(--shadow-soft)}
/* 좌: 500×360 · 본(#EFEBE3) + 장비 누끼 + 하단 17.5% 그레이지 페이드 · 영문명 좌상단 */
.device-card .art{flex:0 0 500px;height:100%;margin:-1px 0 -1px -1px;border-radius:14px 0 0 14px;background:var(--bone)}
.device-card .art::before{content:"";inset:0;background:linear-gradient(180deg,rgba(233,228,219,0) 82.5%,var(--greige) 100%);opacity:1;mix-blend-mode:normal;z-index:1}
.device-card .art img{transition:transform 1s var(--ease)}
.device-card:hover .art img{transform:scale(1.03)}
.device-card .art .en{position:absolute;left:20px;top:20px;z-index:2;font-family:var(--ff-en);font-style:italic;font-size:17px;line-height:1.3;letter-spacing:.02em;color:var(--text-2)}
/* 우: 상하 40 · 우 24 */
.device-card .card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;padding:40px 16px 40px 0}/* Figma 우 24 — 브라우저 한글 글리프 폭이 Figma보다 약간 넓어 줄바꿈이 달라지지 않도록 16 */
.device-card .card-head{display:flex;flex-direction:column;gap:6px;padding:0 8px}
.device-card .cat{font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--beige)}
.device-card h3{font-size:24px;font-weight:500;line-height:1.5;letter-spacing:-.02em;color:var(--text)}
.device-card .card-text{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.device-card .card-text p{font-size:15px;line-height:1.7;letter-spacing:-.01em;color:var(--text-2)}
.device-card .chips{gap:12px;padding-top:10px}
.device-card .chips span{background:rgba(119,105,75,.7)}

/* ---------- 감수 · 주석 ---------- */
.devices-sec .byline{margin-top:36px;gap:8px 18px;line-height:1.8;letter-spacing:-.01em}
.devices-sec .byline span{gap:4px}
.devices-sec .byline span+span::before{margin-right:14px;background:var(--linen)}
.devices-sec .note{margin-top:36px;font-size:13px;line-height:1.8;color:var(--text-3);text-align:right}

/* ---------- Page CTA: 제목 #1E1B17 · '진단' 세리프 Medium 베이지 ---------- */
:is(body[data-page="devices"],#page-devices) .page-cta h2{color:var(--text)}
:is(body[data-page="devices"],#page-devices) .page-cta h2 strong{font-weight:500;color:var(--beige)}

/* ===== Responsive ===== */
/* ---------- Tablet 768–1279 (Figma 390:70858): 섹션 상하 110 · 카드 좌 300 장비 컷 + 우 본문(높이 = 내용) ---------- */
@media (max-width:1279px){
  /* Page hero: Figma CROP(sx .675 · 초점 35.1% 62.5%) = cover 위 1.481배 — 초점 기준 확대 (object-position 은 section style 의 --bg-x-t/--bg-y-t) */
  :is(body[data-page="devices"],#page-devices) .page-hero .bg img{transform:scale(1.481);transform-origin:35.1% 62.5%}
  .devices-sec{padding:110px 0}
  /* Page CTA: Figma 태블릿·모바일은 '진단' 강조 없음 · 한 줄 · 행간 160% */
  :is(body[data-page="devices"],#page-devices) .page-cta h2{line-height:1.6}
  :is(body[data-page="devices"],#page-devices) .page-cta h2 strong{font-weight:inherit;color:inherit}
  /* Section Head: Figma 태블릿도 Desktop 변형(64) — 설명이 한 줄에 안 들어가 2줄로, 마지막 줄을 제목 baseline에 맞춤 */
  .devices-sec .sec-head .title{flex:1;min-width:0;align-items:last baseline}
  .devices-sec .sec-head .title h2{flex:none;font-size:64px}
  .devices-sec .sec-head .title p{flex:1 1 0;min-width:0}
  .device-card{height:auto}
  .device-card .art{flex-basis:300px;height:auto}
  /* 장비 누끼: Figma 크롭(원본 비율) — 높이 --h · 위 --t · 가로 중심 --x (아트 박스 기준 %) */
  .device-card .art img{inset:auto;top:var(--t,0%);left:var(--x,50%);width:auto;max-width:none;height:var(--h,100%);aspect-ratio:var(--ar,1.597);object-fit:fill;translate:-50% 0}
  .device-card .card-body{padding:40px 24px 40px 0}
  .devices-sec :is(.sec-head p,.card-text p,.note){word-break:keep-all}/* Figma 한글 줄바꿈 = 어절 단위 */
  .devices-sec .sec-head p span{white-space:nowrap}/* '장비 라인업'은 한 덩어리로 다음 줄(Figma 375) */
  #shurink-universe.device-card .card-text p{letter-spacing:-.03em}/* 브라우저 한글 글리프가 Figma보다 ~2% 넓어 첫 줄('…선택하는')이 넘침 → Figma와 같은 4줄 */
  .device-card .chips span{padding:5px 13px}/* Figma 칩 32(inside stroke) — 테두리 1px 만큼 패딩 감산 */
  #ultherapy-prime.device-card .art{--h:99.4%;--t:0%;--x:53.3%;--ar:1.442}
  #sofwave.device-card .art{--h:98.9%;--t:3.4%}
  /* 볼뉴머 · 슈링크 · 스마트룩스: 데스크톱 컷(*.webp) 밖 영역까지 보이므로 누끼 원본 크롭(*-full.webp)을 ::after 로 (img는 대체텍스트용으로 투명) */
  :is(#volnewmer,#shurink-universe,#smartlux).device-card .art img{opacity:0}
  :is(#volnewmer,#shurink-universe,#smartlux).device-card .art::after{content:"";position:absolute;z-index:0;top:var(--t);left:var(--x,50%);height:var(--h);aspect-ratio:var(--ar);translate:-50% 0;background:center/100% 100% no-repeat;transition:transform 1s var(--ease)}
  :is(#volnewmer,#shurink-universe,#smartlux).device-card:hover .art::after{transform:scale(1.03)}
  #volnewmer.device-card .art{--h:116.1%;--t:7.6%;--ar:.4509}
  #volnewmer.device-card .art::after{background-image:url(../figma/devices/volnewmer-full.webp)}
  #shurink-universe.device-card .art{--h:100%;--t:20%;--ar:.4413}
  #shurink-universe.device-card .art::after{background-image:url(../figma/devices/shurink-universe-full.webp)}
  #air-nox.device-card .art{--h:108%;--t:-7.8%}
  #ldm-smart-tri.device-card .art{--h:99.5%;--t:.6%}
  #smartlux.device-card .art{--h:108.6%;--t:19.1%;--x:50.4%;--ar:.6735}
  #smartlux.device-card .art::after{background-image:url(../figma/devices/smartlux-full.webp)}
}
/* ---------- Mobile ≤767 (Figma 390:70891): 섹션 상하 61 · 카드 세로(위 200 장비 컷 · 아래 본문) · 0.8배 타이포 ---------- */
@media (max-width:767px){
  :is(body[data-page="devices"],#page-devices) .page-hero .bg img{transform:scale(1.567);transform-origin:65% 99.8%}/* Figma CROP sx .3925 → 1.567배 */
  .devices-sec{padding:61px 0}
  :is(body[data-page="devices"],#page-devices) .page-cta h2{color:var(--text-strong)}
  :is(body[data-page="devices"],#page-devices) .page-cta p:not(.eyebrow){letter-spacing:-.03em;word-break:keep-all}/* Figma 첫 문장 한 줄(354) — 브라우저 글리프 폭 보정 */
  .devices-sec .sec-head .title{flex-direction:column;align-items:flex-start;gap:8px}
  .devices-sec .sec-head .title h2{font-size:34px}
  .devices-sec .sec-head .title p{flex:none;font-size:13.5px}
  .device-card{flex-direction:column;gap:0;border-radius:16px}
  .device-card .art{flex:0 0 200px;height:200px;margin:-1px -1px 0;border-radius:11.2px 11.2px 0 0}
  .device-card .art .en{left:16px;top:16px;font-size:14px}
  .device-card .card-body{gap:16px;padding:26px 20px 32px}
  .device-card .card-head{gap:4.8px;padding:0}
  .device-card .cat{font-size:10px}
  .device-card h3{font-size:19px}
  .device-card .card-text{gap:10px}
  .device-card .card-text p{font-size:13px}
  .device-card .chips{gap:9.6px;padding-top:8px}
  .device-card .chips span{padding:3.8px 10.2px;font-size:10px}/* Figma 25.6(inside stroke) */
  #ultherapy-prime.device-card .art{--h:102.8%;--t:-6.5%;--x:49.5%;--ar:1.712}
  #sofwave.device-card .art{--h:115.7%;--t:-5.5%}
  #volnewmer.device-card .art{--h:138.4%;--t:6.7%;--x:50.3%}
  #shurink-universe.device-card .art{--h:151.1%;--t:8.9%;--x:47.9%}
  #air-nox.device-card .art{--h:108%;--t:-7.8%}
  #ldm-smart-tri.device-card .art{--h:111.3%;--t:-3.7%}
  #smartlux.device-card .art{--h:113.2%;--t:11.8%;--x:50.3%}
  /* 감수 · 주석: 오른쪽 정렬 · 11/180% */
  .devices-sec .byline{justify-content:flex-end;gap:8px 10px;font-size:11px}
  .devices-sec .byline span{gap:3.2px}
  .devices-sec .byline span+span::before{width:2.4px;height:2.4px;margin-right:6.8px}
  .devices-sec .note{font-size:11px}
}