/*
  채움컴퍼니 공용 움직임·배경 (2026-09-18 신설)
  루트(/)와 고시원(/gosiwon/)이 같이 쓴다. base.css 는 건드리지 않고 이 파일만 덧붙인다.
  규칙: 움직임은 전부 (prefers-reduced-motion:no-preference) 안에만 둔다.
        '동작 줄이기'를 켠 폰에서는 정지 화면 = 최종 상태가 보여야 한다.
*/

/* ── 첫 화면 배경: "채운 방들" 사진 벽 (2026-09-19) ──────────
   격자·떠다니는 빛(그래픽 장식)을 걷어내고 실사로 교체. 소방필증 홈페이지에서 얻은 결론
   ("선·격자 장식이 아니라 실사가 주인공")을 그대로 따른다.
   고객사 객실 사진 24장(images/wall/, 간판·로고·사람 제외)을 비스듬한 기둥으로 깔고 먹색을 덮는다.
   사진은 motion.js 가 페이지가 다 뜬 뒤 채운다(첫 화면 속도). 출처는 ../배경사진벽-출처.txt */
.hx{position:relative;overflow:hidden;isolation:isolate}
.hx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hx-bg .wall{position:absolute;left:50%;top:-18%;height:136%;display:flex;gap:10px;transform:translateX(-50%) rotate(-8deg);opacity:0;transition:opacity 1.4s ease}
.hx-bg .wall.on{opacity:1}
.hx-bg .wall .col{flex:0 0 128px;display:flex;flex-direction:column;gap:10px}
.hx-bg .wall img{width:128px;height:163px;object-fit:cover;border-radius:10px;display:block}
.hx-bg .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,17,.80) 0%,rgba(14,14,17,.74) 45%,rgba(14,14,17,.90) 80%,var(--bg) 100%)}
@media (min-width:900px){ .hx-bg .wall .col{flex-basis:150px} .hx-bg .wall img{width:150px;height:191px}
  .hx-bg .shade{background:linear-gradient(90deg,rgba(14,14,17,.90) 0%,rgba(14,14,17,.78) 50%,rgba(14,14,17,.70) 100%),linear-gradient(180deg,transparent 70%,var(--bg))} }
