@charset "UTF-8";
/* ==========================================================================
   GATE CENTER — 무선가이드 · 무선인터컴 · 통역/회의장비 · 통역서비스
   Design System  v2026.R1   (Deep Navy + Cyan)
   ※ 사이트 전체 공통 스타일. 이 파일 하나만 고치면 모든 페이지에 반영됩니다.
   ========================================================================== */

:root{
  --navy-900:#050d1c; --navy-850:#081428; --navy-800:#0b1b33;
  --navy-700:#0f2547; --navy-600:#16325c; --navy-500:#1e4275;
  --cyan-400:#22d3ee; --cyan-500:#06b6d4; --cyan-600:#0891b2;
  --ink-900:#0b1220; --ink-700:#33415c; --ink-500:#64748b;
  --paper:#fff; --paper-50:#f6f9fc; --paper-100:#eef3f9;
  --line:#e2e9f2; --line-dark:rgba(255,255,255,.10);
  --warn:#f59e0b;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(11,27,51,.06), 0 2px 8px rgba(11,27,51,.05);
  --sh-md:0 4px 12px rgba(11,27,51,.07), 0 12px 32px rgba(11,27,51,.08);
  --sh-lg:0 12px 28px rgba(11,27,51,.10), 0 32px 64px rgba(11,27,51,.12);
  --sh-cyan:0 8px 30px rgba(6,182,212,.28);
  --wrap:1200px; --hdr:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 60px)}
body{
  margin:0; background:var(--paper); color:var(--ink-900);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block; border:0}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--cyan-400); outline-offset:3px; border-radius:6px}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.section{padding:88px 0}
.section--dark{background:var(--navy-800); color:#fff}
.section--soft{background:var(--paper-50)}
@media (max-width:768px){ .section{padding:56px 0} .wrap{width:min(100% - 32px, var(--wrap))} }

/* ---------- Typography ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-600); margin-bottom:14px}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor; border-radius:2px}
.section--dark .eyebrow{color:var(--cyan-400)}
.h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem); font-weight:800; line-height:1.22; letter-spacing:-.03em}
.h2{font-size:clamp(1.6rem,1.1rem + 2.1vw,2.5rem); font-weight:800; line-height:1.3; letter-spacing:-.025em}
.h3{font-size:clamp(1.15rem,1rem + .7vw,1.4rem); font-weight:700; line-height:1.4; letter-spacing:-.02em}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.15rem); color:var(--ink-700); line-height:1.8}
.section--dark .lead{color:rgba(255,255,255,.72)}
.muted{color:var(--ink-500); font-size:.92rem}
.price{margin-top:10px; font-size:1.02rem; color:var(--ink-600)}
.price strong{color:var(--navy-800); font-weight:800; font-size:1.15em; letter-spacing:-.02em}
.section--dark .price{color:rgba(255,255,255,.72)}
.section--dark .price strong{color:var(--cyan-400)}
.sec-head{max-width:760px; margin-bottom:48px}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head .h2 + .lead{margin-top:16px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-full); border:1.5px solid transparent;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px; height:17px; flex:none}
.btn--primary{background:linear-gradient(135deg,var(--cyan-500),var(--cyan-600)); color:#fff; box-shadow:var(--sh-cyan)}
.btn--primary:hover{box-shadow:0 12px 38px rgba(6,182,212,.42)}
.btn--dark{background:var(--navy-800); color:#fff}
.btn--dark:hover{background:var(--navy-700); box-shadow:var(--sh-md)}
.btn--kakao{background:#FEE500; color:#1b1000; box-shadow:0 8px 26px rgba(254,229,0,.34)}
.btn--kakao:hover{background:#ffd900; box-shadow:0 12px 34px rgba(254,229,0,.46)}
.btn--kakao svg{fill:currentColor; stroke:none}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink-900)}
.btn--ghost:hover{border-color:var(--cyan-500); color:var(--cyan-600)}
.phead .btn--ghost,.cta .btn--ghost,.hero .btn--ghost{border-color:rgba(255,255,255,.28); color:#fff}
.phead .btn--ghost:hover,.cta .btn--ghost:hover,.hero .btn--ghost:hover{border-color:var(--cyan-400); color:var(--cyan-400)}
.btn--lg{padding:17px 34px; font-size:1rem}
.btn--sm{padding:10px 18px; font-size:.86rem}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Header ---------- */
.hdr{position:sticky; top:0; z-index:900; background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease), background .3s}
.hdr.is-stuck{box-shadow:var(--sh-sm); background:rgba(255,255,255,.93)}
.hdr__bar{height:var(--hdr); display:flex; align-items:center; gap:20px}
.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.brand__mark{width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,var(--navy-700),var(--navy-800) 55%,var(--cyan-600)); box-shadow:var(--sh-sm)}
.brand__mark svg{width:20px; height:20px}
.brand__txt{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font-weight:800; font-size:1.05rem; letter-spacing:-.03em}
.brand__sub{font-size:.66rem; font-weight:600; letter-spacing:.16em; color:var(--ink-500); text-transform:uppercase}

