/* DEPENZ STUDIO landing — style.css (spec 05_구현_스펙.md)
   큰 화면 비율 유지(2026-09-18): 데스크톱 규칙의 px 값은 clamp(Npx, calc(N/14.4*1vw), N*1.6px) 패턴.
   1440px 에서 정확히 Npx, 그 위로 화면 폭에 비례해 커지고 2304px(1.6배)에서 멈춘다. 1440px 이하는 원래 값 그대로. */

/* ---------- 0. 토큰·기본 ---------- */
:root{
  --accent:#3200ff;
  --accent-dark:#3200ff; /* 어두운 배경 위 강조 텍스트. 2026-09-18 사용자 결정: 원본 색 유지(밝은 톤 후보 #8f7bff·#7a63ff) */
  --ink:#1c1c20;
  --ink-800:#333338;
  --ink-500:#79797f;
  --ink-200:#cbcbd2;
  --hairline:#e2e2e7;
  --parchment:#f4f4f7;
  --tile:#26262b;
  --black:#000;
  --white:#fff;
  --footer-line:#2a2a2e;
  --focus:#4b47a8;
  --gutter:clamp(32px,calc(32/14.4*1vw),51.2px);
  --radius:clamp(24px,calc(24/14.4*1vw),38.4px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Instrument Sans','Pretendard',system-ui,sans-serif;
  font-size:clamp(17px,calc(17/14.4*1vw),27.2px);
  line-height:1.44;
  letter-spacing:-0.012em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,video{display:block;max-width:100%}
button{font-family:inherit;letter-spacing:inherit}
h1,h2{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 어두운 배경(히어로·서비스·CTA 확장 후·푸터·라이트박스)에서는 흰색 링으로 3:1 대비 확보 */
.hero :focus-visible,.services :focus-visible,.cta.is-open :focus-visible,html:not(.js-motion) .cta :focus-visible,.footer :focus-visible,.lightbox :focus-visible{outline-color:#fff}
/* 앵커 이동 후 섹션에 프로그램 포커스를 줄 때는 링을 그리지 않는다 */
#top:focus,.section:focus{outline:none}
.accent{color:var(--accent)}
.nowrap{white-space:nowrap}
/* 화면별 줄바꿈(2026-09-22): <br class="br-m"> 은 모바일(≤768)에서만, <br class="br-d"> 는 데스크톱에서만 줄을 바꾼다. 단어 분할(main.js splitWords)은 BR 을 건드리지 않으므로 클래스가 보존된다 */
.br-m{display:none}
.skip{position:absolute;left:16px;top:-120px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:9999px;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);font-weight:600}
.skip:focus{top:16px;text-decoration:none}

.page{display:flex;flex-direction:column;gap:0}
.wrap{max-width:clamp(1440px,100vw,2304px);margin:0 auto}
.section{position:relative;border-radius:var(--radius);overflow:hidden}
.hero-stage{position:relative;z-index:0;background:transparent} /* 히어로 페이드 후에도 뒤가 검정 */
.hero-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--radius);background:#000} /* #work 둥근 상단 모서리 뒤도 검정 */
main{position:relative;z-index:1}
.footer{position:relative;z-index:1}

/* 단어 단위 등장(텍스트 노드는 JS가 .w 로 쪼갬) */
.w{display:inline-block}
.js-motion [data-reveal]:not(.is-done) .w{opacity:0;filter:blur(10px);transform:translateY(10px)}
/* 히어로 텍스트: JS 분할 전 깜빡임 방지, JS가 끝내 실행되지 않으면 2.5초 뒤 안전하게 표시 */
.js-motion [data-reveal]:not(.is-split){opacity:0;animation:dz-safety 0s linear 2.5s forwards}
/* 24: 카드·FAQ 초기 숨김도 CSS(js-motion)에서 적용, GSAP onComplete 가 .is-done 을 붙이면 해제. main.js 가 끝내 실행되지 않으면 head 스크립트가 4초 뒤 js-motion 을 제거 */
.js-motion .plans:not(.is-done) .plan,.js-motion .faq-list:not(.is-done) .faq-item{opacity:0}
@keyframes dz-safety{to{opacity:1}}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:clamp(6px,calc(6/14.4*1vw),9.6px);
  border-radius:9999px;border:0;font-family:inherit;font-weight:500;line-height:1.2;
  white-space:nowrap;cursor:pointer;text-decoration:none;transition:transform .12s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.95)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);padding:clamp(9px,calc(9/14.4*1vw),14.4px) clamp(18px,calc(18/14.4*1vw),28.8px)}
