/* 회사소개(크리니티 소개 + 연혁 통합) 페이지 전용 스타일 — 2026.10 리뉴얼 */

/* [시안 A] 라이트 · 토스 정제 — DESIGN 1.md 기반, 메인페이지(2026.10.06)와 톤 맞춤
   · 포인트 컬러: 메인과 같은 크리니티 블루 #0085f5 (DESIGN 1의 #0ea5e9 대신 — 메인 '전체 고객사 보기'·메뉴 hover 색과 통일)
   · 반경 8px(버튼·칩) / 카드 16px(메인 제품카드 20·16px와 맞춤) · solid 메뉴 · elevated 카드 · compact · 다크모드 */
:root{
  --primary:#0085f5; --primary-h:#006ecb; --on-primary:#fff; --weak-bg:#e8f3ff; --weak-fg:#0067c2;
  --fg:#191f28; --title:#111; --body:#4e5968; --muted:#8b95a1; --desc:#777;
  --canvas:#fff; --soft:#f7f8fa; --surface:#f2f4f6; --card:#fff; --border:#e5e8eb; --line:#dfdfdf;
  --shadow:0 1px 2px rgba(17,24,39,.05),0 6px 18px rgba(17,24,39,.06);
  --shadow-h:0 2px 4px rgba(17,24,39,.06),0 14px 30px rgba(0,133,245,.12);
  --award:#c26a00; --award-bg:#fff3e0; --cert:#0f8a5f; --cert-bg:#e6f6ee; --launch:#0067c2; --launch-bg:#e8f3ff; --biz:#5b6672; --biz-bg:#eef1f4;
  --ft:#1f2329; --ft-fg:#c9ced4;
  --logo-f:none; --r:8px; --rc:16px;
  --font:"Pretendard Variable","Pretendard","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic",sans-serif;
  --num:"Pretendard Variable","Pretendard",system-ui,sans-serif;
}
:where(#cp),:where(#cp) *,:where(#cp) *::before,:where(#cp) *::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:70px}
#cp{background:var(--canvas);text-align:left;color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
:where(#cp) a{display:inline;width:auto;height:auto;color:inherit;text-decoration:none} :where(#cp) img{max-width:100%;display:block}
:where(#cp) :is(h1,h2,h3,h4,p){margin:0} :where(#cp) :is(h1,h2,h3){text-wrap:balance}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.w{max-width:1280px;margin:0 auto;padding-inline:40px}
@media(max-width:700px){.w{padding-inline:16px}}
.burger{display:none;width:28px;height:20px;margin-left:auto;position:relative;border:0;background:none;padding:0;cursor:pointer}
.burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--fg)}.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:18px}
@media(max-width:860px){.hd-in{height:56px;gap:20px;padding-inline:16px}.burger{display:block}}
.crumb{font-size:14px;color:rgba(255,255,255,.72);display:flex;gap:8px}
@media(max-width:700px){.vis{margin:0 12px;border-radius:12px;min-height:220px}}
/* 서브 메뉴 (기존 #lnb 역할) */
.lnb{position:sticky;top:80px;z-index:40;background:var(--canvas);border-bottom:1px solid var(--border);margin-top:24px}
.lnb-in{max-width:1280px;margin:0 auto;padding-inline:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.lnb-tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:10px}
.lnb-tabs a{height:36px;padding:0 16px;border-radius:var(--r);display:inline-flex;align-items:center;font-size:15px;font-weight:600;color:var(--body);transition:background .2s,color .2s}
.lnb-tabs a:hover{color:var(--fg)}
.lnb-tabs a[aria-current]{background:var(--card);color:var(--fg);box-shadow:var(--shadow)}
.lnb-anc{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.lnb-anc a{padding:8px 12px;border-radius:var(--r);font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}
.lnb-anc a:hover{color:var(--fg);background:var(--surface)}
.lnb-anc a.on{color:var(--primary);font-weight:700}
@media(max-width:860px){.lnb{top:56px}.lnb-in{padding-inline:16px;height:auto;padding-block:10px;flex-direction:column;align-items:stretch;gap:8px}.lnb-tabs a{flex:1;justify-content:center}}
/* 섹션 제목: 메인 .secTit 과 동일 규격 (32px/800, 설명 16px) */
.sec{padding-block:88px 96px}
.sec+.sec{border-top:1px solid var(--border)}
.sec.soft{background:var(--soft)}
.st{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.st h2{font-size:32px;font-weight:800;color:var(--title);letter-spacing:-.02em;line-height:1.35}
.st p{font-size:16px;color:var(--desc);margin-top:10px}
.more{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--primary);padding-bottom:4px;transition:color .2s}
.more::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.more:hover{color:var(--primary-h)}.more:hover::after{transform:translateX(3px) rotate(45deg)}
@media(max-width:700px){.sec{padding-block:56px 64px}.st h2{font-size:22px}.st p{font-size:13px;margin-top:6px}.more{font-size:13px}}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--rc);box-shadow:var(--shadow)}
/* 기업개요 */
.ov{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.ov h3{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--title)}
.ov h3 em{font-style:normal;color:var(--primary)}
.ov .copy{margin-top:20px;font-size:19px;color:var(--body);line-height:1.75}
.ov .copy b{color:var(--fg);font-weight:700}
.kpi{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.kpi div{display:flex;flex-direction:column}
.kpi strong{font-family:var(--num);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--title)}
.kpi strong small{font-size:18px;font-weight:700;margin-left:2px}
.kpi span{font-size:13px;color:var(--muted);margin-top:4px}
.facts{padding:8px 28px}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.facts dt,.facts dd{margin:0;padding:18px 0;border-bottom:1px solid var(--border)}
.facts dt{font-size:14px;color:var(--muted);padding-right:28px}
.facts dd{font-size:17px;font-weight:600}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
@media(max-width:900px){.ov{grid-template-columns:1fr;gap:32px}.ov h3{font-size:34px}.ov .copy{font-size:16px}.kpi{gap:28px}.kpi strong{font-size:28px}}
/* 인증내역 */
.marks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.mark{padding:28px 16px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.mark:hover{transform:translateY(-3px);box-shadow:var(--shadow-h);border-color:var(--primary)}
.mark img{width:78px;height:auto;filter:var(--logo-f)}
.mark p{font-size:15px;font-weight:600;line-height:1.45}
.docs-h{display:flex;justify-content:space-between;align-items:baseline;margin:48px 0 16px;gap:12px}
.docs-h h3{font-size:18px;font-weight:700}
.docs-h span{font-size:13px;color:var(--muted)}
.docs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.docb{all:unset;cursor:zoom-in;display:flex;flex-direction:column;gap:10px;text-align:center}
.docb .doc{border-radius:var(--r);border:1px solid var(--border);background-color:#fff;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.docb:hover .doc{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.docb:focus-visible .doc{outline:2px solid var(--primary);outline-offset:2px}
.docb span{font-size:13px;color:var(--body);font-weight:500}
@media(max-width:1000px){.marks{grid-template-columns:repeat(3,minmax(0,1fr))}.docs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.marks{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mark{padding:16px 6px 14px;gap:8px}.mark img{width:52px}.mark p{font-size:12px}
  .docs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-16px;padding:4px 16px 8px}.docb{flex:0 0 112px;scroll-snap-align:start}}
/* 핵심가치 */
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.val{overflow:hidden;display:flex;flex-direction:column}
.val .ph{aspect-ratio:16/10;background:#223 center 30%/cover no-repeat;position:relative}
.val .ph span{position:absolute;left:20px;bottom:16px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#fff;opacity:.9}
.val .tx{padding:26px 28px 30px}
.val h3{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--title)}
.val p{margin-top:12px;font-size:16px;color:var(--body);line-height:1.8}
@media(max-width:900px){.vals{grid-template-columns:1fr}.val{flex-direction:row}.val .ph{aspect-ratio:auto;width:38%;min-height:180px}.val .tx{flex:1;padding:22px}.val h3{font-size:22px}.val p{font-size:15px}.val p br{display:none}}
/* 주요연혁 하이라이트 */
.hl{padding:36px 36px 30px;overflow-x:auto}
.hl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));min-width:900px;position:relative}
.hl ol::before{content:"";position:absolute;left:0;right:0;top:50px;height:2px;background:var(--border)}
.hl li{padding-right:20px}
.hl .y{font-family:var(--num);font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--title)}
.hl .dot{width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--primary);margin:10px 0 16px;position:relative}
.hl li:last-child .dot{background:var(--primary)}
.hl p{font-size:14px;color:var(--body);line-height:1.6}
.pl{flex:0 0 auto;display:block;overflow:hidden;text-indent:-9999px;white-space:nowrap;font-size:0;width:130px;height:35px;margin:0 30px;background-repeat:no-repeat;background-size:600% 300%}
.g1{background-image:url(/main/img/partner/mainPartner1.png)}.g2{background-image:url(/main/img/partner/mainPartner2.png)}
.g3{background-image:url(/main/img/partner/mainPartner3.png)}.g4{background-image:url(/main/img/partner/mainPartner4.png)}
.n1{background-position:0% 0%}.n2{background-position:20% 0%}.n3{background-position:40% 0%}.n4{background-position:60% 0%}.n5{background-position:80% 0%}.n6{background-position:100% 0%}.n7{background-position:0% 50%}.n8{background-position:20% 50%}.n9{background-position:40% 50%}.n10{background-position:60% 50%}.n11{background-position:80% 50%}.n12{background-position:100% 50%}.n13{background-position:0% 100%}.n14{background-position:20% 100%}.n15{background-position:40% 100%}.n16{background-position:60% 100%}.n17{background-position:80% 100%}.n18{background-position:100% 100%}
.pt-rows{display:flex;flex-direction:column;gap:22px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pt-row{overflow:hidden}.pt-track{display:flex;width:max-content}
.pt-set{display:flex;align-items:center}
.pt-l .pt-track{animation:ptL 70s linear infinite}.pt-r .pt-track{animation:ptR 70s linear infinite}
.pt-rows:hover .pt-track{animation-play-state:paused}
@keyframes ptL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ptR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:700px){.pl{width:100px;height:27px;margin:0 16px}.pt-rows{gap:14px}}
@media(prefers-reduced-motion:reduce){.pt-track{animation:none!important}}
.pl{filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}.pl:hover{filter:none;opacity:1}
.doc{display:block;aspect-ratio:141/200;background:url(img/prize.png) no-repeat;background-size:700% 100%}
.d1{background-position:0.0000% 0}.d2{background-position:16.6667% 0}.d3{background-position:33.3333% 0}.d4{background-position:50.0000% 0}.d5{background-position:66.6667% 0}.d6{background-position:83.3333% 0}.d7{background-position:100.0000% 0}
/* 회사연혁 */
.hx{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:28px}
.sum{display:flex;gap:36px}
.sum div{display:flex;flex-direction:column;align-items:flex-end}
.sum strong{font-family:var(--num);font-size:32px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--title)}
.sum span{font-size:13px;color:var(--muted)}
@media(max-width:700px){.hx{grid-template-columns:1fr}.sum div{align-items:flex-start}.sum{gap:24px}.sum strong{font-size:24px}}
.tool{position:sticky;top:140px;z-index:30;background:var(--canvas);padding-block:12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--card);color:var(--body);font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s,border-color .2s,color .2s,transform .1s}
.chip span{font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--muted);color:var(--fg)}.chip:active{transform:scale(.98)}
.chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.eras{display:flex;gap:2px;background:var(--surface);border-radius:10px;padding:4px;overflow-x:auto;scrollbar-width:none}
.eras a{height:30px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:600;color:var(--body);display:inline-flex;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.eras a:hover{background:var(--card);color:var(--fg)}
@media(max-width:860px){.tool{top:150px}}
.era{scroll-margin-top:210px}
.era[hidden],.yr[hidden],li[hidden]{display:none}
.era-h{font-size:14px;font-weight:700;color:var(--primary);letter-spacing:.04em;padding:44px 0 10px;border-bottom:2px solid var(--fg);font-variant-numeric:tabular-nums}
.yr{display:grid;grid-template-columns:200px 1fr;gap:32px;padding-block:26px;border-bottom:1px solid var(--border)}
.yr-y{font-family:var(--num);font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--title);font-variant-numeric:tabular-nums;position:sticky;top:220px;align-self:start}
.yr-n{display:block;font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:8px}
.yr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.yr li{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:baseline;padding:10px 14px;border-radius:var(--r);transition:background .2s}
.yr li:hover{background:var(--surface)}
.yr li p{font-size:16px;line-height:1.6}
.yr li.star p{font-weight:700}
.tag{font-size:12px;font-weight:700;padding:3px 0;border-radius:6px;text-align:center;white-space:nowrap}
.t-award{color:var(--award);background:var(--award-bg)}.t-cert{color:var(--cert);background:var(--cert-bg)}
.t-launch{color:var(--launch);background:var(--launch-bg)}.t-biz{color:var(--biz);background:var(--biz-bg)}
.empty{padding:60px 0;text-align:center;color:var(--muted)}
@media(max-width:700px){.yr{grid-template-columns:1fr;gap:12px;padding-block:22px}.yr-y{position:static;font-size:30px}.yr-n{display:inline;margin-left:8px}
  .yr li{grid-template-columns:64px 1fr;gap:12px;padding:8px 0}.yr li p{font-size:15px}.era{scroll-margin-top:260px}}