.gnb{display:flex; align-items:center; gap:2px; margin-left:auto}
.gnb > li{position:relative}
.gnb > li > a{position:relative; display:block; padding:10px 14px; border-radius:var(--r-full);
  font-size:.93rem; font-weight:600; color:var(--ink-700); transition:color .2s, background .2s}
.gnb > li > a::after{content:""; position:absolute; left:50%; bottom:4px; translate:-50% 0;
  width:0; height:2px; border-radius:2px; background:var(--cyan-500); transition:width .3s var(--ease)}
.gnb > li > a:hover{color:var(--navy-800); background:var(--paper-100)}
.gnb > li > a:hover::after,.gnb > li > a.is-on::after{width:20px}
.gnb > li > a.is-on{color:var(--navy-800); font-weight:700}

/* 드롭다운 */
.gnb__sub{position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0; min-width:230px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:.25s var(--ease); z-index:10}
.gnb > li:hover .gnb__sub,.gnb > li:focus-within .gnb__sub{opacity:1; visibility:visible; transform:none}
.gnb__sub a{display:block; padding:10px 14px; border-radius:10px; font-size:.9rem; font-weight:600; color:var(--ink-700); transition:.18s}
.gnb__sub a:hover{background:var(--paper-100); color:var(--navy-800)}

.hdr__cta{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.hdr__tel{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-full);
  background:var(--navy-800); color:#fff; font-weight:800; font-size:.95rem;
  transition:background .2s, transform .25s var(--ease)}
.hdr__tel:hover{background:var(--navy-700); transform:translateY(-1px)}
.hdr__tel svg{width:15px; height:15px}
.hdr__mobile{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-full);
  border:1.5px solid var(--line); color:var(--navy-800); font-weight:800; font-size:.95rem; transition:.2s}
.hdr__mobile:hover{border-color:var(--cyan-500); color:var(--cyan-600); transform:translateY(-1px)}
.hdr__mobile svg{width:15px; height:15px; color:var(--cyan-600)}
@media (max-width:1440px){ .hdr__mobile span{display:none} .hdr__mobile{padding:10px 12px} }
@media (max-width:420px){ .hdr__mobile{display:none} }

.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  border-radius:12px; align-items:center; justify-content:center}
.burger span{display:block; width:22px; height:2px; background:var(--navy-800); border-radius:2px; position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:2px;
  background:var(--navy-800); border-radius:2px; transition:.3s var(--ease)}
.burger span::before{top:-7px} .burger span::after{top:7px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0; rotate:45deg}
.burger.is-open span::after{top:0; rotate:-45deg}