.hx h1 em{background:linear-gradient(100deg,var(--gold-lt) 0 40%,#fff8e6 50%,var(--gold-lt) 60% 100%);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 버튼 테두리 빛 ───────────────────────────────────── */
.glowbtn{position:relative;border-radius:14px;padding:2px;overflow:hidden}
.glowbtn::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 70%,#fff3d1 80%,transparent 90%)}
.glowbtn .btn{position:relative;box-shadow:0 8px 30px rgba(201,164,85,.25)}

/* ── 숫자 3칸 ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0 0;border-top:1px solid var(--line);padding:16px 0 30px}
.stats div{text-align:center;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0}
.stats b{display:block;font-size:26px;font-weight:800;color:var(--gold);line-height:1.2;letter-spacing:-.02em}
.stats b small{font-size:15px;margin-left:1px}
.stats span{font-size:12.5px;color:var(--muted);line-height:1.4;display:block;margin-top:2px}

/* ── 휴대폰 3대 (고객사 홈페이지 화면) ───────────────────── */
.phones{position:relative;height:300px;margin:6px -20px 0;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ph{position:absolute;top:26px;left:50%;width:128px;height:262px;margin-left:-64px;border-radius:22px;padding:6px;
  background:#1c1c22;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6)}
.ph .scr{height:100%;border-radius:16px;overflow:hidden;background:#111}
.ph .scr img{width:100%;height:auto}
.ph.l{transform:translateX(-112px) translateY(34px) rotate(-9deg) scale(.88);filter:brightness(.55)}
.ph.r{transform:translateX(112px) translateY(34px) rotate(9deg) scale(.88);filter:brightness(.55)}
.ph.c{z-index:2;top:8px;width:144px;height:292px;margin-left:-72px;border-color:var(--gold-dim);
  box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 40px rgba(201,164,85,.18)}
.ph .tag{position:absolute;left:50%;top:-12px;transform:translateX(-50%);z-index:3;white-space:nowrap;
  font-size:11.5px;font-weight:700;color:#17140C;background:var(--gold);border-radius:999px;padding:3px 10px;line-height:1.4}
@media (min-width:600px){.phones{height:340px}
  .ph.l{transform:translateX(-150px) translateY(34px) rotate(-9deg) scale(.9)}
  .ph.r{transform:translateX(150px) translateY(34px) rotate(9deg) scale(.9)}}

/* ── 실제 화면 녹화 영상 (루트 첫 화면, 2026-09-19 시험 적용) ──
   media/search-demo.* = 네이버에서 '영통 고시원' 검색 → 고객사 결과(다른 업소는 흐림) → 고객사 홈페이지 스크롤. 실제 녹화, 18초.
   header 의 data-video 로 위치를 고른다: "bg" = 배경 전체 / "phone" = 가운데 휴대폰 화면. 빼려면 data-video 를 지우면 끝. */
.hx-bg .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity 1s}
.hx-bg .bgv.on{opacity:1}
.hx[data-video=bg] .hx-bg .shade{background:linear-gradient(180deg,rgba(14,14,17,.86) 0%,rgba(14,14,17,.80) 50%,rgba(14,14,17,.94) 85%,var(--bg) 100%)}
.ph .scr video{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;background:#fff}

/* 05 제작 사례 섹션 안에 둘 때 */
.works-phones{margin:4px -20px 8px}

/* ── 검색 장면 (고시원 첫 화면) ───────────────────────── */
.sx .sbar{display:flex;align-items:center;gap:10px;margin:12px 12px 0;padding:0 14px;height:50px;border-radius:999px;
  background:#fff;box-shadow:0 0 0 2px var(--gold),0 6px 24px rgba(201,164,85,.25)}
.sx .sbar .eng{flex-shrink:0;font-size:12px;font-weight:800;color:#fff;border-radius:6px;padding:2px 7px;line-height:1.5}
.sx .sbar .eng.nv{background:#03A94D}
.sx .sbar .eng.gg{background:#4A7BEA}
.sx .sbar .q{flex:1;min-width:0;font-size:17px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden}
.sx .sbar .caret{display:inline-block;width:2px;height:19px;background:#111;vertical-align:-3px;margin-left:2px}
.sx .sbar svg{flex-shrink:0}
.sx .lbl{display:block;padding:10px 16px 10px;font-size:13px;line-height:1.5}
.sx .lbl span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx .lbl .f{font-size:15px;font-weight:700;color:var(--text)}
.sx .clip{height:230px;background:#fff}
.sx .clip .sl{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);transform:translateY(14px)}
.sx .clip .sl.on{opacity:1;transform:none}
.sx .clip .sl.mid{top:50%;transform:translateY(-50%)}              /* 결과가 짧은 캡처는 가운데 */
.sx .clip .sl.mid.on{transform:translateY(-50%)}
.sx .clip .sl.mid:not(.on){transform:translateY(calc(-50% + 14px))}
.sx .dots{display:flex;justify-content:center;gap:4px;padding:6px 0 2px}
.sx .dots button{width:30px;height:30px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.sx .dots button::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.sx .dots button[aria-current=true]::after{width:20px;border-radius:4px;background:var(--gold)}
@media (min-width:900px){.sx .clip{height:300px}}

/* ── 원장님 메시지: 흐르는 띠 (2026-09-19) ─────────────────
   .rvs 목록을 motion.js 가 띠로 바꾼다. 8장 미만 1줄, 8장 이상 2줄(반대 방향).
   속도는 motion.js 에서 기기별로(휴대폰 초당 22px, PC 초당 32px). 손대거나 마우스를 올리면 멈춘다. */
.rvband{margin:14px -20px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rvband .row{overflow:hidden;padding:5px 0}
.rvband .track{display:flex;width:max-content}            /* 간격은 카드 오른쪽 여백으로: 두 벌 이어 붙일 때 -50% 가 정확히 맞게 */
.rvband .rv{flex:0 0 auto;height:150px;padding:8px;margin-right:10px;align-items:center}
.rvband .rv img{height:100%;width:auto;max-width:none;cursor:zoom-in}
.rvband.tall .rv{height:230px}                             /* 작업 보고: 표·목록이라 더 크게 */
@media (min-width:900px){ .rvband{margin:18px calc(50% - 50vw) 0} .rvband .rv{height:180px} .rvband.tall .rv{height:280px} }
@media (prefers-reduced-motion:reduce){ .rvband .row{overflow-x:auto} }

/* 화면 밖으로 나간 반복 효과는 멈춘다 (motion.js 가 .paused 를 붙임) */
.paused,.paused *,.paused *::before{animation-play-state:paused!important}

/* ── 움직임 (동작 줄이기가 꺼져 있을 때만) ─────────────── */
@media (prefers-reduced-motion:no-preference){
  .hx-bg .wall .col{animation:colup 70s linear infinite}
  .hx-bg .wall .col:nth-child(even){animation-direction:reverse;animation-duration:85s}
  @keyframes colup{to{transform:translateY(-50%)}}

  .rise{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.2s}.d3{animation-delay:.35s}.d4{animation-delay:.5s}.d5{animation-delay:.7s}.d6{animation-delay:.9s}
  @keyframes rise{to{opacity:1;transform:none}}
  .hx h1 em{animation:shine 1.6s ease 1.1s forwards}
  @keyframes shine{to{background-position:0 0}}

  .glowbtn::before{animation:spin 4.5s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .ph .scr img{animation:scrollshot 22s ease-in-out infinite alternate}
  .ph.l .scr img{animation-duration:26s;animation-delay:-8s}
  .ph.r .scr img{animation-duration:24s;animation-delay:-14s}
  @keyframes scrollshot{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 250px))}}

  .sx .sbar .caret{animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  /* ── 섹션별 (고시원 페이지, 2026-09-18) ── */
  /* 01 계산기: 막대가 아래에서 차오른다 */
  .calc.reveal .bars div{transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.2,1),height .2s ease}
  .calc.reveal.in .bars div{transform:none}
  .calc.reveal.in .bars div:nth-child(2){transition-delay:.08s}.calc.reveal.in .bars div:nth-child(3){transition-delay:.16s}
  .calc.reveal.in .bars div:nth-child(4){transition-delay:.24s}.calc.reveal.in .bars div:nth-child(5){transition-delay:.32s}
  .calc.reveal.in .bars div:nth-child(6){transition-delay:.4s}

  /* 02 동선도: 선이 그려진 뒤 빛나는 점이 흐른다(점은 motion.js가 넣음) */
  .flow.reveal svg > path{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s ease}
  .flow.reveal.in svg > path{stroke-dashoffset:0}
  .flow.reveal.in svg > path:nth-of-type(n+4){transition-delay:.6s}
  .flow.reveal rect[stroke="#C9A455"]{transition:filter .6s ease}
  .flow.reveal.in rect[stroke="#C9A455"]{animation:boxglow 2.6s ease-in-out 1.4s infinite}
  @keyframes boxglow{50%{filter:drop-shadow(0 0 6px rgba(201,164,85,.7))}}

  /* 03 노출 결과 목록 / 04 가격표: 한 줄씩 차례로 */
  .rows.reveal li,.cmp.reveal .r{opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .rows.reveal.in li,.cmp.reveal.in .r{opacity:1;transform:none}
  .rows.reveal.in li:nth-child(2),.cmp.reveal.in .r:nth-child(2){transition-delay:.1s}
  .rows.reveal.in li:nth-child(3),.cmp.reveal.in .r:nth-child(3){transition-delay:.2s}
  .rows.reveal.in li:nth-child(4),.cmp.reveal.in .r:nth-child(4){transition-delay:.3s}
  .rows.reveal.in li:nth-child(5),.cmp.reveal.in .r:nth-child(5){transition-delay:.4s}
  .cmp.reveal.in .r:nth-child(6){transition-delay:.5s}.cmp.reveal.in .r:nth-child(7){transition-delay:.6s}.cmp.reveal.in .r:nth-child(8){transition-delay:.7s}
  .cmp.reveal.in{animation:cmpglow 1.8s ease 1s 1}
  @keyframes cmpglow{40%{box-shadow:0 0 0 1px var(--gold),0 0 28px rgba(201,164,85,.35)}}

  .rvband .track{animation:rvmove var(--dur,40s) linear infinite}
  .rvband .row.rev .track{animation-direction:reverse}
  .rvband:hover .track,.rvband.hold .track{animation-play-state:paused}
  @keyframes rvmove{to{transform:translateX(-50%)}}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}