/* ==========================================================
   와우오더 메인 — 기기 섹션 (#model) · js/main/device.js · js/main/device3d.js
   메시지: 같은 기기에 카드리더기만 끼우면 선불형, 빼면 후불형 — 언제든 바꿀 수 있다.
   세 덩어리로 읽히게 — 덩어리 안은 좁게, 덩어리 사이는 넓게(스킬 layout-spacing 사다리: 4·20·28 → 64 → 96 → 120)
     ① 제목 두 줄(아랫줄만 파랑)
     ② 보기 묶음: 토글(회색 트랙 + 흰 알약) → 지금 방식(작은 파랑 이름 + 설명 한 줄) → 3D 기기(흰 바탕 그대로) → 돌려 보기 안내
        (레퍼런스 페이히어 골프 "토글 → 설명 → 큰 기기" 문법)
     ③ 특징 묶음: 가는 선 위 세 칸 — 옅은 회색 원 아이콘 + 회색 한 줄 + 굵은 이름(아이샵케어 목록 문법)
   구분: 위 차이 섹션도 흰 바탕이라, 이 섹션은 맨 위만 옅은 회색에서 시작해 제목 아래에서 흰색이 된다
   색: 먹색·회색 + 파랑 #1d63e6(제목 한 구절 · 지금 고른 토글 글자 · 방식 이름). 아이콘의 파랑도 같은 계열.
   ========================================================== */

/* main.css 의 .page-table section·h2 보다 이기도록 section.md / .md .md__title 로 쓴다 */
section.md {
  position: relative; padding: 120px 0 128px; text-align: center; color: #171717;
  background: linear-gradient(180deg, #f2f4f7 0, #fff 330px);
}
.md__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 80px; }