@media (max-width:1180px){
  .gnb{position:fixed; inset:var(--hdr) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:12px 20px 28px; border-bottom:1px solid var(--line); box-shadow:var(--sh-lg);
    max-height:calc(100dvh - var(--hdr)); overflow:auto;
    transform:translateY(-14px); opacity:0; visibility:hidden; transition:.3s var(--ease)}
  .gnb.is-open{transform:none; opacity:1; visibility:visible}
  .gnb > li > a{padding:14px 12px; border-radius:12px; font-size:1.02rem}
  .gnb > li > a::after{display:none}
  .gnb__sub{position:static; translate:none; transform:none; opacity:1; visibility:visible;
    border:0; box-shadow:none; padding:0 0 10px 12px; min-width:0; background:transparent}
  .gnb__sub a{padding:9px 12px; font-size:.92rem; color:var(--ink-500)}
  .burger{display:inline-flex; margin-left:auto; order:3}
  .hdr__tel span{display:none} .hdr__tel{padding:10px 12px}
}
@media (max-width:520px){ .brand__sub{display:none} }

/* ---------- Hero (메인) ---------- */
.hero{position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(34,211,238,.30), transparent 62%),
    radial-gradient(820px 460px at 92% 108%, rgba(30,66,117,.85), transparent 62%),
    linear-gradient(150deg,var(--navy-900),var(--navy-700) 62%,var(--navy-600))}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%);
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%)}
.hero__inner{position:relative; z-index:1; padding:96px 0 108px; max-width:820px}
.hero .h1{color:#fff; font-size:clamp(2.2rem,1.2rem + 4.2vw,4rem)}
.hero__tag{display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:var(--r-full);
  background:rgba(34,211,238,.14); border:1px solid rgba(34,211,238,.3); color:var(--cyan-400);
  font-size:.82rem; font-weight:700; letter-spacing:.02em; margin-bottom:22px}
.hero__tag svg{width:15px; height:15px}
.hero .lead{color:rgba(255,255,255,.78); margin-top:20px; max-width:640px}
.hero .btn-row{margin-top:34px}
@media (max-width:768px){ .hero__inner{padding:64px 0 76px} }

/* ---------- Page head (서브) ---------- */
.phead{position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(34,211,238,.28), transparent 60%),
    radial-gradient(700px 380px at 88% 110%, rgba(30,66,117,.75), transparent 62%),
    linear-gradient(150deg,var(--navy-850),var(--navy-700) 65%,var(--navy-600))}
