/* ── 톤앤매너 시안 «mid» (2026-09-11) — 백색 중심 + 채도 상승 + 이공이공 20~30%
   원칙: 흰 바탕 55~60% 유지 · 색은 사진이 담당 · 액센트(브랜드 블루) 한 가지를 작은 면적으로 자주
        · 밝은 틴트 띠(mist) · 칠한 어두운 블록은 남색 숫자 밴드 하나 · 그라데이션은 CTA·활성 알약에만
   켜기: ?theme=mid  끄기: ?theme=off  (쿠키 7일) ── */
:root{
  --brand:#1a6aa8; --brand-hover:#155a90; --accent:#2f8fd6;
  --aqua:#dff0fa; --aqua-2:#f2f8fc; --mist:#eef5fa; --ground:#eef5fa;
  --line:#dde7f0; --line-2:#e8eff5; --ink:#1c2733;
  --grad:linear-gradient(90deg,#1a6aa8,#227bc0);
  --shadow-1:0 6px 16px rgba(23,58,99,.08); --shadow-2:0 12px 32px rgba(23,58,99,.12); --shadow-media:0 12px 32px rgba(23,58,99,.14);
}
/* 키커: 브랜드 블루, 대문자 트래킹 (가짜 이탤릭 제거) */
.plus-txt{font-style:normal;letter-spacing:.08em;text-transform:uppercase;font-size:.9375rem;color:var(--brand)}
.kicker,.kicker.lat{color:var(--brand)}
.cnt{font-style:normal;display:inline;font-size:inherit;color:inherit;margin:0}
/* 히어로: 채도 높은 사진(hero-7) + 흰 베일 축소 */
.hero-full .slide img{content:url(../img/hero-7.webp);object-position:60% 50%;filter:saturate(.8)}
@media(max-width:600px){.hero-full .slide img{content:url(../img/hero-7-m.webp);object-position:50% 50%}}
.hero-full .slide.light .shade{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 22%),linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%),linear-gradient(0deg,rgba(255,255,255,.18),transparent 40%)}
.hero-full .slide.light .big .bold{color:var(--brand)}
.hero-full .slide.light .lead{color:var(--ink)}
/* 사실 띠 → 남색 숫자 밴드(유일한 어두운 블록) + 하늘색 숫자 카운트업 */
.facts{background:linear-gradient(100deg,#12325a,#173a63);border:0;position:relative;overflow:hidden}
.facts::before{content:"";position:absolute;inset:0;background:none;pointer-events:none}
.facts-in{position:relative}
.fact{border-left:1px solid rgba(255,255,255,.12);padding:40px 12px 36px}
.fact:first-child{border-left:0}
.fact .ico{stroke:rgba(255,255,255,.7);width:28px;height:28px}
.fact b{color:#8fd0ea;font-family:var(--disp);font-size:2.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media(max-width:600px){.fact{padding:22px 8px 20px}.fact .ico{display:none}.fact b{font-size:1.75rem}}
.fact b i{font-style:normal;font-size:.5em;font-weight:600;margin-left:3px;color:#fff}
.fact span{color:rgba(255,255,255,.72);font-weight:500}
/* 교대 배경 = mist */
.sec-ground{background:var(--mist)}
/* OEM·ODM 카드: 하늘 틴트 판 */
.odm-item{background:var(--mist);border-color:transparent}
.odm-item .txt{background:linear-gradient(0deg,rgba(238,245,250,.98),rgba(238,245,250,.84) 55%,transparent)}
/* R&D 밴드·문의 띠: 회색 어둡게 대신 남색→브랜드 블루 */
.rnd::before{background:linear-gradient(90deg,rgba(15,42,74,.94),rgba(23,58,99,.82) 55%,rgba(23,58,99,.5))}
.contact-hero::before,.contact-band::before{background:linear-gradient(90deg,rgba(15,42,74,.92),rgba(23,58,99,.7))}
.contact-band .band-in h2,.contact-band h2,.contact-hero h2,.contact-hero .main-tit{color:#fff}
/* 그라데이션은 CTA·활성 알약에만 */
.btn-primary{background:var(--grad);border-color:transparent}.btn-primary:hover{background:linear-gradient(90deg,#155a90,#1a6aa8)}
.site-header.solid .btn-quote,.site-header.menu-open .btn-quote,.site-header:has(.nav:hover) .btn-quote{background:var(--grad)}
.cat-tabs button[aria-selected="true"],.filter .on,.chips input:checked+span{background:var(--grad);color:#fff;border-color:transparent}
.cat-tabs button[aria-selected="true"] b{color:#fff;opacity:.85}
.sub-tabs a.on,.sub-tabs .on{background:var(--brand);color:#fff}
/* 서브 페이지 머리: 흰 베일 줄이기 */
.sub-visual::before{background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.48) 55%,rgba(255,255,255,.1)),linear-gradient(0deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%)}
.card-ico,.step-ico{background:var(--aqua);stroke:var(--brand)}
/* 숫자 블록(회사소개·글로벌): 흰 바탕 위 파란 큰 숫자 */
.numbers b,.gnum b{font-family:var(--disp);color:var(--brand);font-weight:800}
.numbers b i,.gnum b i{font-style:normal;font-size:.5em;font-weight:600;margin-left:2px;color:var(--navy)}
.gnum div{background:var(--mist)}
.page-company #esg.sec-ground{background:#fff}
.numbers b,.gnum b{letter-spacing:-.02em}.numbers span,.gnum span{color:var(--ink-2)}
/* 바닥글 남색 */
.site-footer{background:#173a63;color:#c9d6e6}
/* 스크롤 등장 (motion.js 가 .in 을 붙인다; JS 없으면 2.5초 뒤 강제 표시, no-js 면 즉시) */
.js .rv,.js .odm-item,.js .steps-line li,.js .rnd-item,.js .news-item,.js .svc div,.js .step,.js .reg-grid .card,.js .cert{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .in,.js .rv.in,.js .odm-item.in,.js .steps-line li.in,.js .rnd-item.in,.js .news-item.in,.js .svc div.in,.js .step.in,.js .reg-grid .card.in,.js .cert.in{opacity:1;transform:none}
.js .odm-item.in,.js .rnd-item.in{transition:box-shadow .2s,transform .2s}.js .news-item.in{transition:background .2s,color .2s}
@media(prefers-reduced-motion:reduce){.js .rv,.js .odm-item,.js .steps-line li,.js .rnd-item,.js .news-item,.js .svc div,.js .step,.js .reg-grid .card,.js .cert{opacity:1;transform:none;transition:none}}
/* 시안 배지(우하단) */
.theme-badge{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:6px;align-items:center;padding:8px 10px 8px 12px;border-radius:999px;background:rgba(23,58,99,.92);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;box-shadow:0 8px 24px rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.theme-badge b{margin-right:4px;color:#8fd0ea;font-family:var(--disp)}
.theme-badge a{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff}
.theme-badge a.on{background:#8fd0ea;color:#0f2a4a}
.theme-badge a.off{background:transparent;color:#c9d6e6;text-decoration:underline}
@media(max-width:600px){.theme-badge{bottom:76px;left:10px}}