/* ================================================================
   WSOFT — 통합 디자인 시스템 (단일 소스)
   셸: 좌측 고정 사이드바 + 우측 콘텐츠 (전 페이지 공통)
   메인: .is-deck (풀스크린 슬라이드 덱) / 서브: 세로 스크롤
   ================================================================ */
:root{
  --navy:#0E244D; --blue:#1E5AE0; --blued:#1746B8; --coral:#FF6B4A; --corald:#E8543A;
  --slate:#44506A; --slate2:#8A93A6; --tint:#DCE7FB; --cream:#F6EFE4; --cloud:#F4F7FB;
  --line:#E3E8F0; --white:#fff; --side:300px;
  /* 통일 타이포 스케일 (메인 기준) */
  --fs-display:clamp(40px,6vw,88px);
  --fs-h1:clamp(36px,5vw,72px);
  --fs-h2:clamp(32px,4.4vw,64px);
  --fs-h3:clamp(19px,1.8vw,24px);
  --fs-lead:clamp(16px,1.6vw,20px);
  --pad-x:clamp(32px,6vw,96px);
  --pad-y:clamp(72px,10vh,120px);
  /* 하위호환 별칭 */
  --ink:var(--navy); --pop:var(--blue); --popd:var(--blued); --gray:var(--slate); --gray2:var(--slate2); --bg:var(--cloud);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}   /* Lenis와 충돌 방지 */
