/* ============================================================
   CI 교체 가이드
   - 로고: public/logo.png 파일만 바꾸면 모든 페이지에 반영됩니다(가로형 PNG, 투명 배경 권장).
   - 색상: 아래 :root 의 --brand-* 값만 바꾸면 첫 화면(남색 배경·격자·강조색)과
     전체 페이지의 파란색이 함께 바뀝니다. 다른 곳의 색은 모두 이 변수들을 참조합니다.
   ============================================================ */
:root{
  --brand-blue:#0093D3;      /* 주 강조색(버튼, 링크, 포인트) */
  --brand-navy:#002957;      /* 첫 화면 배경(짙은 남색) */
  --brand-navy-2:#0b3a6e;    /* 첫 화면 카드·띠 배경 */
  --brand-line:#1f5088;      /* 첫 화면 테두리·격자 */
  --brand-glow:#5cc8f5;      /* 첫 화면 밝은 강조(모노 글꼴, 하이라이트) */
  --brand-ok:#4ade80;        /* 현황판 상태 점 */
}

/* Layout: single long page, 1120px content column, sections alternate white / tinted bands; brand blue from the logo is the one accent. */
:root{
  --bg:#ffffff; --band:#f3f6fc; --fg:#111a2e; --muted:#5b667d; --line:#dfe5f0;
  --card:#ffffff; --card-tint:#eaf0fb;
  --accent:var(--brand-blue); --accent-ink:#ffffff; --accent-deep:var(--brand-navy); --accent-soft:color-mix(in srgb,var(--brand-blue) 14%,white);
  --font-body:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-head:"IBM Plex Sans","Noto Sans KR",-apple-system,sans-serif;
  --shadow:0 10px 30px rgba(17,26,46,.07);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0c1220; --band:#111a2c; --fg:#e8edf7; --muted:#9aa6bd; --line:#223049;
  --card:#15203a; --card-tint:#1a2745;
  --accent:var(--brand-glow); --accent-ink:#ffffff; --accent-deep:var(--brand-navy); --accent-soft:color-mix(in srgb,var(--brand-blue) 30%,#0c1220);
  --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0c1220; --band:#111a2c; --fg:#e8edf7; --muted:#9aa6bd; --line:#223049;
  --card:#15203a; --card-tint:#1a2745;
  --accent:var(--brand-glow); --accent-ink:#ffffff; --accent-deep:var(--brand-navy); --accent-soft:color-mix(in srgb,var(--brand-blue) 30%,#0c1220);
  --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.65;word-break:keep-all}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.2vw,36px);font-weight:700}
h3{font-size:18px;font-weight:700}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sec{padding-block:72px}
.sec.band{background:var(--band)}
.sec-head{display:grid;gap:8px;margin-bottom:36px}
.sec-head p{color:var(--muted);max-width:60ch}
.grid{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;font-size:15px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border:1px solid var(--line);color:var(--fg)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.06em}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:17px}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);padding:8px 10px;border-radius:8px}
.nav a:hover{color:var(--fg);background:var(--band)}
@media (max-width:760px){.nav{display:none}}

/* hero */
.hero{padding-block:72px 64px;background:
  radial-gradient(640px 400px at 90% 0%,var(--accent-soft),transparent 70%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,58px);font-weight:700;margin-top:14px}
