/* ===== OCUBE v2 — Notion warm-minimal light × i-bricks natural scroll ===== */
:root{
  --canvas:#ffffff; --soft:#f6f5f4; --soft-2:#efeee9;
  --fg:#141414; --fg-muted:#615d59;
  /* Notion 원본 tertiary(#9a9aa1)는 흰 배경에서 2.8:1 로 AA 미달 → 웜 계열 유지하며 darkening(5.4:1) */
  --fg-3:#6e6a66;
  --border:#e6e6e6; --line-soft:#eeece7;
  --accent:#0075de; --accent-ink:#0a4fa0;
  /* 채움용 --accent 는 작은 글자에서 4.19:1(AA 미달) → 텍스트 전용 진한 블루 6.3:1 */
  --accent-text:#0a5cbf; --accent-soft:rgba(0,117,222,.09);
  --ink:#0e1626; --ink-2:#131e33;
  --r:16px; --r-sm:10px; --pill:9999px;
  --sh-sm:0 2px 10px rgba(20,20,20,.05);
  --sh:0 10px 30px rgba(20,20,20,.08);
  --sh-lg:0 20px 48px rgba(20,20,20,.14);
  --wrap:1200px;
  --pad:clamp(64px,8.5vw,132px);
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  --fz-display:clamp(33px,5vw,64px);
  --fz-h2:clamp(27px,3.3vw,44px);
  --fz-lead:clamp(16px,1.5vw,19px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--canvas);color:var(--fg);line-height:1.62;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* ---- section rhythm ---- */
.sec{padding:var(--pad) 0}
.sec.soft{background:var(--soft)}
.sec.dark{background:var(--ink);color:#eef1f6}
.sec-head{max-width:760px}
.sec-head.center{margin:0 auto;text-align:center}
.kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
/* 어두운 배경 계열(.dark/.platform/.cta/.cta-band/.hero)은 kicker 를 밝은 블루로 */
.dark .kicker,.platform .kicker,.cta .kicker,.cta-band .kicker,.hero .kicker{color:#79b3f2}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.022em;line-height:1.16;color:var(--fg)}
.dark h1,.dark h2,.dark h3{color:#fff}
h2{font-size:var(--fz-h2);margin-top:14px}
.lead{font-size:var(--fz-lead);color:var(--fg-muted);margin-top:16px;line-height:1.66}
.dark .lead{color:#aeb8c8}
.center .lead{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:var(--pill);padding:13px 26px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg);background:var(--soft)}
/* .hero 는 .dark 클래스가 없어도 항상 어두운 배경 → 고스트 버튼 다크 변형 필수 */
.dark .btn-ghost,.hero .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.dark .btn-ghost:hover,.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.txtlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent-text)}
.txtlink:hover{gap:10px}

/* ---- reveal ---- */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}

/* ---- GNB : 히어로 위 투명 오버레이 → 스크롤 시 라이트 솔리드 (i-bricks 패턴) ---- */
.gnb{position:fixed;top:0;left:0;right:0;z-index:120;background:transparent;border-bottom:1px solid transparent;transition:background .28s,border-color .28s}
.gnb.scrolled,body.m-lock .gnb{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line-soft)}
.gnb .nav{display:flex;align-items:center;gap:20px;height:72px}
.logo img{height:25px;width:auto;filter:brightness(0) invert(1);transition:filter .28s}   /* 투명 상태: 흰 로고 */
.gnb.scrolled .logo img,body.m-lock .gnb .logo img{filter:none}
.nav-menu{display:flex;gap:2px;margin-left:8px}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:6px;padding:10px 15px;font-weight:600;font-size:15.5px;color:#fff;border-radius:10px;transition:background .15s,color .28s}
.nav-item>a:hover{background:rgba(255,255,255,.14)}
.gnb.scrolled .nav-item>a,body.m-lock .gnb .nav-item>a{color:var(--fg)}
.gnb.scrolled .nav-item>a:hover,body.m-lock .gnb .nav-item>a:hover{background:var(--soft)}
.badge-caret{font-size:10px;color:rgba(255,255,255,.65);transition:color .28s}
.gnb.scrolled .badge-caret,body.m-lock .gnb .badge-caret{color:var(--fg-3)}
/* 히어로 없는 페이지: 항상 솔리드 + 본문 오프셋 */
body.no-hero{padding-top:72px}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);padding:12px;display:flex;gap:8px;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dd-group{display:flex;flex-direction:column;min-width:230px}
.dd-h{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--fg-3);padding:8px 12px 6px}
.dropdown a{padding:9px 12px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--fg);display:flex;flex-direction:column;transition:background .14s,color .14s}
.dropdown a small{font-weight:500;font-size:12.5px;color:var(--fg-3);margin-top:2px}
.dropdown a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.dropdown a:hover small{color:var(--accent-ink)}
.cta-btn{margin-left:auto;background:var(--accent);color:#fff;font-weight:700;padding:11px 22px;border-radius:var(--pill);font-size:15px;transition:background .2s}
.cta-btn:hover{background:var(--accent-ink)}
.m-toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:10px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer;transition:color .28s,border-color .28s}
.gnb.scrolled .m-toggle,body.m-lock .gnb .m-toggle{border-color:var(--border);color:var(--fg)}
.m-panel{display:none}   /* 모바일 전용 패널 — 데스크톱에서는 항상 숨김(미디어쿼리 안에서만 열림) */

