/* /services 서비스 소개서(2026-10-15) — templates/services-intro.html, js/services-intro.js
   메인과 같은 판: home-a.css(pageCss) 를 그대로 싣고 이 파일(pageCss2)은 이 페이지 몫만 더한다.
   메인에서 가져온 것: 화면 하나에 장면 하나(.s), 2단 배치(.row), 제목과 칩(.kw, 칠해지는 움직임), 전면 색판 위 흰 카드 그림(.s-era .vid 값),
   가장자리가 흐려지는 그림(.vid video 값), 고정 무대에서 한 장면씩(.s-axis .stage .scene .sdots), 자주 묻는 질문(.s-faq), 문의(.s-cta).
   이 페이지 몫: 서비스 이름 줄(거인소프트 서비스 페이지 탭 실측 — 줄 60 · 칸 40 · 15px 700, 고른 칸 남색), 서비스 넷의 색판과 사례 카드, 진행 방식 여덟 장면. */

/* 그림 — 메인 영상과 같은 처리(가장자리 흐림). 영상으로 바꾸면 video 가 같은 규칙을 받음 */
.v-intro .vid img,.v-intro .vid video{display:block;width:100%;height:100%;object-fit:cover;background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
/* 색판 위 흰 카드 — 메인 .s-era .vid 와 같은 값 */
.v-intro .vid.card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(20,24,39,.22)}
.v-intro .vid.card img,.v-intro .vid.card video{-webkit-mask-image:none;mask-image:none}


/* 서비스 넷 공통 — 화면 하나 이상, 글은 두 문장 이하 */
.si-svc{display:block;min-height:0;padding:clamp(96px,14vh,160px) 0;scroll-margin-top:calc(var(--si-head,66px) + 70px)}
.si-p{margin-top:24px;max-width:30em;font-size:clamp(17px,1.35vw,20px);line-height:1.7;letter-spacing:-.015em;color:var(--ink2)}
.si-words{list-style:none;display:flex;flex-wrap:wrap;margin-top:24px}
.si-words li{font-size:clamp(16px,1.2vw,18px);font-weight:800;letter-spacing:-.02em}
.si-words li+li::before{content:"";display:inline-block;width:2px;height:14px;margin:0 16px;background:currentColor;opacity:.3;vertical-align:-1px}
.si-btn{margin-top:40px}
.si-svc .row .fig::before{display:none}

/* 사례 카드 — 실제 화면 한 장과 이름 */
.si-pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(64px,9vh,104px)}
.si-pf.two{grid-template-columns:repeat(2,minmax(0,1fr));width:min(820px,100% - 48px)}
.si-case{display:block;color:inherit}
.si-case .pic{display:block;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(15,26,43,.14)}
.si-case img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .35s}
.si-case:hover img{transform:scale(1.04)}
.si-case b{display:block;margin-top:16px;font-size:17px;font-weight:700;letter-spacing:-.02em}