/* ---------- ① 제목 ---------- */
.md .md__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #171717;
}
.md__title em { font-style: normal; color: #1d63e6; }

/* ---------- ② 보기 묶음 ---------- */
.md-viewer { margin-top: 64px; }

/* 토글 — 회색 트랙 + 흰 알약(미끄러져 간다), 지금 칸 글자만 파랑 */
.md-tabs { position: relative; display: inline-flex; padding: 4px; border-radius: 100px; background: #e9ecf0; }
.md-tabs__ind {
  position: absolute; left: 0; top: 4px; bottom: 4px; z-index: 0; width: 0; border-radius: 100px; background: #fff;
  box-shadow: 0 1px 3px rgba(23, 23, 23, .08); pointer-events: none; will-change: transform;
}
.md-tabs.is-ready .md-tabs__ind { transition: transform .45s cubic-bezier(.16, 1, .3, 1), width .45s cubic-bezier(.16, 1, .3, 1); }
.md-tab {
  position: relative; z-index: 1; min-width: 116px; padding: 13px 28px; border: 0; border-radius: 100px; background: none;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; color: #6b7280; cursor: pointer;
  transition: color .2s;
}
.md-tab:hover { color: #171717; }
.md-tab.is-on { font-weight: 800; color: #1d63e6; }
.md-tab:focus-visible { outline: 2px solid #1d63e6; outline-offset: 2px; }

/* 지금 고른 방식 — 토글 바로 아래: 작은 파랑 이름 + 설명 한 줄 */
.md-modes { position: relative; height: 58px; margin-top: 22px; }
.md-mode { position: absolute; inset: 0; transition: opacity .35s ease, transform .35s ease; }
.md-mode b { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; color: #1d63e6; }
.md-mode p { margin: 4px 0 0; font-size: 19px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: #333d4b; word-break: keep-all; }
.md-mode--postpaid { opacity: 0; transform: translateY(6px); pointer-events: none; }
.md[data-mode="postpaid"] .md-mode--prepaid { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.md[data-mode="postpaid"] .md-mode--postpaid { opacity: 1; transform: none; pointer-events: auto; }

/* 무대 — 흰 바탕 그대로. 3D 캔버스와 대체 그림이 같은 자리에 겹친다.
   카메라는 한 바퀴 돌아도 잘리지 않는 거리로 자동으로 정해진다(device3d.js fitCamera) — 기본 각도에서 기기 위로 무대 높이의 약 6.5% 가 비므로
   무대 위 여백은 그만큼 줄여 둔다(설명 ↔ 기기 실제 간격 ≈ 34px) */
.md-stage { position: relative; max-width: 960px; margin: 6px auto 0; }
.md-stage__view { position: relative; aspect-ratio: 960 / 420; }
.md-stage__view canvas { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .5s ease; cursor: grab; }
.md-stage__view.is-grab canvas { cursor: grabbing; }
.md.is-3d .md-stage__view canvas { opacity: 1; }
.md-stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.md-stage__img--postpaid { opacity: 0; }
.md[data-mode="postpaid"] .md-stage__img--prepaid { opacity: 0; }
.md[data-mode="postpaid"] .md-stage__img--postpaid { opacity: 1; }
.md.is-3d .md-stage__img { opacity: 0 !important; transition-delay: .5s; }   /* 캔버스가 다 드러난 뒤에 그림을 치운다 */

/* 돌려 보기 안내 — 바닥 그림자 바로 아래 가운데, 3D 가 준비되면 나타난다 */
.md-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: #8b95a1;
  opacity: 0; transition: opacity .4s ease .6s;
}
.md.is-3d .md-hint { opacity: 1; }
.md-hint svg { flex: none; width: 30px; height: 12px; fill: none; stroke: #a3aab4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.md-hint__touch { display: none; }
@media (hover: none) {
  .md-hint__mouse { display: none; }
  .md-hint__touch { display: inline; }
}

/* ---------- ③ 특징 묶음 — 가는 선 위 세 칸 ---------- */
.md-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 96px auto 0; padding-top: 40px;
  border-top: 1px solid #e8ebef; list-style: none;
}
.md-specs li { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: left; }
.md-spec__ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #f2f4f6; }
.md-fx { display: block; width: 44px; height: 44px; }
.md-specs small { display: block; font-size: 14px; line-height: 1.4; color: #8b95a1; }
.md-specs b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; line-height: 1.35; color: #191f28; }
.md-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 특징 아이콘 움직임 — 왼쪽부터 차례로 한 번씩(각도 → 배터리 → 고정), 한 바퀴 7.2초 ----------
   아이콘마다 움직임은 자기 차례(앞 2.2초)에만, 나머지는 쉬는 모습(= 움직임 없는 기본 모습)으로 둔다 — 셋이 한꺼번에 움직이지 않게.
   화면에 들어올 때 device.js 가 .md-specs 에 .is-play 를 붙여야 돈다. 움직임 줄이기 설정이면 기본 모습 그대로 */
.md-fx * { transform-box: fill-box; }
.md-specs li:nth-child(2) .md-fx,
.md-specs li:nth-child(2) .md-fx * { animation-delay: 2.4s; }
.md-specs li:nth-child(3) .md-fx,
.md-specs li:nth-child(3) .md-fx * { animation-delay: 4.8s; }
.md-specs:not(.is-play) .md-fx,
.md-specs:not(.is-play) .md-fx * { animation-play-state: paused !important; }

/* 화면 각도 조절 — 앞모습. 화면이 경첩(아래쪽)을 축으로 뒤로 젖혀졌다 돌아오고(원근), 그 사이 빛이 화면을 한 번 스친다 */
.md-tilt { position: relative; }
.md-tilt__stand { position: absolute; inset: 0; width: 100%; height: 100%; }
.md-tilt__tab {
  position: absolute; left: 11.4%; top: 11.4%; width: 77.3%; height: 52.3%; border-radius: 4px;
  background: linear-gradient(180deg, #e9edf2, #c3cad4);
  transform-origin: 50% 86%; animation: md-tilt 7.2s cubic-bezier(.45, 0, .25, 1) infinite;
}
.md-tilt__tab::before {                                         /* 화면 */
  content: ""; position: absolute; inset: 7.6%; border-radius: 2px; background: linear-gradient(180deg, #62a0ff, #2c6cf2);
}
.md-tilt__tab::after {                                          /* 화면 위 메뉴 줄 */
  content: ""; position: absolute; left: 17.6%; top: 26%; width: 26.5%; height: 10.4%; border-radius: 2px; background: rgba(255, 255, 255, .8);
  box-shadow: 0 5px 0 0 rgba(255, 255, 255, .45), 12px 5px 0 0 rgba(255, 255, 255, .45);
}
.md-tilt__sheen {
  position: absolute; inset: 7.6%; z-index: 1; border-radius: 2px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%; background-position: 100% 0; animation: md-sheen 7.2s ease-in-out infinite;
}
@keyframes md-tilt {
  0%, 2% { transform: perspective(64px) rotateX(0deg); }
  12%, 19% { transform: perspective(64px) rotateX(34deg); }
  29%, 100% { transform: perspective(64px) rotateX(0deg); }
}
@keyframes md-sheen { 0%, 4% { background-position: 100% 0; } 18%, 100% { background-position: 0% 0; } }

/* 보조배터리 내장 — 배터리가 위로 빠졌다가 기둥 속으로 쏙(살짝 튕김), 칸이 아래부터 차오르고, 다 차면 번개가 톡 */
.md-bat__pack { animation: md-bat-pack 7.2s infinite; }
.md-bat__seg { animation: md-bat-seg1 7.2s infinite; }
.md-bat__seg--2 { animation-name: md-bat-seg2; }
.md-bat__seg--3 { animation-name: md-bat-seg3; }
.md-bat__seg--4 { animation-name: md-bat-seg4; }
.md-bat__bolt { transform-origin: 50% 50%; animation: md-bat-bolt 7.2s infinite; }
@keyframes md-bat-pack {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  5% { transform: translateY(-31px); }
  7% { transform: translateY(-31px); animation-timing-function: cubic-bezier(.3, 1.35, .5, 1); }
  13%, 100% { transform: translateY(0); }
}
@keyframes md-bat-seg1 { 0%, 3% { opacity: 1; } 4%, 14% { opacity: 0; } 16%, 100% { opacity: 1; } }
@keyframes md-bat-seg2 { 0%, 3% { opacity: 1; } 4%, 17% { opacity: 0; } 19%, 100% { opacity: 1; } }
@keyframes md-bat-seg3 { 0%, 3% { opacity: 1; } 4%, 20% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes md-bat-seg4 { 0%, 3% { opacity: 1; } 4%, 23% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes md-bat-bolt {
  0% { transform: scale(1); opacity: 1; }
  3%, 24% { transform: scale(0); opacity: 0; }
  27% { transform: scale(1.18); opacity: 1; animation-timing-function: ease-out; }
  30%, 100% { transform: scale(1); opacity: 1; }
}

/* 테이블 고정 — 나사가 내려가며 풀리고(받침 회색), 손잡이를 돌려 위로 조여 상판을 문다(받침 파랑 = 잠김) */
.md-clamp__screw { animation: md-clamp-screw 7.2s infinite; }
.md-clamp__handle { transform-origin: 50% 50%; animation: md-clamp-turn 7.2s infinite; }
.md-clamp__lock { animation: md-clamp-lock 7.2s infinite; }
@keyframes md-clamp-screw {
  0%, 2% { transform: translateY(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  9%, 13% { transform: translateY(6.5px); animation-timing-function: cubic-bezier(.55, 0, .4, 1); }
  21% { transform: translateY(-.6px); }
  23%, 100% { transform: translateY(0); }
}
@keyframes md-clamp-turn {                                      /* 옆에서 본 손잡이가 도는 모습 — 폭이 좁아졌다 넓어진다 */
  0%, 2% { transform: scaleX(1); } 5% { transform: scaleX(.25); } 8% { transform: scaleX(1); }
  13% { transform: scaleX(1); } 15.5% { transform: scaleX(.25); } 18% { transform: scaleX(1); } 20.5% { transform: scaleX(.25); }
  23%, 100% { transform: scaleX(1); }
}
@keyframes md-clamp-lock { 0%, 2% { opacity: 1; } 5%, 20.5% { opacity: 0; } 22.5%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .md-fx, .md-fx * { animation: none !important; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1199px) {
  .md__inner { padding: 0 40px; }
}
@media (max-width: 899px) {
  .md-stage__view { aspect-ratio: 16 / 9; }
  .md-specs { gap: 12px; }
  .md-specs li { flex-direction: column; gap: 12px; text-align: center; }
  .md-spec__ic { width: 56px; height: 56px; }
  .md-fx { transform: scale(.86); }
  .md-specs b { font-size: 16px; }
  .md-specs small { font-size: 13px; }
}
@media (max-width: 599px) {
  section.md { padding: 88px 0 80px; background: linear-gradient(180deg, #f2f4f7 0, #fff 220px); }
  .md__inner { padding: 0 20px; }
  .md .md__title { font-size: 28px; }
  .md-viewer { margin-top: 40px; }
  .md-tab { min-width: 100px; padding: 12px 22px; font-size: 15.5px; }
  .md-modes { height: 52px; margin-top: 18px; }
  .md-mode b { font-size: 13.5px; }
  .md-mode p { font-size: 16px; }
  .md-stage { margin-top: 2px; }
  .md-stage__view { aspect-ratio: 10 / 9; }
  .md-hint { font-size: 13px; }
  /* 특징 — 가는 선 아래 세로 목록(아이샵케어처럼) */
  .md-specs { grid-template-columns: 1fr; gap: 16px; width: fit-content; max-width: 100%; margin-top: 56px; padding: 32px 8px 0; }
  .md-specs li { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
}