/* ---- hero (dark, 4-video banner) ---- */
/* 투명 오버레이 헤더(72px)와 충돌 방지 — 낮은 뷰포트(노트북 실제 창 높이 650~800px)에서도
   콘텐츠가 절대 헤더 위로 올라가지 않도록 상단 여백을 고정 예약(수학적 완전 중앙정렬 대신) */
:root{--hero-pad-t:clamp(126px,16vh,168px);--hero-pad-b:clamp(72px,9vh,100px)}
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;background:var(--ink);overflow:hidden;color:#fff;padding:var(--hero-pad-t) 0 var(--hero-pad-b)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hslides{position:absolute;inset:0}
/* position:absolute 요소는 부모의 padding을 무시하고 그 안까지 덮으므로(배경 자체는 원하는 동작),
   텍스트를 담는 .hslide에는 같은 여백을 직접 지정해 헤더와의 충돌을 동일하게 방지 */
.hslide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background-size:cover;background-position:center;
  display:flex;align-items:center;box-sizing:border-box;padding:var(--hero-pad-t) 0 var(--hero-pad-b)}
.hslide.on{opacity:1;z-index:1}
.hslide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hveil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,22,.85),rgba(8,12,22,.45) 60%,rgba(8,12,22,.3))}
.hero .wrap{position:relative;z-index:3;width:100%}
.h-badge{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;color:#8fc0ff}
/* max-width 1060 — 4개 배너 헤드라인이 모두 정확히 2줄로 떨어지게(=CTA 세로 위치 고정, .hero-ctrl 겹침 방지) */
.h-title{font-size:var(--fz-display);font-weight:800;line-height:1.13;letter-spacing:-.03em;max-width:1060px;margin-top:16px;color:#fff}
.h-sub{margin-top:20px;font-size:clamp(16px,1.6vw,19px);color:#c3ccdc;max-width:600px;line-height:1.6}
.h-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hslide .h-badge,.hslide .h-title,.hslide .h-sub,.hslide .h-cta{opacity:0}
.hslide.on .h-badge,.hslide.on .h-title,.hslide.on .h-sub,.hslide.on .h-cta{animation:hup .7s cubic-bezier(.22,.61,.36,1) both}
.hslide.on .h-title{animation-delay:.1s}.hslide.on .h-sub{animation-delay:.2s}.hslide.on .h-cta{animation-delay:.3s}
@keyframes hup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 히어로 컨트롤 — 좌측 정렬(콘텐츠 기준선) : [라인 인디케이터] + [이전·일시정지·다음]
   geosoft 패턴(top:calc(50%+90px)) 참고 — 뷰포트 최하단 고정 대신 카피 블록(세로 중앙 기준) 상대 위치로
   실측(4슬라이드×6개 뷰포트높이): CTA 하단이 항상 '50% + 225px'에 위치 → 그 아래 24px 여백으로 겹침 없이 근접 배치 */
.hero-ctrl{position:absolute;left:0;right:0;top:calc(50% + 249px);z-index:5}
.hctrl-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hbar-nav{display:flex}
.hbar{flex:0 0 62px;background:none;border:none;padding:12px 0;cursor:pointer}
.hbar i{display:block;height:2px;background:rgba(255,255,255,.32);position:relative;overflow:hidden}
.hbar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#fff}
.hbar.on i::after{animation:hfill 5200ms linear forwards}
.hero.paused .hbar.on i::after{animation-play-state:paused}
.hctrl{display:flex;align-items:center;gap:4px}
.hnav{width:36px;height:36px;display:grid;place-items:center;background:none;border:none;border-radius:50%;color:#fff;opacity:.78;cursor:pointer;transition:opacity .18s,background .18s,transform .14s}
.hnav:hover{opacity:1;background:rgba(255,255,255,.14)}
.hnav:active{transform:scale(.93)}
.hnav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hnav svg{width:22px;height:22px;display:block}
.hnav[data-act="toggle"] .i-play{display:none}
.hero.paused .hnav[data-act="toggle"] .i-pause{display:none}
.hero.paused .hnav[data-act="toggle"] .i-play{display:block}
@media(max-width:900px){.hero-ctrl{top:auto;bottom:24px}.hbar{flex-basis:42px}.hctrl-row{gap:14px}
  .hnav{width:44px;height:44px}             /* 터치 타깃 44px (WCAG 2.5.5) */
  .hnav[data-act="toggle"]{display:none}}   /* 모바일은 자동전환 자체가 없어 일시정지 불필요 */
@keyframes hfill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.hbar.on i::after{animation:none;width:100%}.hslide.on *{animation:none!important;opacity:1}}

/* ---- CI (big typo) ---- */
.ci{text-align:center}
.ci-mark{height:52px;width:auto;margin:0 auto 22px}
.ci-big{font-size:clamp(44px,8vw,104px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.ci-big em{font-style:normal;color:var(--accent-text)}
.ci-copy{max-width:660px;margin:26px auto 0;font-size:var(--fz-lead);color:var(--fg-muted);line-height:1.7}
.ci-copy b{color:var(--fg);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:900px;margin:44px auto 0}
.stat{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r);padding:22px 18px;text-align:center;box-shadow:var(--sh-sm)}
.stat b{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--fg)}
.stat b .u{font-size:.55em;font-weight:700;color:var(--fg-muted);margin-left:2px}
.stat span{display:block;margin-top:6px;font-size:13px;color:var(--fg-3);font-weight:500}

/* ---- business cards (3역량) ---- */
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.biz-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r);padding:30px 28px 26px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;min-height:270px;overflow:hidden}
.biz-preview{margin:-30px -28px 20px;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.biz-preview img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.biz-card:hover .biz-preview img{transform:scale(1.05)}
.biz-top{display:flex;align-items:center;gap:9px;margin-top:2px}
.biz-badge{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:12px}
.biz-cat{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--accent-text);text-transform:uppercase}
.biz-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#d3d3d3}
.biz-no{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--accent-text)}
.biz-card h3{font-size:23px;font-weight:800;margin-top:14px;letter-spacing:-.02em}
.biz-card p{margin-top:12px;color:var(--fg-muted);font-size:15px;line-height:1.6;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chip{font-size:12.5px;font-weight:600;color:var(--fg-muted);background:var(--soft);border:1px solid var(--line-soft);border-radius:var(--pill);padding:5px 12px}
.biz-card .txtlink{margin-top:18px}

/* ---- reference (cases) ---- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.case-card{background:var(--soft);border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 24px;transition:transform .2s,box-shadow .2s}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.case-dom{font-size:12.5px;font-weight:700;color:var(--accent-text)}
.case-card h3{font-size:19px;font-weight:800;margin-top:10px;letter-spacing:-.02em}
.case-card p{margin-top:12px;font-size:14px;color:var(--fg-muted);line-height:1.6}
.case-card p b{color:var(--fg);font-weight:700}

/* ---- contact (dark cta) ---- */
.cta{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
/* 회전 배지 — i-bricks CONTACT 스타일: 원형 텍스트 링 회전 + 중앙 고정 액센트 버튼 */
.cta-badge{position:absolute;right:clamp(20px,5vw,64px);top:50%;transform:translateY(-50%);width:150px;height:150px}
.cta-badge-ring{width:100%;height:100%;display:block;animation:cta-spin 14s linear infinite}
.cta-badge-ring text{fill:#fff;fill-opacity:.8}
.cta-badge-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.cta-badge-core:hover,.cta-badge-core:focus-visible{background:var(--accent-ink);transform:translate(-50%,-50%) scale(1.05)}
@keyframes cta-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cta-badge-ring{animation:none}}
@media(max-width:1100px){.cta-badge{display:none}}
.cta h2{color:#fff}
.cta .lead{color:#aeb8c8;margin-left:auto;margin-right:auto}
.cta .btn{margin-top:28px}

/* ---- footer ---- */
footer{background:var(--soft);border-top:1px solid var(--line-soft);padding:56px 0 34px;font-size:14px;color:var(--fg-muted)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.f-logo{height:22px;margin-bottom:14px;opacity:.85}
.f-h{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--fg-3);margin-bottom:12px;text-transform:uppercase}
.f-grid a{display:block;color:var(--fg-muted);padding:4px 0;font-weight:500}
.f-grid a:hover{color:var(--accent-text)}
.f-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--fg-3)}

/* ===== 공통 테마 확장 — 기존 클래스 어휘를 라이트 테마로 매핑 ===== */
/* 섹션 */
.sec-anchor{padding:var(--pad) 0}
/* 앵커 점프가 스티키 헤더(72px) 아래로 가려지지 않도록 */
.sec,.sec-anchor,.pinsec,.cta-band,section[id],[id].pinsec,.duo[id],.case-domain[id]{scroll-margin-top:88px}
.deploy{background:var(--soft)}
.platform{background:var(--ink);color:#eef1f6}
.platform h2,.platform h3{color:#fff}
.sec-sub{font-size:var(--fz-lead);color:var(--fg-muted);margin-top:16px;line-height:1.66;max-width:680px}
.platform .sec-sub,.dark .sec-sub{color:#aeb8c8}
.sec-note{margin-top:18px;font-size:13.5px;color:var(--fg-3);line-height:1.6}
.dark .sec-note,.platform .sec-note{color:#9aa6ba}
.subnav{display:none}

/* 리빌(레거시 .reveal 별칭) */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none}}

/* 버튼(단독 사용 지원) */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:var(--pill);padding:13px 26px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.btn-primary:active,.btn-ghost:active{transform:scale(.98)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent-text);transition:gap .18s}
.more:hover{gap:11px}

/* 서브 페이지 히어로(다크) */
.hero.page-hero{min-height:100vh;min-height:100dvh}
.page-hero .hero-shot{margin:44px auto 0;max-width:900px}
.page-hero .hero-shot img{max-height:34vh;width:auto;margin:0 auto}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,22,.87),rgba(8,12,22,.52))}
.hero-badge{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;color:#8fc0ff}
.page-hero h1{font-size:clamp(29px,4.2vw,52px);color:#fff;margin-top:14px;letter-spacing:-.028em;line-height:1.15}
.page-hero p{margin-top:18px;color:#c3ccdc;font-size:clamp(15.5px,1.5vw,18px);max-width:680px;line-height:1.6}

/* 파트너 가로 슬라이드 */
.pmark{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pmark-track{display:flex;gap:14px;width:max-content;animation:pflow 28s linear infinite}
.pmark:hover .pmark-track{animation-play-state:paused}
.pchip{flex:none;font-weight:800;font-size:16.5px;color:var(--fg-muted);padding:12px 26px;border:1px solid var(--border);border-radius:var(--pill);background:var(--canvas)}
@keyframes pflow{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pmark-track{animation:none}}

/* What We Do 핀드(좌고정 + 우 6단계) */
.pinsec{padding:var(--pad) 0}
.pinsec+.pinsec{padding-top:0}
.pinsec>.wrap{display:grid;grid-template-columns:minmax(250px,35%) 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.pin-left{position:sticky;top:104px}
.pin-num{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.pin-left h2{font-size:clamp(24px,2.8vw,36px);margin-top:12px}
.pin-left h2 em{font-style:normal;color:var(--accent-text)}
.pin-left p{margin-top:14px;color:var(--fg-muted);font-size:15.5px;line-height:1.66}
.pin-left p b{color:var(--fg);font-weight:700}
.pin-progress{display:flex;gap:6px;margin-top:26px}
.pin-progress i{width:24px;height:3px;border-radius:3px;background:var(--border);transition:background .3s}
.pin-progress i.on{background:var(--accent)}
.pin-right{display:flex;flex-direction:column;gap:clamp(30px,4vw,54px)}
.pin-right{counter-reset:pinno}
.pin-item{max-width:660px;position:relative;counter-increment:pinno}
/* theimc식 대형 반투명 배경 숫자 — 마크업 변경 없이 CSS 카운터로 자동 채번 */
.pin-item::before{content:counter(pinno,decimal-leading-zero);position:absolute;top:-6px;right:0;font-size:56px;font-weight:800;color:var(--fg);opacity:.08;line-height:1;pointer-events:none;letter-spacing:-.02em;z-index:2}
/* 일러스트(다크 타일)가 있는 항목은 숫자가 그 위에 얹히므로 밝은 색으로 — 안 그러면 묻혀서 안 보임 */
.pin-item:has(.pin-illust)::before{color:#fff;opacity:.34;top:14px;right:18px}
.dark .pin-item::before,.platform .pin-item::before{color:#fff;opacity:.1}
@media(max-width:900px){.pin-item::before{font-size:44px}}
.pin-illust{height:172px;border-radius:14px;background:linear-gradient(160deg,#0e1626,#16203a);display:flex;align-items:center;justify-content:center;padding:10px 20px;overflow:hidden;margin-bottom:18px}
.pin-illust svg{width:100%;height:100%;display:block}
.pin-illust img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.pi-no{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--accent-text)}
.pin-item h3{font-size:clamp(19px,2vw,23px);margin-top:8px}
.pin-item p{margin-top:10px;color:var(--fg-muted);font-size:15px;line-height:1.65}
/* 단계별 세부 불릿 — 제목 아래 구체 기술·표준 서술 */
.pi-bul{margin-top:12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.pi-bul li{position:relative;padding-left:16px;color:var(--fg-muted);font-size:14.5px;line-height:1.62}
.pi-bul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55}
.pi-bul li b{color:var(--fg);font-weight:700}
.dark .pi-bul li,.platform .pi-bul li{color:#aeb8c8}
.dark .pi-bul li b,.platform .pi-bul li b{color:#fff}

/* 적용분야/카드 그리드 */
.dep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px;margin-top:40px}
/* g2 = 서술형 카드(불릿·긴 문장)용 2열 — auto-fit로 좁게 쪼개지면 가독성이 떨어지는 경우 */
.dep-grid.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.dep-grid.g2{grid-template-columns:1fr}}
.dep-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px;transition:transform .2s,box-shadow .2s}
.dep-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.dep-card .ic{font-size:26px;line-height:1}
.dep-card h3{font-size:19px;margin-top:12px}
.dep-card p{margin-top:10px;font-size:14.5px;color:var(--fg-muted);line-height:1.6}

/* 케이스 카드(레거시 .dom/.csi) */
.case-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.case-card .dom{display:block;font-size:12.5px;font-weight:700;color:var(--accent-text)}
.case-card .csi{margin-top:9px;font-size:14px;color:var(--fg-muted);line-height:1.6}
.case-card .csi b{color:var(--fg);font-weight:700;margin-right:4px}
.case-card em{font-style:normal;color:var(--fg-3)}

/* .dark 모디파이어가 붙은 섹션은 반드시 다크 배경도 함께(흰 글자가 흰 배경에 얹히는 결함 방지) */
.sec-anchor.dark,.sec.dark,section.dark{background:var(--ink);color:#eef1f6}

/* 다크 CTA 밴드 */
.cta-band{background:var(--ink);color:#fff;text-align:center;padding:var(--pad) 0}
.cta-band h2{color:#fff}
.cta-band p{color:#aeb8c8;margin-top:16px;font-size:var(--fz-lead);max-width:640px;margin-left:auto;margin-right:auto}
.cta-band .btn-primary,.cta-band .btn{margin-top:26px}
.cta-logo{height:38px;width:auto;margin:0 auto 18px;opacity:.92}

@media(max-width:900px){
  .pinsec>.wrap{grid-template-columns:1fr}
  .pin-left{position:static}
  .pin-illust{height:150px}
}

/* ===== SOLUTION 컴포넌트 라이브러리 (라이트 + 다크 섹션 변형) ===== */
/* 공통: 다크 섹션 스코프 */
.dark, .platform { --c-surface: rgba(255,255,255,.06); --c-line: rgba(255,255,255,.14); --c-t1:#fff; --c-t2:#aeb8c8; }
.sec-anchor:not(.dark):not(.platform), .sec:not(.dark) { --c-surface: var(--canvas); --c-line: var(--border); --c-t1: var(--fg); --c-t2: var(--fg-muted); }

/* 기능 리스트 */
.feat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin-top:24px}
.feat{background:var(--soft);border:1px solid var(--line-soft);border-radius:12px;padding:17px 18px}
.feat b{display:block;font-size:15.5px;font-weight:800;color:var(--fg)}
.feat span{display:block;margin-top:7px;font-size:14px;color:var(--fg-muted);line-height:1.6}
.dark .feat,.platform .feat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.dark .feat b,.platform .feat b{color:#fff}
.dark .feat span,.platform .feat span{color:#aeb8c8}

/* 프로토콜·모듈 칩 */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin-top:22px}
.mod-grid-wide{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}
.mod{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:14.5px;color:var(--fg);background:var(--canvas);border:1px solid var(--border);border-radius:12px;padding:13px 10px}
.dark .mod,.platform .mod{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.17);color:#fff}

/* 라벨 pill */
.pill{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--pill);background:var(--accent-soft);color:var(--accent-ink);border:1px solid rgba(0,117,222,.2);vertical-align:middle}
.pill.light{background:var(--soft);color:var(--fg-muted);border-color:var(--border)}
.dark .pill,.platform .pill{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22)}

/* 3층 스택 다이어그램 */
.stack-diagram{display:flex;flex-direction:column;margin-top:26px;max-width:840px}
.stack-layer{display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--canvas);border:1px solid var(--border);border-radius:14px;padding:16px 20px}
.stack-layer b{font-size:19px;font-weight:800;color:var(--fg)}
.stack-layer small{display:block;margin-top:6px;font-size:13px;color:var(--fg-muted);line-height:1.5}
.stack-tag{display:block;font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text);margin-bottom:7px}
.stack-layer.l-op{background:var(--accent);border-color:var(--accent)}
.stack-layer.l-op b,.stack-layer.l-op .stack-tag{color:#fff}
.stack-layer.l-op small{color:#fff}
.stack-layer.l-data{background:var(--soft)}
.stack-arrow{text-align:center;color:var(--fg-3);font-size:14px;padding:5px 0}
.stack-prods{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stack-prods span{display:flex;flex-direction:column;align-items:center;font-weight:800;font-size:15.5px;color:var(--fg);background:var(--soft);border:1px solid var(--border);border-radius:11px;padding:9px 16px}
.stack-prods span small{margin-top:2px;font-size:11.5px;font-weight:600;color:var(--fg-muted)}
.dark .stack-layer,.platform .stack-layer{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.dark .stack-layer b,.platform .stack-layer b{color:#fff}
.dark .stack-layer small,.platform .stack-layer small{color:#aeb8c8}
.dark .stack-layer.l-op,.platform .stack-layer.l-op{background:var(--accent);border-color:var(--accent)}
.dark .stack-prods span,.platform .stack-prods span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.dark .stack-prods span small,.platform .stack-prods span small{color:#aeb8c8}

/* 타임라인 / 프로세스 */
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-top:26px}
.tl-card{background:var(--canvas);border:1px solid var(--border);border-radius:14px;padding:20px 18px}
.tl-card .yr{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--accent-text)}
.tl-card h3{font-size:17px;margin-top:9px}
.tl-card p{margin-top:8px;font-size:14px;color:var(--fg-muted);line-height:1.58}
.tl-card.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dark .tl-card,.platform .tl-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.dark .tl-card h3,.platform .tl-card h3{color:#fff}
.dark .tl-card p,.platform .tl-card p{color:#aeb8c8}

/* 스크린샷 */
.shot{width:100%;border-radius:14px;border:1px solid var(--border);box-shadow:var(--sh);display:block}
.shot.fit{max-height:40vh;width:auto;margin:0 auto;object-fit:contain}
.shot-fig{margin-top:26px}
.shot-cap{margin-top:10px;font-size:13px;color:var(--fg-3);text-align:center}
.dark .shot-cap,.platform .shot-cap{color:#8e9aae}
.media-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px}

/* 비교표 */
.cmp-scroll{overflow-x:auto;margin-top:24px}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--canvas);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:24px}
.cmp-scroll .cmp{margin-top:0}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cmp thead th{background:var(--soft);font-weight:800;font-size:13.5px;color:var(--fg)}
.cmp tbody th{font-weight:700;color:var(--fg);width:26%}
.cmp td{color:var(--fg-muted)}
.cmp .ok{color:var(--accent-ink);font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* 모듈 카드(Cubeon 8모듈 등) */
.kmod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-top:24px}
.kmod{background:var(--canvas);border:1px solid var(--border);border-radius:14px;padding:18px;position:relative}
.kmod h4{font-size:16px;font-weight:800}
.kmod p{margin-top:7px;font-size:13.5px;color:var(--fg-muted);line-height:1.55}
.dark .kmod,.platform .kmod{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.dark .kmod h4,.platform .kmod h4{color:#fff}
.dark .kmod p,.platform .kmod p{color:#aeb8c8}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:30px}
.faq-item{background:var(--canvas);border:1px solid var(--border);border-radius:14px;padding:22px 20px}
.faq-q{font-size:16px;font-weight:800;color:var(--fg)}
.faq-a{margin-top:10px;font-size:14.5px;color:var(--fg-muted);line-height:1.62}

/* Cubeon 플래그십 히어로 + 자율화 사다리 */
.cubeon-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;align-items:center;margin-top:28px}
.cubeon-hero h3{font-size:clamp(20px,2.3vw,27px)}
.cubeon-hero h3 span{color:var(--accent-text)}
.dark .cubeon-hero h3 span,.platform .cubeon-hero h3 span{color:#79b3f2}
.cubeon-hero p{margin-top:12px;color:var(--fg-muted);font-size:15.5px;line-height:1.65}
.dark .cubeon-hero p,.platform .cubeon-hero p{color:#aeb8c8}
.ladder{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.rung{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:12px;padding:12px 16px;background:var(--soft);border:1px solid var(--line-soft)}
.rung b{font-size:14.5px;font-weight:800;min-width:108px;color:var(--fg)}
.rung span{font-size:13.5px;color:var(--fg-muted)}
.rung.l2{background:var(--accent-soft);border-color:rgba(0,117,222,.2)}
.rung.l3{background:var(--accent);border-color:var(--accent)}
.rung.l3 b{color:#fff}.rung.l3 span{color:#fff}
.dark .rung,.platform .rung{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.dark .rung b,.platform .rung b{color:#fff}
.dark .rung span,.platform .rung span{color:#aeb8c8}
.dark .rung.l3,.platform .rung.l3{background:var(--accent);border-color:var(--accent)}
.dark .rung.l3 b,.platform .rung.l3 b,.dark .rung.l3 span,.platform .rung.l3 span{color:#fff}

/* 제품 카드 */
.prod-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px;margin-top:24px}
.prod-card{background:var(--canvas);border:1px solid var(--border);border-radius:14px;padding:20px 18px}
.prod-card h4{font-size:16.5px;font-weight:800}
.prod-card .sub{display:block;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--accent-text)}
.prod-card p{margin-top:9px;font-size:13.5px;color:var(--fg-muted);line-height:1.55}
.dark .prod-card,.platform .prod-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.dark .prod-card h4,.platform .prod-card h4{color:#fff}
.dark .prod-card p,.platform .prod-card p{color:#aeb8c8}
.dark .prod-card .sub,.platform .prod-card .sub{color:#79b3f2}

/* 강조 밴드(기술지원 — 구 .oem-band) */
.oem-band{background:var(--accent-soft);border:1px solid rgba(0,117,222,.2);border-left:4px solid var(--accent);border-radius:12px;padding:20px 22px}
.oem-band>b{display:block;font-size:16px;font-weight:800;color:var(--fg)}
.oem-band .row{margin-top:8px;font-size:14.5px;color:var(--fg-muted);line-height:1.65}
.oem-band .row b{color:var(--fg);font-weight:700}
.dark .oem-band,.platform .oem-band{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);border-left-color:var(--accent)}
.dark .oem-band>b,.platform .oem-band>b{color:#fff}
.dark .oem-band .row,.platform .oem-band .row{color:#aeb8c8}

/* ---- Key Technologies : 블루 풀블리드 강조 섹션 (i-bricks teana 패턴) ---- */
.keytech{background:var(--accent);color:#fff;padding:clamp(64px,8vw,110px) 0;overflow:hidden}
.keytech .kt-head{text-align:center}
/* 블루(#0075de) 위 흰 텍스트 = 4.64:1 (AA 통과). 반투명으로 낮추면 미달하므로 불투명 흰색 고정 */
.keytech .kicker{color:#fff}
.keytech h2{color:#fff;margin-top:10px}
.kt-lead{margin:16px auto 0;max-width:760px;color:#fff;font-size:clamp(15px,1.5vw,17.5px);line-height:1.7}
/* 카드 레일 — 좌우 스크롤(스냅), 페이지 가로 스크롤은 유발하지 않음 */
.kt-scroll{margin-top:clamp(30px,4vw,52px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.kt-scroll::-webkit-scrollbar{height:6px}
.kt-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:99px}
.kt-cards{display:flex;gap:20px;width:max-content;padding:0 max(24px,calc((100vw - var(--wrap))/2))}
.kt-card{flex:0 0 340px;scroll-snap-align:center;background:#fff;color:var(--fg);border-radius:16px;padding:26px 25px 28px;box-shadow:0 10px 30px rgba(0,0,0,.10);display:flex;flex-direction:column}
.kt-ic{width:64px;height:64px;margin-bottom:18px}
.kt-ic svg{width:100%;height:100%;display:block}
.kt-card h3{font-size:19px;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.kt-card > p{margin-top:10px;color:var(--fg-muted);font-size:14.5px;line-height:1.66}
.kt-chk{margin-top:16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.kt-chk li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.55;color:var(--fg)}
.kt-chk li::before{content:"";position:absolute;left:0;top:.05em;width:21px;height:21px;border-radius:50%;background:var(--accent)}
.kt-chk li::after{content:"";position:absolute;left:6px;top:.42em;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@media(max-width:600px){.kt-card{flex-basis:min(300px,82vw)}}

/* 기타 */
.sec-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;color:var(--accent-text);transition:gap .18s}
.sec-more:hover{gap:11px}
.dark .sec-more,.platform .sec-more{color:#79b3f2}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-top:26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.grp{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--fg-3);text-transform:uppercase}
.pi-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pi-shot{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:44px;padding:9px 15px;font-size:13.5px;font-weight:700;color:var(--accent-text);background:var(--accent-soft);border:1px solid rgba(0,117,222,.22);border-radius:var(--pill);cursor:pointer}
.pi-shot:hover{background:rgba(0,117,222,.16)}
.dark .pi-shot,.platform .pi-shot{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
/* 다크 섹션 안의 스탯 카드 */
.dark .stat,.platform .stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);box-shadow:none}
.dark .stat b,.platform .stat b{color:#fff}
.dark .stat span,.platform .stat span{color:#aeb8c8}
.dark .stat b .u,.platform .stat b .u{color:#aeb8c8}


/* 다크 섹션 안의 카드류: 흰 카드+흰 글자 결함 방지(다크 표면으로 전환) */
.dark .dep-card,.platform .dep-card,.dark .case-card,.platform .case-card,.dark .faq-item,.platform .faq-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.dark .dep-card h3,.platform .dep-card h3,.dark .case-card h3,.platform .case-card h3,.dark .faq-q,.platform .faq-q{color:#fff}
.dark .dep-card p,.platform .dep-card p,.dark .case-card p,.platform .case-card p,.dark .case-card .csi,.platform .case-card .csi,.dark .faq-a,.platform .faq-a{color:#aeb8c8}
.dark .case-card .csi b,.platform .case-card .csi b{color:#fff}

/* ===== genos식 교차 행(텍스트 ↔ 미디어) ===== */
.duo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center;padding:clamp(34px,4.5vw,60px) 0}
.duo+.duo{border-top:1px solid var(--line-soft)}
.duo.rev .duo-txt{order:2}
.duo.rev .duo-media{order:1}
.duo-txt .pill{margin-bottom:14px}
.duo-txt h3{font-size:clamp(21px,2.5vw,30px);letter-spacing:-.024em;line-height:1.25}
.duo-txt p{margin-top:14px;color:var(--fg-muted);font-size:15.5px;line-height:1.68}
.duo-txt p b{color:var(--fg);font-weight:700}
.duo-txt .more{margin-top:16px}
.duo-media img{width:100%;border-radius:14px;border:1px solid var(--border);box-shadow:var(--sh);display:block}
.duo-media .fitcap{margin-top:9px;font-size:12.5px;color:var(--fg-3);text-align:center}
.duo-media.plain img{border:none;box-shadow:none;background:#fff;border-radius:12px;padding:8px}
@media(max-width:900px){
  .duo{grid-template-columns:1fr;gap:20px}
  .duo.rev .duo-txt{order:1}
  .duo.rev .duo-media{order:2}
}

/* ===== COMPANY / REFERENCES / CONTACT / PRIVACY ===== */
/* 장식 큐브(구 테마) 비표시 */
.cube-a,.cube-b{display:none}

/* 회사소개: 인사말 + 비전 카드 */
.about-top{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;margin-top:36px;align-items:start}
.about-msg p{color:var(--fg-muted);font-size:15.5px;line-height:1.72}
.about-msg p+p{margin-top:14px}
.about-msg .sign{margin-top:20px;color:var(--fg);font-size:15px}
.about-msg .sign b{font-weight:800}
.vision-card{background:var(--ink);color:#eef1f6;border-radius:var(--r);padding:28px 26px}
.vision-card .v-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#79b3f2}
.vision-card .v-h{margin:8px 0 20px;font-size:21px;font-weight:800;line-height:1.35;color:#fff}
.vision-card .v-h em{font-style:normal;color:#8fc0ff}
.vision-card .v-m{font-size:14px;color:#aeb8c8;line-height:1.66}
@media(max-width:900px){.about-top{grid-template-columns:1fr}}

/* 구축 사례 필터 */
.case-filter{position:sticky;top:72px;z-index:60;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:14px clamp(20px,5vw,40px);background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.case-tab{font-weight:700;font-size:14px;color:var(--fg-muted);background:var(--soft);border:1px solid var(--border);border-radius:var(--pill);padding:9px 18px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.case-tab:hover{border-color:var(--fg-3)}
.case-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.case-domain{padding:clamp(44px,5.5vw,76px) 0}
.case-domain+.case-domain{border-top:1px solid var(--line-soft)}
.case-card.is-hidden{display:none}

/* 문의 폼 */
.form{max-width:640px;margin:34px auto 0;display:flex;flex-direction:column;gap:18px}
.form label{display:block;font-size:13.5px;font-weight:700;color:var(--fg);margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:15px;color:var(--fg);background:var(--canvas);border:1px solid var(--border);border-radius:10px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form textarea{resize:vertical;min-height:130px}
.form .agree{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:500;color:var(--fg-muted);line-height:1.55}
.form .agree input{width:auto;margin-top:3px}
.form button[type="submit"]{border:none;cursor:pointer}
.copy-btn{font-size:12px;font-weight:700;color:var(--accent-text);background:var(--accent-soft);border:1px solid rgba(0,117,222,.2);border-radius:var(--pill);padding:5px 12px;min-height:30px;cursor:pointer;vertical-align:middle}
.copy-btn:hover{background:rgba(0,117,222,.16)}
.copy-btn:active{transform:scale(.96)}
/* 토스트 */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(14px);background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:11px 20px;border-radius:var(--pill);opacity:0;transition:opacity .25s,transform .25s;z-index:300;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---- responsive ---- */
@media(max-width:900px){
  .nav-menu,.cta-btn{display:none}
  .m-toggle{display:block}
  .stats{grid-template-columns:repeat(2,1fr)}
  .biz-grid,.case-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:24px}
  .hveil{background:linear-gradient(180deg,rgba(8,12,22,.6),rgba(8,12,22,.82))}
  .m-panel{display:none;position:fixed;inset:72px 0 0;background:#fff;z-index:110;padding:20px;overflow:auto}
  .m-panel.open{display:block}
  .m-panel a{display:block;padding:14px 4px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line-soft)}
  body.m-lock{overflow:hidden}
}
@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}.f-grid{grid-template-columns:1fr}}

/* ---- FAB 스택 (맨 위로 · 전화 문의, 전 페이지 공통) ---- */
.fab-stack{position:fixed;right:22px;bottom:26px;z-index:90;display:flex;flex-direction:column;gap:10px}
.fab-btn{width:48px;height:48px;min-width:44px;min-height:44px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:rgba(14,22,38,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;box-shadow:var(--sh);border:none;cursor:pointer;transition:background .2s,transform .2s,opacity .2s}
.fab-btn:hover,.fab-btn:focus-visible{background:rgba(14,22,38,.85);transform:translateY(-2px)}
.fab-top{opacity:0;pointer-events:none;transform:translateY(6px)}
.fab-stack.show .fab-top{opacity:1;pointer-events:auto;transform:none}
@media(max-width:600px){.fab-stack{right:14px;bottom:16px;gap:8px}}