.phead::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%)}
.phead__inner{position:relative; z-index:1; padding:52px 0 60px}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.84rem; color:rgba(255,255,255,.62); margin-bottom:20px}
.crumb a{transition:color .2s} .crumb a:hover{color:var(--cyan-400)}
.crumb span[aria-current]{color:#fff; font-weight:600}
.crumb i{font-style:normal; opacity:.5}
.phead .h1{color:#fff}
.phead .lead{color:rgba(255,255,255,.75); margin-top:16px; max-width:680px}
.phead .btn-row{margin-top:28px}

/* ---------- Sub nav ---------- */
.subnav{position:sticky; top:var(--hdr); z-index:800; background:#fff; border-bottom:1px solid var(--line)}
.subnav__scroll{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px 0}
.subnav__scroll::-webkit-scrollbar{display:none}
.subnav a{flex:none; padding:9px 16px; border-radius:var(--r-full); font-size:.88rem; font-weight:600;
  color:var(--ink-700); background:var(--paper-100); transition:.2s}
.subnav a:hover{background:var(--navy-800); color:#fff}
.subnav a.is-on{background:linear-gradient(135deg,var(--cyan-500),var(--cyan-600)); color:#fff; box-shadow:var(--sh-cyan)}

/* ---------- Spec strip ---------- */
.spec-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-md); margin-top:-46px; position:relative; z-index:2}
.spec-strip__i{background:#fff; padding:26px 20px; text-align:center}
.spec-strip__v{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem); font-weight:800; letter-spacing:-.03em; color:var(--navy-800); line-height:1.2}
.spec-strip__v em{font-style:normal; font-size:.6em; font-weight:700; color:var(--cyan-600); margin-left:2px}
.spec-strip__k{margin-top:6px; font-size:.82rem; font-weight:600; color:var(--ink-500)}

/* ---------- Cards ---------- */
.grid{display:grid; gap:22px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:transparent}
.card__ico{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,rgba(34,211,238,.16),rgba(15,37,71,.10)); color:var(--cyan-600)}
.card__ico svg{width:24px; height:24px}
.card .h3{margin-bottom:10px}
.card p{color:var(--ink-700); font-size:.95rem}
.card--dark{background:linear-gradient(160deg,var(--navy-700),var(--navy-800)); border-color:rgba(255,255,255,.08); color:#fff}
.card--dark p{color:rgba(255,255,255,.7)}
.card--dark .card__ico{background:rgba(34,211,238,.16); color:var(--cyan-400)}
.card--dark:hover{border-color:rgba(34,211,238,.3)}
.card__num{position:absolute; right:22px; top:16px; font-size:3.4rem; font-weight:800;
  color:var(--paper-100); letter-spacing:-.05em; line-height:1; pointer-events:none}
.card--dark .card__num{color:rgba(255,255,255,.06)}
.card--link{display:flex; flex-direction:column}
.card--link .card__go{margin-top:auto; padding-top:18px; font-weight:700; font-size:.9rem; color:var(--cyan-600);
  display:inline-flex; align-items:center; gap:7px}
.card--link:hover .card__go{gap:12px}
.card--link .card__go::after{content:"→"; transition:.25s var(--ease)}
.card__thumb{margin:-30px -30px 20px; background:var(--paper-50); border-bottom:1px solid var(--line);
  aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center; padding:14px}
.card__thumb img{width:100%; height:100%; object-fit:contain; object-position:center top}
.card__badge{display:inline-block; padding:4px 11px; border-radius:var(--r-full); font-size:.72rem; font-weight:800;
  background:rgba(6,182,212,.12); color:var(--cyan-600); margin-bottom:12px; letter-spacing:.02em}

.feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px; background:var(--line-dark); border-radius:var(--r-lg); overflow:hidden}
.feat__i{background:var(--navy-800); padding:32px 28px; transition:background .3s}
.feat__i:hover{background:var(--navy-700)}
.feat__k{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:#fff; margin-bottom:10px}
.feat__k svg{width:20px; height:20px; color:var(--cyan-400); flex:none}
.feat__i p{color:rgba(255,255,255,.66); font-size:.93rem}

/* ---------- Split / 이미지 ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center}
.split__media{border-radius:var(--r-xl); overflow:hidden; background:var(--paper-50);
  border:1px solid var(--line); box-shadow:var(--sh-lg); padding:24px}
.split__media img{margin-inline:auto; border-radius:var(--r-md)}
.split__media[data-zoom]{cursor:zoom-in}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:32px} }

.longshot{border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:#fff;
  box-shadow:var(--sh-md); text-align:center; padding:16px}
.longshot img{margin-inline:auto; border-radius:var(--r-md)}
.longshot[data-zoom]{cursor:zoom-in}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.gallery figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  cursor:zoom-in; transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.gallery figure:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--paper-50); padding:10px}

.lb{position:fixed; inset:0; z-index:1200; display:none; place-items:center; background:rgba(5,13,28,.92);
  padding:24px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lb.is-open{display:grid}
.lb img{max-width:min(1100px,92vw); max-height:86vh; border-radius:var(--r-md); box-shadow:var(--sh-lg)}
.lb__x{position:absolute; top:20px; right:22px; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; line-height:1; display:grid; place-items:center; transition:.2s}
.lb__x:hover{background:rgba(255,255,255,.24)}

/* ---------- Use case ---------- */
.usecase{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px}
.uc{position:relative; border-radius:var(--r-lg); padding:34px 30px 32px; background:#fff;
  border:1px solid var(--line); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.uc::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--cyan-400),var(--navy-600))}
.uc:hover{transform:translateY(-5px); box-shadow:var(--sh-lg)}
.uc__tag{display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.1em; color:var(--cyan-600); margin-bottom:12px}
.uc .h3{margin-bottom:12px}
.uc p{color:var(--ink-700); font-size:.94rem}

/* ---------- Checklist ---------- */
.checks{display:grid; gap:14px}
.checks li{display:flex; gap:13px; align-items:flex-start; font-size:.97rem; color:var(--ink-700)}
.checks svg{width:21px; height:21px; flex:none; color:var(--cyan-500); margin-top:3px}
.section--dark .checks li{color:rgba(255,255,255,.74)}
.section--dark .checks svg{color:var(--cyan-400)}

/* ---------- Tables ---------- */
.tbl-wrap{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-sm)}
.tbl{font-size:.94rem}
.tbl th,.tbl td{padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tbl thead th{background:var(--navy-800); color:#fff; font-weight:700; font-size:.88rem; border-bottom:0}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--paper-50)}
.tbl th[scope=row]{font-weight:700; color:var(--navy-800); background:var(--paper-50); width:34%}
.tbl td.num{font-variant-numeric:tabular-nums}
@media (max-width:640px){ .tbl th,.tbl td{padding:12px 14px; font-size:.88rem} .tbl th[scope=row]{width:40%} }
.badge{display:inline-block; padding:4px 11px; border-radius:var(--r-full); font-size:.76rem; font-weight:700; white-space:nowrap}
.badge--rent{background:rgba(6,182,212,.12); color:var(--cyan-600)}
.badge--buy{background:rgba(30,66,117,.10); color:var(--navy-600)}

/* ---------- Note / bank / steps ---------- */
.note{display:flex; gap:16px; padding:22px 24px; border-radius:var(--r-md); background:var(--paper-50);
  border:1px solid var(--line); border-left:4px solid var(--cyan-500); font-size:.94rem; color:var(--ink-700)}
.note svg{width:22px; height:22px; flex:none; color:var(--cyan-600); margin-top:2px}
.note strong{color:var(--navy-800)}
.note a{color:var(--cyan-600); font-weight:600; text-decoration:underline}
.note--warn{border-left-color:var(--warn)} .note--warn svg{color:var(--warn)}

.bank{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding:24px 28px;
  border-radius:var(--r-lg); color:#fff; background:linear-gradient(135deg,var(--navy-700),var(--navy-800)); box-shadow:var(--sh-md)}
.bank__k{font-size:.8rem; letter-spacing:.1em; font-weight:700; color:var(--cyan-400)}
.bank__v{font-size:clamp(1.05rem,.95rem + .6vw,1.4rem); font-weight:800; font-variant-numeric:tabular-nums}
.bank__o{font-size:.92rem; color:rgba(255,255,255,.7)}
.bank .btn{margin-left:auto}

.steps{counter-reset:s; display:grid; gap:16px}
.steps li{counter-increment:s; position:relative; padding:24px 26px 24px 74px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md); font-size:.95rem; color:var(--ink-700)}
.steps li::before{content:counter(s); position:absolute; left:24px; top:22px; width:32px; height:32px;
  border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:.9rem; color:#fff;
  background:linear-gradient(140deg,var(--cyan-500),var(--cyan-600))}
.steps b{display:block; color:var(--navy-800); font-size:1.02rem; margin-bottom:4px}

/* ---------- Marquee / chips ---------- */
.marquee{position:relative; overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; gap:14px; width:max-content; animation:marq 60s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse; animation-duration:72s}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__i{flex:none; width:150px; height:74px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px}
.marquee__i img{max-height:46px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:.3s}
.marquee__i:hover img{filter:none; opacity:1}
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ---------- Tabs (번역 실적 분류) ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tabs__b{padding:9px 16px; border-radius:var(--r-full); font-size:.86rem; font-weight:700; cursor:pointer;
  background:var(--paper-100); color:var(--ink-700); border:1px solid var(--line); transition:.18s; font-family:inherit}
.tabs__b span{display:inline-block; margin-left:5px; font-size:.78em; opacity:.62; font-variant-numeric:tabular-nums}
.tabs__b:hover{border-color:var(--cyan-500); color:var(--cyan-600)}
.tabs__b.is-on{background:var(--navy-800); color:#fff; border-color:var(--navy-800)}
.tabs__b.is-on span{opacity:.75}
.badge--soft{background:var(--paper-100); color:var(--ink-500); border:1px solid var(--line); font-weight:600}
@media (max-width:720px){ .hide-sm{display:none} }

.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips li{padding:8px 15px; border-radius:var(--r-full); font-size:.86rem; font-weight:600;
  background:var(--paper-100); color:var(--ink-700); border:1px solid var(--line); transition:.2s}
.chips li:hover{background:var(--navy-800); color:#fff; border-color:var(--navy-800)}

/* ---------- Form ---------- */
.quote{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start}
@media (max-width:900px){ .quote{grid-template-columns:1fr; gap:32px} }
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:34px; box-shadow:var(--sh-lg)}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form__grid .full{grid-column:1/-1}
@media (max-width:560px){ .form__grid{grid-template-columns:1fr} .form{padding:24px} }
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:.85rem; font-weight:700; color:var(--navy-800)}
.field .req{color:var(--cyan-600)}
.field input,.field select,.field textarea{padding:13px 15px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--paper-50); font-size:.95rem; width:100%;
  transition:border-color .2s, background .2s, box-shadow .2s}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--cyan-500);
  background:#fff; box-shadow:0 0 0 4px rgba(6,182,212,.12)}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:42px}