.btn--utility{background:var(--ink);color:#fff;font-size:clamp(15px,calc(15/14.4*1vw),24px);padding:clamp(12px,calc(12/14.4*1vw),19.2px) clamp(22px,calc(22/14.4*1vw),35.2px)}
.btn--primary{background:var(--accent);color:#fff;font-size:clamp(15px,calc(15/14.4*1vw),24px);padding:clamp(11px,calc(11/14.4*1vw),17.6px) clamp(22px,calc(22/14.4*1vw),35.2px)}

/* ---------- 2.1 히어로 ---------- */
.hero{position:relative;height:max(56.25vw,720px);overflow:hidden;border-radius:0;color:#fff;background:#000} /* 16:9, 최소 720px (aspect-ratio+min-height 는 min-width 로 전이돼 가로 넘침 발생) */
.hero-inner{position:absolute;inset:0;background:var(--tile);display:flex;flex-direction:column}
/* 영상 레이어는 항상 화면을 꽉 채우고 스크롤해도 크기가 변하지 않는다(가장자리·검정 여백 노출 방지). 스크럽은 텍스트(.hero-body)와 오버레이(.hero-shade)만 */
.hero-media{position:absolute;inset:0;border-radius:0;overflow:hidden;background:var(--tile)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;background:var(--tile)}
.hero-shade{position:absolute;inset:0;background:rgba(0,0,0,0)} /* 2026-09-21: 시작값 0(영상 밝기 100%). 스크럽으로 검정 100% 까지 어두워지는 동작은 유지(main.js heroScrub 시작값도 0) */
/* 2026-09-21: 좌측 검정 그라데이션(.hero-inner::before) 삭제 — 밝기 저하 원인. */
.hero header{position:relative;z-index:2}
.hero-nav{display:flex;align-items:center;gap:clamp(32px,calc(32/14.4*1vw),51.2px);padding:clamp(20px,calc(20/14.4*1vw),32px) var(--gutter);width:100%;font-size:clamp(14px,calc(14/14.4*1vw),22.4px)}
.wordmark{text-shadow:0 1px 12px rgba(0,0,0,.4);font-weight:600;letter-spacing:.08em;font-size:clamp(30px,calc(30/14.4*1vw),48px);color:#fff;white-space:nowrap}
.nav-links{display:flex;gap:clamp(24px,calc(24/14.4*1vw),38.4px);margin-left:auto}
.nav-links a{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.nav-links a.is-current{color:var(--accent)}
/* 좌측 세로 중앙 2줄 헤드라인(레퍼런스: Clairv) + 좌하단 한 줄 태그 */
.hero-body{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:0 var(--gutter) clamp(40px,calc(40/14.4*1vw),64px);transform-origin:50% 50%}
.hero-copy{margin:auto 0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,calc(20/14.4*1vw),32px)}
.hero h1{font-size:clamp(40px,5.2vw,119.81px);line-height:1.1;letter-spacing:-0.02em;font-weight:600;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)} /* 1440px 에서 74.88px, 2304px 캡 */
.hero-line{display:block}
.hero-sub{margin:0;font-size:clamp(17px,calc(17/14.4*1vw),27.2px);line-height:1.5;color:rgba(255,255,255,.8);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-tag{margin:0;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);line-height:1.4;letter-spacing:0;color:rgba(255,255,255,.7);white-space:nowrap;text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* 줄 단위 블러 디졸브 초기 상태 — js-motion 하위에서만, GSAP 완료(.is-intro) 후 해제 */
.js-motion .hero:not(.is-intro) .hero-line{opacity:0;filter:blur(14px);transform:translateY(8px)}
.js-motion .hero:not(.is-intro) .hero-sub,.js-motion .hero:not(.is-intro) .hero-tag{opacity:0}

/* ---------- 2.2 포트폴리오 ---------- */
.work{background:var(--parchment);padding:clamp(8px,calc(8/14.4*1vw),12.8px) 0}
.grid{display:flex;flex-direction:column;gap:clamp(8px,calc(8/14.4*1vw),12.8px);opacity:.55}
.row{overflow:hidden}
.row-1,.row-3{height:15vw}
.row-2{height:14vw}
.row-track{display:flex;gap:clamp(8px,calc(8/14.4*1vw),12.8px);height:100%;justify-content:center}
.tile{
  position:relative;display:block;height:100%;aspect-ratio:16/9;flex:none;
  border-radius:clamp(8px,calc(8/14.4*1vw),12.8px);overflow:hidden;padding:0;border:0;background:var(--tile);color:#fff;cursor:pointer;font:inherit;
}
.tile--v{aspect-ratio:9/16}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
.tile:focus-visible{outline:none}
.tile:focus-visible::after{content:"";position:absolute;inset:0;border-radius:clamp(8px,calc(8/14.4*1vw),12.8px);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px var(--focus);pointer-events:none}
.work:has(.tile:focus-visible) .grid{opacity:1 !important}
.work:has(.tile:focus-visible) .statement{background:rgba(255,255,255,0) !important}
@media (min-width:769px){.work:has(.tile:focus-visible) .statement h2{opacity:0 !important}}
.tile-cap{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:clamp(4px,calc(4/14.4*1vw),6.4px);
  padding:clamp(14px,calc(14/14.4*1vw),22.4px);text-align:left;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72));
  opacity:0;transition:opacity .3s ease;
}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{opacity:1}
.tile-title{font-size:clamp(14px,calc(14/14.4*1vw),22.4px);font-weight:600;line-height:1.3;letter-spacing:-0.01em;overflow-wrap:anywhere}
.tile-cat{font-size:clamp(11px,calc(11/14.4*1vw),17.6px);letter-spacing:.08em;line-height:1.2;opacity:.85}
.statement{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(255,255,255,.62)}
.statement h2{font-size:clamp(28px,3vw,69.12px);line-height:1.25;letter-spacing:-0.02em;font-weight:600;text-align:center;color:var(--ink);padding:0 clamp(24px,calc(24/14.4*1vw),38.4px);text-shadow:0 2px 24px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.8)}

/* ---------- 2.3 서비스 ---------- */
.services{background:var(--black);color:#fff;padding:clamp(96px,calc(96/14.4*1vw),153.6px) var(--gutter) 0}
.services-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,calc(48/14.4*1vw),76.8px);align-items:start;padding-bottom:clamp(20px,calc(20/14.4*1vw),32px);border-bottom:1px solid var(--ink-800)} /* 2026-09-22: 가로줄을 제목에 가깝게 48→20px */
.services-head-l{display:flex;flex-direction:column;gap:clamp(24px,calc(24/14.4*1vw),38.4px)} /* 칩–h2 간격은 비용 섹션(.pricing-head-l)과 동일 */
.services .chip{background:transparent;color:#fff} /* 검정 배경: 칩 배경 투명·글자 흰색, 점은 키컬러(.chip::before) */
.services-head h2{font-size:clamp(32px,3.9vw,56px);line-height:1.07;letter-spacing:-0.02em;font-weight:600}
.services-head p{font-size:clamp(17px,calc(17/14.4*1vw),27.2px);line-height:1.6;color:var(--ink-200);margin:0;max-width:none;justify-self:end;text-align:right}
.services-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(64px,calc(64/14.4*1vw),102.4px);margin-top:clamp(80px,calc(80/14.4*1vw),128px);align-items:center}
.svc-list{list-style:none;margin:0;padding:0}
.svc-list li{display:flex;border-top:1px dashed var(--ink-800)} /* 점선·행 구분은 li 담당. 버튼은 flex 아이템으로 글자 폭만 차지 → 빈 공간 호버로 전환되지 않음(2026-09-21) */
.svc-list li:last-child{border-bottom:1px dashed var(--ink-800)}
.svc{
  display:flex;align-items:baseline;gap:clamp(24px,calc(24/14.4*1vw),38.4px);padding:clamp(32px,calc(32/14.4*1vw),51.2px) 0;width:auto;max-width:100%;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;letter-spacing:inherit;
}
.svc-arrow{
  flex:none;font-size:clamp(28px,calc(28/14.4*1vw),44.8px);line-height:1;color:var(--accent);max-width:0;margin-right:clamp(-38.4px,calc(-24/14.4*1vw),-24px);
  opacity:0;transform:translateX(-12px);transition:opacity .3s ease,transform .3s ease,max-width .3s ease,margin .3s ease;
}
.svc-name{font-size:clamp(30px,5vw,115.2px);line-height:1;letter-spacing:-0.03em;font-weight:600;color:var(--ink-500);transition:color .3s ease}
.svc.is-active .svc-arrow{max-width:1.2em;margin-right:0;opacity:1;transform:none}
.svc.is-active .svc-name{color:#fff}
.svc-side{display:grid;grid-template-rows:1fr auto 1fr;align-self:stretch;width:100%}
.svc-side>.svc-caption{align-self:end;text-align:right;margin-bottom:clamp(16px,calc(16/14.4*1vw),25.6px)}
.svc-below{align-self:start;display:flex;flex-direction:column;gap:clamp(24px,calc(24/14.4*1vw),38.4px);margin-top:clamp(24px,calc(24/14.4*1vw),38.4px)}
/* 서비스 비주얼: 서비스별 슬라이드 그룹(활성 그룹만 표시) → 가로 트랙 translateX 이동 */
.svc-visual{position:relative;aspect-ratio:16/9;border-radius:clamp(18px,calc(18/14.4*1vw),28.8px);background:#292930;overflow:hidden}
.svc-track{position:absolute;inset:0}
.svc-group{display:flex;height:100%;transition:transform .45s ease;will-change:transform}
.svc-group[hidden]{display:none}
.svc-slide{position:relative;flex:0 0 100%;height:100%;padding:0;border:0;background:#292930;color:#fff;cursor:pointer;overflow:hidden;font:inherit}
.svc-slide img{width:100%;height:100%;object-fit:cover;transition:filter .4s ease,transform .4s ease} /* 미리보기 제거 시 0.4s 복귀 */
/* 미리보기 디졸브와 같은 시점에 포스터를 어둡게+블러(0.8s). scale 1.04 로 블러 가장자리를 감춘다. 레터박스 영역에 비치는 포스터용 */
.svc-slide.is-dimmed img{filter:brightness(.55) blur(10px);transform:scale(1.04);transition-duration:.8s}
/* 미리보기 iframe: 재생 시작(Vimeo play 이벤트 또는 4초 안전장치) 후 0.8s 디졸브 */
.svc-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.svc-slide iframe.is-loaded{opacity:1}
/* 로딩 점 3개(2026-09-21, 레퍼런스 "Loader One"): iframe 생성 시작 → 재생 시작까지 슬라이드 중앙. 지름 12px 원 3개, 간격 4px, 키컬러, 배경 없음.
   각 점은 1초 주기로 x 0→10px→0 · opacity .5→1→.5 · scale 1→1.2→1 을 반복하고 점마다 0.2s 지연. 순수 CSS keyframes. 0.3s 페이드아웃(.is-out) 후 main.js 가 제거.
   크기·이동 거리는 다른 값과 같은 clamp 비례 확대. 감소 모션에서는 미리보기 자체를 만들지 않는다(main.js mountPreview) */
.svc-loader{
  position:absolute;left:50%;top:50%;z-index:1;display:flex;gap:clamp(4px,calc(4/14.4*1vw),6.4px);transform:translate(-50%,-50%);
  --dz-dot:clamp(12px,calc(12/14.4*1vw),19.2px);--dz-shift:clamp(10px,calc(10/14.4*1vw),16px);
  pointer-events:none;transition:opacity .3s ease;
}
.svc-dot{display:block;width:var(--dz-dot);height:var(--dz-dot);border-radius:50%;background:var(--accent);opacity:.5;animation:dz-dot 1s ease-in-out infinite}
.svc-dot:nth-child(2){animation-delay:.2s}
.svc-dot:nth-child(3){animation-delay:.4s}
.svc-loader.is-out{opacity:0}
@keyframes dz-dot{0%,100%{transform:translateX(0) scale(1);opacity:.5}50%{transform:translateX(var(--dz-shift)) scale(1.2);opacity:1}}
.svc-slide:focus-visible{outline:none}
.svc-slide:focus-visible::after{content:"";position:absolute;inset:0;border-radius:clamp(18px,calc(18/14.4*1vw),28.8px);box-shadow:inset 0 0 0 3px #fff;pointer-events:none}
.svc-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:clamp(44px,calc(44/14.4*1vw),70.4px);height:clamp(44px,calc(44/14.4*1vw),70.4px);border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.22);color:#fff;font-size:clamp(20px,calc(20/14.4*1vw),32px);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,transform .12s ease;
}
.svc-nav:hover{background:rgba(255,255,255,.4)}
.svc-nav:active{transform:translateY(-50%) scale(.95)}
.svc-prev{left:clamp(16px,calc(16/14.4*1vw),25.6px)}
.svc-next{right:clamp(16px,calc(16/14.4*1vw),25.6px)}
.svc-visual.is-single .svc-nav{display:none}
/* 드래그 스와이프(2026-09-22, main.js dragStart/dragMove/dragEnd): 세로 스크롤은 브라우저, 가로 이동은 JS 가 트랙을 손가락·마우스에 맞춰 옮긴다 */
.svc-visual{touch-action:pan-y}
.svc-slide img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.svc-visual.is-dragging .svc-slide{cursor:grabbing}
/* 확대 아이콘(장식): Vimeo 전체화면 아이콘과 같은 네 모서리 꺾쇠. 클릭은 통과(pointer-events none) → 슬라이드 어디를 눌러도 라이트박스 */
.svc-expand{position:absolute;right:clamp(12px,calc(12/14.4*1vw),19.2px);bottom:clamp(12px,calc(12/14.4*1vw),19.2px);z-index:2;width:clamp(36px,calc(36/14.4*1vw),57.6px);height:clamp(36px,calc(36/14.4*1vw),57.6px);border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}
.svc-expand svg{width:clamp(20px,calc(20/14.4*1vw),32px);height:clamp(20px,calc(20/14.4*1vw),32px)}
/* 점 인디케이터(2026-09-22g, main.js buildDots/syncDots): 서비스 캐러셀(.svc-dots, 영상 프레임 아래·캡션 위)과 라이트박스(.lb-dots, 영상 아래) 공용.
   작은 회색 원이 나란히 있고 현재 위치만 가로로 긴 키컬러 알약(width·background .3s). 검정 배경에서 키컬러가 묻히지 않게 알약에 흰 1px 링.
   버튼 자체는 6px 이지만 ::after 로 터치 영역을 위아래 10px·좌우 간격 절반만큼 넓힌다. 요금 카드의 .plans-dots 와는 별개 */
.dots{--dot:clamp(6px,calc(6/14.4*1vw),9.6px);--dot-gap:clamp(6px,calc(6/14.4*1vw),9.6px);--dot-on:clamp(22px,calc(22/14.4*1vw),35.2px);display:flex;justify-content:center;align-items:center;gap:var(--dot-gap)}
.dots[hidden]{display:none}
.dots button{position:relative;flex:none;width:var(--dot);height:var(--dot);padding:0;border:0;border-radius:9999px;background:rgba(255,255,255,.28);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:width .3s ease,background .3s ease}
.dots button::after{content:"";position:absolute;inset:-10px calc(var(--dot-gap) / -2)}
.dots button.is-active{width:var(--dot-on);background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.svc-dots{margin:clamp(-12.8px,calc(-8/14.4*1vw),-8px) 0 0} /* 프레임과 16px(.svc-below margin 24 − 8), 캡션과 16px(gap 24 − 캡션 음수 margin 8) */
.lb-dots{flex:none;margin-top:14px}
.lb-dots.is-dense{--dot:clamp(5px,calc(5/14.4*1vw),8px);--dot-gap:clamp(5px,calc(5/14.4*1vw),8px)} /* 영상이 많은 목록(11개 이상): 한 줄 유지 */
.svc-cap{display:flex;justify-content:space-between;align-items:baseline;gap:clamp(16px,calc(16/14.4*1vw),25.6px);margin:clamp(-12.8px,calc(-8/14.4*1vw),-8px) 0 0;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);line-height:1.4;color:var(--ink-200)}
.svc-cap-title{min-width:0;overflow-wrap:anywhere}
.svc-cap-count{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-500)}
.svc-caption{font-size:clamp(17px,calc(17/14.4*1vw),27.2px);line-height:1.5;margin:0;font-weight:600}
.svc-meta{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:clamp(8px,calc(8/14.4*1vw),12.8px) clamp(24px,calc(24/14.4*1vw),38.4px);font-size:clamp(12px,calc(12/14.4*1vw),19.2px);letter-spacing:.08em;color:var(--accent);font-weight:600}
.svc-meta a{color:var(--accent)}
.svc-more{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--accent);padding:clamp(9px,calc(9/14.4*1vw),14.4px) clamp(18px,calc(18/14.4*1vw),28.8px);line-height:1.2;white-space:nowrap;transition:transform .12s ease}
.svc-more:active{transform:scale(.95)}