.hero h1 b{color:var(--accent);font-weight:700}
.hero .lead{margin-top:20px;font-size:18px;color:var(--muted);max-width:40ch}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero .facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:14px}
.hero .facts b{display:block;color:var(--fg);font-family:var(--font-head);font-size:22px;font-weight:700}
.logo-card{background:#fff;border-radius:20px;padding:36px;box-shadow:var(--shadow);display:grid;place-items:center;border:1px solid var(--line)}
.logo-card img{width:min(320px,80%)}
.logo-card span{margin-top:16px;font-size:13px;color:#5b667d;text-align:center}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.logo-card{order:-1;padding:28px}.logo-card img{width:min(220px,60%)}}

/* overview */
.overview{grid-template-columns:1.1fr .9fr}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;align-items:baseline}
.kv dt{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap}
.kv dd{margin:0}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.area{background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:18px 16px;min-height:120px;display:grid;align-content:end;gap:4px}
.area b{font-size:15px;line-height:1.3}
.area small{opacity:.8;font-family:var(--font-head);letter-spacing:.04em}
@media (max-width:860px){.overview{grid-template-columns:1fr}.areas{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.areas{grid-template-columns:1fr 1fr}}

/* strengths */
.strengths{grid-template-columns:1fr 2fr}
.why{background:var(--accent);color:var(--accent-ink);border-radius:18px;padding:32px;display:grid;align-content:space-between;gap:28px}
.why .eyebrow{color:var(--accent-ink);opacity:.8}
.why h3{font-size:clamp(26px,3vw,34px);font-weight:700}
.why p{opacity:.9;font-size:15px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.stat .num{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stat .num b{font-family:var(--font-head);font-size:34px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.stat h4{margin:8px 0 2px;font-size:16px}
.stat p{color:var(--muted);font-size:14px}
@media (max-width:860px){.strengths{grid-template-columns:1fr}}
@media (max-width:480px){.stats{grid-template-columns:1fr}}

/* services */
.services{grid-template-columns:repeat(5,1fr)}
.svc{display:grid;align-content:start;gap:8px}
.svc .ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.svc h3{font-size:17px}
.svc .sub{color:var(--accent);font-weight:700;font-size:13px}
.svc ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:14px;line-height:1.7}
@media (max-width:1000px){.services{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.services{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.services{grid-template-columns:1fr}}
.flow{margin-top:20px;background:var(--accent);color:var(--accent-ink);border-radius:18px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.flow .intro b{display:block;font-family:var(--font-head);font-size:20px}
.flow .intro p{opacity:.85;font-size:14px;max-width:26ch}
.flow ol{margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.flow li{display:grid;justify-items:center;gap:8px;font-size:14px;font-weight:700;flex:1;min-width:80px;text-align:center}
.flow li span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-family:var(--font-head);font-size:15px}
@media (max-width:860px){.flow{grid-template-columns:1fr}}

/* org */
.org{display:grid;gap:18px;justify-items:center}
.org .ceo{background:var(--accent);color:var(--accent-ink);padding:10px 28px;border-radius:999px;font-weight:700}
.org .depts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.dept{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.dept h3{font-size:17px}
.dept small{display:block;color:var(--accent);font-family:var(--font-head);font-weight:600;letter-spacing:.04em;margin-bottom:12px}
.dept ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.dept li{background:var(--card-tint);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500}
@media (max-width:760px){.org .depts{grid-template-columns:1fr}}

/* track record */
.years{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.years button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.years button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.years button small{font-weight:500;opacity:.8;margin-left:4px}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proj{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.proj .m{font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:13px;background:var(--accent-soft);border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums;margin-top:2px}
.proj b{display:block;font-size:15px}
.proj span{color:var(--muted);font-size:13.5px}
@media (max-width:860px){.projects{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.projects{grid-template-columns:1fr}}

/* partners */
.partners{grid-template-columns:1fr 1fr 1fr}
.strategic{background:var(--accent);color:var(--accent-ink);border-radius:18px;padding:28px;display:grid;gap:12px;align-content:start}
.strategic .eyebrow{color:var(--accent-ink);opacity:.8}
.strategic h3{font-size:26px}
.strategic ul{margin:8px 0 0;padding-left:18px;font-size:15px;line-height:1.9}
.pt{display:grid;gap:12px;align-content:start}
.pt h3{font-size:20px}
.pt .en{color:var(--muted);font-size:13px;margin-top:-8px}
.pt .item b{display:block;font-size:17px}
.pt .item span{color:var(--muted);font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--card-tint);border-radius:10px;padding:10px 14px;font-weight:600;font-size:14px}
@media (max-width:860px){.partners{grid-template-columns:1fr}}

/* customers */
.cust{grid-template-columns:repeat(3,1fr)}
.cgroup h3{display:flex;align-items:baseline;gap:8px;font-size:16px;margin-bottom:10px}
.cgroup h3 small{color:var(--accent);font-family:var(--font-head);font-weight:600}
.cgroup ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cgroup li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500}
@media (max-width:860px){.cust{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cust{grid-template-columns:1fr}}
.sector{margin-top:32px;font-size:14px;color:var(--muted);font-weight:700;letter-spacing:.04em;margin-bottom:14px}
.sector:first-of-type{margin-top:0}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.contact h2{color:var(--accent-ink)}
.contact{background:var(--accent-deep);color:#fff}
.contact p{opacity:.85}
.contact .kv dt{color:#9db8f2}
.contact .kv dd{font-size:17px;font-weight:500}
.copy{display:inline-flex;align-items:center;gap:8px}
.copy button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:6px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer}
@media (max-width:760px){.contact .wrap{grid-template-columns:1fr}}
footer{padding-block:28px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* multi-page additions */
.nav a[aria-current="page"]{color:var(--accent);font-weight:700}
.menu-btn{display:none;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;padding:8px 10px;font:inherit;cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:inline-flex;align-items:center;gap:6px}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;padding:8px max(16px,env(safe-area-inset-left,0px)) 12px}
  .nav.open{display:flex}
  .nav a{padding:12px 10px;font-size:16px}
}
.top .wrap{position:relative}
.page-head{padding-block:56px 8px}
.page-head .eyebrow{display:block;margin-bottom:8px}
.page-head h1{font-size:clamp(30px,4vw,44px);font-weight:700}
.page-head p{color:var(--muted);margin-top:12px;max-width:60ch}
.home-hero{padding-block:88px 72px;background:
  radial-gradient(900px 520px at 85% -10%,var(--accent-soft),transparent 70%),var(--bg)}
.home-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.home-hero h1{font-size:clamp(36px,5.4vw,64px);font-weight:700;margin-top:16px}
.home-hero h1 b{color:var(--accent);font-weight:700}
.home-hero .lead{margin-top:22px;font-size:18px;color:var(--muted);max-width:40ch}
.home-hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
@media (max-width:860px){.home-hero{padding-block:48px}.home-hero .wrap{grid-template-columns:1fr}.home-hero .logo-card{order:-1;padding:28px}.home-hero .logo-card img{width:min(220px,60%)}}
.quick{grid-template-columns:repeat(3,1fr)}
.quick a{display:grid;gap:10px;align-content:start;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:transform .15s,border-color .15s}
.quick a:hover{transform:translateY(-3px);border-color:var(--accent)}
.quick .ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.quick h3{font-size:18px}
.quick p{color:var(--muted);font-size:14px}
.quick .more{color:var(--accent);font-weight:700;font-size:14px;margin-top:4px}
@media (max-width:860px){.quick{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.quick{grid-template-columns:1fr}}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.numbers div{text-align:center;padding:22px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.numbers b{display:block;font-family:var(--font-head);font-size:38px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.numbers span{font-size:14px;color:var(--muted)}
@media (max-width:640px){.numbers{grid-template-columns:1fr 1fr}}
.dell-band{background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.dell-band h2{color:var(--accent-ink);font-size:clamp(22px,2.6vw,30px)}
.dell-band p{opacity:.85;margin-top:8px;max-width:50ch}
.dell-band .btn{background:#fff;color:var(--accent-deep)}
@media (max-width:760px){.dell-band{grid-template-columns:1fr}}

/* ---------- 첫 화면(시안 C) ---------- */
.c-hero{background:var(--brand-navy);color:#e8edf7;position:relative;overflow:hidden;padding-block:88px 72px;
  background-image:linear-gradient(color-mix(in srgb,var(--brand-glow) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--brand-glow) 14%,transparent) 1px,transparent 1px);background-size:40px 40px}
.c-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 20% 30%,color-mix(in srgb,var(--brand-blue) 38%,transparent),transparent 70%);pointer-events:none}
.c-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.04em;color:var(--brand-glow)}
.c-hero h1{font-size:clamp(34px,5vw,60px);font-weight:700;margin-top:14px;line-height:1.15}
.c-hero h1 b{color:var(--brand-glow);font-weight:700}
.c-hero .lead{margin-top:20px;color:#aab6cf;font-size:17px;max-width:40ch}
.c-hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.c-hero .btn-primary{background:var(--brand-blue);color:#fff}
.c-hero .btn-ghost{border-color:var(--brand-line);color:#e8edf7}
.term{background:var(--brand-navy-2);border:1px solid var(--brand-line);border-radius:14px;padding:18px 20px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;line-height:1.9;color:#c9d6f2;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.term .bar{display:flex;gap:6px;margin-bottom:10px}
.term .bar i{width:10px;height:10px;border-radius:50%;background:var(--brand-line);display:block}
.term .k{color:var(--brand-glow)}.term .ok{color:var(--brand-ok)}.term .dim{color:#6b7a9c}
.c-strip{background:var(--brand-navy-2);border-top:1px solid var(--brand-line);border-bottom:1px solid var(--brand-line);color:#aab6cf;padding-block:14px;overflow:hidden}
.c-strip .wrap{display:flex;gap:8px 36px;flex-wrap:wrap;justify-content:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px}
.c-strip span::before{content:"▸ ";color:var(--brand-blue)}
.c-cap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-cap div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;border-top:3px solid transparent}
.c-cap .mono{color:var(--accent)}
.c-cap h3{margin-top:6px}
.c-cap p{color:var(--muted);font-size:14px;margin-top:6px}
@media (max-width:860px){.c-hero .wrap{grid-template-columns:1fr}.c-cap{grid-template-columns:1fr}.c-hero{padding-block:56px}}

/* ---------- 회사 소개 페이지 ---------- */
.ab-intro{padding-block:72px 56px}
.ab-intro .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:56px;align-items:start}
.ab-intro .eyebrow{display:block;margin-bottom:14px}
.ab-intro h1{font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.18}
.ab-intro h1 b{color:var(--accent);font-weight:700}
.ab-intro .lead{margin-top:22px;font-size:18px;color:var(--muted);max-width:52ch;line-height:1.75}
.ab-intro .lead+.lead{margin-top:14px}
.facts{border-top:2px solid var(--fg);padding-top:6px;font-size:15px}
.facts div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:13px;padding-top:2px}
.facts dd{margin:0}
@media (max-width:860px){.ab-intro .wrap{grid-template-columns:1fr;gap:36px}.ab-intro{padding-block:48px 40px}}

.ab-do{padding-block:64px;background:var(--band)}
.ab-do .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.ab-do h2{font-size:clamp(24px,3vw,32px)}
.ab-do .intro p{color:var(--muted);margin-top:14px;max-width:34ch}
.ab-do ol{margin:0;padding:0;list-style:none;display:grid;gap:0}
.ab-do li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.ab-do li:last-child{border-bottom:1px solid var(--line)}
.ab-do .ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.ab-do h3{font-size:18px}
.ab-do p{color:var(--muted);font-size:15px;margin-top:4px;max-width:52ch}
@media (max-width:860px){.ab-do .wrap{grid-template-columns:1fr;gap:24px}}

.ab-why{padding-block:72px}
.ab-why .head{max-width:60ch;margin-bottom:40px}
.ab-why .head h2{font-size:clamp(24px,3vw,32px)}
.ab-why .head p{color:var(--muted);margin-top:12px}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.why-list > div{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;padding:26px 0;border-top:1px solid var(--line)}
.why-list b{font-family:var(--font-head);font-size:40px;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.why-list h3{font-size:17px}
.why-list p{color:var(--muted);font-size:15px;margin-top:6px;max-width:40ch}
@media (max-width:860px){.why-list{grid-template-columns:1fr}.why-list > div{grid-template-columns:92px 1fr}.why-list b{font-size:32px}}

.ab-time{padding-block:64px;background:var(--band)}
.ab-time h2{font-size:clamp(24px,3vw,32px);margin-bottom:32px}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.tl li{position:relative;padding-top:28px}
.tl li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--band)}
.tl time{display:block;font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:18px;font-variant-numeric:tabular-nums}
.tl b{display:block;margin-top:4px;font-size:16px}
.tl p{color:var(--muted);font-size:14px;margin-top:4px;max-width:28ch}
@media (max-width:860px){.tl{grid-template-columns:1fr;gap:0;padding-left:28px}.tl::before{left:7px;top:0;bottom:0;width:2px;height:auto}.tl li{padding:0 0 28px 0}.tl li::before{left:-28px;top:4px}}

.ab-team{padding-block:72px}
.ab-team .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.ab-team h2{font-size:clamp(24px,3vw,32px)}
.ab-team .intro p{color:var(--muted);margin-top:14px;max-width:36ch}
.team-list{display:grid;gap:0}
.team-list > div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.team-list > div:last-child{border-bottom:1px solid var(--line)}
.team-list h3{font-size:17px}
.team-list small{display:block;color:var(--muted);font-family:var(--font-head);font-size:12px;letter-spacing:.04em;margin-top:2px}
.team-list p{font-size:15px;color:var(--fg)}
.team-list p span{color:var(--muted)}
@media (max-width:860px){.ab-team .wrap{grid-template-columns:1fr;gap:24px}.team-list > div{grid-template-columns:1fr;gap:4px}}

.ab-cta{padding-block:64px;background:var(--accent-deep);color:#fff}
.ab-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ab-cta h2{color:#fff;font-size:clamp(22px,2.6vw,30px)}
.ab-cta p{opacity:.8;margin-top:6px}
.ab-cta .btn{background:#fff;color:var(--accent-deep)}

/* ---------- 공통: 서사형 하위 페이지 ---------- */
.pg-intro{padding-block:72px 48px}
.pg-intro .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:56px;align-items:end}
.pg-intro .eyebrow{display:block;margin-bottom:14px}
.pg-intro h1{font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.18}
.pg-intro h1 b{color:var(--accent);font-weight:700}
.pg-intro .lead{margin-top:22px;font-size:18px;color:var(--muted);max-width:52ch;line-height:1.75}
.pg-intro .aside{border-top:2px solid var(--fg);padding-top:14px;font-size:14px;color:var(--muted);display:grid;gap:10px}
.pg-intro .aside b{display:block;font-family:var(--font-head);font-size:30px;color:var(--fg);line-height:1.1;font-variant-numeric:tabular-nums}
@media (max-width:860px){.pg-intro .wrap{grid-template-columns:1fr;gap:28px}.pg-intro{padding-block:48px 32px}}

.rows{padding-block:56px}
.rows.band{background:var(--band)}
.rows .wrap>h2{font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.rows .wrap>p.sub{color:var(--muted);max-width:60ch;margin-bottom:28px}
.row{display:grid;grid-template-columns:260px 1fr;gap:24px 48px;padding:28px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row h3{font-size:19px}
.row .en{display:block;color:var(--accent);font-family:var(--font-head);font-size:12px;letter-spacing:.06em;margin-top:4px;text-transform:uppercase}
.row .desc{color:var(--muted);font-size:15px;margin-top:8px;max-width:36ch}
.row .body p{font-size:15px;max-width:62ch;color:var(--fg)}
.row .body p+p{margin-top:10px}
.inline{display:flex;flex-wrap:wrap;gap:8px 0;margin:0;padding:0;list-style:none}
.inline li{font-size:15px}
.inline li:not(:last-child)::after{content:"·";color:var(--line);margin:0 12px}
.inline.muted li{color:var(--muted)}
@media (max-width:860px){.row{grid-template-columns:1fr;gap:10px;padding:22px 0}}

.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:"0" counter(s);font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.steps h3{font-size:18px}
.steps p{color:var(--muted);font-size:15px;margin-top:4px;max-width:60ch}

/* 사업 실적: 연도별 목록 */
.yr{display:grid;grid-template-columns:160px 1fr;gap:16px 48px;padding:32px 0;border-top:1px solid var(--line)}
.yr:last-child{border-bottom:1px solid var(--line)}
.yr .y{font-family:var(--font-head);font-size:34px;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.yr .y small{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:8px;font-family:var(--font-body)}
.yr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.yr li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px;align-items:baseline}
.yr li .m{font-family:var(--font-head);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.yr li b{font-weight:700}
.yr li span.t{color:var(--muted)}
@media (max-width:860px){.yr{grid-template-columns:1fr;gap:10px}.yr .y small{display:inline;margin-left:10px}.yr ul{grid-template-columns:1fr}}

/* 문의 */
.ct{padding-block:48px 72px}
.ct .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ct .big{font-family:var(--font-head);font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--accent);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ct .lbl{font-size:13px;color:var(--muted);margin-top:22px}
.ct .val{font-size:18px;margin-top:4px}
.ct .mail a{font-size:22px;font-weight:600;color:var(--accent);text-decoration:none}
.ct .mail a:hover{text-decoration:underline}
.ct .copy button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:6px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer;margin-left:8px}
.ct h2{font-size:22px;margin-bottom:12px}
.ct ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px;line-height:1.9}
.ct .maplink{display:inline-block;margin-top:12px;font-size:14px;color:var(--accent);font-weight:700}
@media (max-width:860px){.ct .wrap{grid-template-columns:1fr;gap:36px}}

/* ---------- 반응형 보강 (마지막에 로드되어 앞선 규칙을 덮어씀) ---------- */
/* 공통: 섹션 여백과 본문 글자 크기를 화면 폭에 맞춰 부드럽게 */
.sec{padding-block:clamp(44px,7vw,72px)}
.rows{padding-block:clamp(36px,6vw,56px)}
.pg-intro,.ab-intro{padding-block:clamp(40px,7vw,72px) clamp(28px,5vw,56px)}
.ab-do,.ab-time,.ab-cta{padding-block:clamp(40px,6.5vw,64px)}
.ab-why,.ab-team{padding-block:clamp(44px,7vw,72px)}
.ct{padding-block:clamp(32px,5vw,48px) clamp(44px,7vw,72px)}
img,svg{max-width:100%;height:auto}
.wrap{padding-left:max(clamp(16px,4vw,32px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,32px),env(safe-area-inset-right,0px))}

/* 카드 격자: 고정 열 수 대신 폭에 따라 자동으로 열이 줄어듦 (태블릿에서 2~3열, 폰에서 1열) */
.c-cap{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.quick{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media (max-width:860px){.c-cap{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.quick{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}

/* 태블릿(641~860px): 라벨+본문 2열 유지, 폰에서만 1열 */
@media (max-width:860px) and (min-width:641px){
  .row{grid-template-columns:180px 1fr;gap:16px 28px;padding:24px 0}
  .pg-intro .wrap{grid-template-columns:1fr;gap:24px}
  .pg-intro .aside{display:flex;gap:40px;border-top:0;padding-top:0}
  .pg-intro .aside>div{border-top:2px solid var(--fg);padding-top:12px;flex:1}
  .why-list{grid-template-columns:1fr 1fr;gap:0 32px}
  .tl{grid-template-columns:1fr 1fr;gap:24px 32px;padding-left:0}
  .tl::before{display:none}
  .tl li{padding:28px 0 0 0}.tl li::before{left:0;top:2px}
  .team-list > div{grid-template-columns:150px 1fr}
}

/* 폰(≤640px) */
@media (max-width:640px){
  body{font-size:15.5px}
  h2{font-size:clamp(24px,6.5vw,30px)}
  .c-hero{padding-block:40px 36px}
  .c-hero h1{font-size:clamp(30px,8.6vw,38px)}
  .c-hero .lead{font-size:16px}
  .c-hero .cta .btn{flex:1 1 auto;justify-content:center}
  .mono{font-size:12px}
  /* 터미널 패널: 글자를 줄이고, 줄바꿈 시 값이 라벨 아래로 들여써지게 */
  .term{padding:14px 14px;font-size:12px;line-height:1.75;border-radius:12px}
  .term > div:not(.bar){padding-left:12ch;text-indent:-12ch}
  .term .ok{white-space:nowrap}
  .c-strip .wrap{gap:6px 18px;font-size:11.5px;justify-content:flex-start}
  .c-cap div{padding:18px}
  .quick a{padding:20px 18px}
  .pg-intro h1,.ab-intro h1{font-size:clamp(28px,8vw,36px)}
  .pg-intro .lead,.ab-intro .lead{font-size:16px}
  .pg-intro .aside{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:0;padding-top:0}
  .pg-intro .aside>div{border-top:2px solid var(--fg);padding-top:10px}
  .pg-intro .aside b{font-size:26px}
  .facts div{grid-template-columns:64px 1fr}
  .why-list > div{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .why-list b{font-size:30px}
  .ab-do li{grid-template-columns:40px 1fr;gap:14px}
  .ab-do .ico{width:40px;height:40px}
  .ab-cta .wrap{flex-direction:column;align-items:flex-start}
  .ab-cta .btn{width:100%;justify-content:center}
  .row{gap:8px;padding:20px 0}
  .row .desc{max-width:none}
  .inline{gap:6px 0}
  .inline li{font-size:14.5px}
  .inline li:not(:last-child)::after{margin:0 9px}
  .steps li{grid-template-columns:48px 1fr;gap:14px;padding:18px 0}
  .steps li::before{font-size:22px}
  .ct .big{font-size:clamp(28px,8vw,36px)}
  .ct .val{font-size:17px}
  .ct .copy button{margin-left:6px}
  footer .wrap{flex-direction:column;gap:6px}
  .nav a{padding:14px 10px;font-size:17px}
}

/* 아주 작은 폰(≤380px) */
@media (max-width:380px){
  .c-hero h1{font-size:28px}
  .term{font-size:11px}
  .term > div:not(.bar){padding-left:11ch;text-indent:-11ch}
  .pg-intro .aside{grid-template-columns:1fr}
  .brand{font-size:15px}
}

/* 가로로 눕힌 폰: 히어로 높이만 줄임 */
@media (max-height:480px) and (orientation:landscape){
  .c-hero{padding-block:32px}
}

/* 고객사 이름 링크 */
.inline li a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .15s,border-color .15s}
.inline li a:hover,.inline li a:focus-visible{color:var(--accent);border-color:var(--accent)}

/* 언어 전환(한국어/EN) */
.nav a.lang{margin-left:8px;border:1px solid var(--line);font-family:var(--font-head);font-weight:600;letter-spacing:.02em}
@media (max-width:760px){.nav a.lang{margin-left:0}}
/* 영문 페이지 본문 글꼴 */
html[lang="en"]{--font-body:"IBM Plex Sans","Noto Sans KR",-apple-system,sans-serif}

/* ===== 마우스 올림 효과 (2026-10-15 추가) =====
   마우스가 있는 기기에서만 동작하고, '동작 줄이기' 설정을 켠 방문자에게는 움직임 없이 색만 바뀝니다. */
.btn,.c-cap div,.quick a,.ab-do li,.ab-do .ico,.why-list > div,.why-list b,.tl li::before,.tl time,
.team-list > div,.steps li,.rows .row,.c-strip span,.brand img,.nav a,.facts div,.pg-intro .aside > div,.copy button{
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease}
@media (hover:hover){
  /* 버튼: 살짝 떠오르며 그림자 */
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,147,211,.28)}
  .btn-primary:hover{filter:brightness(1.08)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  .c-hero .btn-ghost:hover{border-color:var(--brand-glow);color:#fff;background:rgba(255,255,255,.06)}
  .ab-cta .btn:hover{background:var(--brand-glow);color:var(--brand-navy)}
  /* 홈 서비스 카드 3개 */
  .c-cap div:hover{transform:translateY(-4px);border-top-color:var(--accent);box-shadow:var(--shadow)}
  .c-cap div:hover h3{color:var(--accent)}
  /* 홈 바로가기 카드 */
  .quick a:hover{transform:translateY(-5px) scale(1.015);box-shadow:var(--shadow);background:var(--card-tint)}
  .quick a:hover h3{color:var(--accent)}
  .quick .more{display:inline-block;transition:transform .22s ease}
  .quick a:hover .more{transform:translateX(6px)}
  /* 제품명 띠 */
  .c-strip span:hover{color:#fff}
  /* 로고 */
  .brand:hover img{transform:scale(1.08) rotate(-3deg)}
  /* 회사소개: 하는 일 */
  .ab-do li:hover{background:var(--card);box-shadow:-14px 0 0 var(--card),14px 0 0 var(--card)}
  .ab-do li:hover .ico{transform:scale(1.12);background:var(--accent);color:#fff}
  .ab-do li:hover h3{color:var(--accent)}
  /* 회사소개: 강점 숫자 */
  .why-list > div:hover b{transform:scale(1.12)}
  .why-list b{display:inline-block;transform-origin:left center}
  .why-list > div:hover h3{color:var(--accent)}
  /* 회사소개: 연혁 */
  .tl li:hover::before{transform:scale(1.35)}
  .tl li:hover b{color:var(--accent)}
  /* 회사소개: 조직 */
  .team-list > div:hover{background:var(--band);box-shadow:-14px 0 0 var(--band),14px 0 0 var(--band)}
  .team-list > div:hover h3{color:var(--accent)}
  /* 회사 정보 표 */
  .facts div:hover{background:var(--band)}
  /* 서비스·협력사 줄 */
  .rows .row:hover h3{color:var(--accent)}
  .steps li:hover{transform:translateX(6px)}
  .steps li:hover h3{color:var(--accent)}
  .pg-intro .aside > div:hover b{color:var(--accent)}
  /* 고객사 이름 링크 */
  .inline li a{display:inline-block;transition:color .2s ease,border-color .2s ease,transform .2s ease}
  .inline li a:hover{transform:translateY(-2px)}
  /* 복사 버튼 */
  .copy button:hover{border-color:var(--accent);color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.c-cap div:hover,.quick a:hover,.quick a:hover .more,.brand:hover img,.ab-do li:hover .ico,
  .why-list > div:hover b,.tl li:hover::before,.steps li:hover,.inline li a:hover{transform:none}
}

/* ===== 문의 폼 ===== */
.ct-form{padding-block:56px 80px;background:var(--band)}
.ct-form .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.ct-form h2{font-size:clamp(22px,2.6vw,28px)}
.ct-form .head p{color:var(--muted);margin-top:10px;font-size:15px;max-width:36ch}
.ct-form form{display:grid;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.ct-form .f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-form label{display:grid;gap:6px;font-size:14px;font-weight:500}
.ct-form .req{color:var(--accent);font-size:12px;font-weight:700;margin-left:4px}
.ct-form .opt{color:var(--muted);font-size:12px;font-weight:400;margin-left:4px}
.ct-form input,.ct-form select,.ct-form textarea{font:inherit;font-size:15px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;transition:border-color .2s,box-shadow .2s}
.ct-form textarea{resize:vertical;min-height:140px}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ct-form .consent{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.ct-form .consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--accent)}
.ct-form .consent small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;line-height:1.6;margin-top:4px}
.ct-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ct-form button[disabled]{opacity:.6;cursor:wait}
.ct-form .btn{border:0;cursor:pointer;font-family:inherit}
.ct-form .fmsg{font-size:14px;margin:0}
.ct-form .fmsg.ok{color:#15803d;font-weight:600}
.ct-form .fmsg.bad{color:#dc2626;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-form .fmsg.ok{color:#4ade80}:root:not([data-theme="light"]) .ct-form .fmsg.bad{color:#f87171}}
@media (max-width:860px){.ct-form .wrap{grid-template-columns:1fr;gap:24px}.ct-form .f2{grid-template-columns:1fr}.ct-form form{padding:20px}}

/* 문의 페이지 첫 화면 그림: 함께 고민하는 두 말풍선 */
.ct-art{justify-self:start;width:100%;max-width:280px;color:var(--fg)}
.ct-art svg{display:block;width:100%;height:auto}
.ct-art .b1{fill:var(--card);stroke:var(--muted)}
.ct-art .b2{fill:var(--accent-soft);stroke:var(--accent)}
.ct-art .q{fill:var(--muted)}
.ct-art .ic{stroke:var(--accent)}
@media (max-width:860px){.ct-art{justify-self:start;max-width:200px}}
.pg-intro .wrap:has(.ct-art){grid-template-columns:auto auto;justify-content:start;gap:80px;align-items:center}
@media (max-width:860px){.pg-intro .wrap:has(.ct-art){grid-template-columns:1fr;gap:28px}}