/* 인증서 보기 */
.dlg{border:0;padding:24px;border-radius:var(--rc);background:var(--card);color:var(--fg);box-shadow:var(--shadow-h);max-width:min(92vw,460px);width:100%}
.dlg::backdrop{background:rgba(8,12,18,.6)}
.dlg figure{margin:0}.dlg .doc{border-radius:var(--r);background-color:#fff;border:1px solid var(--border)}
.dlg figcaption{margin-top:12px;font-weight:700;text-align:center}
.dlg-x{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;border-radius:var(--r);background:var(--surface);color:var(--fg);font-size:20px;cursor:pointer}
@media(max-width:700px){.ft-in{padding:28px 16px 12px;gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ===== 시안 A2: 한 페이지 통합 구성 (개요 → 핵심가치 → 주요연혁 → 수상 및 인증 → 주요 고객사) ===== */
:root{--band:#0085f5;--band-2:#0071d1;--band-fg:#fff;--band-sub:rgba(255,255,255,.82)}
.ctr{text-align:center}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--primary);text-transform:uppercase}
.big{font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:1.35;color:var(--title);margin-top:14px}
.big b{font-weight:800}.big em{font-style:normal;font-weight:800;color:var(--primary)}
.intro{max-width:46em;margin:24px auto 0;font-size:18px;line-height:1.85;color:var(--body)}
.intro b{color:var(--fg)}
.facts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:2px solid var(--fg)}
.facts4 div{padding:22px 24px;border-bottom:1px solid var(--border);text-align:left}
.facts4 div+div{border-left:1px solid var(--border)}
.facts4 dt{font-size:13px;color:var(--muted)}.facts4 dd{margin:6px 0 0;font-size:17px;font-weight:700;line-height:1.45}
@media(max-width:900px){.big{font-size:28px}.intro{font-size:16px;text-align:left}.facts4{grid-template-columns:1fr 1fr}.facts4 div:nth-child(3){border-left:0}}
/* 개요 히어로 (메인 .headWrap / .slideEl 규격) */
.hero{position:relative;margin:0 20px;min-height:max(620px,calc((100vw - 40px)*.416));border-radius:16px;overflow:hidden;background:#05070d;color:#fff;display:flex;flex-direction:column;justify-content:center}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(3,6,15,.55) 0%,rgba(3,6,15,.38) 70%),linear-gradient(180deg,rgba(3,6,15,0) 55%,rgba(3,6,15,.6))}
.hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:96px 20px 150px;text-align:center}
.hero-crumb{position:absolute;left:0;right:0;top:28px;font-size:14px;color:rgba(255,255,255,.7)}
.hero-eye{font-size:14px;font-weight:800;letter-spacing:.24em;color:#7cc4ff}
.hero-t{margin-top:18px;font-size:56px;font-weight:700;line-height:1.3;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-l2{margin-top:20px;font-size:22px;font-weight:500;opacity:.95;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-p{margin:16px auto 0;max-width:44em;font-size:17px;line-height:1.8;color:rgba(255,255,255,.8)}
.hero-facts{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;margin:0;display:grid;grid-template-columns:1fr 1fr 1fr 2fr;border-radius:12px;background:rgba(10,18,32,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);max-width:1200px;margin-inline:auto}
.hero-facts div{padding:18px 24px;min-width:0}
.hero-facts div+div{border-left:1px solid rgba(255,255,255,.12)}
.hero-facts dt{font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.62)}
.hero-facts dd{margin:4px 0 0;font-size:16px;font-weight:700;color:#fff;line-height:1.45}
.lnb{margin-top:16px}
@media(max-width:900px){.hero{margin:0 12px;border-radius:12px;min-height:0}.hero-in{padding:64px 18px 28px}.hero-crumb{top:18px;font-size:12px}
  .hero-t{font-size:30px}.hero-l2{font-size:17px;margin-top:12px}.hero-p{font-size:14px}.hero-p br{display:none}
  .hero-facts{position:relative;left:auto;right:auto;bottom:auto;margin:0 12px 12px;grid-template-columns:1fr 1fr}
  .hero-facts div:nth-child(3){border-left:0}.hero-facts div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}.hero-facts div{padding:14px 16px}.hero-facts dd{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-v{display:none}.hero{background:#05070d url(/main/video/slide1.jpg) center/cover}}
/* ===== 상단: 토스 회사소개 구성 ===== */
.th{position:relative;height:520px;overflow:hidden;background:linear-gradient(100deg,#fff 0%,#fff 42%,#f4f9ff 72%,#eaf4ff 100%)}
.th-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:120px}
/* 글자 크기: 메인 비주얼(.slideEl line1/line2)과 동일 — PC 56/22, 845~1024px 34/14, 844px 이하 26/14 */
.th-t{font-size:56px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--title)}
.th-s{margin-top:22px;font-size:22px;font-weight:400;line-height:1.5;color:var(--body)}
.tv{padding-block:33px 120px}
.tv-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-left:20px}
.tv-lab{font-size:16px;font-weight:500;color:var(--body);letter-spacing:-.02em}
.tv-t{font-size:20px;font-weight:700;line-height:1.48;letter-spacing:-.02em;color:var(--title)}
.tv-body p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--body)}
@media(max-width:700px){.tv-body p br{display:none}}
.tv-imgs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;margin:100px 0 0}
.vc{position:relative;border-radius:16px;overflow:hidden}
.vc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,28,0) 30%,rgba(6,14,28,.55) 60%,rgba(6,14,28,.85) 100%)}
.vc img{display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vc:hover img{transform:scale(1.04)}
/* 마우스가 있는 기기: 평소엔 이름만, 올리면(또는 키보드 포커스) 문구가 아래에서 올라옴. 터치 기기는 항상 표시 */
@media(hover:hover) and (pointer:fine){
  .vc::after{background:linear-gradient(180deg,rgba(6,14,28,0) 45%,rgba(6,14,28,.7) 100%);transition:background .45s}
  .vc:hover::after,.vc:focus-within::after,.vc:focus::after{background:linear-gradient(180deg,rgba(6,14,28,.1) 15%,rgba(6,14,28,.6) 50%,rgba(6,14,28,.9) 100%)}
  .vc .vc-more{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(12px);transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
  .vc .vc-more>div{overflow:hidden}
  .vc:hover .vc-more,.vc:focus .vc-more,.vc:focus-within .vc-more{grid-template-rows:1fr;opacity:1;transform:none}
  .vc h3{font-size:40px;transition:font-size .45s}
  .vc:hover h3,.vc:focus h3{font-size:32px}
}
.vc:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.vc .vc-more,.vc h3,.vc::after{transition:none!important}}
.vc-tx{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:28px 28px 30px;color:#fff}
.vc-en{font-size:12px;font-weight:700;letter-spacing:.18em;color:#9ad0ff}
.vc h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.vc-l{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.28);font-size:17px;font-weight:600;line-height:1.45}
.vc-d{margin-top:8px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.78)}
.tv-imgs img{width:100%;aspect-ratio:389/451;object-fit:cover;border-radius:16px;background:var(--surface)}
@media(max-width:1024px){.th{height:auto;min-height:440px}.th-in{min-height:440px;padding-bottom:80px}.th-t{font-size:34px}.th-s{font-size:15px}}
@media(max-width:700px){.th{min-height:360px}.th canvas{width:100%;opacity:.35}.th-in{padding-top:100px;padding-bottom:48px;min-height:360px}
  .th-t{font-size:26px}.th-s{font-size:14px;margin-top:12px}
  .tv{padding-block:40px 64px}.tv-row{grid-template-columns:1fr;gap:10px;padding-left:0}.tv-t{font-size:19px}
  .tv-imgs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:40px -16px 0;padding:0 16px}.vc{flex:0 0 80%;scroll-snap-align:start;border-radius:12px}.vc-tx{padding:20px}.vc h3{font-size:26px}.vc-l{font-size:15px}.vc-d{font-size:13px}}