/* ---------- 2.4 비용 ---------- */
.pricing{background:var(--white);padding:clamp(96px,calc(96/14.4*1vw),153.6px) var(--gutter)}
.pricing-head{display:flex;align-items:flex-end;gap:clamp(32px,calc(32/14.4*1vw),51.2px);flex-wrap:wrap}
.pricing-head-l{display:flex;flex-direction:column;gap:clamp(24px,calc(24/14.4*1vw),38.4px)}
.chip{display:inline-flex;align-items:center;gap:clamp(8px,calc(8/14.4*1vw),12.8px);background:#fff;border-radius:9999px;padding:clamp(8px,calc(8/14.4*1vw),12.8px) clamp(16px,calc(16/14.4*1vw),25.6px);font-size:clamp(12px,calc(12/14.4*1vw),19.2px);letter-spacing:.08em;font-weight:600;width:max-content}
.chip::before{content:"";width:clamp(10px,calc(10/14.4*1vw),16px);height:clamp(10px,calc(10/14.4*1vw),16px);background:var(--accent);border-radius:2px;flex:none}
.pricing h2{font-size:clamp(32px,3.9vw,56px);line-height:1.07;letter-spacing:-0.02em;font-weight:600}
.toggle{margin-left:auto;display:inline-flex;background:#fff;border:1px solid var(--hairline);border-radius:9999px;padding:clamp(4px,calc(4/14.4*1vw),6.4px);font-size:clamp(14px,calc(14/14.4*1vw),22.4px)}
.toggle button{border:0;cursor:pointer;border-radius:9999px;padding:clamp(10px,calc(10/14.4*1vw),16px) clamp(20px,calc(20/14.4*1vw),32px);font:inherit;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);font-weight:400;background:transparent;color:var(--ink);transition:transform .12s ease}
.toggle button:active{transform:scale(.95)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:600}
.plans[hidden]{display:none}
.plans-track{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(300px,calc(300/14.4*1vw),480px),1fr));gap:clamp(24px,calc(24/14.4*1vw),38.4px);margin-top:clamp(48px,calc(48/14.4*1vw),76.8px)}
.plan{background:#fff;border:1px solid var(--hairline);border-radius:clamp(18px,calc(18/14.4*1vw),28.8px);padding:clamp(32px,calc(32/14.4*1vw),51.2px);display:flex;flex-direction:column;gap:clamp(20px,calc(20/14.4*1vw),32px)}
.plan--featured{border:2px solid var(--accent);padding:clamp(31px,calc(31/14.4*1vw),49.6px)}
.plan-label{display:flex;align-items:center;font-size:clamp(12px,calc(12/14.4*1vw),19.2px);letter-spacing:.08em;font-weight:600;color:var(--ink)}
.plan-label h3{margin:0;font:inherit;letter-spacing:inherit}
.badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:clamp(6px,calc(6/14.4*1vw),9.6px);padding:clamp(4px,calc(4/14.4*1vw),6.4px) clamp(10px,calc(10/14.4*1vw),16px);font-size:clamp(12px,calc(12/14.4*1vw),19.2px);font-weight:600;letter-spacing:.06em}
.plan-price{font-size:clamp(34px,calc(34/14.4*1vw),54.4px);font-weight:600;letter-spacing:-0.015em;line-height:1.2}
.plan-from,.plan-unit{font-size:clamp(17px,calc(17/14.4*1vw),27.2px);color:var(--ink-500);font-weight:400;letter-spacing:-0.012em}
.plan-amount{white-space:nowrap}
.plan-from{margin-left:clamp(14px,calc(14/14.4*1vw),22.4px)}
.plan-unit{margin-left:clamp(6px,calc(6/14.4*1vw),9.6px)}
.plan-desc{margin:0;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);color:var(--ink-500)}
.plan ul{list-style:none;margin:clamp(8px,calc(8/14.4*1vw),12.8px) 0 0;padding:0;display:flex;flex-direction:column;font-size:clamp(15px,calc(15/14.4*1vw),24px)}
.plan li{padding:clamp(14px,calc(14/14.4*1vw),22.4px) 0;border-top:1px solid var(--hairline)}
.plan li:last-child{border-bottom:1px solid var(--hairline)}
.plan .btn{margin-top:clamp(8px,calc(8/14.4*1vw),12.8px);width:max-content}
/* 카드 무대 배치(2026-09-19, 레퍼런스: 21st.dev "Pricing" 블록) — 가운데 카드가 앞(translateY -20px, z 2), 양옆은 scale .94 + 안쪽 30px + rotateY 로 살짝 뒤(z 1, margin-top 20px).
   최종 transform 은 CSS 가 갖고, GSAP 등장 애니메이션(main.js plansEntrance)은 --dy(세로 오프셋)와 opacity 만 트윈해 충돌이 없다. 호버는 --hy 로 6px 더 올린다(@property 로 .3s 전이).
   3장이 한 줄에 놓이는 1024px 이상에서만 3D 배치, 769~1023px(2열 자동 줄바꿈)은 평면 유지. 모바일(≤768) 스와이프 트랙은 transform 없음 */
