/* 아이폰 목업 + 스와이프 갤러리 (2026-08-18)
 *
 * 디자인 패키지 원본은 '브라우저 창(.shot-win)' 목업에 데스크톱 캡처를 넣는 구조였다.
 * 대표 지시로 그 자리를 최신 아이폰 목업 + 모바일 캡처로 바꾼다.
 *
 * ★ style.css 를 건드리지 않고 이 파일을 따로 둔다.
 *   디자인팀이 다음 버전에서 style.css 를 새로 주면 그대로 덮어써야 하는데,
 *   거기에 우리 수정이 섞여 있으면 매번 손으로 합쳐야 한다.
 *
 * 변수는 원본 토큰을 그대로 쓴다(--violet 등). 색이 따로 놀면 붙인 티가 난다.
 */

.phone-deck {
  position: relative;
  width: 100%;
}

/* 가로 스크롤 + 스냅. 손가락으로도, 트랙패드로도 넘어간다.
   JS 없이도 넘어가는 게 중요하다 — 스크립트가 실패해도 그림은 봐야 한다. */
.phone-track {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-track::-webkit-scrollbar { display: none; }

/* 폭은 '담는 칸' 기준이다. vw 로 잡으면 좁은 칸에서 폰이 칸 밖으로 삐져나간다.
   2대까지는 나란히 다 보이고, 3대부터 자연스럽게 옆으로 밀리게 된다. */
.phone {
  flex: 0 0 auto;
  scroll-snap-align: start;   /* center 로 두면 첫 장이 반쯤 잘린 채 시작한다 */
  width: min(calc(50% - 13px), 250px);
  min-width: 168px;
  margin: 0;
  position: relative;
}

/* 본체 — 얇은 베젤, 큰 라운드, 테두리에 미묘한 금속 광택 */
.phone-body {
  position: relative;
  border-radius: clamp(30px, 3.4vw, 44px);
  padding: clamp(7px, 0.8vw, 10px);
  background:
    linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 26%, rgba(0,0,0,.5)),
    #17161C;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 30px 60px -22px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.06);
}

/* 화면
   ★ 위에 상태바 자리를 비워 둔다.
     캡처에서 상태바를 잘라내고 앱 헤더부터 담았기 때문에, 자리를 안 비우면
     다이나믹 아일랜드가 앱 헤더("체험 공간 6")를 그대로 덮어 버린다. */
.phone-scr {
  position: relative;
  border-radius: clamp(24px, 2.7vw, 35px);
  overflow: hidden;
  background: #fff;
  aspect-ratio: 9 / 19.5;      /* 최신 아이폰 비율 */
  --bar: clamp(19px, 2.2vw, 28px);
}
.phone-scr img {
  position: absolute;
  top: var(--bar);
  left: 0;
  width: 100%;
  height: auto;                 /* 위에서부터 보여 준다 — 헤더가 잘리면 무슨 화면인지 모른다 */
  display: block;
}