/* 앱 개발 — 파랑 판, 칩 노랑 */
.si-app{background:var(--blue);color:#fff}
.si-app h2{color:#fff}.si-app .kw{background:var(--yellow);color:var(--navy)}
.si-app .si-p{color:rgba(255,255,255,.84)}
.si-app .si-btn{background:#fff;color:var(--navy)}.si-app .si-btn:hover{background:var(--yellow);color:var(--navy)}
.si-app .si-case .pic{box-shadow:0 24px 60px rgba(10,20,80,.32)}

/* 홈페이지 제작 — 노랑 판, 칩 남색 */
.si-web{background:var(--yellow);color:var(--ink)}
.si-web h2{color:var(--ink)}.si-web .kw{background:var(--navy);color:#fff}
.si-web .si-p{color:rgba(20,24,39,.78)}
.si-web .si-case .pic{box-shadow:0 24px 60px rgba(90,60,0,.22)}

/* AI 업무 자동화 — 남색 판, 가운데 쌓기, 칩 흰색 */
.si-ai{background:var(--navy);color:#fff}
.si-ai h2{color:#fff}.si-ai .kw{background:#fff;color:var(--navy)}
.si-ai .si-p{color:rgba(255,255,255,.78)}
.si-ai .si-btn{background:var(--blue);color:#fff}.si-ai .si-btn:hover{background:#fff;color:var(--navy)}
.si-ai .si-case .pic{box-shadow:0 24px 60px rgba(0,0,0,.4)}

/* 유지보수·고도화 — 흰 바탕 + 그림 뒤 붉은 빛, 칩 연붉은색 */
.si-care{background:linear-gradient(180deg,#fff 0,#fbf7f7 18%,#fbf7f7 82%,#fff 100%)}
.si-care .kw{background:#ffe3e1;color:var(--red)}
.si-care .row .fig::before{display:block;content:"";position:absolute;inset:6% 2%;border-radius:40px;background:radial-gradient(ellipse at 50% 55%,#ffe3e1 0,rgba(255,227,225,0) 70%);z-index:-1}
.si-care .vid img,.si-care .vid video{background:transparent}

.v-intro .s-faq{min-height:0}

/* 태블릿·휴대폰 — 메인 .row 는 860 이하에서 한 줄 */
@media (max-width:860px){
  .si-svc .row.rev .txt{order:1}.si-svc .row.rev .fig{order:2}
  .si-pf,.si-pf.two{display:flex;gap:14px;width:auto;max-width:none;margin:48px calc(50% - 50vw) 0;padding:0 24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .si-pf::-webkit-scrollbar{display:none}
  .si-case{flex:0 0 72vw;scroll-snap-align:start}
  .si-case b{font-size:15px;margin-top:12px}
  .si-btn{margin-top:28px}
  .si-words li+li::before{margin:0 12px}
}
@media (prefers-reduced-motion:reduce){.si-case img{transition:none}}

/* ===== 2판(2026-10-15 사장님 '좀 더 고도화해야하지않을까') — 구간마다 다른 구성 ===== */

/* 첫 화면 — 제목 아래 서비스 넷 목록(영상 위) */
.si-menu{list-style:none;margin-top:clamp(32px,5vh,52px);border-top:1px solid var(--line);max-width:460px}
.si-menu a{display:grid;grid-template-columns:44px 1fr 28px;align-items:center;height:clamp(58px,7vh,68px);border-bottom:1px solid var(--line);color:var(--ink);transition:color .2s,padding .25s}
.si-menu em{font-style:normal;font-size:14px;font-weight:800;color:var(--mute);font-variant-numeric:tabular-nums}
.si-menu b{font-size:clamp(19px,1.6vw,23px);font-weight:800;letter-spacing:-.025em}
.si-menu i{justify-self:end;width:28px;height:28px;border-radius:50%;background:var(--soft);position:relative;transition:background .2s,transform .25s}
.si-menu i::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:translate(-65%,-50%) rotate(45deg)}
.si-menu a:hover,.si-menu a:focus-visible,.si-menu a.on{color:var(--blue);padding-left:8px}
.si-menu a:hover em,.si-menu a.on em{color:var(--blue)}
.si-menu a:hover i,.si-menu a.on i{background:var(--blue);transform:translateX(4px)}
.si-menu a:hover i::after,.si-menu a.on i::after{border-color:#fff}

/* 앱 개발 — 실제 앱 화면 세 대, 가운데가 위로 */
.si-phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,1.6vw,22px)}
.si-phone{flex:0 1 31%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;transition:transform .35s}
.si-phone:nth-child(2){transform:translateY(-36px)}
.si-phone .scr{display:block;width:100%;aspect-ratio:9/19;border-radius:30px;border:7px solid #0b0f1f;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(5,12,60,.45)}
.si-phone img{width:100%;height:auto;display:block}
.si-phone b{margin-top:18px;font-size:15px;font-weight:800;letter-spacing:-.02em}
.si-phone small{margin-top:4px;font-size:14px;font-weight:600;color:var(--yellow)}
.si-phone:hover{transform:translateY(-10px)}.si-phone:nth-child(2):hover{transform:translateY(-46px)}

/* 홈페이지 제작 — 사례를 탭으로 넘기는 브라우저 창 */
.si-win{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(90,60,0,.28)}
.si-win-tabs{display:flex;gap:4px;padding:10px 12px 0 64px;background:#eceef3;position:relative}
.si-win-tabs::before{content:"";position:absolute;left:18px;top:21px;width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840}
.si-win-tabs button{height:36px;padding:0 18px;border:0;border-radius:10px 10px 0 0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--mute);cursor:pointer;transition:background .2s,color .2s}
.si-win-tabs button:hover{color:var(--ink)}
.si-win-tabs button.on{background:#fff;color:var(--ink)}
.si-win-view{position:relative;aspect-ratio:16/11;background:#fff}
.si-win-view .pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.si-win-view .pane.on{opacity:1;visibility:visible}
.si-win-view img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.si-win-view .cap{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(20,24,39,.86);color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(6px)}
.si-win-view .cap b{font-weight:800;color:var(--yellow)}

.si-stat{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:clamp(22px,2.4vw,34px);border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .25s,transform .3s}
.si-stat strong{font-size:clamp(30px,3vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.si-stat strong .num{color:var(--yellow)}
.si-stat > span{margin-top:10px;font-size:16px;color:rgba(255,255,255,.72)}
.si-stat b{margin-top:22px;font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.si-stat b::after{content:"→";color:var(--yellow);transition:transform .25s}
.si-stat:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}
.si-stat:hover b::after{transform:translateX(4px)}

/* 유지보수·고도화 — 두 갈래 순서, 공통 첫 단계 강조 */
.si-paths{display:grid;gap:14px;margin-top:28px}
.si-path{display:grid;grid-template-columns:72px 1fr;align-items:start;gap:8px}
.si-path > b{padding-top:7px;font-size:15px;font-weight:800;color:var(--ink)}
.si-path ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 6px}
.si-path li{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink2)}
.si-path li:not(:last-child)::after{content:"→";color:#c4c8d4;font-weight:600}
.si-path li.hl{color:var(--red)}

@media (max-width:860px){
  .si-menu{max-width:none}
  .si-phones{gap:10px}
  .si-phone .scr{border-width:5px;border-radius:20px}
  .si-phone:nth-child(2){transform:translateY(-20px)}
  .si-phone b{font-size:12.5px;margin-top:12px}.si-phone small{font-size:12px}
  .si-win-tabs{padding-left:52px;overflow-x:auto;scrollbar-width:none}
  .si-win-tabs::before{left:12px}
  .si-win-tabs button{flex:0 0 auto;padding:0 12px;font-size:13px}
  .si-win-view .cap{left:10px;right:10px;bottom:10px;font-size:12.5px;padding:8px 12px;flex-wrap:wrap;gap:4px 8px;border-radius:14px}
  .si-stat strong{font-size:clamp(24px,7vw,32px);white-space:normal}
  .si-stat > span{font-size:14px}  /* 2026-10-18 `.si-stat span` 이 숫자(.num)까지 14px 로 줄여 숫자가 단위보다 작게 보이던 문제 */
  .si-path{grid-template-columns:1fr}
  .si-path > b{padding-top:0}
}

/* 2판 보정 — 앱 화면을 크게, 사내 앱 화면 아래는 원본 바탕색, 유지보수 사례 휴대폰은 그림 위에 겹침 */
.si-phone .scr.sk{background:#e8e8e8}
.si-care-fig{position:relative}
.si-float{position:absolute;right:2%;bottom:-8%;width:24%;color:var(--ink)}
.si-float .scr{border-width:6px;border-radius:24px;box-shadow:0 24px 50px rgba(20,24,39,.3)}
.si-float b{font-size:14px}.si-float small{color:var(--red)}
.si-float:hover{transform:translateY(-8px)}
@media (max-width:860px){.si-app .row{grid-template-columns:1fr}.si-float{width:30%;right:0;bottom:-14%}.si-care .row{padding-bottom:40px}}

/* ===== 로고(2026-10-15 사장님 '로고랑 그런것좀 추가해보면') — 고객사 띠는 10-15 '서비스에 왜 고객사를 넣었어' 로 제거(회사소개에 있음) ===== */
/* 기술·스토어 로고 — 단색 SVG 를 글자색으로(mask) */
.ti{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ti) center/contain no-repeat;mask:var(--ti) center/contain no-repeat}
.si-logos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.si-logos li{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px 0 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:15px;font-weight:800;letter-spacing:-.02em;color:#fff}
.si-logos .ti + .ti{margin-left:-2px}
.si-logos li.no-ti{padding-left:15px}
.si-stores{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.si-stores li{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:rgba(255,255,255,.86)}
.si-stores .ti{width:18px;height:18px}
@media (max-width:860px){
  .si-logos li{height:40px;font-size:14px;padding:0 14px 0 11px}
  .ti{width:17px;height:17px}
}

/* ===== 홈페이지 제작 — 랜딩페이지를 끝까지 스크롤해 보여 주는 창(2026-10-15 사장님 '랜딩페이지를 스크롤해서 쭉 보여주고 다음으로 넘어가는 방식') ===== */
.si-win-bar{background:#eceef3}
.si-win-bar .si-win-tabs{background:transparent}
.si-win-url{display:flex;align-items:center;gap:8px;height:38px;margin:0 12px;padding:0 14px;background:#fff;border-radius:10px 10px 0 0;border-bottom:1px solid #eceef3;font-size:13px;font-weight:600;color:var(--mute)}
.si-win-url i{width:10px;height:12px;border:2px solid #b7bcc8;border-radius:3px 3px 2px 2px;position:relative}
.si-win-url i::before{content:"";position:absolute;left:50%;top:-7px;width:8px;height:7px;border:2px solid #b7bcc8;border-bottom:0;border-radius:5px 5px 0 0;transform:translateX(-50%)}
.si-win-bar .si-win-tabs button.on{background:#fff}
a.si-win-view{display:block;overflow:hidden;cursor:pointer}
.si-win-view img.pane{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:initial;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;will-change:transform}
.si-win-view img.pane.on{opacity:1;visibility:visible}
.si-win-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(20,24,39,.08)}
.si-win-prog i{display:block;height:100%;width:0;background:var(--blue)}
.si-site-cap{display:inline-flex;align-items:center;gap:12px;margin-top:20px;color:var(--ink)}
.si-site-cap b{font-size:16px;font-weight:800}
.si-site-cap span{font-size:15px;font-weight:700;color:rgba(20,24,39,.7)}
.si-site-cap::after{content:"→";font-weight:800;transition:transform .25s}
.si-site-cap:hover::after{transform:translateX(4px)}
@media (max-width:860px){.si-win-url{height:32px;font-size:12px;margin:0 8px}}
/* 창을 크게 — 페이지가 읽히도록 그림 쪽을 넓히고 세로로 길게 */
.si-web .row{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.si-site .si-win-view{aspect-ratio:4/3}
@media (min-width:1900px){.si-web .row{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
@media (max-width:860px){.si-web .row{grid-template-columns:1fr}.si-site .si-win-view{aspect-ratio:4/5}}

/* ===== 3판(2026-10-16 사장님 '아래 섹션을 고도화해보자' → '참고 사이트 구성 옮기기') — 거인소프트 서비스 페이지 실측 =====
   거인소프트(1440 기준): 번호(눈썹) → 큰 한 줄 제목(56px 800) → 아래 두 칸(글 / 그림 한 판), 장 사이는 가로로 이어지고 세로 스크롤로 옆으로 넘어감(고정 + 끌기).
   10-16 '글이 너무 많아' → 글 칸은 이름표(검색어 그대로의 짧은 이름) 4~5개 + 자세히 보기만. 색판·그림은 서비스마다 그대로. 1024 미만·낮은 화면은 세로로 차례대로 */
.si-sl{display:flex;flex-direction:column}
.si-eye{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.12em;opacity:.72}
.si-sl h2{margin-top:14px;font-size:clamp(34px,3.6vw,56px);line-height:1.22}
.si-sl h2 .ln{display:inline-block;margin-right:.26em}
.si-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,5.5vw,96px);align-items:center}
.si-cols .txt .si-eye{display:block}
.si-cols.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.si-cols.rev .txt{order:2}
.si-sl h2{font-size:clamp(34px,3.2vw,54px);line-height:1.36;letter-spacing:-.035em;word-break:keep-all}
.si-sl h2 .kw{margin-right:.08em}
.si-sl h2 .si-ai-ic{width:.78em;height:.78em;margin:0 .16em -.04em 0}
.si-sl h2 .si-sub{display:block;margin-top:.18em}
.si-line{margin-top:clamp(18px,2.8vh,28px);font-size:clamp(16px,1.25vw,19px);font-weight:600;line-height:1.55;letter-spacing:-.02em;opacity:.8}
.si-do{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--pl,rgba(20,24,39,.16));counter-reset:sd}
.si-do li{display:flex;align-items:baseline;gap:12px;padding:clamp(14px,2.2vh,20px) 0;border-bottom:1px solid var(--pl,rgba(20,24,39,.16));font-size:clamp(16px,1.3vw,19px);font-weight:800;letter-spacing:-.025em;counter-increment:sd}
.si-do li::before{content:counter(sd,decimal-leading-zero);font:700 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--ck,currentColor)}
.si-sl .si-btn{margin-top:clamp(32px,5vh,52px)}
.si-sl .si-btn::after{content:"→";margin-left:10px;transition:transform .25s}.si-sl .si-btn:hover::after{transform:translateX(4px)}
.si-app{--pl:rgba(255,255,255,.28);--ck:var(--yellow)}
.si-web{--pl:rgba(20,24,39,.18);--ck:var(--navy)}
.si-ai{--pl:rgba(255,255,255,.2);--ck:var(--yellow)}
.si-care{--pl:rgba(20,24,39,.14);--ck:var(--red)}
/* AI 그림 — 그림 카드 아래에 숫자 카드 둘이 걸침 */
.si-ai-fig{display:flex;flex-direction:column}
.si-ai-fig .vid.card{aspect-ratio:3/2}
.si-ai-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-56px 22px 0;position:relative;z-index:2}
.si-ai-stats .si-stat{background:rgba(20,30,60,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.si-ai-stats .si-stat strong{font-size:clamp(26px,2.4vw,38px)}
.si-ai-stats .si-stat b{margin-top:14px}
/* 가로 넘김 — js 가 넓은 화면에서 .is-h 를 붙이고 이 줄을 머리·이름 줄 아래에 고정 */
.si-hwrap.is-h{overflow:hidden}
.si-hwrap.is-h .si-track{display:flex;width:max-content;will-change:transform}
.si-hwrap.is-h .si-svc{flex:0 0 100vw;width:100vw;height:calc(100vh - var(--si-off,147px));min-height:0;padding:0;display:flex;align-items:center}
.si-hwrap.is-h .si-sl{width:min(var(--w),100% - 120px)}
.si-hwrap.is-h .si-phones{max-width:680px;margin-inline:auto}
.si-hwrap.is-h .si-site .si-win-view{aspect-ratio:16/10}
.si-hwrap.is-h .si-care-fig .vid{aspect-ratio:3/2}
@media (min-width:1024px) and (max-height:980px){
  .si-sl h2{margin-top:10px;font-size:clamp(32px,2.9vw,48px)}
  .si-hwrap.is-h .si-phones{max-width:600px}
  .si-hwrap.is-h .si-site .si-win-view{aspect-ratio:16/9}
  .si-hwrap.is-h .si-ai-fig .vid.card{aspect-ratio:16/9}
  .si-hwrap.is-h .si-ai-stats{margin-top:-44px}
  .si-hwrap.is-h .si-ai-stats .si-stat{padding:18px 22px}
  .si-hwrap.is-h .si-care-fig .vid{aspect-ratio:16/10}
}
@media (min-width:1024px) and (max-height:780px){
  .si-hwrap.is-h .si-phones{max-width:480px}
  .si-hwrap.is-h .si-phone b{margin-top:10px}
  .si-hwrap.is-h .si-ai-fig .vid.card{aspect-ratio:2/1}
  .si-hwrap.is-h .si-ai-stats{margin-top:-36px}
  .si-hwrap.is-h .si-ai-stats .si-stat{padding:12px 18px}
  .si-hwrap.is-h .si-ai-stats .si-stat strong{font-size:24px}
  .si-hwrap.is-h .si-ai-stats .si-stat > span{margin-top:4px;font-size:14px}
  .si-hwrap.is-h .si-ai-stats .si-stat b{margin-top:8px}
}
@media (max-width:860px){
  .si-sl h2 .ln{display:block;margin-right:0}
  .si-cols,.si-cols.rev{grid-template-columns:1fr;gap:36px}
  .si-cols.rev .txt{order:0}
  .si-sl h2{font-size:clamp(28px,8vw,40px)}
  .si-do{column-gap:16px}.si-do li{font-size:15.5px;gap:8px}
  .si-ai-stats{margin:-40px 10px 0;gap:10px}
  .si-ai-stats .si-stat{padding:16px}
  .si-ai-stats .si-stat strong{font-size:23px;white-space:nowrap}
}

/* ===== 첫 화면 = 영상 히로(2026-10-16 사장님 'storyboard/hero-smooth/index.html 이거 적용해줘 버튼만 서비스페이지 톤으로') =====
   원본 hero.css 값 그대로: 높이 화면 − 머리(580~900), 영상 한 장 화면 가득(object-fit cover), 글 왼쪽 5% · 세로 48% · 폭 40%(오른쪽 장면 37~39% 오른쪽 정렬, 위 장면 가운데 위 5%, 마지막 가운데 흰 글),
   글 뒤 흰 바탕빛(왼쪽 · 오른쪽 · 위) 0.45초 교차, 제목 clamp(34px,3.7vw,68px) 자간 -.065em, 이름 14px 파랑 자간 .06em, 본문 clamp(15px,1.2vw,20px) 줄 간격 1.8,
   마지막 장면 어둡게(최대 .82) + 로고 + 반복 끄기. 휴대폰(700 이하): 글 위 7%, 영상 위 31%부터 63% 높이 contain, 바탕빛 없음.
   다른 점: 재생 단추는 사이트 단추 결(남색 알약 + 남색 테두리 알약) */
.sf-hero{position:relative;isolation:isolate;height:calc(100svh - var(--si-head,67px));min-height:580px;max-height:900px;overflow:hidden;background:#fff;color:#12213b}
.sf-poster,.sf-video,.sf-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-video{opacity:0}.sf-hero.has-video .sf-video{opacity:1}
.sf-shade{background:#000;opacity:0;z-index:1;pointer-events:none}
.sf-wash{position:absolute;inset:0;pointer-events:none}
.sf-wash i{position:absolute;inset:0;opacity:0;transition:opacity 450ms cubic-bezier(.77,0,.175,1)}
.sf-wash .w-left{background:linear-gradient(90deg,#fff 0%,#fff 27%,rgba(255,255,255,.88) 33%,transparent 47%)}
.sf-wash .w-right{background:linear-gradient(270deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 19%,rgba(255,255,255,.78) 32%,rgba(255,255,255,.25) 44%,transparent 56%)}
.sf-wash .w-top{background:linear-gradient(#fff 0%,#fff 28%,rgba(255,255,255,.96) 36%,transparent 53%)}
.sf-hero[data-position=left] .w-left,.sf-hero[data-position=right] .w-right,.sf-hero[data-position=top] .w-top{opacity:1}
.sf-copy{position:absolute;left:5%;top:48%;transform:translateY(-50%);width:40%;z-index:2;transition:opacity 220ms cubic-bezier(.23,1,.32,1)}
.sf-eye{font-size:14px;font-weight:700;color:#1754d1;letter-spacing:.06em}
.sf-title{font-size:clamp(34px,3.7vw,68px);line-height:1.2;letter-spacing:-.065em;margin:20px 0 24px;word-break:keep-all;font-weight:800;color:#12213b}
.sf-desc{font-size:clamp(15px,1.2vw,20px);line-height:1.8;word-break:keep-all;max-width:29em}
.sf-hero[data-position=right] .sf-copy{left:auto;right:5%;width:39%;text-align:right}
.sf-hero[data-position=right] .sf-desc{margin-left:auto}
.sf-hero[data-wide=true][data-position=right] .sf-copy{width:37%}
.sf-hero[data-wide=true][data-position=right] .sf-title{font-size:clamp(32px,3.4vw,62px)}
.sf-hero[data-position=top] .sf-copy{left:10%;top:5%;transform:none;width:80%;text-align:center}
.sf-hero[data-position=top] .sf-title{font-size:clamp(30px,3.5vw,56px)}
.sf-hero[data-position=center] .sf-copy{left:5%;top:50%;width:90%;text-align:center;color:#fff}
.sf-hero[data-position=center] .sf-title{font-size:clamp(40px,6vw,96px);color:#fff}
.sf-hero[data-position=center] .sf-eye{display:none}
.sf-hero[data-position=center] .sf-desc{margin-inline:auto;color:#cbd0d9}
.sf-brand{display:none}
.sf-hero[data-position=center] .sf-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:32px auto 0;color:#fff;font-size:20px;font-weight:650;letter-spacing:-.04em}
.sf-brand img{width:36px;height:36px;object-fit:contain}
.sf-repeat{display:none}
.sf-hero[data-position=center] .sf-repeat{display:block;margin:18px auto 0;padding:6px 10px;border:0;background:none;color:#bfc6d0;font-size:12px;cursor:pointer}
.sf-repeat:focus-visible{outline:2px solid #fff}
/* 재생 단추 — 사이트 단추 결 */
.sf-play{position:absolute;bottom:24px;left:5%;z-index:3;display:flex;align-items:center;gap:8px}
.sf-btn{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.94);color:var(--navy);box-shadow:0 4px 14px rgba(20,24,39,.14),0 0 0 1px rgba(20,24,39,.06);transition:background .2s,color .2s,transform .2s}
.sf-btn svg{width:16px;height:16px}
.sf-toggle svg{fill:currentColor}
.sf-btn:hover{background:var(--navy);color:#fff}.sf-btn:active{transform:scale(.94)}
.sf-toggle .i-play{display:none}.sf-toggle[data-state=pause] .i-play{display:block}.sf-toggle[data-state=pause] .i-pause{display:none}
.sf-clock{height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--navy);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 4px 14px rgba(20,24,39,.14),0 0 0 1px rgba(20,24,39,.06)}
.sf-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (max-width:700px){
  /* 2026-10-18 사장님 '왜 이렇게 피시처럼 다 합쳐지지 않고 따로 놀지' — 글 아래 띠 영상(contain) 대신 PC처럼 영상 위에 글: 영상을 아래 3/4 에 꽉 채우고(cover, 장면마다 피사체 쪽으로 위치) 위는 흰색으로 이어지게 */
  .sf-hero{height:min(640px,calc(100svh - var(--si-head,72px)));min-height:540px}
  .sf-poster,.sf-video{top:24%;height:76%;object-fit:cover;object-position:68% 50%}
  .sf-hero[data-position=right] .sf-poster,.sf-hero[data-position=right] .sf-video{object-position:32% 50%}
  .sf-hero[data-position=top] .sf-poster,.sf-hero[data-position=top] .sf-video{object-position:50% 50%}
  .sf-hero[data-position=center] .sf-poster,.sf-hero[data-position=center] .sf-video{inset:0;height:100%;object-fit:cover;object-position:50% 50%}
  .sf-wash .w-left,.sf-wash .w-right{display:none}
  .sf-wash .w-top{opacity:1;background:linear-gradient(#fff 0%,#fff 30%,rgba(255,255,255,.9) 36%,rgba(255,255,255,0) 48%)}
  .sf-hero[data-position=center] .sf-wash{display:none}
  .sf-copy,.sf-hero[data-position=right] .sf-copy,.sf-hero[data-position=top] .sf-copy{top:7%;left:7%;right:auto;width:86%;transform:none;text-align:left}
  .sf-hero[data-wide=true][data-position=right] .sf-copy{width:86%}
  .sf-title,.sf-hero[data-position=top] .sf-title,.sf-hero[data-wide=true][data-position=right] .sf-title{font-size:34px;margin:12px 0}
  .sf-hero[data-position=center] .sf-copy{left:6%;width:88%;top:50%;transform:translateY(-50%);text-align:center}
  .sf-hero[data-position=center] .sf-title{font-size:40px}
  .sf-desc{font-size:14px;margin:8px 0;max-width:none}
  .sf-eye{margin:0}
  .sf-hero[data-position=center] .sf-brand{font-size:17px;margin-top:24px;gap:8px}.sf-brand img{width:30px;height:30px}
  .sf-play{bottom:16px;gap:6px}.sf-btn{width:34px;height:34px}.sf-btn svg{width:15px;height:15px}.sf-clock{height:34px}
}
@media (prefers-reduced-motion:reduce){.sf-copy,.sf-wash i{transition:none}}

/* 앱 개발 배경 — 실제 앱 화면 타일을 사선으로(2026-10-16 사장님 '배경을 타일처럼 해서 사선으로 막 깔아두면'). 줄마다 반대로 천천히 흐름, 파랑 막 위에 글·앱 화면 세 대 */
.si-app{position:relative;overflow:hidden}
.si-app > .wrap{position:relative;z-index:1}
.si-wall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.si-wall-in{position:absolute;left:50%;top:50%;display:flex;gap:20px;transform:translate(-50%,-50%) rotate(-16deg)}
.si-wall .col{flex:0 0 180px;display:flex;flex-direction:column;animation:si-wall-up 80s linear infinite;will-change:transform}
.si-wall .col:nth-child(even){animation-name:si-wall-down;margin-top:-160px}
.si-wall img{display:block;width:100%;height:auto;aspect-ratio:300/620;margin-bottom:20px;border-radius:18px;background:#fff;box-shadow:0 20px 44px rgba(5,12,60,.35)}
.si-wall::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,94,255,.94) 0,rgba(31,94,255,.84) 40%,rgba(31,94,255,.6) 100%)}
@keyframes si-wall-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes si-wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (max-width:860px){.si-wall-in{gap:12px}.si-wall .col{flex-basis:120px}.si-wall img{margin-bottom:12px;border-radius:12px}.si-wall::after{background:rgba(31,94,255,.86)}}
@media (prefers-reduced-motion:reduce){.si-wall .col{animation:none}}

/* 앱 개발 앱 화면 세 대 — 부채꼴 배치(2026-10-16 사장님 '우측에 나오는 이미지가 느낌이 나이스하지가 않은데').
   가운데 한 대를 앞에 크게, 양옆은 뒤로 작게 기울여 겹침. 기기 테두리는 얇은 검정 + 바깥 테두리 빛 + 위 카메라 섬, 사례 결과는 알약.
   기울기·크기는 개별 속성(rotate·scale·translate)으로 — GSAP 등장 움직임(transform)과 겹치지 않음 */
.si-app .si-phones{position:relative;justify-content:center;align-items:center;gap:0;padding:20px 0 10px}
.si-app .si-phone{flex:0 0 33%;position:relative;transition:translate .35s,scale .35s}
.si-app .si-phone:nth-child(1){z-index:1;rotate:-6deg;scale:.88;translate:6% 34px;margin-right:-2%}
.si-app .si-phone:nth-child(2){z-index:3;scale:1.06;transform:none}
.si-app .si-phone:nth-child(3){z-index:2;rotate:6deg;scale:.88;translate:-6% 34px;margin-left:-2%}
.si-app .si-phone:hover{transform:none;translate:var(--hv,0) -8px}
.si-app .si-phone:nth-child(1):hover{translate:6% 24px}.si-app .si-phone:nth-child(3):hover{translate:-6% 24px}
.si-app .si-phone:nth-child(2):hover{transform:none;translate:0 -8px}
.si-app .si-phone .scr{position:relative;border:9px solid #0c0f1c;border-radius:42px;box-shadow:0 0 0 2px rgba(255,255,255,.16),0 36px 80px rgba(4,10,50,.55),0 10px 24px rgba(4,10,50,.35)}
.si-app .si-phone .scr::before{content:"";position:absolute;z-index:2;left:50%;top:9px;width:32%;height:16px;margin-left:-16%;border-radius:999px;background:#0c0f1c}
.si-app .si-phone b{max-width:92%;margin-top:22px;font-size:clamp(13px,1.05vw,15px);font-weight:800;line-height:1.35;letter-spacing:-.02em;text-align:center;word-break:keep-all;text-shadow:0 2px 10px rgba(4,10,50,.35)}
.si-app .si-phone small{margin-top:8px;padding:5px 12px;border-radius:999px;background:rgba(12,15,28,.32);font-size:13px;font-weight:700;color:var(--yellow)}
@media (max-width:860px){
  .si-app .si-phone .scr{border-width:6px;border-radius:26px}
  .si-app .si-phone .scr::before{top:6px;height:10px}
  .si-app .si-phone b{font-size:12.5px;margin-top:14px}.si-app .si-phone small{font-size:11.5px;padding:4px 9px}
}

/* 자주 묻는 질문 — 배경색(2026-10-16 사장님 '자주 묻는 질문는 배경색을 줘라'), 아래 문의 구간(회색)과 구분되는 연파랑 */
.v-intro .s-faq{background:#eef3fd}
.v-intro .s-faq h2{background:transparent}
.si-sl h2 .si-os{width:.82em;height:.82em;margin:0 .14em -.06em 0;vertical-align:baseline}
.si-sl h2 .si-bl{display:block}
.v-intro .vid.card video{-webkit-mask-image:none;mask-image:none}
.si-nb{white-space:nowrap} /* 10-17 홈페이지 장 부제가 '구축' 한 단어만 줄바꿈되지 않게(휴대폰은 보통 줄바꿈) */
@media (max-width:700px){.si-nb{white-space:normal}}
.si-svc{overflow-x:clip} /* 10-17 390 에서 앱 장 배경 타일(si-wall)이 7px 넘치던 것 */