@property --hy{syntax:'<length>';inherits:false;initial-value:0px}
@property --sc{syntax:'<number>';inherits:false;initial-value:1} /* 모바일 스와이프 카드 배율(가운데 1, 양옆 .92) — .3s 전이용 */
@media (min-width:769px){
  .plans-track{perspective:1200px;overflow:visible;padding:clamp(20px,calc(20/14.4*1vw),32px) clamp(8px,calc(8/14.4*1vw),12.8px) 0}
  .plan{--dy:0px;--hy:0px;position:relative;transform:translateY(calc(var(--dy) + var(--hy)));transition:--hy .3s ease,box-shadow .3s ease}
  .plan:hover{--hy:-6px;box-shadow:0 24px 60px rgba(28,28,32,.12)}
}
@media (min-width:1024px){
  .plans-track .plan:nth-child(1){z-index:1;margin-top:clamp(20px,calc(20/14.4*1vw),32px);transform-origin:right center;transform:translate3d(clamp(30px,calc(30/14.4*1vw),48px),calc(var(--dy) + var(--hy)),0) scale(.94)}
  .plans-track .plan:nth-child(2){z-index:2;transform:translateY(calc(clamp(-32px,calc(-20/14.4*1vw),-20px) + var(--dy) + var(--hy)))}
  .plans-track .plan:nth-child(3){z-index:1;margin-top:clamp(20px,calc(20/14.4*1vw),32px);transform-origin:left center;transform:translate3d(clamp(-48px,calc(-30/14.4*1vw),-30px),calc(var(--dy) + var(--hy)),0) scale(.94)}
}
.plans-dots{display:none;justify-content:center;gap:8px;margin-top:16px}
.plans-dots span{width:8px;height:8px;border-radius:50%;background:var(--ink-200)}
.plans-dots span.is-active{background:var(--accent)}
.plans-note{margin:clamp(20px,calc(20/14.4*1vw),32px) 0 0;font-size:clamp(13px,calc(13/14.4*1vw),20.8px);color:var(--ink-500)}

/* 고객사 로고 띠(서비스 섹션 맨 아래, 2026-09-19 재설계) — 얇은 검정 바.
   .clients 는 .wrap 밖, .services 의 마지막 자식(2026-09-19): 섹션 좌우 padding(--gutter)만 음수 margin 으로 상쇄하면 .wrap 상한(2304px)과 무관하게
   어떤 화면 폭에서도 섹션 가장자리까지(좌우 여백 0) 찬다. 100vw 를 쓰지 않으므로 스크롤바 폭 넘침도 없다.
   좌측 .clients-lead(고정: 키컬러 점 + 두 줄 문장, padding-left 는 --gutter 로 본문 좌측선과 일치)가 마키 위를 덮고, 오른쪽 화면 끝에서 왼쪽으로 흐르는 흰색 로고가
   lead 블록 밑으로 사라진다(::after 24px 페이드). 우측 끝 페이드 없음(로고가 화면 끝에서 그대로 잘려 흐른다). 로고 크기는 인라인 --h 의 48%(2026-09-20: 60%→48%, 20% 축소). 호버해도 색·속도 변화 없음 */
