/* ===== 제품정보 페이지(스트리밍 디바이스 / 모바일 앱) =====
 * 맨 위 히어로는 메인 페이지와 같은 전체 화면 구성이고(투명 헤더가 위에 겹침), 배경만 이미지(4K/FullHD)를 쓴다. */
.hero-video.hero-product .hero-product-bg {
  position: absolute; inset: 0; z-index: 0; background: #111 no-repeat 50% 50% / cover;
}
.hero-video.hero-product.hero-streaming .hero-product-bg { background-image: url('/img/streaming_hero.jpg?v=5'); }
.hero-video.hero-product.hero-app .hero-product-bg { background-image: url('/img/app_hero.jpg?v=4'); }
.hero-video.hero-product .hero-content h1 { font-weight: 700; line-height: 1.2; letter-spacing: -.5px; font-size: 46px; word-break: keep-all; }
.hero-video.hero-product .hero-content p { max-width: 640px; word-break: keep-all; }
@media (max-width: 640px) {
  .hero-video.hero-product .hero-content h1 { font-size: 30px; }
}

.pd-section { max-width: none; width: 100%; margin: 0; box-sizing: border-box; padding: 110px 20px; }
.pd-section.pd-dark { background: #0f1218; color: #fff; }
.pd-section.pd-gray { background: #f6f6f7; }
.pd-inner { max-width: 1200px; margin: 0 auto; }
.pd-head { text-align: center; margin-bottom: 56px; }
.pd-head .eyebrow { display: block; margin-bottom: 14px; }
.pd-dark .pd-head .eyebrow { color: #e6636a; }
.pd-title { margin: 0 0 18px; font-size: 36px; font-weight: 600; line-height: 1.35; color: #282828; letter-spacing: -.5px; word-break: keep-all; }
.pd-dark .pd-title { color: #fff; }
.pd-lead { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.9; color: #525252; word-break: keep-all; }
.pd-lead + .pd-lead { margin-top: 12px; }
.pd-dark .pd-lead { color: #c9ced6; }

.pd-grid { display: grid; gap: 24px; }
.pd-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.pd-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.pd-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.pd-card { background: #fff; border: 1px solid #e6e6e6; padding: 34px 28px 38px; }
.pd-gray .pd-card { border-color: transparent; }
.pd-dark .pd-card { background: #171c25; border-color: #262d3a; }
.pd-card .pd-tag { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #002c5f; text-transform: none; }
.pd-dark .pd-card .pd-tag { color: #e6636a; }
.pd-card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.4; color: #282828; word-break: keep-all; }
.pd-dark .pd-card h3 { color: #fff; }
.pd-card p { margin: 0; font-size: 16px; line-height: 1.8; color: #525252; word-break: keep-all; }
.pd-dark .pd-card p { color: #b9c0cc; }

.pd-closing .pd-title { margin-bottom: 20px; }

@media (max-width: 1024px) {
  .pd-grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .pd-grid.c3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pd-section { padding: 70px 20px; }
  .pd-title { font-size: 22px; }
  .pd-head { margin-bottom: 36px; text-align: left; }
  .pd-head .pd-lead { margin-left: 0; margin-right: 0; }
  .pd-grid.c2, .pd-grid.c3, .pd-grid.c4 { grid-template-columns: 1fr; }
}

/* Device story: 왼쪽 글 + 오른쪽 제품 이미지. 이미지(img/device_story.jpg)는 섹션 전체 배경으로 깔리고, 제품은 이미지 오른쪽에 있다 */
.ds-split { position: relative; max-width: none; width: 100%; margin: 0; background: #e7e7e7 url('/img/device_story.jpg?v=3') right bottom / auto clamp(250px, calc((100vw - 700px) / 1.92), 450px) no-repeat; min-height: 480px; padding: 80px 20px 60px; box-sizing: border-box; overflow: hidden; }
.ds-inner { position: relative; max-width: 1060px; margin: 0 auto; }
.ds-text { max-width: 500px; }
.ds-text .eyebrow { display: block; margin-bottom: 14px; text-align: left; }
.ds-title { margin: 0 0 22px; font-size: 36px; font-weight: 600; line-height: 1.35; color: #282828; letter-spacing: -.5px; word-break: keep-all; }
.ds-lead { margin: 0; font-size: 16px; line-height: 1.85; color: #444; word-break: keep-all; }
@media (max-width: 1100px) {
  section.ds-split { min-height: 0; padding: 56px 20px 0 !important; background-image: none; }
  .ds-split::after { content: ''; display: block; margin: 36px -20px 0; aspect-ratio: 1170 / 700; background: url('/img/device_story_mo.jpg?v=1') center bottom / cover no-repeat; }
}

/* 하루 시간대별 카드: 흰 박스 안에 위쪽 사진(16:9) + 아래 글 */
.pd-gray .pd-card.has-photo, .pd-card.has-photo { background: #fff; border: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.pd-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; background: #d6d6d6; }
.pd-card.has-photo .pd-tag { margin: 26px 28px 12px; color: #c51f25; }
.pd-card.has-photo h3 { margin: 0 28px 12px; }
.pd-card.has-photo p { margin: 0 28px 34px; }

/* Intuitive Design: 왼쪽 글 + 오른쪽 정사각 이미지(img/intuitive_ui.jpg) */
.pd-section.ui-sec { padding: 80px 20px; }
.ui-split { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 570px; gap: 100px; align-items: start; }
.ui-text { padding-top: 40px; max-width: 340px; }
.ui-text .eyebrow { display: block; margin-bottom: 14px; text-align: left; }
.ui-title { margin: 0 0 22px; font-size: 36px; font-weight: 600; line-height: 1.35; color: #282828; letter-spacing: -.5px; word-break: keep-all; }
.ui-lead { margin: 0; font-size: 16px; line-height: 1.85; color: #444; word-break: keep-all; }
.ui-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #d6d6d6; }
@media (max-width: 1000px) {
  .ui-split { grid-template-columns: 1fr; gap: 32px; max-width: 570px; }
  .ui-text { padding-top: 0; max-width: none; }
}

/* 모든 섹션 제목 글자 크기 통일(PC 28px / 모바일 22px) */
@media (max-width: 700px) {
  .ds-title, .ui-title { font-size: 22px; }
}

/* 핵심 기능: 흰 박스 카드 + 왼쪽 위에 작은 원형 아이콘(img/feature_01~09.png) */
.pd-icon { display: block; width: 60px; height: 60px; margin: 0 0 20px; border-radius: 50%; }
.pd-card.has-icon h3 { margin: 0 0 12px; }
@media (max-width: 700px) {
  .pd-icon { width: 52px; height: 52px; margin-bottom: 16px; }
}

/* 자체 개발 엔진(어두운 섹션): 카드 위쪽에 정사각 이미지(img/engine_01~04.jpg), 아래에 글 */
.pd-dark .pd-card.has-cover { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pd-cover { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 24px; background: #1d2330; }
.pd-card.has-cover .pd-tag { margin: 0 24px 12px; }
.pd-card.has-cover h3 { margin: 0 24px 12px; }
.pd-card.has-cover p { margin: 0 24px 30px; }

/* 클라우드 인프라 카드: 가는 선 아이콘(회색) + 제목 + 설명 */
.pd-lineicon { display: block; width: 52px; height: 52px; margin: 0 0 20px; }
.pd-card.has-lineicon { position: relative; }
.pd-card.has-lineicon .pd-num { position: absolute; top: 30px; right: 28px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #c51f25; }

/* 엔진 카드: 가로로 넓은 박스(왼쪽 정사각 이미지 + 오른쪽 글), 2열 배치 */
@media (min-width: 901px) {
  .pd-grid.c4.pd-engine { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .pd-engine .pd-card.has-cover { display: grid; grid-template-columns: 240px 1fr; align-items: center; }
  .pd-engine .pd-cover { width: 240px; height: 100%; min-height: 240px; aspect-ratio: auto; margin: 0; grid-row: 1 / span 3; }
  .pd-engine .pd-card.has-cover .pd-tag { margin: 0 28px 10px; grid-column: 2; align-self: end; }
  .pd-engine .pd-card.has-cover h3 { margin: 0 28px 10px; grid-column: 2; }
  .pd-engine .pd-card.has-cover p { margin: 0 28px; grid-column: 2; align-self: start; }
}

/* 마무리 섹션: 배경 이미지(img/closing_bg.jpg, 3200x1000 권장) 위에 왼쪽 글 — 제품은 이미지 오른쪽에 있다 */
.pd-section.pd-closing { position: relative; text-align: left; background: #f9f9f9 url('/img/closing_bg.jpg?v=3') right center / cover no-repeat; min-height: 490px; display: flex; align-items: center; padding: 80px 20px; box-sizing: border-box; }
.pd-closing .pd-inner { width: 100%; max-width: 1200px; }
.pd-closing .eyebrow { display: block; text-align: left; margin-bottom: 14px; }
.pd-closing .pd-lead { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.85; color: #444; }
@media (max-width: 1600px) {
  /* 화면이 좁으면 글이 위, 이미지가 아래(전체 폭)로 */
  section.pd-section.pd-closing { min-height: 0; display: block; background: #f9f9f9; padding: 64px 20px 0 !important; }
  .pd-closing::after { content: ''; display: block; margin: 48px -20px 0; aspect-ratio: 4000 / 900; background: url('/img/closing_bg.jpg?v=3') center / cover no-repeat; }
}
@media (max-width: 700px) {
  .pd-closing::after { margin-top: 36px; aspect-ratio: 4 / 3; background-position: 75% center; }
}

/* 모바일 앱 페이지 전용 이미지(스트리밍 디바이스 페이지와 같은 레이아웃) */
/* App story: 장면 전체가 담긴 배경(휴대폰이 가운데) — 이미지를 왼쪽에 맞춰 깔고 글은 왼쪽 회색 영역 위에 올린다 */
.ds-split.ds-app { background: linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 32%, rgba(255,255,255,0) 50%), #f4f4f4 url('/img/app_story.jpg?v=2') left center / cover no-repeat; min-height: 480px; }
.ds-app .ds-inner { margin-left: 8vw; margin-right: auto; max-width: 600px; }
.ds-app .ds-text { max-width: 440px; }
@media (max-width: 1100px) {
  section.ds-split.ds-app { background: #f4f4f4; min-height: 0; }
  .ds-app .ds-inner { margin: 0 auto; max-width: 1060px; }
  .ds-split.ds-app::after { background: url('/img/app_story.jpg?v=2') center / cover no-repeat; aspect-ratio: 4000 / 900; }
}
@media (max-width: 700px) {
  /* 모바일: 위쪽에 휴대폰 사진, 그 아래에 글 */
  section.ds-split.ds-app { background: #fefefe url('/img/app_story_mo.jpg?v=2') center top / 100% auto no-repeat; padding: 300px 20px 56px !important; }
  .ds-split.ds-app::after { display: none; }
}

/* 앱 마무리 섹션: 어두운 배경 + 흰 글씨 + 스토어 버튼(img/app_icon.png: Google Play / App Store 두 개가 한 장) */
.pd-section.pd-closing.cl-app { background: #030303 url('/img/app_closing_bg.jpg?v=2') right center / cover no-repeat; min-height: 560px; }
.cl-app .eyebrow, .cl-app .pd-title { color: #fff; }
.cl-app .pd-lead { color: rgba(255,255,255,.88); }
.cl-app .store-badges { position: relative; width: 200px; margin-top: 26px; }
.cl-app .store-badges img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.cl-app .store-badges { pointer-events: none; }
@media (min-width: 1101px) and (max-width: 1700px) {
  /* 중간 폭: 높이를 640px로 키우고 휴대폰이 화면 오른쪽 3/4 지점에 오도록 배경을 옮긴다(글과 겹치지 않게) */
  .pd-section.pd-closing.cl-app { min-height: 640px; background: #030303 url('/img/app_closing_bg.jpg?v=2') calc(75vw - 1920px) center / auto 640px no-repeat; }
  .pd-closing.cl-app::after { display: none; }
}
@media (max-width: 1100px) {
  /* 좁은 폭: 글·버튼 아래에 세로형 이미지(app_closing_bg_mo.jpg)의 아래쪽(휴대폰) 부분을 크게 */
  section.pd-section.pd-closing.cl-app { background: #030303; min-height: 0; }
  .pd-closing.cl-app::after { display: block; background: url('/img/app_closing_bg_mo.jpg?v=2') center bottom / cover no-repeat; aspect-ratio: 2445 / 1900; margin-top: 36px; }
}
@media (max-width: 700px) {
  .pd-closing.cl-app::after { aspect-ratio: 2445 / 1700; margin-top: 28px; }
}