/* 다이나믹 아일랜드 */
.phone-scr::before {
  content: "";
  position: absolute;
  top: clamp(7px, .8vw, 11px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(54px, 6.4vw, 82px);
  height: clamp(16px, 1.9vw, 24px);
  border-radius: 999px;
  background: #0B0A0E;
  z-index: 2;
}

/* 홈 인디케이터 */
.phone-scr::after {
  content: "";
  position: absolute;
  bottom: clamp(5px, .6vw, 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 3px;
  border-radius: 999px;
  background: rgba(11,10,14,.32);
  z-index: 2;
}

/* 화면 이름표 */
.phone-cap {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-dim, #9A98A6);
  letter-spacing: -.01em;
}
.phone-cap b { display: block; color: var(--ink, #EAEAF0); font-weight: 600; font-size: 12.5px; }

/* 페이지 점 */
.phone-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
}
.phone-dots i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(234,234,240,.24);
  transition: background .25s, width .25s;
}
.phone-dots i.on {
  width: 18px;
  background: var(--violet, #9B8CFC);
}

/* 한 장뿐이면 점도 스크롤도 필요 없다 */
.phone-deck[data-single] .phone-dots { display: none; }
.phone-deck[data-single] .phone-track { justify-content: center; }

/* 손가락으로 넘기라는 힌트 — 두 장 이상일 때만 */
.phone-hint {
  margin-top: 4px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(234,234,240,.42);
}
.phone-deck[data-single] .phone-hint { display: none; }

@media (max-width: 720px) {
  .phone { width: min(62vw, 240px); }
  .phone-track { gap: 14px; }
}

/* ★ 2026-08-19 — 폰에서 화면이 통째로 옆으로 밀리던 것.

   원인은 격자(grid)의 '자동 최소 크기'다. `1fr` 은 사실 `minmax(auto, 1fr)` 이라,
   칸 안의 내용이 줄어들지 못하면 **칸이 내용만큼 벌어진다.**
   원래 패키지는 이 자리에 폰 그림 한 장(.phone-frame, width:min(172px,44vw))만
   넣었기에 문제가 없었는데, 우리가 넣은 스와이프 목업(.phone-deck)은
   폰 4대가 가로로 늘어선 구조라 최소 폭이 1000px 가까이 나온다.

   실측(386px 폭): .steps-body 의 칸이 **1003px** 로 벌어져
   body 가 1102px — 홈 첫 화면부터 가로 스크롤이 생겼다.
   설명 글까지 같은 칸이라 글이 화면 밖으로 나갔다.

   `min-width:0` 을 주면 '줄어들어도 된다'가 되어 칸이 화면 폭으로 돌아온다.
   폰 목업은 원래 .phone-track 안에서 옆으로 미는 구조라 잘리지 않는다.
   (실측: body 1102px → 379px)

   ★ 격자를 쓰는 다른 줄에도 같이 건다. 지금 안 걸리더라도, 나중에 저 칸에
     .phone-deck 을 하나 더 넣으면 똑같은 사고가 조용히 다시 난다. */
.steps-body > *,
.sig-row > *,
.imagine-grid > *,
.features-wrap > *,
.price-grid > *,
.insight-grid > * { min-width: 0; }
.phone-deck, .phone-track { min-width: 0; max-width: 100%; }

/* ── 손가락으로 누를 수 있는 크기 (2026-08-19) ─────────────────
   실측(386px): 모바일 햄버거 30px, 상단 CTA 33px, 푸터 링크 20px.
   손끝 접촉면이 대략 45px 라 30px 짜리는 옆 것을 같이 누르게 된다.
   특히 햄버거는 폰에서 **메뉴로 가는 유일한 입구**다.

   ★ 글자 크기는 그대로 두고 padding 만 키운다. 디자인 균형을 흐트러뜨리지 않으면서
     누르는 면적만 넓히는 방법이다. */
@media (max-width: 900px) {
  .nav-menu-btn { padding: 12px 14px; }
  .nav-cta { padding: 11px 16px; }

  /* HOW IT WORKS 칸의 폰은 작게. 여기는 폰이 글 위에 오는 세로 배치라
     폰이 크면 설명 글이 화면 밖으로 밀린다.
     실측(386×840): 폰 240px → 섹션 1078px(설명 글이 화면 아래로 사라짐)
                    폰 172px → 섹션 930px, 폰 두 대가 나란히 보이고 글도 같이 보임.
     172px 는 원래 패키지가 이 자리에 쓰던 폰 크기(min(172px,44vw))와 같다.
     ★ min-width 를 0 으로 풀어야 한다. 안 그러면 168px 에서 걸려 줄지 않는다. */
  .steps-phone .phone { width: min(44vw, 172px); min-width: 0; }
}
@media (max-width: 640px) {
  .nav-menu-btn { padding: 11px 13px; }
  .nav-cta { padding: 11px 15px; font-size: 11.5px; }
  /* 푸터 링크는 줄바꿈이 잦아 세로 여백만 준다 — 가로로 늘리면 줄이 더 깨진다 */
  .footer-links a { display: inline-block; padding: 7px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-track { scroll-behavior: auto; }
  .phone-dots i { transition: none; }
}

/* ═══════════ 히어로 — 실제 화면이 흐르는 폰 (2026-08-18) ═══════════
   원래는 CG 목업 사진 한 장(hero-hand.png)이었다. 대표 지시로
   **우리 실제 화면**이 순서대로 넘어가는 모션으로 바꿨다.
   "이런 걸 만듭니다"보다 "이게 그 화면입니다"가 세다.

   ★ 순수 CSS 애니메이션이다. gsap 이 실패해도 계속 돈다.
     #heroPhone 에는 원본 main.js 의 패럴랙스가 걸려 있어 그대로 살려 둔다.
*/

/* 원본 .hero-phone img 는 mix-blend-mode:screen + 방사형 마스크다.
   어두운 CG 를 배경에 녹이려는 연출인데, 흰 배경인 우리 앱 화면에 걸면 하얗게 날아간다. */
.hero-phone--live { overflow: visible; }
.hero-phone--live .hero-dev,
.hero-phone--live .hero-slide {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-dev {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: clamp(28px, 3.2vw, 42px);
  padding: clamp(6px, .75vw, 9px);
  background:
    linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 26%, rgba(0,0,0,.55)),
    #17161C;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 40px 90px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.07),
    0 0 70px -10px rgba(124,92,255,.35);
}

.hero-scr {
  position: relative;
  border-radius: clamp(22px, 2.6vw, 34px);
  overflow: hidden;
  background: #fff;
  aspect-ratio: 9 / 19.5;
  --bar: clamp(18px, 2.1vw, 26px);   /* 상태바 자리 — 캡처에서 잘라낸 만큼 비워 둔다 */
}
/* ★ 2026-08-18 — 처음엔 인라인 변수(style="--i:0")로 순서를 줬는데 화면이 하얗게 비었다.
   브라우저가 인라인 style 을 정규화하면서 `--i:0` 이 `--i: 0` 으로 바뀌어
   `[style*="--i:0"]` 선택자가 안 맞았고, 그 결과 네 장 모두 opacity:0 이 됐다.
   지금은 인라인 값에 기대지 않고 자식 순서(:nth-child)로만 판단한다.
   그리고 **첫 장은 애니메이션이 없어도 보이게** 기본값을 1 로 둔다 —
   애니메이션이 어떤 이유로든 안 돌아도 빈 폰은 나오지 않는다. */
.hero-slide {
  position: absolute !important;
  top: var(--bar) !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  animation: heroSwap 14s infinite both;
}
.hero-slide:nth-child(1) { opacity: 1; animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: -3.5s; }
.hero-slide:nth-child(3) { animation-delay: -7s; }
.hero-slide:nth-child(4) { animation-delay: -10.5s; }
/* 4장 × 3.5초. 앞뒤로 살짝 겹쳐 페이드된다. */
@keyframes heroSwap {
  0%, 21%  { opacity: 1; }
  27%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}

/* 다이나믹 아일랜드 */
.hero-scr::before {
  content: "";
  position: absolute;
  top: clamp(6px, .7vw, 9px); left: 50%;
  transform: translateX(-50%);
  width: clamp(52px, 6vw, 78px);
  height: clamp(15px, 1.8vw, 22px);
  border-radius: 999px;
  background: #0B0A0E;
  z-index: 3;
}
/* 홈 인디케이터 */
.hero-scr::after {
  content: "";
  position: absolute;
  bottom: clamp(5px, .6vw, 8px); left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 3px;
  border-radius: 999px;
  background: rgba(11,10,14,.3);
  z-index: 3;
}

/* 뒤에 깔리는 보라 광채 — 배경(별·구체)과 이어 붙는다 */
.hero-dev-glow {
  position: absolute;
  z-index: 0;
  left: 50%; top: 46%;
  width: 200%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,92,255,.30), rgba(124,92,255,0) 70%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:nth-child(1) { opacity: 1; }
}

/* ═══════════ 장식 선(connector·net)이 새까맣게 칠해지던 것 (2026-08-19) ═══════════
   대표님 지적: "중간에 검정색만 있는 게 이상하다."

   원인은 SVG 기본값이다. `<path d="…"/>` 에 fill 을 안 적으면 **검정으로 채워진다.**
   패키지 CSS 는 이 선들에 stroke 만 주고 fill 을 한 번도 끄지 않았다.
   그래서 곡선이 닫히는 구간마다 커다란 검정 덩어리가 생겼다 —
   섹션 사이 연결선(.connector), 히어로 그물(.net), 문장 섹션(.statement-net),
   시그니처 연결선(.sig-connector) 네 군데 모두.

   ★ 실측(work-x.kr): .statement-pin 안에 1010×826 짜리 검정 도형,
     .connector 안에 157×437 검정 도형이 실제로 그려지고 있었다.
   ★ 아이콘들은 마크업에 fill="none" 이 붙어 있어 멀쩡했다 — 그래서 눈에 덜 띄었다.

   패키지 style.css 는 다음 버전에 통째로 덮어써야 하므로 여기서 고친다. */
.connector path,
.sig-connector path,
.statement-net path,
.net path {
  fill: none;
}

/* ─────────── 상담 폼이 휴대폰에서 화면 밖으로 나가던 것 (2026-08-21) ───────────

   실측(390px): 담는 상자는 293px 인데 입력 칸이 410px 로 그려져 오른쪽 117px 가
   화면 밖으로 잘렸다. 가로 스크롤도 안 생기는 자리라 **손가락이 닿지 않는다.**
   가격 페이지의 상담 폼이라 문의가 그냥 막힌다.

   원인은 그리드의 기본값이다. 그리드 칸은 min-width:auto 라서 '내용의 최소 폭'보다
   작아지지 않는다. select 의 긴 항목 글자와 input 의 기본 크기가 그 최소 폭을 키워
   1fr 한 칸이 상자보다 넓어졌다. 640px 이하에서 한 줄로 바꾸는 규칙은 이미 있었지만,
   한 줄이 되어도 그 한 칸 자체가 넓으면 소용이 없다.

   min-width:0 으로 '줄어들어도 된다'고 알려주고, 칸을 상자 폭에 맞춘다. */
.form-grid { min-width: 0; }
.form-grid .field { min-width: 0; }
.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ─────────── 같은 원인이 본문 그리드에도 있었다 (2026-08-21) ───────────

   실측(390px):
     · /features  .shot-row → 상자 331px 인데 칸이 496px (오른쪽 126px 잘림)
     · /          .sig-row  → 같은 모양
   640px 이하에서 한 줄로 바꾸는 규칙은 이미 있다. 그런데 한 줄이 되어도
   **그 한 칸이 상자보다 넓으면** 소용이 없다. 그리드 칸은 min-width:auto 라서
   긴 제목·목록의 '최소 폭'만큼은 버티기 때문이다.

   글이 잘리는 것은 캐러셀과 다르다 — 옆으로 밀어서 볼 수도 없다. 그냥 안 보인다. */
@media (max-width: 640px) {
  .shot-row, .sig-row, .form-grid { min-width: 0; }
  .shot-row > *, .sig-row > *, .form-grid > * { min-width: 0; }
  /* 긴 영문·URL 이 한 덩어리로 남아 칸을 벌리는 것도 막는다 */
  .shot-copy, .sig-copy { overflow-wrap: anywhere; }
}

/* ─────────── 히어로 폰이 아래 글자를 덮던 것 (2026-08-21) ───────────

   실측: 기기 아래끝 434px, 바로 아래 글자('WORK-X · 스타트업 경영 관리 · AI ERP')
   윗선 404px → **30px 겹침.** 넓은 화면일수록 심했다(-42px).

   왜 원본에는 문제가 없었나 — 원래 이 자리는 **반투명 CG 목업**이었다.
   mix-blend-mode:screen + 방사형 마스크로 아래가 비쳐 보이니, 음수 여백으로
   글자 위에 걸쳐도 '녹아드는 연출'이 됐다.
   우리가 그 자리를 **불투명한 실제 앱 화면**으로 바꾸면서(--live) 그 전제가 깨졌다.
   덮으면 그냥 글자가 안 보인다.

   그래서 --live 일 때만 음수 아래여백을 걷는다. 원본 CG 연출은 그대로 둔다. */
.hero-phone--live { margin-bottom: clamp(22px, 2.6vw, 40px); }
/* 1296px 실측에서 간격이 9px 밖에 안 남아 답답했다 — 겹치지만 않으면 되는 게 아니라
   기기와 글이 서로 숨 쉴 자리가 있어야 한다. 값을 한 단계 키웠다. */