.clients{position:relative;height:clamp(64px,calc(64/14.4*1vw),102.4px);margin:clamp(80px,calc(80/14.4*1vw),128px) calc(-1 * var(--gutter)) 0;border-top:1px solid var(--ink-800);background:#000;font-size:clamp(12px,calc(12/14.4*1vw),19.2px)}
.clients-lead{position:absolute;left:0;top:0;z-index:2;height:100%;display:flex;align-items:center;gap:clamp(12px,calc(12/14.4*1vw),19.2px);padding-left:var(--gutter);padding-right:clamp(24px,calc(24/14.4*1vw),38.4px);background:#000}
.clients-lead::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:clamp(24px,calc(24/14.4*1vw),38.4px);background:linear-gradient(90deg,#000,rgba(0,0,0,0));pointer-events:none}
.clients-dot{flex:none;width:clamp(10px,calc(10/14.4*1vw),16px);height:clamp(10px,calc(10/14.4*1vw),16px);background:var(--accent);border-radius:2px}
.clients-copy{margin:0;width:clamp(320px,calc(320/14.4*1vw),512px);font-size:inherit;letter-spacing:.04em;line-height:1.5;color:rgba(255,255,255,.8);white-space:nowrap}
.marquee{position:absolute;inset:0;z-index:1;overflow:hidden} /* 좌측은 lead 블록이 덮고, 우측은 페이드 없이 화면 끝까지 로고가 찬다 */
.marquee-track{display:flex;align-items:center;width:max-content;height:100%;will-change:transform}
.js-motion .marquee-track{animation:dz-marquee 110s linear infinite}
.marquee-group{display:flex;gap:clamp(40px,calc(40/14.4*1vw),64px);align-items:center;padding-right:clamp(40px,calc(40/14.4*1vw),64px);flex:none} /* padding-right = gap: 두 벌이 이어질 때 간격 동일. 2026-09-20: 48→40px */
/* --h 는 단위 없는 숫자(px 기준, index.html 인라인). 표시 높이는 그 48%(상한 .768 = .48×1.6), 1440px 초과 시 다른 값과 같은 비율로 커진다. 띠 높이(64px)는 그대로라 로고는 세로 중앙. 검정·주황 로고 모두 흰색으로 통일.
   drop-shadow(0 0 0 #fff) 2회: 원본 PNG 알파가 55~80% 인 로고(naver·webtoon·modetour·cau·shinhan-life)가 회색으로 보이지 않도록 같은 모양의 흰 사본을 밑에 겹쳐 알파를 0.96 이상으로 보강
   2026-09-22g: 각 img 인라인에 aspect-ratio(실제 PNG 픽셀 비율)를 넣어 로드·디코드 전에도 폭이 잡힌다(0폭 빈칸·루프 폭 변동 방지). decoding/loading 속성은 두지 않는다 */
.marquee-group img{height:clamp(calc(var(--h,48) * .48px),calc(var(--h,48) * .48 / 14.4 * 1vw),calc(var(--h,48) * .768px));width:auto;max-width:none;opacity:.85}
/* 감소 모션(데스크톱): 마키 정지 + 가로 스크롤 허용. 첫 로고가 lead 블록 밑에 숨지 않도록 트랙을 lead 폭만큼 들여쓴다 */
.no-motion .marquee{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.no-motion .marquee::-webkit-scrollbar{display:none}
.no-motion .marquee-track{padding-left:clamp(424px,calc(424/14.4*1vw),678.4px)} /* gutter 32 + 점 10 + gap 12 + 문장 320 + padding 24 + 페이드 24 = 422 */
.no-motion .marquee-group[aria-hidden="true"]{display:none}
@keyframes dz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 2.5 FAQ ---------- */
.faq{background:#F4F4F7;padding:clamp(120px,calc(120/14.4*1vw),192px) var(--gutter)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(64px,calc(64/14.4*1vw),102.4px);align-items:start}
.faq-intro{display:flex;flex-direction:column;gap:clamp(24px,calc(24/14.4*1vw),38.4px)}
.faq-intro .chip{background:#f4f4f7}
.faq h2{font-size:clamp(32px,3.9vw,56px);line-height:1.07;letter-spacing:-0.02em;font-weight:600}
.faq-intro p{font-size:clamp(17px,calc(17/14.4*1vw),27.2px);line-height:1.5;color:var(--ink-500);margin:0;max-width:40ch}
.faq-list{display:flex;flex-direction:column;gap:clamp(16px,calc(16/14.4*1vw),25.6px)}
.faq-item{background:#f4f4f7;border-radius:9999px;padding:0 clamp(32px,calc(32/14.4*1vw),51.2px)}
.faq-item summary{display:flex;align-items:center;gap:clamp(16px,calc(16/14.4*1vw),25.6px);padding:clamp(28px,calc(28/14.4*1vw),44.8px) 0;min-height:clamp(96px,calc(96/14.4*1vw),153.6px);font-size:clamp(21px,calc(21/14.4*1vw),33.6px);font-weight:600;list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.plus{margin-left:auto;flex:none;font-size:clamp(28px,calc(28/14.4*1vw),44.8px);font-weight:400;line-height:1;color:var(--accent);transition:transform .2s ease}
.faq-item[open] .plus,.faq-item.is-open .plus{transform:rotate(45deg)}
.faq-body{overflow:hidden}
.faq-body p{margin:0;padding:0 0 clamp(28px,calc(28/14.4*1vw),44.8px);font-size:clamp(17px,calc(17/14.4*1vw),27.2px);line-height:1.5;color:var(--ink-800)}

/* ---------- 2.6 마지막 CTA (흰 배경 + 키컬러 원 확장, 레퍼런스: we-ar.kr) ----------
   섹션이 뷰포트 50% 지점에 닿으면 JS(GSAP)가 원을 섹션 대각선 ×1.2 로 키우고 글자를 흰색으로 바꾼다(되돌아가면 역재생).
   모션이 없으면(js-motion 아님) 처음부터 확장된 상태. */
.cta{background:#fff;color:var(--ink);min-height:78vh;display:flex;align-items:center;justify-content:center;padding:clamp(96px,calc(96/14.4*1vw),153.6px) var(--gutter);text-align:center;overflow:hidden}
.cta-circle{position:absolute;left:50%;top:60%;z-index:0;width:clamp(144px,calc(144/14.4*1vw),230.4px);height:clamp(144px,calc(144/14.4*1vw),230.4px);transform:translate(-50%,-50%);border-radius:9999px;background:var(--accent);pointer-events:none}
.cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,calc(24/14.4*1vw),38.4px)}
.cta h2{font-size:clamp(40px,calc(40/14.4*1vw),64px);line-height:1.1;letter-spacing:-0.015em;font-weight:600;color:var(--ink)}
.cta p{font-size:clamp(17px,calc(17/14.4*1vw),27.2px);line-height:1.6;margin:0;max-width:60ch;color:var(--ink)}
.cta-btn{
  position:relative;z-index:3;margin-top:clamp(32px,calc(32/14.4*1vw),51.2px);background:#fff;color:var(--accent);border-radius:9999px;padding:clamp(40px,calc(40/14.4*1vw),64px) clamp(72px,calc(72/14.4*1vw),115.2px);
  font-size:clamp(48px,calc(48/14.4*1vw),76.8px);font-weight:600;letter-spacing:-0.02em;line-height:1;display:inline-flex;align-items:center;gap:clamp(20px,calc(20/14.4*1vw),32px);
  transition:transform .25s ease,box-shadow .3s ease;
}
/* 확장 전(흰 배경)에는 흰 알약이 배경에 묻히므로 키컬러 2px 링을 두른다(레퍼런스 버튼과 동일). 확장되면 링 제거 → 흰 알약 그대로 */
.js-motion .cta:not(.is-open) .cta-btn{box-shadow:inset 0 0 0 2px var(--accent)}
.cta-btn:hover{transform:scale(1.03);text-decoration:none}
.cta-btn:active{transform:scale(.95);transition-duration:.12s}
html:not(.js-motion) .cta{background:var(--accent)}
html:not(.js-motion) .cta h2,html:not(.js-motion) .cta p{color:#fff}
html:not(.js-motion) .cta-circle{display:none}

/* ---------- 2.7 푸터 ---------- */
.footer{background:var(--black);color:#fff;border:1px solid var(--footer-line);border-radius:var(--radius);padding:clamp(40px,calc(40/14.4*1vw),64px) var(--gutter) clamp(24px,calc(24/14.4*1vw),38.4px);display:flex;flex-direction:column;gap:clamp(64px,calc(64/14.4*1vw),102.4px)} /* 순서: 뉴스레터·링크 → 워드마크 → 하단 행. 요소 간 gap 64px */
.footer-top{display:flex;gap:clamp(48px,calc(48/14.4*1vw),76.8px);flex-wrap:wrap;align-items:flex-start}
.footer-news{display:flex;flex-direction:column;gap:clamp(20px,calc(20/14.4*1vw),32px);max-width:clamp(420px,calc(420/14.4*1vw),672px)}
.footer-news p{font-size:clamp(28px,calc(28/14.4*1vw),44.8px);line-height:1.3;letter-spacing:-0.015em;font-weight:400;margin:0}
.news-form{display:flex;align-items:center;gap:clamp(8px,calc(8/14.4*1vw),12.8px);border:1px solid #3a3a40;border-radius:9999px;padding:clamp(6px,calc(6/14.4*1vw),9.6px) clamp(6px,calc(6/14.4*1vw),9.6px) clamp(6px,calc(6/14.4*1vw),9.6px) clamp(20px,calc(20/14.4*1vw),32px);max-width:clamp(380px,calc(380/14.4*1vw),608px)}
.news-form:focus-within{box-shadow:0 0 0 2px #fff}
.news-form input{flex:1;min-width:0;font:inherit;font-size:clamp(13px,calc(13/14.4*1vw),20.8px);background:transparent;border:0;color:#fff;outline:none;padding:0}
.news-form input::placeholder{color:#8a8a92}
.news-form button{width:clamp(36px,calc(36/14.4*1vw),57.6px);height:clamp(36px,calc(36/14.4*1vw),57.6px);border-radius:9999px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);border:0;cursor:pointer;flex:none;padding:0;transition:transform .12s ease}
.news-form button:active{transform:scale(.95)}
.footer-social{display:flex;gap:clamp(8px,calc(8/14.4*1vw),12.8px);flex-wrap:wrap;font-size:clamp(11px,calc(11/14.4*1vw),17.6px)}
.footer-social a{color:#fff;background:var(--ink);border-radius:9999px;padding:clamp(6px,calc(6/14.4*1vw),9.6px) clamp(12px,calc(12/14.4*1vw),19.2px)}
.footer-social a:hover{text-decoration:none}
.footer-nav{margin-left:auto;margin-right:clamp(48px,calc(48/14.4*1vw),76.8px);display:flex;flex-direction:column;border-left:1px solid var(--footer-line);padding-left:clamp(24px,calc(24/14.4*1vw),38.4px);font-size:clamp(15px,calc(15/14.4*1vw),24px);line-height:2.1}
.footer-nav a{color:#fff}
/* 워드마크(뉴스레터·링크 아래, 하단 행 위): 모션 모드에서는 자체 ScrollTrigger(main.js footerMark, top 90%·1회)가 y 32px→0·opacity .6→1 로 올린다. 감소 모션은 정적 최종 상태 */
.footer-mark{font-size:clamp(48px,9.5vw,218.88px);line-height:.95;letter-spacing:-0.04em;font-weight:700;text-align:center;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.footer-bottom{display:flex;align-items:center;gap:clamp(24px,calc(24/14.4*1vw),38.4px);flex-wrap:wrap;border-top:1px solid var(--footer-line);padding-top:clamp(20px,calc(20/14.4*1vw),32px);font-size:clamp(13px,calc(13/14.4*1vw),20.8px);color:var(--ink-200)}
.footer-legal{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,calc(16/14.4*1vw),25.6px);flex-wrap:wrap}
.footer-legal a{color:var(--ink-200)}
.footer-legal .sep{color:#3a3a40}

/* ---------- 2.9 개인정보 처리방침 페이지 (privacy.html) ---------- */
.legal-head{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,calc(24/14.4*1vw),38.4px);padding:clamp(20px,calc(20/14.4*1vw),32px) var(--gutter);border-bottom:1px solid var(--hairline)}
.legal-head .wordmark{color:var(--ink)}
.legal-head .wordmark:hover{text-decoration:none}
.legal-back{color:var(--ink);font-size:clamp(14px,calc(14/14.4*1vw),22.4px);white-space:nowrap}
.legal{width:100%;max-width:clamp(780px,calc(780/14.4*1vw),1248px);margin:0 auto;padding:clamp(72px,calc(72/14.4*1vw),115.2px) var(--gutter) clamp(120px,calc(120/14.4*1vw),192px)}
.legal h1{font-size:clamp(32px,calc(32/14.4*1vw),51.2px);line-height:1.15;letter-spacing:-0.02em;font-weight:600;margin:0 0 clamp(16px,calc(16/14.4*1vw),25.6px)}
.legal-intro{margin:0;color:var(--ink-500);font-size:clamp(15px,calc(15/14.4*1vw),24px)}
.legal h2{font-size:clamp(20px,calc(20/14.4*1vw),32px);line-height:1.3;letter-spacing:-0.015em;font-weight:600;margin:clamp(48px,calc(48/14.4*1vw),76.8px) 0 clamp(12px,calc(12/14.4*1vw),19.2px)}
.legal p{margin:0 0 clamp(12px,calc(12/14.4*1vw),19.2px);line-height:1.7;color:var(--ink-800)}
.legal ul{margin:0 0 clamp(12px,calc(12/14.4*1vw),19.2px);padding-left:1.2em;line-height:1.7;color:var(--ink-800)}
.legal li{margin:0 0 clamp(4px,calc(4/14.4*1vw),6.4px)}
.legal ol{margin:0 0 clamp(12px,calc(12/14.4*1vw),19.2px);padding-left:1.4em;line-height:1.7;color:var(--ink-800)}
.legal ol li,.legal ul li{margin:0 0 clamp(4px,calc(4/14.4*1vw),6.4px)}
.legal .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 clamp(16px,calc(16/14.4*1vw),25.6px)} /* 모바일에서 표가 좁아지지 않고 가로 스크롤 */
.legal table{width:100%;border-collapse:collapse;font-size:clamp(15px,calc(15/14.4*1vw),24px);line-height:1.6;color:var(--ink-800)}
.legal th,.legal td{border:1px solid var(--hairline);padding:clamp(10px,calc(10/14.4*1vw),16px) clamp(14px,calc(14/14.4*1vw),22.4px);text-align:left;vertical-align:top}
.legal th{background:var(--parchment);font-weight:600;color:var(--ink);white-space:nowrap}
.legal td{overflow-wrap:anywhere}
.legal-effective{margin-top:clamp(48px,calc(48/14.4*1vw),76.8px);padding-top:clamp(20px,calc(20/14.4*1vw),32px);border-top:1px solid var(--hairline);color:var(--ink-500);font-size:clamp(14px,calc(14/14.4*1vw),22.4px)}
.footer--slim{gap:0}
.footer--slim .footer-bottom{border-top:0;padding-top:0}

/* ---------- 2.8 FAB (텍스트 알약만) ---------- */
.fab{
  position:fixed;right:clamp(24px,calc(24/14.4*1vw),38.4px);bottom:clamp(24px,calc(24/14.4*1vw),38.4px);z-index:50;display:inline-flex;align-items:center;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:9999px;padding:clamp(12px,calc(12/14.4*1vw),19.2px) clamp(20px,calc(20/14.4*1vw),32px);
  font-size:clamp(15px,calc(15/14.4*1vw),24px);font-weight:600;white-space:nowrap;
  visibility:hidden;opacity:0;transform:translateY(16px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
}
.fab.is-visible{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.fab:hover{text-decoration:none}

/* ---------- 3. 인터랙티브 호버 버튼 (.ib, 2026-09-19, 레퍼런스: 21st.dev "Interactive Hover Button" — 순수 CSS) ----------
   대상: 히어로 견적 문의(ghost)·서비스 MORE PORTFOLIO·CTA 알약·플로팅 포트폴리오. 크기·패딩·글자·둥글기는 각 버튼 규칙 그대로.
   hover/focus-visible(0.3s ease): 기본 글자(.ib-text)가 오른쪽 --ib-shift 만큼 밀리며 사라지고, 겹친 레이어(.ib-hover: 글자+SVG 화살표)가 오른쪽에서 들어온다.
   왼쪽 20% 의 점(.ib-dot)이 0/0 으로 이동하며 100%×100% + scale(1.8) 로 커져 알약을 채운다(overflow hidden). 점 색 = 채움 색(--ib-fill), hover 글자색 = --ib-hover-ink.
   --ib-shift 는 em(글자 14px 에서 12px)이라 버튼 크기에 비례. 점은 겹침 방지를 위해 평소 투명, hover 시작과 함께 나타난다.
   감소 모션(.no-motion / prefers-reduced-motion): 레이어·점 없이 배경·글자색만 바뀐다. hover 없는 터치 기기는 기본 상태 유지(hover 규칙은 @media (hover:hover) 안) */
.ib{overflow:hidden;--ib-fill:var(--accent);--ib-hover-ink:#fff;--ib-shift:.86em;--ib-gap:clamp(8px,calc(8/14.4*1vw),12.8px)}
.ib:hover{text-decoration:none}
.btn.ib,.svc-more.ib{position:relative} /* .fab(fixed)·.cta-btn(relative) 은 자기 규칙 유지 */
.ib-dot{
  position:absolute;left:20%;top:50%;z-index:0;width:clamp(8px,calc(8/14.4*1vw),12.8px);height:clamp(8px,calc(8/14.4*1vw),12.8px);
  margin-top:calc(clamp(8px,calc(8/14.4*1vw),12.8px) / -2);border-radius:9999px;background:var(--ib-fill);opacity:0;transform:scale(1);
  transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease,margin .3s ease,transform .3s ease,opacity .1s ease;pointer-events:none;
}
.ib-text{position:relative;z-index:1;display:inline-block;transition:transform .3s ease,opacity .3s ease}
.ib-hover{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--ib-gap);
  color:var(--ib-hover-ink);opacity:0;transform:translateX(var(--ib-shift));transition:transform .3s ease,opacity .3s ease;pointer-events:none;white-space:nowrap;
}
.ib-arrow{flex:none;width:1.2em;height:1.2em}
.ib:focus-visible .ib-dot{left:0;top:0;width:100%;height:100%;margin-top:0;opacity:1;transform:scale(1.8)}
.ib:focus-visible .ib-text{transform:translateX(var(--ib-shift));opacity:0}
.ib:focus-visible .ib-hover{transform:none;opacity:1}
@media (hover:hover){
  .ib:hover .ib-dot{left:0;top:0;width:100%;height:100%;margin-top:0;opacity:1;transform:scale(1.8)}
  .ib:hover .ib-text{transform:translateX(var(--ib-shift));opacity:0}
  .ib:hover .ib-hover{transform:none;opacity:1}
}
/* 색 규칙: 배경이 키컬러인 플로팅 버튼만 반전(흰 채움 + 키컬러 글자). 나머지(ghost·MORE PORTFOLIO·CTA 흰 알약)는 기본값(키컬러 채움 + 흰 글자) */
.fab.ib{--ib-fill:#fff;--ib-hover-ink:var(--accent)}
.cta-btn.ib{--ib-gap:clamp(20px,calc(20/14.4*1vw),32px)}
/* CTA 원 확장 뒤(배경 키컬러)에는 채워진 알약이 배경에 묻히므로 hover 중 바깥 흰 2px 링으로 윤곽을 유지 */
@media (hover:hover){.cta.is-open .cta-btn.ib:hover,html:not(.js-motion) .cta-btn.ib:hover{box-shadow:0 0 0 2px #fff}}
.cta.is-open .cta-btn.ib:focus-visible,html:not(.js-motion) .cta-btn.ib:focus-visible{box-shadow:0 0 0 2px #fff}
/* 감소 모션: 전이 없이 hover 색만 */
.no-motion .ib .ib-dot,.no-motion .ib .ib-hover{display:none}
.no-motion .ib .ib-text{transform:none !important;opacity:1 !important}
.no-motion .ib:hover,.no-motion .ib:focus-visible{background:var(--ib-fill);color:var(--ib-hover-ink)}
@media (prefers-reduced-motion:reduce){
  .ib .ib-dot,.ib .ib-hover{display:none}
  .ib .ib-text{transform:none !important;opacity:1 !important}
  .ib:hover,.ib:focus-visible{background:var(--ib-fill);color:var(--ib-hover-ink)}
}

/* ---------- 4. 라이트박스 ---------- */
/* 2026-09-22f: 이전/다음 이동(스와이프·버튼·키보드). 구조 = 닫기 버튼 + .lightbox-frame(iframe + 투명 스와이프 오버레이 .lb-swipe) + .lb-bar(이전 · 제목/카운터 · 다음).
   데스크톱: .lb-bar 는 display:contents — 버튼은 영상 양옆(세로 중앙), 제목·카운터는 영상 아래 여백 가운데. 모바일: .lb-bar 가 영상 바로 아래 한 줄(좌 버튼 · 제목/카운터 · 우 버튼) */
.lightbox{--lb-nav:clamp(44px,calc(44/14.4*1vw),70.4px);position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow:hidden;touch-action:pinch-zoom;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.lightbox[hidden]{display:none}
.lightbox-frame{position:relative;flex:none;background:#000;will-change:transform}
.lightbox-frame.is-h{width:min(90vw,calc(100vw - 2 * (var(--lb-nav) + 36px)),calc(85vh * 16 / 9));aspect-ratio:16/9} /* 양옆 버튼(24px 여백 + 버튼 + 12px 간격) 자리 확보 */
.lightbox-frame.is-v{width:min(calc(85vh * 9 / 16),calc(100vw - 48px));aspect-ratio:9/16}
.lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 재생이 시작된 뒤에만 켜지는 투명 오버레이: iframe 위 터치를 우리 페이지가 받기 위함. 하단 64px(Vimeo 컨트롤 바)는 비워 둔다 */
/* background 가 완전 투명이면 크롬이 그릴 것이 없는 요소로 보고 터치를 아래의 cross-origin iframe 으로 넘긴다(실측) → 눈에 안 보이는 1% 검정을 칠한다 */
.lb-swipe{position:absolute;left:0;right:0;top:0;bottom:64px;z-index:1;display:none;background:rgba(0,0,0,.01);touch-action:none;-webkit-tap-highlight-color:transparent}
.lb-swipe.is-on{display:block}
.lb-bar{display:contents}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);flex:none;width:var(--lb-nav);height:var(--lb-nav);border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.22);color:#fff;font-size:clamp(20px,calc(20/14.4*1vw),32px);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,opacity .2s ease}
.lb-nav:hover{background:rgba(255,255,255,.4)}
.lb-nav:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.22)}
.lb-prev{left:24px}
.lb-next{right:24px}
.lightbox.is-single .lb-nav{display:none}
.lb-cap{position:absolute;left:50%;bottom:max(4px,calc(3.75vh - .7em));transform:translateX(-50%);max-width:80vw;margin:0;display:flex;gap:.85em;align-items:baseline;white-space:nowrap;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);line-height:1.4;color:rgba(255,255,255,.8);pointer-events:none}
.lb-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lb-count{flex:none;font-variant-numeric:tabular-nums}
.lightbox-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lightbox-close:hover{background:rgba(255,255,255,.28)}
.lightbox-close svg{width:20px;height:20px}

/* ---------- 5. 모션 모드 ---------- */
@media (min-width:769px){
  .js-motion .hero-stage{position:sticky;top:0} /* .page 끝까지 고정, main(z 1)이 위를 덮음 */
  .js-motion .work{min-height:100vh;display:flex;flex-direction:column;justify-content:center} /* pin 되는 동안 뷰포트를 채움 */
  .js-motion .row{overflow:visible} /* 타일 흩어짐→모임 연출: 행 밖으로 나간 타일이 잘리지 않게(클리핑은 섹션 overflow hidden 이 담당) */
  /* pin 연장 구간: #services 가 pinned #work 위로 올라와 덮는다. #work(pin-spacer 안, position:fixed)는 z 0, 이후 섹션은 z 2.
     pin-spacer 는 #work 와 같은 parchment·상단 둥근 모서리로 두어 #work 가 scale .96 으로 물러날 때 가장자리 뒤가 검정(히어로)이 아닌 #work 색으로 보인다 */
  .js-motion .work{z-index:0;transform-origin:50% 50%}
  .js-motion .pin-spacer{background:var(--parchment);border-radius:var(--radius) var(--radius) 0 0}
  .js-motion .work ~ .section,.js-motion .pin-spacer ~ .section{z-index:2}
}
/* 1440px 에서 56px 캡에 걸리는 제목들: 그 위로는 다른 값과 같은 비율로 확대(89.6px 캡) */
@media (min-width:1441px){
  .services-head h2,.pricing h2,.faq h2{font-size:clamp(56px,calc(56/14.4*1vw),89.6px)}
}
/* Lenis 권장 기본 CSS (Lenis 가 <html> 에 .lenis / .lenis-smooth 를 붙임) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none !important;transition:none !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- 6. 반응형 ---------- */
@media (max-width:1100px) and (min-width:769px){
  .svc-name{font-size:4.2vw}
  .svc-arrow{font-size:22px}
  .services-body{gap:40px}
}

@media (max-width:768px){
  /* 라이트박스: 영상 아래 한 줄(이전 · 제목/카운터 · 다음). 닫기 버튼(위 60px)·점 인디케이터(20px)·하단 줄(60px)과 겹치지 않게 영상 높이를 제한 */
  .lightbox{--lb-nav:44px}
  .lightbox-frame.is-h{width:min(90vw,calc((100vh - 208px) * 16 / 9))}
  .lightbox-frame.is-v{width:min(calc((100vh - 208px) * 9 / 16),calc(100vw - 48px))}
  @supports (height:100dvh){
    .lightbox-frame.is-h{width:min(90vw,calc((100dvh - 208px) * 16 / 9))}
    .lightbox-frame.is-v{width:min(calc((100dvh - 208px) * 9 / 16),calc(100vw - 48px))}
  }
  .lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:420px;min-height:44px;margin-top:16px}
  .lb-nav{position:static;transform:none;font-size:20px}
  .lb-cap{position:static;transform:none;flex:1;min-width:0;max-width:none;flex-direction:column;align-items:center;gap:0;font-size:14px;text-align:center}
  .lb-title{max-width:100%}
  .br-m{display:inline}
  .br-d{display:none}
  /* 서비스 구역(2026-09-22): .svc-side 를 display:contents 로 풀어 캡션·미리보기·하단 정보를 .services-body 그리드의 직접 항목으로 만든다(마크업은 하나).
     순서: 제목 가로줄 → 캡션(order -1, 한 줄, 위아래 12px) → 목록 → 미리보기(목록과 12px) → 제목·MORE. 목록 3개 + 미리보기가 한 화면에 들어온다 */
  .svc-side{display:contents}
  .svc-side>.svc-caption{order:-1;align-self:auto;margin:0;padding:12px 0;text-align:left;font-size:clamp(11px,3.3vw,14px);white-space:nowrap;color:rgba(255,255,255,.8)}
  .svc-visual{margin-top:12px}
  .svc-below{margin-top:24px;align-self:stretch}
  .svc-expand{right:12px;bottom:12px;width:36px;height:36px}
  .svc-expand svg{width:20px;height:20px}
  .hero{height:auto;min-height:100svh}
  .hero-nav{padding:16px 24px;gap:16px}
  .wordmark{font-size:clamp(16px,5.2vw,20px)}
  .nav-links{display:none}
  .btn--ghost{margin-left:auto}
  .hero-body{padding:0 24px 40px}
  .hero h1{font-size:clamp(34px,10vw,60px)}
  .hero-copy{gap:10px}
  .hero-sub{font-size:clamp(11px,3.34vw,13px)} /* 2026-09-22: 한 줄 폭이 제목의 긴 줄보다 짧게(390px 에서 13px) */

  .work{display:flex;flex-direction:column;padding:0 0 8px}
  .statement{position:static;display:block;order:-1;background:none;padding:40px 24px;pointer-events:auto}
  .statement h2{font-size:clamp(16px,4.6vw,28px);padding:0;text-shadow:none} /* 2026-09-22: 첫 줄이 한 줄에 들어가는 크기 — <br> 기준 정확히 2줄(320px 포함) */
  .grid{opacity:1}
  .row-1,.row-2,.row-3{height:42vw}
  .row-track{justify-content:flex-start;gap:0;width:max-content}
  .tile{margin-right:8px}
  .js-motion .row-track{animation:dz-row 40s linear infinite}
  .js-motion .row-2 .row-track{animation-duration:52s;animation-direction:reverse}
  .js-motion .row-3 .row-track{animation-duration:46s}
  .row-track:active{animation-play-state:paused}
  .no-motion .row{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
  .no-motion .row::-webkit-scrollbar{display:none}
  .no-motion .tile{scroll-snap-align:start}

  .services{padding:80px var(--gutter) 0}
  .services-head{grid-template-columns:1fr;gap:24px;padding-bottom:16px}
  .services-head h2{font-size:clamp(32px,8vw,56px)}
  .services-head p{justify-self:start;text-align:left}
  .services-body{grid-template-columns:1fr;gap:0;margin-top:0}
  .svc{gap:12px;padding:16px 0}
  .svc-arrow{font-size:20px;margin-right:-12px}
  .svc-name{font-size:clamp(26px,7.6vw,72px)}
  .svc-nav{width:36px;height:36px;font-size:16px}
  .svc-prev{left:12px}
  .svc-next{right:12px}

  .pricing{padding:80px var(--gutter)}
  .pricing-head{flex-direction:column;align-items:flex-start;gap:24px}
  .pricing h2{font-size:clamp(22px,6.4vw,56px);white-space:nowrap} /* 2026-09-22: 줄바꿈 없이 한 줄 */
  .toggle{margin-left:0}
  /* 요금 카드 스와이프(2026-09-22): 카드 76vw, 가운데(.is-center, main.js updateDots 가 스크롤 위치로 판정) 카드만 제 크기·불투명, 양옆은 scale .92 + opacity .7 로 뒤(z 1)에 깔린다.
     음수 margin = 축소로 생기는 틈(76vw×.04) + 10px → 양옆 카드 가장자리가 가운데 카드 뒤로 10px 겹쳐 비친다. 좌우 padding 12vw 는 첫·끝 카드도 가운데에 설 수 있게 하는 여백.
     transform 은 CSS 가 갖고 GSAP 등장은 --dy·opacity 만 다룬다(데스크톱과 같은 방식). 전이는 등장이 끝난 뒤(.is-done)에만 걸어 GSAP 트윈과 겹치지 않게 한다 */
  .plans-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:0 12vw;margin:16px calc(-1 * var(--gutter)) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .plans-track::-webkit-scrollbar{display:none}
  .plan{--dy:0px;--sc:.92;position:relative;z-index:1;flex:0 0 76vw;scroll-snap-align:center;padding:24px;opacity:.7;transform:translateY(var(--dy)) scale(var(--sc))}
  .plan--featured{padding:23px}
  .plan + .plan{margin-left:calc(-3.04vw - 10px)}
  .plan.is-center{--sc:1;z-index:2;opacity:1}
  .plans.is-done .plan{transition:--sc .3s ease,opacity .3s ease}
  .plans{display:flex;flex-direction:column}
  .plans[hidden]{display:none}
  .plans-dots{display:flex;order:-1;margin:28px 0 0}
  /* 고객사 띠(2026-09-22): 로고 마키가 위 행(48px, flex order -1), 문장이 아래 행 중앙 정렬(키컬러 점은 문장 아래). 로고 높이는 --h 의 40%, 간격 32px.
     마키 트랙은 들여쓰기 0 — 첫 화면부터 로고가 좌우 끝까지 찬 상태로 흐른다(감소 모션도 좌측 여백 없음) */
  .clients{height:auto;margin:56px calc(-1 * var(--gutter)) 0;display:flex;flex-direction:column;font-size:12px}
  .clients-lead{position:static;height:auto;width:100%;flex-direction:column;justify-content:center;padding:12px 24px 20px;gap:10px;text-align:center}
  .clients-lead::after{display:none}
  .clients-copy{width:auto;white-space:normal;font-size:12px}
  .clients-dot{order:1} /* 키컬러 점은 문장 아래(간격 = lead gap 10px) */
  /* 2026-09-22g: 모바일은 CSS transform 애니메이션 대신 가로 스크롤 컨테이너 + JS rAF 의 scrollLeft 증가(main.js marqueeAuto).
     로고 35개×2벌의 긴 트랙을 transform 으로 통째로 옮기면 실기기 사파리에서 합성 레이어가 GPU 텍스처 한도를 넘어 일부 타일이 비는 증상이 있었다 → 스크롤 콘텐츠는 브라우저가 타일 단위로 그린다.
     손가락으로 직접 밀 수도 있다(스냅 없음, 터치 중에는 자동 흐름 정지) */
  .marquee{position:relative;inset:auto;height:48px;order:-1;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} /* 좌우 여백 0, 페이드 없음(데스크톱과 같은 원칙) */
  .marquee::-webkit-scrollbar{display:none}
  .marquee-group{gap:32px;padding-right:32px}
  .marquee-group img{height:calc(var(--h,48) * .4px)}
  .marquee-track,.js-motion .marquee-track{animation:none;transform:none;will-change:auto} /* 모바일: transform 애니메이션 없음(합성 레이어를 만들지 않는다) */
  .no-motion .marquee-track{padding-left:0}

  .faq{padding:80px 24px}
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .faq h2{font-size:clamp(32px,8vw,56px)}
  .faq-item{padding:0 20px;border-radius:28px}
  .faq-item summary{font-size:17px;padding:20px 0;min-height:0}
  .plus{font-size:24px}
  .faq-body p{padding-bottom:20px;font-size:15px}

  .cta{padding:96px 24px}
  .cta-circle{width:39px;height:39px}
  .cta h2{font-size:28px}
  .cta p{font-size:clamp(12px,3.8vw,15px)} /* 2026-09-22: 둘째 문장 첫 줄이 한 줄에 들어가는 크기(390px 에서 14.8px, 320px 에서 12.2px) */
  .cta-p1{display:none} /* 모바일은 둘째 문장만 */
  .cta-btn{font-size:clamp(20px,6vw,48px);padding:20px 32px;gap:12px;margin-top:24px}

  .legal-head{padding:16px 24px}
  .legal{padding:48px 24px 80px}
  .legal h1{font-size:28px}
  .legal h2{font-size:18px;margin-top:36px}
  .legal p,.legal ul{font-size:15px}
  .legal-back{display:inline-flex;align-items:center;min-height:44px}
  .legal table{font-size:14px;min-width:540px}
  .legal .table-wrap--kv table{min-width:0} /* 2열 표는 스크롤 없이 폭에 맞춤 */
  .legal th,.legal td{padding:10px 12px}
  .footer{padding:40px 24px 24px;gap:48px}
  .footer-top{flex-direction:column;gap:32px}
  .footer-nav{margin-left:0;margin-right:0;border-left:0;padding-left:0}
  .footer-nav a{display:flex;align-items:center;min-height:44px}
  .news-form input{font-size:16px} /* iOS 자동 확대 방지 */
  .news-form button{width:44px;height:44px}
  .footer-social a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px}
  .footer-legal a{display:inline-flex;align-items:center;min-height:44px}
  .footer-mark{font-size:clamp(24px,11vw,160px)}
  .footer-bottom{gap:12px}
  .footer-legal{margin-left:0}

  .fab{right:16px;bottom:16px;font-size:14px}

  /* 터치 타깃 최소 44px (§8b) */
  .btn--ghost,.toggle button,.plan .btn{min-height:44px}
  .svc-meta{align-items:center}
  .svc-meta a{display:inline-flex;align-items:center;min-height:44px}
}
@keyframes dz-row{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:480px){
  .hero-nav{padding:16px 20px;gap:8px}
  /* 좁은 폭에서 구분자 "|" 가 줄 끝에 홀로 남지 않도록 항목 안(::before)으로 옮긴다 */
  .footer-legal .sep{display:none}
  .footer-legal > * + *::before{content:"|";color:#3a3a40;margin-right:16px}
  .plan-price{font-size:clamp(26px,9.5vw,34px)}
  .hero-body{padding:0 20px 32px}
  .hero-tag{white-space:normal}
  .statement{padding:32px 20px}
  .cta-btn{padding:18px 28px}
}


/* ---------- 어두운 배경 위 강조 텍스트 (2026-09-18, 대비 조정) ---------- */
.hero .accent,.nav-links a.is-current,.svc-arrow,.svc-meta,.svc-meta a{color:var(--accent-dark)}

/* 히어로 nav 가독성(2026-09-21): 밝은 영상 위에서 흰 글자가 묻히지 않게 약한 그림자 */
.hero .btn--ghost .ib-text{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero .btn--ghost{box-shadow:inset 0 0 0 1px #fff,0 1px 12px rgba(0,0,0,.18)}

/* 히어로 메뉴 hover(2026-09-21): 밑줄 대신 살짝 떠오르는 팝업 */
.nav-links a{display:inline-block;transition:transform .2s ease}
.nav-links a:hover,.nav-links a:focus-visible{text-decoration:none;transform:translateY(-2px) scale(1.08)}
.no-motion .nav-links a{transition:none}
@media (prefers-reduced-motion:reduce){.nav-links a{transition:none}}

/* 비용 헤더 안내문·부가세 안내 우측(2026-09-22) */
.pricing-sub{margin:clamp(8px,calc(8/14.4*1vw),12.8px) 0 0;font-size:clamp(14px,calc(14/14.4*1vw),22.4px);color:var(--ink-500)}
.plans-note--right{text-align:right}
@media (max-width:768px){.pricing-sub{margin-top:6px;font-size:13px}.plans-note--right{text-align:right}}

/* 요금 카드 버튼 통일(2026-09-22): 카드 하단 중앙, 같은 크기로 정렬 */
.plan{display:flex;flex-direction:column}
.plan ul{flex:1 1 auto}
.plan .btn.btn--utility,.plan .btn.btn--primary{align-self:center;width:clamp(160px,calc(160/14.4*1vw),256px);max-width:100%;padding-left:0;padding-right:0;font-size:clamp(15px,calc(15/14.4*1vw),24px);min-height:clamp(44px,calc(44/14.4*1vw),70.4px);justify-content:center;margin-top:clamp(24px,calc(24/14.4*1vw),38.4px)}
@media (max-width:768px){.plan .btn.btn--utility,.plan .btn.btn--primary{width:160px;min-height:44px;margin-top:20px}}