/* Lenis 권장 CSS */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--navy);background:var(--cloud);line-height:1.5;-webkit-font-smoothing:antialiased}
body.is-deck{overflow:hidden}
h1,h2,h3,h4,.brand,.eyebrow,.mark{font-family:'Poppins','Pretendard',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===================== 셸 : 좌측 사이드바 ===================== */
.side{position:fixed;left:0;top:0;width:var(--side);height:100vh;background:#fff;border-right:1px solid var(--line);padding:34px 30px;display:flex;flex-direction:column;z-index:40}
.side .brand{display:flex;align-items:center;gap:12px}
.side .brand img{width:46px;height:auto}
.side .brand b{font-family:'Poppins';font-weight:800;font-size:26px;letter-spacing:-1px;color:var(--blue);line-height:1}
.side .brand b span{color:var(--slate)}
.side .tagline{margin-top:24px;font-family:'Poppins';font-weight:700;font-size:18px;line-height:1.3}
.side .scroll{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--slate);letter-spacing:2px}
.side .scroll i{height:1px;width:56px;background:var(--slate);opacity:.5}
.side nav{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.side nav a{font-family:'Poppins';font-weight:700;font-size:14px;opacity:.85;transition:color .2s,transform .2s,opacity .2s}
.side nav a:hover{opacity:1;color:var(--blue);transform:translateX(3px)}
.side nav a.active{color:var(--blue);opacity:1}
.side nav a.active::before{content:"—　";color:var(--coral)}
.side .cta{margin-top:18px;text-align:center;background:var(--coral);color:#fff;font-weight:800;font-size:14px;padding:12px;border-radius:999px;transition:.2s}
.side .cta:hover{background:var(--corald)}
.side .copy{margin-top:16px;font-size:11px;color:var(--slate);opacity:.75;line-height:1.6}

/* ===================== 콘텐츠 영역 ===================== */
.main{margin-left:var(--side)}
.deck{margin-left:var(--side);height:100vh;overflow-y:scroll;scroll-snap-type:y proximity;overscroll-behavior:contain}
.deck::-webkit-scrollbar{display:none}

/* 풀블리드 섹션 (중앙 컨테이너 폐지 — 메인과 동일 문법) */
.sec{position:relative;padding:var(--pad-y) var(--pad-x);overflow:hidden}
.sec-dark{background:var(--navy);color:#fff}
.sec-blue{background:linear-gradient(135deg,var(--blued),var(--blue));color:#fff}
.sec-cream{background:var(--cream)}
.sec-light{background:var(--cloud)}
.sec-white{background:#fff}
.hold{max-width:1280px}

/* 페이지 헤더(서브 히어로) — 메인 히어로와 같은 결 */
.phead{position:relative;padding:clamp(96px,14vh,160px) var(--pad-x) clamp(64px,9vh,110px);background:linear-gradient(135deg,var(--navy) 0%,#123a86 55%,var(--blue) 100%);color:#fff;overflow:hidden}
.phead .whale{position:absolute;right:-4vw;top:50%;transform:translateY(-50%);width:min(46vh,34vw);filter:brightness(0) invert(1);opacity:.12;pointer-events:none}
.phead .crumb{position:relative;font-family:'Poppins';font-weight:700;letter-spacing:3px;font-size:12px;color:#9DBBFF;text-transform:uppercase}
.phead h1{position:relative;font-size:var(--fs-h1);font-weight:800;letter-spacing:-2px;line-height:1.04;margin-top:18px}
.phead p{position:relative;margin-top:20px;color:#C3D4F5;font-size:var(--fs-lead);max-width:620px}

/* 섹션 타이틀 */
.eyebrow,.tag{display:inline-block;font-family:'Poppins';font-weight:800;letter-spacing:3px;font-size:12.5px;color:var(--blue);text-transform:uppercase}
.sec-dark .tag,.sec-blue .tag{color:#9DBBFF}
.stitle{font-size:var(--fs-h2);font-weight:800;letter-spacing:-1.5px;line-height:1.06;margin:14px 0 16px}
.slead,.lead{color:var(--slate);font-size:var(--fs-lead);max-width:700px}
.sec-dark .slead,.sec-blue .slead,.sec-dark .lead,.sec-blue .lead{color:#C3D4F5}

/* 버튼 */
.btn{display:inline-block;background:var(--blue);color:#fff;padding:13px 28px;border-radius:999px;font-family:'Poppins';font-weight:700;font-size:15px;border:none;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),background .2s}
.btn:hover{background:var(--blued)}
.btn.coral{background:var(--coral)}.btn.coral:hover{background:var(--corald)}
.btn.ghost{background:transparent;border:1.5px solid currentColor}
.btn.ghost:hover{background:#fff;color:var(--navy)}

/* ===================== 컴포넌트 ===================== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid,.grid.two{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,36,77,.14)}
.sec-dark .card,.sec-blue .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.chip{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-family:'Poppins';font-weight:800;color:#fff;font-size:19px;margin-bottom:20px;background:var(--navy)}
.chip.pop{background:var(--blue)}.chip.coral{background:var(--coral)}
.card h3{font-size:var(--fs-h3);margin-bottom:10px;font-weight:700}
.card p{color:var(--slate);font-size:15.5px}
.sec-dark .card p,.sec-blue .card p{color:#C3D4F5}
.card small{display:inline-block;margin-top:16px;color:var(--blue);font-family:'Poppins';font-weight:700;font-size:13px}
.card ul{margin-top:14px;padding-left:18px;color:var(--slate);font-size:15px}
.card ul li{margin-bottom:6px}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.split>*{min-width:0}
.stitle{overflow-wrap:anywhere;word-break:keep-all}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.vlist{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.vitem{display:flex;gap:16px;align-items:flex-start}
.vdot{flex:none;width:38px;height:38px;border-radius:12px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-family:'Poppins';font-weight:800}
.panel{background:linear-gradient(140deg,var(--navy),var(--blue));border-radius:24px;padding:44px;color:#fff;position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%)}
.panel h3{font-size:var(--fs-h3);font-weight:800;position:relative}
.panel .q{font-size:clamp(19px,2vw,24px);line-height:1.45;font-weight:600;margin-top:12px;position:relative}

/* 타임라인 / 로드맵 */
.timeline{margin-top:48px;border-left:2px solid var(--line);padding-left:30px;display:flex;flex-direction:column;gap:32px}
.sec-dark .timeline{border-color:rgba(255,255,255,.2)}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:-37px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--blue)}
.tl b{font-family:'Poppins';color:var(--blue);font-size:14px;letter-spacing:1px}
.sec-dark .tl b{color:#9DBBFF}
.tl h4{margin:4px 0 6px;font-size:var(--fs-h3)}
.tl p{color:var(--slate);font-size:16px}
.sec-dark .tl p{color:#C3D4F5}

/* 포트폴리오 카드 */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
@media(max-width:1000px){.works{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.works{grid-template-columns:1fr}}
.work{cursor:pointer}
.work .lbl{font-family:'Poppins';font-weight:800;font-size:14px;margin-bottom:14px;color:var(--blue)}
.work .thumb{height:230px;border-radius:16px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;display:grid;place-items:center;color:#fff;font-family:'Poppins';font-weight:800;letter-spacing:1px;font-size:14px}
.work:hover .thumb{transform:translateY(-8px);box-shadow:0 28px 56px rgba(14,36,77,.2)}
.work .cap{margin-top:18px}
.work .c1{color:var(--slate2);font-size:14px;font-weight:600}
.work .c2{font-size:var(--fs-h3);font-weight:700;margin-top:4px;line-height:1.3}

/* 요금제 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:22px;padding:34px;background:#fff;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,36,77,.13)}
.plan.feat{border:2px solid var(--blue);position:relative}
.plan .badge{position:absolute;top:-13px;left:28px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;padding:5px 14px;border-radius:999px}
.plan h3{font-size:var(--fs-h3)}
.plan .price{font-family:'Poppins';font-weight:800;font-size:clamp(30px,3vw,40px);margin:10px 0 6px;letter-spacing:-1px}
.plan .price small{font-size:15px;color:var(--slate);font-weight:500}
.plan ul{list-style:none;margin:18px 0 0;padding:0;color:var(--slate);font-size:15px;flex:1}
.plan li{padding:9px 0 9px 24px;position:relative;border-top:1px solid var(--line)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:800}
.plan .btn{margin-top:22px;text-align:center}

/* 표 */
.ptable{width:100%;border-collapse:collapse;margin-top:40px;font-size:16px}
.ptable th,.ptable td{border-bottom:1px solid var(--line);padding:18px 14px;text-align:left}
.ptable th{background:var(--navy);color:#fff;font-family:'Poppins';font-size:13px;letter-spacing:.5px}
.ptable td.r{text-align:right;font-weight:800;white-space:nowrap}
.ptable td.m{text-align:center;color:var(--slate);font-size:14px}

/* 폼 */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);margin-top:48px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:15px 16px;font-size:16px;font-family:inherit;background:#fff;transition:.18s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,90,224,.13)}
.info-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.info-item .ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-family:'Poppins';font-weight:800}
.info-item b{display:block;font-size:16px}
.info-item span{color:var(--slate);font-size:15.5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:900px){.field-row{grid-template-columns:1fr}}
.agree{display:flex;align-items:center;gap:9px;margin:4px 0 18px;font-size:14.5px;color:var(--slate)}
.agree input{width:16px;height:16px;accent-color:var(--blue);flex:none}
.topics{display:flex;flex-wrap:wrap;gap:8px}
.topic{font-family:inherit;font-size:14px;font-weight:600;padding:9px 15px;border:1.5px solid var(--line);background:#fff;color:var(--slate);border-radius:999px;cursor:pointer;transition:.15s}
.topic:hover{border-color:var(--blue);color:var(--blue)}
.topic.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sec-light .card p,.sec-white .card p{color:var(--slate);font-size:15px;line-height:1.6;margin-top:8px}
.note{font-size:14px;color:var(--slate2);margin-top:18px}

/* CTA 밴드 */
.band{background:linear-gradient(135deg,var(--navy),#123a86);color:#fff;text-align:center;border-radius:28px;padding:clamp(56px,8vh,88px) 32px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;left:50%;top:-50%;transform:translateX(-50%);width:640px;height:440px;background:radial-gradient(circle,rgba(30,90,224,.4),transparent 60%)}
.band h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-1.5px;position:relative;line-height:1.08}
.band p{color:#A9BCD8;margin:18px auto 32px;max-width:560px;position:relative;font-size:17px}
.band .btn{position:relative}

/* 푸터 (전 페이지 공통) */
.foot{background:var(--navy);color:#8FA3BD;padding:64px var(--pad-x) 44px;font-size:15px}
.foot .frow{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot .brand-b{color:#fff;font-family:'Poppins';font-weight:800;font-size:22px}
.foot .brand-b span{color:#9DBBFF}
.foot .fcol h5{color:#fff;font-family:'Poppins';font-size:13px;letter-spacing:1px;margin-bottom:14px;text-transform:uppercase}
.foot .fcol a{display:block;color:#A9BCD8;margin-bottom:10px}
.foot .fcol a:hover{color:#fff}
.foot .fbottom{border-top:1px solid #1D3A66;margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#6C819F;font-size:13px}

/* ===================== 모션 ===================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in,.slide.active .reveal{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.10s}
.reveal[data-d="2"]{transition-delay:.20s}
.reveal[data-d="3"]{transition-delay:.30s}
.reveal[data-d="4"]{transition-delay:.40s}
.grid>.reveal:nth-child(2),.plans>.reveal:nth-child(2),.works>.reveal:nth-child(2){transition-delay:.10s}
.grid>.reveal:nth-child(3),.plans>.reveal:nth-child(3),.works>.reveal:nth-child(3){transition-delay:.20s}
.grid>.reveal:nth-child(4),.works>.reveal:nth-child(4){transition-delay:.30s}
.magnetic{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
/* 그레인 질감 */
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain>*{position:relative;z-index:2}

/* ===================== 메인 전용 : 슬라이드 덱 ===================== */
.slide{height:100vh;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad-x);overflow:hidden}
/* --- 히어로 A안 : 타이포가 곧 비주얼 --- */
.s-hero{background:var(--cream);color:var(--navy)}
/* 방향1 — 고래 유영: 텍스트는 좌측으로 몰아 고래와 충돌 방지 */
.s-hero .eyebrow,.s-hero .hl,.s-hero p,.s-hero .btns{max-width:min(600px,56%)}
/* 고래 — 전체 노출(안 잘림). 세로중앙은 margin으로(transform은 유영 애니메이션 전용), 패럴랙스는 translate 속성.
   이것은 no-JS·모션축소 폴백. JS 켜지면 .whale-cv(파티클)로 교체됨. 글로우 없음(물결처럼 뿌예짐 방지) */
.s-hero .whale{position:absolute;right:-8vw;top:50%;height:95vh;width:auto;
  margin-top:-40vh;opacity:.95;pointer-events:none;
  translate:var(--px,0) var(--py,0);animation:swim 9s ease-in-out infinite}
@keyframes swim{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(-2.5deg)}}
/* 파티클 캔버스: 히어로 전체 덮음. 항상 렌더 가능(크기 측정 위해 display:none 금지).
   JS 미동작/모션축소 시엔 빈 캔버스 + 정적 고래(img)가 폴백. JS 활성 시 .fx가 img를 숨김 */
.s-hero .whale-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.s-hero.fx .whale{display:none}
html.js .s-hero .whale{display:none}
html.js .s-hero.no-fx .whale{display:block}
.s-hero .eyebrow{position:relative;color:var(--blue);font-size:clamp(10.5px,1vw,13px);letter-spacing:.34em}
.s-hero .hl{position:relative;margin-top:clamp(16px,2.4vh,30px);font-size:clamp(54px,9.4vw,150px);font-weight:800;line-height:.86;letter-spacing:-.045em}
.s-hero .hl .ln{display:block;overflow:hidden;padding-bottom:.05em}
.s-hero .hl .ln i{display:block;font-style:normal;translate:0 112%;transition:translate 1.05s cubic-bezier(.16,1,.3,1)}
.slide.active .s-hero .hl .ln i,.s-hero.active .hl .ln i{translate:0 0}
.s-hero .hl .ln:nth-child(2) i{transition-delay:.09s}
.s-hero .hl .ln:nth-child(3) i{transition-delay:.18s}
.s-hero .hl .c{color:var(--coral)}
html:not(.js) .s-hero .hl .ln i{translate:0 0}
.s-hero p{position:relative;margin-top:clamp(20px,3vh,34px);font-size:var(--fs-lead);color:var(--slate);max-width:520px}
.s-hero .btns{position:relative;margin-top:clamp(22px,3.4vh,36px);display:flex;gap:12px;flex-wrap:wrap}
.s-hero .btn.ghost{color:var(--navy);border-color:var(--navy)}
.s-hero .btn.ghost:hover{background:var(--navy);color:#fff}
.proj{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.proj .cat{font-family:'Poppins';font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.proj h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-1.5px;line-height:1.05;margin:16px 0 10px}
.proj .client{font-size:15px;font-weight:600;opacity:.75}
.proj .detail{margin-top:28px;display:inline-block;border:1.5px solid currentColor;font-family:'Poppins';font-weight:700;font-size:14px;padding:12px 28px;border-radius:999px;transition:.2s}
.proj .visual{height:60vh;border-radius:22px;box-shadow:0 30px 70px rgba(14,36,77,.3);display:grid;place-items:center;color:#fff;font-family:'Poppins';font-weight:800;font-size:15px;letter-spacing:1px;translate:calc(var(--px,0px)*.4) calc(var(--py,0px)*.35);transition:box-shadow .3s,translate .2s ease-out}
.proj .visual:hover{box-shadow:0 44px 96px rgba(14,36,77,.42)}
.s-dark{background:var(--navy);color:#fff}.s-dark .cat{color:#9DBBFF}.s-dark .detail:hover{background:#fff;color:var(--navy)}
.s-blue{background:linear-gradient(135deg,var(--blued),var(--blue));color:#fff}.s-blue .cat{color:#CFE0FF}.s-blue .detail:hover{background:#fff;color:var(--blue)}
.s-cream{background:var(--cream)}.s-cream .cat{color:var(--blue)}.s-cream .detail:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.s-light{background:var(--cloud)}.s-light .cat{color:var(--blue)}
.s-contact{background:var(--navy);color:#fff;text-align:center;align-items:center}
.s-contact h2{font-size:var(--fs-h1);font-weight:800;letter-spacing:-1.5px;line-height:1.05}
.s-contact h2 em{font-style:normal;color:#9DBBFF}
.s-contact p{margin:20px 0 32px;color:#A9BCD8;font-size:18px}
.s-contact .foot-line{position:absolute;bottom:26px;left:0;right:0;font-size:12px;color:#6C819F}
.dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:40}
.dots button{width:9px;height:9px;border-radius:50%;border:none;background:#B8C4D8;cursor:pointer;padding:0;transition:.2s}
.dots button.on{background:var(--coral);transform:scale(1.35)}
.pnote{position:fixed;left:calc(var(--side) + 24px);bottom:18px;font-size:12px;color:var(--slate);opacity:.7;z-index:35}

/* ===================== 반응형 ===================== */
@media(max-width:860px){
  body.is-deck{overflow:auto}
  .side{position:static;width:auto;height:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:12px 18px;border-right:none;border-bottom:1px solid var(--line)}
  .side .brand img{width:32px}.side .brand b{font-size:20px}
  .side .tagline,.side .scroll,.side .copy{display:none}
  .side nav{margin-top:0;flex-direction:row;gap:14px;align-items:center}
  .side nav a.active::before{content:""}
  .side .cta{margin-top:0;padding:9px 15px}
  .main,.deck{margin-left:0}
  .deck{height:auto;overflow:visible;scroll-snap-type:none}
  .slide{height:auto;padding:64px var(--pad-x)}
  .s-hero .eyebrow,.s-hero .hl,.s-hero p,.s-hero .btns{max-width:100%}
  .s-hero .whale{width:96vw;height:auto;right:-26vw;top:auto;bottom:-2vh;margin-top:0;opacity:.16}
  .s-hero .hl{font-size:clamp(46px,13vw,88px)}
  .proj{grid-template-columns:1fr;gap:28px}
  .proj .visual{height:44vh}
  .dots,.pnote{display:none}
  .phead .whale{width:60vw;right:-16vw}
}

/* ===================== 접근성 ===================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* 문서 페이지(개인정보처리방침·이용약관) */
.doc{max-width:860px;margin:0 auto}
.doc .doc-meta{color:var(--slate2);font-size:14px;margin-bottom:34px}
.doc h2{font-size:19px;font-weight:800;color:var(--navy);margin:38px 0 12px;letter-spacing:-.4px}
.doc h2:first-of-type{margin-top:0}
.doc p{font-size:15.5px;color:var(--slate);line-height:1.85;margin:8px 0}
.doc ul{margin:10px 0;padding-left:20px}
.doc li{font-size:15.5px;color:var(--slate);line-height:1.85;list-style:disc;margin-bottom:6px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.doc th,.doc td{border:1px solid var(--line);padding:11px 14px;text-align:left;color:var(--slate);vertical-align:top}
.doc th{background:var(--cloud);font-weight:700;color:var(--navy);white-space:nowrap}
.doc a{color:var(--blue);text-decoration:underline}

/* 서비스 페이지 — 교차 split */
.split.rev>*:first-child{order:2}
.svisual{--cx:66%;--cy:60%;--gap:28px;--ring:rgba(255,255,255,.15);--ring2:rgba(255,255,255,.3);
  border-radius:22px;min-height:clamp(280px,38vh,400px);display:grid;place-items:center;color:#fff;
  box-shadow:0 30px 70px rgba(14,36,77,.18);position:relative;overflow:hidden;isolation:isolate}
.svisual::before{content:"";position:absolute;inset:-22%;z-index:0;
  background-image:
    repeating-radial-gradient(circle at var(--cx) var(--cy),var(--ring2) 0 2px,transparent 2px calc(var(--gap)*5)),
    repeating-radial-gradient(circle at var(--cx) var(--cy),var(--ring) 0 1.5px,transparent 1.5px var(--gap));
  translate:calc(var(--px,0px)*.5) calc(var(--py,0px)*.5);transition:translate .25s ease-out}
.svisual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at var(--cx) var(--cy),rgba(255,255,255,.16),transparent 58%)}
.svisual .num{position:relative;z-index:2;text-align:center}
.svisual .num b{display:block;font-family:'Poppins';font-weight:900;font-size:clamp(56px,7vw,104px);line-height:1;letter-spacing:-3px}
.svisual .num span{display:block;margin-top:14px;font-size:12px;letter-spacing:3px;opacity:.82}
.slist{margin:26px 0 0;padding-left:18px;color:var(--slate);font-size:16px}
.slist li{margin-bottom:8px;list-style:disc}
.fitbox{margin-top:26px;padding:20px 22px;border-left:3px solid var(--coral);background:var(--cloud);border-radius:0 14px 14px 0}
.sec-cream .fitbox{background:rgba(255,255,255,.72)}
.fitbox b{display:block;font-family:'Poppins';font-size:12px;letter-spacing:2px;color:var(--coral);font-weight:800;margin-bottom:8px}
.fitbox p{color:var(--slate);font-size:15.5px;line-height:1.7}
.slink{display:inline-block;margin-top:22px;font-family:'Poppins';font-weight:700;font-size:14px;color:var(--blue)}
.slink:hover{color:var(--blued)}
.tlmeta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 20px}
.sec-dark .tlmeta{border-color:rgba(255,255,255,.18)}
.tlmeta .dur{font-family:'Poppins';font-weight:700;font-size:13px;color:var(--navy)}
.sec-dark .tlmeta .dur{color:#fff}
.tlmeta .out{font-size:13.5px;color:var(--slate2)}
.sec-dark .tlmeta .out{color:#9DBBFF}
@media(max-width:900px){
  .split.rev>*:first-child{order:0}
  .svisual{min-height:220px}
}