.radios{display:flex; flex-wrap:wrap; gap:10px}
.radios label{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--r-full);
  border:1.5px solid var(--line); background:var(--paper-50); cursor:pointer; font-weight:600; font-size:.9rem; transition:.2s}
.radios input{accent-color:var(--cyan-600)}
.radios label:has(input:checked){border-color:var(--cyan-500); background:rgba(6,182,212,.08); color:var(--cyan-600)}
.form__foot{margin-top:24px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.agree{display:flex; align-items:flex-start; gap:9px; font-size:.85rem; color:var(--ink-500); cursor:pointer}
.agree input{margin-top:4px; accent-color:var(--cyan-600)}

/* 폼 전송 상태 */
.form__msg{
  margin-top:18px; padding:15px 18px; border-radius:12px; font-size:.92rem; font-weight:600;
  display:none; gap:10px; align-items:flex-start;
}
.form__msg.is-on{display:flex}
.form__msg--err{background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.35); color:#8a5a00}
.form__msg--ok{background:rgba(6,182,212,.10); border:1px solid rgba(6,182,212,.35); color:var(--cyan-600)}
.form__msg svg{flex:none; width:20px; height:20px; margin-top:1px}
.form__msg .btn-row{gap:8px}
.form__msg .btn{font-weight:700}
.form__msg .muted{font-weight:500; font-size:.82rem; opacity:.8}
.form.is-sending{opacity:.6; pointer-events:none}
.form__done{text-align:center; padding:26px 10px}
.form__done .ic{
  width:72px; height:72px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center;
  background:rgba(6,182,212,.12); color:var(--cyan-600);
}
.form__done .ic svg{width:34px; height:34px}
.form__done h3{font-size:1.4rem; font-weight:800; color:var(--navy-800); margin-bottom:10px}
.form__done p{color:var(--ink-700); font-size:.96rem}
.hp-field{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

.contact-list{display:grid; gap:16px}
.contact-list li{display:flex; gap:14px; align-items:flex-start}
.contact-list .ic{width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:rgba(34,211,238,.14); color:var(--cyan-400)}
.contact-list .ic svg{width:19px; height:19px}
.contact-list b{display:block; font-size:.78rem; letter-spacing:.08em; color:rgba(255,255,255,.5); font-weight:700; text-transform:uppercase}
.contact-list span{font-size:1.02rem; font-weight:700; color:#fff}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:56px 48px; color:#fff; text-align:center;
  background:radial-gradient(700px 300px at 15% 0%, rgba(34,211,238,.30), transparent 60%),
             linear-gradient(135deg,var(--navy-700),var(--navy-850));
  box-shadow:var(--sh-lg)}
.cta .h2{color:#fff}
.cta p{color:rgba(255,255,255,.72); margin-top:14px; max-width:560px; margin-inline:auto}
.cta .btn-row{justify-content:center; margin-top:28px}
.cta__more{margin-top:24px; font-size:.9rem; color:rgba(255,255,255,.58)}
.cta__more a{color:var(--cyan-400); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(34,211,238,.35);
  padding-bottom:1px; transition:.18s}
.cta__more a:hover{color:#fff; border-bottom-color:#fff}
@media (max-width:640px){ .cta{padding:40px 24px} }

/* ---------- Footer ---------- */
.ftr{background:var(--navy-900); color:rgba(255,255,255,.6); padding:64px 0 34px; font-size:.9rem}
.ftr__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08)}
@media (max-width:980px){ .ftr__top{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:520px){ .ftr__top{grid-template-columns:1fr} }
.ftr .brand__name{color:#fff}
.ftr .brand__sub{color:rgba(255,255,255,.4)}
.ftr h4{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-weight:700}
.ftr ul{display:grid; gap:10px}
.ftr a{transition:color .2s} .ftr a:hover{color:var(--cyan-400)}
.ftr__info{margin-top:22px; line-height:1.9; font-size:.86rem}
.ftr__bot{padding-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; color:rgba(255,255,255,.4)}

/* ---------- Floating quick menu ---------- */
.fab{position:fixed; right:20px; bottom:20px; z-index:850; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.fab__btn{display:inline-flex; align-items:center; gap:12px; padding:11px 20px 11px 16px; border-radius:var(--r-full);
  color:#fff; box-shadow:var(--sh-lg); white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.fab__btn:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(11,27,51,.28)}
.fab__btn svg{width:22px; height:22px; flex:none}
.fab__txt{display:flex; flex-direction:column; line-height:1.25; font-size:.95rem; font-weight:800; font-variant-numeric:tabular-nums}
.fab__txt b{font-size:.66rem; font-weight:700; letter-spacing:.08em; opacity:.72}
.fab__mini{display:none}
.fab__mobile{background:linear-gradient(135deg,var(--cyan-500),var(--cyan-600))}
.fab__kakao{background:#FEE500; color:#1b1000}
.fab__kakao svg{fill:currentColor; stroke:none}
.fab__mail{background:var(--navy-700)}
.fab__tel{background:var(--navy-800)}
.fab__top{width:48px; height:48px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  display:grid; place-items:center; background:#fff; color:var(--navy-800); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transition:transform .25s var(--ease), opacity .3s}
.fab__top svg{width:22px; height:22px}
.fab__top:hover{transform:translateY(-3px)}
.fab__top.is-on{opacity:1; visibility:visible}
@media (max-width:1280px){ .fab__txt b{display:none} .fab__btn{padding:12px 18px 12px 15px; gap:9px} }
@media (max-width:760px){
  .fab{right:0; left:0; bottom:0; flex-direction:row; align-items:stretch; gap:0;
    background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(11,27,51,.10)}
  .fab__btn{flex:1 1 0; min-width:0; justify-content:center; flex-direction:column; gap:3px;
    padding:9px 4px; border-radius:14px; box-shadow:none; font-size:.72rem}
  .fab__btn:hover{transform:none; box-shadow:none}
  .fab__btn svg{width:19px; height:19px}
  .fab__txt{display:none}
  .fab__mini{display:block; font-size:.72rem; font-weight:800; line-height:1.2; text-align:center;
    font-variant-numeric:tabular-nums; max-width:100%; overflow:hidden; text-overflow:ellipsis}
  .fab__mobile .fab__mini{font-size:.7rem}
  .fab__top{position:absolute; right:14px; bottom:calc(100% + 12px); width:44px; height:44px}
  body{padding-bottom:76px}
}
@media (max-width:380px){ .fab__mail{display:none} }

/* ---------- Reveal ---------- */
[data-rv]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-rv].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ [data-rv]{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- Utils ---------- */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.center{text-align:center}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}