/* 히어로 인터랙션 영역 */
.fx{position:absolute;inset:0;z-index:0}
.th .fx-cv{position:absolute;inset:0;left:0;right:auto;width:100%;height:100%;display:block;opacity:1}
.th-in{pointer-events:none}.th-in *{pointer-events:auto}
.fx-3d{position:absolute;inset:0;perspective:900px}
.fx-s{position:absolute;transform-style:preserve-3d;will-change:transform;display:grid;place-items:center}
.fx-s>svg{width:44%;height:44%;filter:drop-shadow(0 2px 4px rgba(0,40,90,.25));animation:fxBob 6s ease-in-out infinite;animation-delay:inherit}
.fx-tile{border-radius:28%;background:linear-gradient(145deg,#4fb2ff 0%,#0085f5 55%,#0062c4 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -6px 14px rgba(0,40,110,.35),0 18px 36px rgba(0,98,196,.28)}
.fx-ball{border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0%,#cfe7ff 22%,#6fb8ff 55%,#0085f5 100%);box-shadow:0 14px 28px rgba(0,98,196,.25)}
.fx-pill{border-radius:999px;background:linear-gradient(180deg,#eaf4ff,#b9dbff);box-shadow:inset 0 2px 0 #fff,0 12px 24px rgba(0,98,196,.18)}
.fx-ring{border-radius:50%;border:14px solid #8cc8ff;box-shadow:0 10px 24px rgba(0,98,196,.18),inset 0 2px 4px rgba(0,0,0,.08)}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:700px){.fx-3d{opacity:.55}.fx-s{scale:.6}}
@media(prefers-reduced-motion:reduce){.fx-s>svg{animation:none}}
/* 메인 문구 등장: 토스처럼 단어가 하나씩 아래에서 올라오며 나타남 (JS가 단어를 나눔, HTML 원문은 그대로라 검색에 영향 없음) */
.wd{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(4px);animation:wdIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 150ms)}
@keyframes wdIn{to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.wd{animation:none;opacity:1;transform:none;filter:none}}
/* 세로 페이지 내비: 넓은 화면(1600px 이상)에서 본문 왼쪽 여백에 고정, 히어로를 지나면 나타남 */
.snav{display:none}
@media(min-width:1600px){
  .lnb{display:none}
  .snav{display:block;position:fixed;z-index:30;top:50%;left:max(24px,calc((100vw - 1280px)/2 - 150px));transform:translate(-8px,-50%);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  .snav.show{opacity:1;transform:translate(0,-50%);pointer-events:auto}
  .snav ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:4px}
  .snav a{position:relative;display:block;padding:7px 0;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s}
  .snav a::before{content:"";position:absolute;left:-16px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--primary);transform:scaleY(0);transition:transform .25s}
  .snav a:hover{color:var(--fg)}
  .snav a.on{color:var(--primary);font-weight:700}.snav a.on::before{transform:scaleY(1)}
}
@media(min-width:1600px) and (prefers-reduced-motion:reduce){.snav{transition:none}}
/* About Us (기업개요): Vision 과 같은 좌 라벨 / 우 본문 구성, 밝은·어두운 두 시안 */
.ab{padding-block:96px 104px;--ab-bg:var(--canvas);--ab-fg:var(--title);--ab-body:var(--body);--ab-mut:var(--muted);--ab-line:var(--border);--ab-card:var(--card);--ab-weak:var(--weak-bg);--ab-acc:var(--primary);background:var(--ab-bg);color:var(--ab-fg)}
.ab.dark{--ab-bg:#0b1322;--ab-fg:#f3f6fa;--ab-body:#b8c2cf;--ab-mut:#7f8b99;--ab-line:rgba(255,255,255,.1);--ab-card:rgba(255,255,255,.04);--ab-weak:rgba(58,166,255,.1);--ab-acc:#5cb3ff}
.ab .tv-lab{color:var(--ab-body)}
.ab-tag{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ab-fg)}
.ab-intro{margin-top:14px;font-size:16px;line-height:1.75;color:var(--ab-body);max-width:36em}
.ab-intro b{color:var(--ab-fg);font-weight:700}
.ab-dl{margin:40px 0 0;display:flex;flex-direction:column;gap:12px}
.ab-dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline}
.ab-dl dt{font-size:15px;font-weight:700;color:var(--ab-fg)}
.ab-dl dd{margin:0;font-size:15px;line-height:1.6;color:var(--ab-body)}
.ab-pg{margin-top:10px;padding-top:20px;border-top:1px solid var(--ab-line)}
.ab-pg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ab-pg li{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:baseline}
.ab-pg em{font-style:normal;font-size:13px;font-weight:700;color:var(--ab-acc)}
@media(max-width:700px){.ab-pg li{grid-template-columns:1fr;gap:2px}}
.ab .ab-trin{margin-top:88px;max-width:none;background:var(--ab-card);border-color:var(--ab-line)}
.ab .ab-trin .trin-h{background:var(--ab-weak)}.ab .ab-trin .trin-h .ct{color:var(--ab-acc)}.ab .ab-trin .trin-h .tw{color:var(--ab-fg)}.ab .ab-trin .trin-h p{color:var(--ab-acc)}
.ab .ab-trin li+li{border-color:var(--ab-line)}.ab .ab-trin li b{color:var(--ab-fg)}.ab .ab-trin li b::first-letter{color:var(--ab-acc)}.ab .ab-trin li span{color:var(--ab-body)}
.ab.dark .ab-trin{box-shadow:none}
.ab-left{display:flex;flex-direction:column;gap:40px}
.ab-fig{margin:28px 0 0 -20px;max-width:560px}
/* About Us 그림: 겹친 알약형 궤도 + 가운데 Crinity + 영문 3개 + 사람 아이콘 3개 */
.ovr{position:relative;width:100%;aspect-ratio:884/449}
.ovr::before{content:"";position:absolute;inset:25% 30%;border-radius:999px;background:radial-gradient(closest-side,rgba(0,133,245,.35),rgba(0,133,245,0));filter:blur(18px)}
.ovr-ring{position:absolute;border-radius:999px;border:1px solid rgba(140,200,255,.22)}
.ovr-ring.r1{left:11%;right:17%;top:11%;bottom:10%;background:rgba(58,166,255,.03)}
.ovr-ring.r2{left:18%;right:24%;top:22%;bottom:21%;background:rgba(58,166,255,.06);border-color:rgba(140,200,255,.28)}
.ovr-ring.r3{left:27%;right:33%;top:35%;bottom:33%;background:rgba(58,166,255,.1);border-color:rgba(140,200,255,.35)}
.ovr-core{position:absolute;left:47%;top:51%;transform:translate(-50%,-50%);width:30%;max-width:190px;aspect-ratio:240/62;border-radius:999px;display:grid;place-items:center;background:radial-gradient(closest-side,rgba(255,255,255,.08),rgba(255,255,255,0))}
.ovr-core img{width:62%;height:auto;opacity:.92;filter:drop-shadow(0 0 12px rgba(124,196,255,.45))}
.tri-n{position:absolute;width:0;height:0;transition:transform 1.6s cubic-bezier(.16,.84,.3,1)}
/* 이름표 3개: 가운데 궤도 위 120° 간격 (좌상·우상·하단) */
.p1{left:21.9%;top:36.8%}.p3{left:72.1%;top:36.8%}.p2{left:47%;top:79.5%}
.b1{left:47%;top:11%}.b3{left:82.5%;top:57.4%}.b5{left:11.5%;top:57.4%}.b6{left:66%;top:85%}
.ovr-pill{position:absolute;translate:-50% -50%;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#eef5ff;font-size:13px;font-weight:600;animation:triBob 7s ease-in-out infinite}
.ovr-pill svg{width:14px;height:14px;color:#9ad0ff}
.p2 .ovr-pill{animation-delay:-2.3s}.p3 .ovr-pill{animation-delay:-4.6s}
.ovr-ic{position:absolute;translate:-50% -50%;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);animation:triBob 8s ease-in-out infinite}
.ovr-ic svg{width:52%;height:52%}
.b-blue{background:linear-gradient(145deg,#4fb2ff,#0067d6)}.b-sky{background:linear-gradient(145deg,#7cc8ff,#2b8ff0)}
.b-violet{background:linear-gradient(145deg,#a99cff,#5b49d6)}.b-teal{background:linear-gradient(145deg,#5fe6c8,#12957c)}
.b2 .ovr-ic,.b4 .ovr-ic{width:32px;height:32px}.b3 .ovr-ic{width:44px;height:44px}
.b2 .ovr-ic{animation-delay:-1.5s}.b3 .ovr-ic{animation-delay:-3s}.b4 .ovr-ic{animation-delay:-4.5s}.b5 .ovr-ic{animation-delay:-6s}.b6 .ovr-ic{animation-delay:-2.2s}
@keyframes triBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* 궤도 위를 빛줄기가 빙글빙글 그리며 지나감 (바깥: 반시계 → 가운데: 시계 → 안쪽: 반시계) */
.ovr-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ovr-trace rect{fill:none;stroke:#a8d6ff;stroke-opacity:.63;stroke-width:2;stroke-linecap:round;stroke-dasharray:16 84;filter:drop-shadow(0 0 6px rgba(124,196,255,.56))}
.ovr-trace .t1{animation:traceCCW 14s linear infinite}
.ovr-trace .t2{animation:traceCW 11s linear infinite;stroke-dasharray:12 88}
.ovr-trace .t3{animation:traceCCW 9s linear infinite;stroke-dasharray:18 82}
@keyframes traceCW{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes traceCCW{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
@media(prefers-reduced-motion:reduce){.ovr-pill,.ovr-ic,.ovr-trace rect{animation:none}.ovr-trace{display:none}.tri-n{transition:none}}
.ab-fig figcaption{margin-top:22px;display:flex;flex-direction:column;gap:4px}
.ab-fig figcaption b{font-size:18px;font-weight:800;color:var(--ab-fg)}
.ab-fig figcaption span{font-size:14px;color:var(--ab-body)}
@media(prefers-reduced-motion:reduce){.orb-spin,.orb,.orb-l{animation:none}}
@media(max-width:700px){.ab-left{gap:20px}.ab-fig{display:none!important}.ab-fig{max-width:300px;width:100%;margin:8px auto 0}.orb{left:-28px;top:-28px;width:56px;height:56px}}
@media(max-width:700px){.ab{padding-block:56px 64px}.ab-dl div{grid-template-columns:84px 1fr;gap:10px}.ab-intro br{display:none}.ab-trin{margin-top:48px}}
/* 스크롤 등장 효과 (js/page-fx.js 가 html 에 .rv-on 을 붙였을 때만 숨김 → 스크립트가 없으면 그대로 보임) */
.rv-on [data-rv]{opacity:0;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.3,1.4,.5,1),filter .8s ease;transition-delay:var(--rv-d,0ms)}
.rv-on [data-rv="up"]{translate:0 28px}
.rv-on [data-rv="pop"]{scale:.55}
.rv-on [data-rv="fade"]{filter:blur(6px)}
.rv-on [data-rv].rv-in{opacity:1;translate:0 0;scale:1;filter:none}
.rv-on [data-rv="line"]{opacity:1}
.rv-on .tri-n[data-rv]{transition:opacity .7s ease,scale .7s cubic-bezier(.3,1.4,.5,1),transform 1.6s cubic-bezier(.16,.84,.3,1);transition-delay:var(--rv-d,0ms),var(--rv-d,0ms),0ms}
.rv-on [data-rv="line"] ol::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .1s}
.rv-on [data-rv="line"].rv-in ol::before{transform:scaleX(1)}
/* 주요연혁: 토스 연혁 구성 (라벨 · 큰 제목 · 주요연혁 · 연대 탭 + 화살표 · 좌 요약/중 목록/우 이미지) */
.hs{border-top:0;padding-block:120px 120px}
.hs-lab{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--body)}
.hs-lab i{width:8px;height:8px;border-radius:50%;background:var(--fg)}
.hs-t{margin-top:18px;font-size:40px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title)}
.hs-ms{margin-top:48px;overflow-x:auto;scrollbar-width:none}
.hs-ms ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(130px,1fr));gap:0;min-width:1040px}
.hs-ms li{padding:18px 18px 4px 0;border-top:1px solid var(--border)}
.hs-ms li:first-child{border-top-color:var(--primary)}
.ms-y{display:block;font-size:20px;font-weight:700;color:var(--title);font-variant-numeric:tabular-nums}
.hs-ms li:first-child .ms-y{color:var(--primary)}
.hs-ms p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--body)}
.h-bar{margin-top:96px;display:flex;align-items:stretch;border-top:1px solid var(--border)}
.hs .htabs{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:0;margin:0;justify-content:stretch}
.hs .htabs button{height:auto;padding:24px 0 0;margin:-1px 0 0;border:0;border-top:2px solid transparent;text-align:left;font-size:20px;font-weight:600;color:#c9ced6;font-variant-numeric:tabular-nums;white-space:nowrap}
.hs .htabs button:hover{color:var(--body)}
.hs .htabs button[aria-selected="true"]{color:var(--title);border-top-color:var(--title)}
.h-arrows{display:flex;gap:8px;padding-top:18px}
.h-arr{width:40px;height:40px;border:0;background:none;border-radius:50%;color:var(--title);cursor:pointer;display:grid;place-items:center;transition:background .2s,opacity .2s}
.h-arr:hover{background:var(--surface)}.h-arr:disabled{opacity:.25;cursor:default;background:none}
.h-arr svg{width:24px;height:24px}
.hs .hpanel{max-width:none;margin:56px 0 0;display:grid;grid-template-columns:3fr 7fr;gap:24px;align-items:start}
.hs .hpanel[hidden]{display:none}
.hp-side{position:sticky;top:160px;display:flex;flex-direction:column;gap:28px}
.hp-head{font-size:20px;font-weight:700;line-height:1.55;color:var(--title)}
.hp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;max-width:720px}
.hi{display:flex;flex-direction:column;gap:4px}
.hi-y{font-size:16px;font-weight:700;color:#103d7c;font-variant-numeric:tabular-nums}
.hi-t{font-size:18px;font-weight:600;line-height:1.5;color:var(--title)}
.hi.star .hi-t{font-weight:800}
.hi-c{margin-left:10px;padding-left:10px;border-left:1px solid var(--border);font-size:13px;font-weight:500;color:var(--muted)}
.hp-img{border-radius:32px;overflow:hidden;aspect-ratio:384/500;max-width:330px;max-height:calc(100vh - 300px);background:var(--surface)}
.hp-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:1024px){.hs .hpanel{grid-template-columns:1fr 2fr}}
@media(max-width:700px){.hs{padding-block:72px}.hs-t{font-size:26px}.h-bar{margin-top:56px}.h-arrows{display:none}
  .hs .htabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:20px}.hs .htabs button{font-size:16px;padding-top:16px;flex:0 0 auto}
  .hs .hpanel{grid-template-columns:1fr;margin-top:32px;gap:24px}.hp-side{position:static}.hp-img{display:none}.hp-head{font-size:18px}.hi-t{font-size:16px}}
/* 수상 및 인증: 숫자 + 흐르는 인증서 갤러리 + 제품 인증 로고 */
.aw2{border-top:0;padding-block:120px 110px;background:var(--soft)}
.aw-stats{list-style:none;margin:56px 0 0;padding:0;display:flex;gap:72px;flex-wrap:wrap}
.aw-stat{display:flex;flex-direction:column;gap:6px}
.aw-stat strong{font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--title);font-variant-numeric:tabular-nums}
.aw-stat strong span{color:var(--primary)}
.aw-stat>span{font-size:16px;color:var(--body)}
.aw-gal{margin-top:56px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.aw-track{display:flex;gap:20px;width:max-content;padding:12px 0 20px;animation:awFlow 70s linear infinite}
.aw-gal:hover .aw-track,.aw-gal:focus-within .aw-track{animation-play-state:paused}
@keyframes awFlow{to{transform:translateX(calc(-50% - 10px))}}
/* 같은 7장을 4번 이어 붙여 화면 끝에 빈 곳 없이 계속 이어짐 */
.aw-card{all:unset;cursor:default;margin:0;position:relative;flex:0 0 150px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(17,24,39,.08);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.aw-card .doc{width:100%;border:0;border-radius:0;box-shadow:none;filter:grayscale(1);opacity:.55;transition:filter .35s,opacity .35s}
.aw-card:hover .doc,.aw-card:focus-visible .doc{filter:none;opacity:1}
.aw-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(17,24,39,.14)}
.aw-card:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.aw-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 10px 11px;display:flex;flex-direction:column;gap:2px;background:rgba(10,22,42,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.aw-card:hover .aw-cap,.aw-card:focus-visible .aw-cap{opacity:1;transform:none}
.aw-cap b{font-size:13px;font-weight:700;color:#fff}.aw-cap i{font-style:normal;font-size:11px;color:rgba(255,255,255,.82)}
.aw-logos{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}
.aw-logos li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;cursor:default}
/* 인증 로고: 원래 색 유지 — 마우스 오버 시 선명해지며 살짝 떠오르고 그림자 */
.aw-logos img{width:64px;height:64px;object-fit:contain;opacity:.85;margin-bottom:8px;transition:filter .3s,opacity .3s,transform .25s cubic-bezier(.2,0,.13,2)}
.aw-logos li:hover img{opacity:1;transform:translateY(-4px) scale(1.06);filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
/* 인증서·상장: 흐르지 않고 7장을 한 줄로 고정 */
.aw-gal{-webkit-mask-image:none;mask-image:none;overflow:visible}
.aw-track{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:20px;width:auto;animation:none}
.aw-card{flex:none;width:100%}
.rv-on .aw-card[data-rv]{transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;transition-delay:var(--rv-d,0ms),var(--rv-d,0ms),0ms,0ms}
@media(max-width:1024px){.aw-track{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.aw-gal{overflow-x:auto;margin-inline:-16px;scrollbar-width:none}.aw-gal::-webkit-scrollbar{display:none}.aw-track{display:flex;gap:12px;width:max-content;padding:8px 16px 16px}.aw-card{flex:0 0 120px;scroll-snap-align:start}}
/* 주요 고객사: 기존처럼 흐르는 로고 */
.cl .pt-rows{margin-top:56px}
.cl .pt-l .pt-track,.cl .pt-r .pt-track{animation-duration:140s}
@media(max-width:700px){.cl .pt-rows{margin-top:36px}}
/* 주요 고객사: 흐르지 않는 정돈된 로고 격자 + 더보기 */
.cl{padding-block:120px 130px}
.cl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cl-more{margin-bottom:10px;white-space:nowrap}
.cl-grid{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.cl-grid li{display:flex;align-items:center;justify-content:center;height:104px;background:var(--canvas);transition:background .3s}
.cl-grid li:hover{background:#f6faff}
.cl-grid .pl{margin:0;width:130px;height:35px}
.cl-grid li:hover .pl{filter:none;opacity:1}
@media(max-width:1024px){.cl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.cl{padding-block:72px}.cl-t{font-size:26px}.cl-head{flex-direction:column;align-items:flex-start;gap:0}.cl-more{order:2;margin:24px 0 0}
  .cl-head{display:grid}.cl-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px;border-radius:14px}.cl-grid li{height:72px}.cl-grid li:nth-child(n+13){display:none}.cl-grid .pl{width:92px;height:25px}}
/* 화면에는 안 보이고 검색엔진·스크린리더만 읽는 글자 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h2.ab-lab{margin:0}
/* Lenis 부드러운 스크롤 */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
/* 구역 메뉴: 상단 메뉴 바로 아래에 붙어 있다가 스크롤하면 위에 고정 */
.lnb{margin-top:0!important}
/* 모바일 핵심가치: 카드 3장을 한 화면에, 한 줄 설명도 카드 안에 (이름 높이 맞춤) */
@media(max-width:700px){
  .tv-imgs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:32px 0 0!important;padding:0!important;scroll-snap-type:none}
  .tv-imgs .vc{flex:none;border-radius:12px}
  .tv-imgs img{aspect-ratio:10/18;border-radius:12px}
  .vc::after,.vc:hover::after,.vc:focus-within::after{background:linear-gradient(180deg,rgba(6,14,28,0) 20%,rgba(6,14,28,.72) 45%,rgba(6,14,28,.92) 100%)!important}
  .vc-tx{top:40%;bottom:auto;padding:0 clamp(8px,2.6vw,16px)}
  .vc .vc-more{display:block!important;opacity:1!important;transform:none!important}
  .vc h3{font-size:clamp(17px,4.8vw,26px)!important}
  .vc-l{margin-top:8px;padding-top:8px;font-size:clamp(11.5px,3.1vw,15px);font-weight:600;line-height:1.45;word-break:keep-all}
  .vc-d{display:none}
}
@media(min-width:501px) and (max-width:700px){.tv-imgs img{aspect-ratio:2/3}}
/* 모바일 히어로: 글자를 키우고 위아래 빈 공간을 줄여 첫 화면을 꽉 차게 */
@media(max-width:700px){
  .th,.th-in{min-height:300px!important}
  .th-in{padding-top:56px!important;padding-bottom:44px!important}
  .th-t{font-size:clamp(28px,8vw,34px)!important;line-height:1.3}
  .th-s{font-size:16px!important;line-height:1.55;margin-top:14px!important}
}
/* PC 휠 구역 이동(html.snap-on, js/page-fx.js): 히어로·비전·기업개요가 각각 한 화면을 꽉 채움 */
html.snap-on .th,html.snap-on .th-in{height:auto;min-height:calc(100vh - var(--snap0,117px))}
html.snap-on .th-in{justify-content:center;padding-top:0;padding-bottom:40px}   /* 화면이 커져도 문구는 세로 가운데 */
html.snap-on #vision,html.snap-on #overview{min-height:calc(100vh - var(--snap1,61px));display:flex;flex-direction:column;justify-content:center}
html.snap-on #vision>.w,html.snap-on #overview>.w{width:100%}
html.snap-on .tv{padding-block:48px 56px}
html.snap-on .tv-imgs{margin-top:56px}
html.snap-on .tv-imgs img{aspect-ratio:auto;height:clamp(260px,calc(100vh - var(--snap1,61px) - 340px),451px)}  /* 낮은 화면에서는 카드 높이를 줄여 한 화면에 */
html.snap-on #overview{padding-block:56px}
/* 스크롤 안내: PC 휠 구역 이동 화면에서만, 한 번 스크롤하면 사라짐 */
.th-cue{display:none}
html.snap-on .th-cue{position:absolute;left:50%;bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;translate:-50% 0;color:#8b95a1;font-size:12px;font-weight:500;letter-spacing:.12em;text-decoration:none;transition:opacity .5s,color .2s}
html.snap-on .th-cue:hover{color:var(--primary)}
html.snap-on .th-cue svg{animation:cueBob 2.4s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
html.cue-off .th-cue{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.th-cue svg{animation:none}}
/* 히어로 아래쪽이 다음 구역(흰 배경)으로 은은하게 이어지도록 */
.th::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--canvas));pointer-events:none;z-index:0}
.th-in{z-index:2}
.sec.aw2,.aw2+.sec{border-top:0}
/* 인증 및 수상: 히어로와 같은 연한 파랑 톤, 위아래 경계 없이 이어짐 */
.aw2{background:radial-gradient(70% 60% at 85% 35%,#eaf4ff 0%,rgba(234,244,255,0) 70%),linear-gradient(180deg,var(--canvas) 0%,#f4f9ff 22%,#f4f9ff 78%,var(--canvas) 100%)}
.aw-logos b{font-size:14px;font-weight:700;color:var(--title)}
.aw-logos span{font-size:12px;line-height:1.5;color:var(--muted)}
@media(max-width:1100px){.aw-logos{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:32px}}
@media(max-width:700px){.aw2{padding-block:72px}.aw-stats{gap:32px;margin-top:36px}.aw-stat strong{font-size:38px}.aw-gal{margin-top:44px}.aw-card{flex-basis:120px;border-radius:14px}.aw-card .doc{filter:none;opacity:1}.aw-cap{opacity:1;transform:none;padding:22px 8px 8px}.aw-logos{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px}}
@media(prefers-reduced-motion:reduce){.aw-track{animation:none;overflow-x:auto}.aw-gal{overflow-x:auto}}
/* C + Trinity · 사업분야 */
.trin{margin:56px auto 0;max-width:1040px;display:grid;grid-template-columns:300px 1fr;gap:0;align-items:stretch;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--rc);box-shadow:var(--shadow);overflow:hidden}
.trin-h{padding:32px;background:var(--weak-bg);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;align-content:center}
.trin-h .ct{font-size:56px;font-weight:800;color:var(--primary);line-height:1}
.trin-h .plus{font-size:28px;font-weight:300;color:var(--muted)}
.trin-h .tw{font-size:36px;font-weight:800;letter-spacing:-.02em;color:var(--title)}
.trin-h p{flex-basis:100%;margin-top:10px;font-size:15px;font-weight:600;color:var(--weak-fg)}
.trin ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trin li{padding:30px 26px;display:flex;flex-direction:column;gap:10px}
.trin li+li{border-left:1px solid var(--border)}
.trin li b{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--title)}
.trin li b::first-letter{color:var(--primary);font-size:20px}
.trin li span{font-size:15px;color:var(--body);line-height:1.65}
.biz{margin-top:40px;text-align:left}
.biz h3{font-size:18px;font-weight:800;margin-bottom:14px}
.biz ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.biz li{padding:20px;border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.biz li b{font-size:16px;font-weight:800;color:var(--title);line-height:1.4}
.biz li span{font-size:13px;color:var(--body)}
.ms{margin-top:8px}.ms ol{grid-template-columns:repeat(8,minmax(120px,1fr));min-width:1000px}
.ms .y{font-size:24px}
.hsub{font-size:18px;font-weight:800;margin:56px 0 4px;text-align:center}
@media(max-width:900px){.trin{grid-template-columns:1fr}.trin ul{grid-template-columns:1fr}.trin li+li{border-left:0;border-top:1px solid var(--border)}.trin li{padding:20px 24px}.biz ul{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.biz ul{grid-template-columns:1fr}}
/* 핵심가치 밴드 */
.band{background:linear-gradient(180deg,var(--band),var(--band-2));color:var(--band-fg);padding-block:88px 96px;margin-inline:20px;border-radius:16px}
.band .eyebrow{color:rgba(255,255,255,.8)}
.band h2{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.band .lead2{margin-top:14px;font-size:17px;color:var(--band-sub)}
.circles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;position:relative}
.circles::before{content:"";position:absolute;left:16%;right:16%;top:110px;height:1px;background:rgba(255,255,255,.45)}
.cv{display:flex;flex-direction:column;align-items:center;text-align:center}
.cv .o{width:220px;height:220px;border-radius:50%;position:relative;overflow:hidden;background:#0d1a2e center 30%/cover no-repeat;border:2px solid rgba(255,255,255,.85);box-shadow:0 12px 30px rgba(0,30,70,.25)}
.cv .o::after{content:"";position:absolute;inset:0;background:rgba(0,60,130,.55)}
.cv .o{background-image:none!important;background:rgba(255,255,255,.1)}.cv .o::after{display:none}
.cv .o div{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cv .o svg{width:34px;height:34px}
.cv .o strong{font-size:30px;font-weight:800;letter-spacing:-.02em}
.cv .o span{font-size:11px;font-weight:700;letter-spacing:.18em;opacity:.85}
.cv p{margin-top:24px;font-size:16px;line-height:1.8;color:var(--band-sub)}
@media(max-width:900px){.band{margin-inline:12px;border-radius:12px;padding-block:56px 60px}.band h2{font-size:24px}.circles{grid-template-columns:1fr;gap:36px}.circles::before{display:none}.cv .o{width:180px;height:180px}}
/* 주요연혁: 연대 탭 */
.htabs{display:flex;justify-content:center;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;margin-top:8px}
.htabs button{flex:0 0 auto;height:52px;padding:0 22px;border:0;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;font-variant-numeric:tabular-nums;transition:color .2s,border-color .2s}
.htabs button:hover{color:var(--fg)}
.htabs button[aria-selected="true"]{color:var(--fg);border-color:var(--primary)}
.hpanel{max-width:1040px;margin:0 auto}
.hpanel[hidden]{display:none}
.hpanel .yr{grid-template-columns:150px 1fr}
.hpanel .yr-y{position:static;font-size:34px}
.hcta{text-align:center;margin-top:28px;font-size:14px;color:var(--muted)}
@media(max-width:700px){.htabs{justify-content:flex-start}.htabs button{padding:0 14px;font-size:14px}.hpanel .yr{grid-template-columns:1fr}.hpanel .yr-y{font-size:28px}}
/* 수상 및 인증 */
.aw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.awc{padding:24px 22px 22px;display:flex;flex-direction:column;gap:10px}
.awc .yy{font-size:13px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.awc h3{font-size:17px;font-weight:800;line-height:1.45;color:var(--title)}
.awc p{font-size:14px;color:var(--body);line-height:1.6}
.subh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:56px 0 18px}
.subh h3{font-size:20px;font-weight:800}.subh span{font-size:13px;color:var(--muted)}
.marks .mark small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:4px;line-height:1.5}
.docs2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px}
.docs2 .docb{gap:12px}
.docs2 .docb b{font-size:14px;font-weight:700;color:var(--fg)}
.docs2 .docb small{font-size:12px;color:var(--muted);line-height:1.5;margin-top:-6px}
@media(max-width:1000px){.aw{grid-template-columns:1fr 1fr}.docs2{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lnb-tabs{display:none}.lnb-in{justify-content:center}
@media(max-width:600px){.subh span{display:none}.aw{grid-template-columns:1fr}.docs2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 8px}.docs2 .docb{flex:0 0 120px;scroll-snap-align:start}}

/* ===== 사이트 공통 CSS(basic.css · supportBasic.css)와 함께 쓰기 위한 보정 ===== */
#header{height:56px!important;margin-bottom:0!important}            /* 기존 서브페이지 배너(366px) 없이 상단 메뉴 바만 */
:where(#cp) h1{position:relative;left:auto;top:auto;z-index:auto}   /* supportBasic.css 의 h1(로고용) 위치 지정 무력화 */
:where(#cp) :is(h1,h2,h3,h4){font-size:inherit;font-weight:inherit}
#cp{font-family:var(--font);color:var(--fg);font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* 상단 메뉴 바: 아래로 스크롤하면 숨고 위로 올리면 나타남 (js/page-fx.js 가 .hd-up / body.hd-shown 을 붙임) */
#header{position:sticky!important;top:0;z-index:1000;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#header.hd-up{transform:translateY(-100%)}
#cp .lnb{top:0;transition:top .35s cubic-bezier(.2,.7,.2,1)}           /* 가로 구역 메뉴: 메뉴 바가 숨으면 맨 위, 보이면 그 아래 */
body.hd-shown #cp .lnb{top:56px}
@media(prefers-reduced-motion:reduce){#header,#cp .lnb{transition:none}}
#cp .lnb a{display:inline-block}

/* ===== 2026.10.29 히어로 네이비 톤 (연파랑 그라데이션 대체) — 10.30 기업개요(.ab.dark)와 같은 색으로 ===== */
.th.th--navy{--th-bg:#0b1322;background:var(--th-bg)}
.th.th--navy::after{display:none}                      /* 아래 흰색으로 번지는 그라데이션 제거 */
.th.th--navy .th-t{color:#f3f6fa}
.th.th--navy .th-s{color:#b8c2cf}
html.snap-on .th.th--navy .th-cue{color:#9aa7b8}
html.snap-on .th.th--navy .th-cue:hover{color:#fff}
.th.th--navy a:focus-visible{outline-color:#fff}
/* 2026.10.29 인증 및 수상 배경 — 연파랑 그라데이션 → 연회색 단색 */
.aw2{background:var(--soft)}