/* Fit the full native 1128 × 2439 capture to the actual display aperture.
   The hardware photograph follows that geometry; the product UI is not stretched. */
.phone-device{aspect-ratio:667 / 1354.578067}.phone-device.graphite{aspect-ratio:655 / 1344.521678}.rotation-stage{aspect-ratio:667 / 1354.578067}
.phone-device>.phone-screen{position:absolute;z-index:1;left:4.648%;top:1.678%;width:90.705%;height:96.573%;overflow:hidden;border-radius:14.88% / 6.517%;background:#fafafa;isolation:isolate;pointer-events:none}
.phone-device.graphite>.phone-screen{left:3.664%;top:1.111%;width:92.825%;height:97.778%;border-radius:14.8% / 6.39%}.phone-device>.phone-screen.is-dark{background:#000}
.phone-device .phone-screen>img.phone-ui{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;object-fit:contain;object-position:center;background:transparent;filter:none;transform:scale(1.006);transform-origin:center;transition:none!important}
.phone-device>.phone-hardware{max-width:none;max-height:none;pointer-events:none}
/* Remove only the screenshot's three-pixel outer rim within the clipped display. */
.use-photo-screen.phone{border-radius:126px}.use-photo-screen.phone>img{transform:scale(1.006);transform-origin:center}
.use-desktop .use-photo-screen>img{object-fit:cover;object-position:center top}

/* 헤더 메뉴 중앙 정렬.
   nav-wrap 이 space-between 이라 로고(좌)와 버튼(우) 폭 차이만큼 메뉴가 치우친다.
   좌우 칸을 1fr 로 같게 잡아 메뉴가 헤더 정중앙에 오게 한다.
   메뉴가 숨는 폭(<=800px, styles.css)에서는 기존 space-between 를 그대로 둔다. */
@media (min-width:801px){
  .nav-wrap{display:grid;grid-template-columns:1fr auto 1fr;justify-content:initial}
  .nav-wrap>.brand{justify-self:start}
  .nav-wrap>.desktop-nav{justify-self:center}
  .nav-wrap>.nav-actions{justify-self:end}
}


/* ── 모달 정리 ────────────────────────────────────────────────
   1) 제품 화면 뒤 회색 판 제거 — 화면 자체가 주인공이라 배경이 끼면 캡처 테두리가 두 겹으로 보인다.
   2) 라운딩 통일 — dialog 가 파일마다 24px·19px·8px 로 달랐다. 스크롤이 생기는 모달만
      8px 로 각져 보이던 원인이다. 크기와 무관하게 20px 하나로 맞춘다.
   (확대 컨트롤은 붙였다가 걷어냈다 — 화면을 가리기만 했다.) */

dialog#detail-dialog{border-radius:20px;overflow:auto}
@media (max-width:560px){ dialog#detail-dialog{border-radius:20px} }

/* 제품 화면·갤러리 타일 배경 제거 */
.screen-view,
.modal-screen,
.web-screen-panel,
.modal-gallery button{background:transparent}
/* 안쪽 패널 라운딩도 한 단계로 통일 */
.modal-screen,
.web-screen-panel,
.modal-gallery button{border-radius:16px}


/* 모달을 열면 제목에 프로그램적으로 포커스를 준다(스크린리더용).
   그때 브라우저 기본 외곽선이 제목 폭만큼 검은 상자로 보였다.
   키보드 조작으로 들어온 포커스(:focus-visible)는 그대로 두고 이 경우만 감춘다. */
#modal-title:focus{outline:none}


/* 흐름 4단계(기록·정리·관리·공유)를 제품 화면 모달과 연결한다.
   div 를 button 으로 바꿨으므로 버튼 기본 모양을 지우고 기존 배치를 유지한다. */
.promise-flow>.promise-step{
  appearance:none;background:none;border:0;padding:6px 8px;margin:-6px -8px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:12px;
  transition:background .2s,transform .2s}
.promise-flow>.promise-step:hover{background:#f4f6f8;transform:translateY(-2px)}
.promise-flow>.promise-step:focus-visible{outline:2px solid #20252b;outline-offset:2px}
/* 각 단계 카드 하단의 작은 폰 목업. 이전의 '화면 보기 ↗' 텍스트를 대체한다 —
   무엇을 보게 되는지 글로 안내하는 대신 화면을 바로 보여준다. */
.promise-step-phone{display:block;width:92px;margin:14px 0 2px;
  transition:transform .25s ease}
.promise-flow>.promise-step:hover .promise-step-phone{transform:translateY(-3px)}
@media (max-width:1100px){ .promise-step-phone{width:84px} }
@media (max-width:800px){ .promise-step-phone{width:96px;margin-top:16px} }
@media (max-width:560px){ .promise-step-phone{width:78px;margin-top:12px} }
@media (prefers-reduced-motion:reduce){
  .promise-flow>.promise-step:hover .promise-step-phone{transform:none} }
.motion-off .promise-flow>.promise-step:hover .promise-step-phone{transform:none}

/* 폰 목업 뒤 회색 판 제거.
   확대 화면(use-stage)·요약 섹션·화면 갤러리가 각각 #f7f8fa·#f8f9fa 를 깔고 있어
   아이폰 목업 뒤로 회색 사각형이 보였다. 기기 그림자만으로 충분하다. */
.use-stage,
.summary-section,
.gallery-content{background:#fff}

/* ── 갤러리: 손에 든 폰으로 교체 ────────────────────────────────
   기기 목업 대신 실제로 폰을 들고 있는 사진 위에 화면을 얹는다.
   사진 속 폰은 기울어져 있어 단순 배치로는 맞지 않는다 — 네 모서리 좌표로
   perspective matrix 를 계산해 화면을 앉힌다(사용 사례 섹션과 같은 방식).
   손가락이 화면 위로 올라와야 자연스러워 사진을 한 장 더 깔고 clip-path 로 손만 남긴다. */
.gallery-hand{position:relative;display:block;width:100%;max-width:none;padding:0;background:none;border:0;overflow:hidden;border-radius:20px;aspect-ratio:3/4}
.gallery-hand-plane{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;will-change:transform}
.gallery-hand-photo,.gallery-hand-foreground{position:absolute;left:0;top:0;width:1536px;height:1024px;max-width:none;display:block}
.gallery-hand-foreground{z-index:2;pointer-events:none}
.gallery-hand-screen{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#fff;z-index:1;border-radius:66px}
.gallery-hand-screen.is-dark{background:#000}
.gallery-hand-screen>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
/* 화면 전환은 짧은 페이드로. 탭을 눌러 바꿀 때와 자동 전환 모두 같은 느낌을 준다. */
.gallery-hand-screen>img{transition:opacity .28s ease}
.gallery-hand.is-switching .gallery-hand-screen>img{opacity:0}
@media (prefers-reduced-motion:reduce){
  .gallery-hand-screen>img{transition:none}
}

/* 갤러리 버튼은 기기 목업(폭 245~295px, 이미지 max-height)을 전제로 잡혀 있다.
   손 사진 합성은 더 넓은 면적과 원본 크기 이미지가 필요해 그 전제를 덮는다.
   덮어쓸 선언이 파일 세 곳에 흩어져 있어 !important 를 쓴다 — 이 블록에서만. */
.gallery-image-button.gallery-hand{
  width:min(520px,100%)!important;max-width:min(520px,100%)!important;
  aspect-ratio:4/5;filter:none!important;transform:none!important;justify-self:center}
.gallery-image-button.gallery-hand:hover{transform:none!important}
.gallery-hand img{max-height:none!important;filter:none!important}
.gallery-hand .gallery-hand-photo,
.gallery-hand .gallery-hand-foreground{width:1536px!important;height:1024px!important;object-fit:fill!important}
.gallery-hand .gallery-hand-screen>img{width:100%!important;height:100%!important;object-fit:contain!important}

/* ── 녹음·업로드 → 자동 정리 흐름 ──────────────────────────────
   "녹음을 누르면 알아서 정리된다"를 글로만 두지 않고 진행 순서로 보여준다.
   4단계가 차례로 밝아지고 왼쪽 선이 함께 내려간다. 8초에 한 바퀴.
   모션을 끄면(사이트 토글·OS 설정) 네 단계가 모두 켜진 상태로 멈춘다. */
.auto-flow{list-style:none;margin:32px 0 0;padding:0 0 0 22px;position:relative;display:grid;gap:16px}
.auto-flow:before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:#e5e8eb;border-radius:2px}
.auto-flow:after{content:"";position:absolute;left:4px;top:6px;width:2px;height:0;background:#20252b;border-radius:2px;
  animation:auto-flow-line 8s linear infinite}
.auto-flow li{position:relative;color:#6b7684;transition:color .4s}
.auto-flow li:before{content:"";position:absolute;left:-22px;top:6px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid #d1d6db;transition:border-color .4s,background .4s}
.auto-flow b{display:block;font-size:17px;font-weight:650;letter-spacing:-.03em;color:#4e5968;transition:color .4s}
.auto-flow span{font-size:14px;line-height:1.7}
.auto-flow li{animation:auto-flow-step 8s linear infinite}
.auto-flow li:nth-child(1){animation-delay:0s}
.auto-flow li:nth-child(2){animation-delay:2s}
.auto-flow li:nth-child(3){animation-delay:4s}
.auto-flow li:nth-child(4){animation-delay:6s}
@keyframes auto-flow-line{0%{height:0}92%{height:calc(100% - 12px)}100%{height:calc(100% - 12px)}}
@keyframes auto-flow-step{
  0%,24%{color:#6b7684}
  3%,22%{color:#191f28}
  25%,100%{color:#6b7684}
}
.auto-flow li{--dot:#d1d6db}
.auto-flow li:nth-child(n){animation-name:auto-flow-step,auto-flow-dot}
@keyframes auto-flow-dot{
  0%,2%{border-color:#d1d6db}
  3%,100%{border-color:#20252b}
}
.auto-flow li:before{animation:inherit;animation-name:auto-flow-dot}

/* 모션을 끈 상태: 진행 표시를 멈추고 전부 읽히는 상태로 둔다. */
.motion-off .auto-flow:after{animation:none;height:calc(100% - 12px)}
.motion-off .auto-flow li,
.motion-off .auto-flow li:before{animation:none}
.motion-off .auto-flow li{color:#4e5968}
.motion-off .auto-flow li:before{border-color:#20252b}
@media (prefers-reduced-motion:reduce){
  .auto-flow:after{animation:none;height:calc(100% - 12px)}
  .auto-flow li,.auto-flow li:before{animation:none}
  .auto-flow li{color:#4e5968}
  .auto-flow li:before{border-color:#20252b}
}

/* 저작권 카나리 — 스타일시트만 퍼가도 따라간다. 렌더 영향 없는 no-op.
   짝: index.html 의 data-ls-ref. 삭제 금지 — 복제 분쟁 시 증거로 쓴다. */
:root{--ls-efd2e76e:478dde2893d7040475256b58}
.ls-6cf7b331b4{--ls-origin:'lawsync.speciai.team';--ls-issued:'2026-09-28'}