﻿/* ── 톤앤매너 시안 «c» = 제안서 C안 목업 구조 그대로 (2026-09-11)
   홈은 home_c.html(키네틱 헤드라인 히어로 → 일렉트릭 블루 숫자 밴드 4칸 → «연구소와 공장이 하나로» 블록),
   나머지 페이지와 공통 요소는 navy 테마를 그대로 쓴다. ── */
/* 히어로 */
.c-hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:flex-end;background:#071127;color:#fff;overflow:hidden}
.c-hero picture,.c-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.c-shade{position:absolute;inset:0;background:radial-gradient(60% 90% at 80% 30%,rgba(47,107,255,.35) 0%,rgba(47,107,255,0) 60%),linear-gradient(90deg,rgba(7,17,39,.92) 0%,rgba(7,17,39,.62) 45%,rgba(7,17,39,.12) 80%),linear-gradient(0deg,rgba(7,17,39,.85),rgba(7,17,39,.2) 45%,rgba(7,17,39,.05) 70%)}
.c-hero-in{position:relative;padding:calc(var(--hh) + 60px) 40px 120px;text-align:left;min-width:0;width:100%}
.c-h .w{display:inline-block;white-space:nowrap}
.c-kick{display:block;font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4f8cff;margin-bottom:18px}
.c-h{margin:0;max-width:none;font-family:var(--disp);font-size:clamp(40px,7.2vw,112px);font-weight:800;line-height:.98;letter-spacing:-.03em;color:#fff;text-align:left;text-wrap:initial}
.c-h em{font-style:normal;color:#4f8cff}
.c-h .k{display:inline-block;opacity:0;transform:translateY(.6em) rotate(6deg);animation:c-kin .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.045s)}
.c-h.kin-done .k{opacity:1;transform:none;animation:none}
@keyframes c-kin{to{opacity:1;transform:none}}
.c-sub{margin:26px 0 0;font-size:clamp(17px,1.3vw,22px);font-weight:500;color:rgba(255,255,255,.9);letter-spacing:-.01em;max-width:36em}
.c-hero .hero-cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.c-hero .btn-primary{background:#ff5a4e;border-color:transparent;color:#fff}.c-hero .btn-primary:hover{background:#e84a3f}
.c-hero .btn-ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}
.c-scroll{position:absolute;right:48px;bottom:40px;width:56px;height:56px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;animation:c-bob 2s ease-in-out infinite}
@keyframes c-bob{50%{transform:translateY(6px)}}
/* 숫자 밴드 (navy 의 .facts 규칙 위에) */
.c-stats{background:linear-gradient(100deg,#1442c8,#2f6bff 60%,#4f8cff)}
.c-stats-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.c-stats .fact{text-align:left;padding:52px 12px 48px;border-left-color:rgba(255,255,255,.18)}
.c-stats .fact small{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;color:#ff8f86;margin-bottom:10px}
.c-stats .fact b{font-size:clamp(34px,3.4vw,52px);font-weight:700;letter-spacing:-.03em;color:#fff}
.c-stats .fact b i{font-size:.5em;font-weight:600;color:#dbe6ff}
/* 본문 블록 */
.c-body{padding:120px 0;background:#0b1730;color:#c3d0e6;position:relative}
.c-body-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-bottom:56px}
.c-body .main-tit{color:#fff;font-family:var(--sans);font-weight:700;font-size:clamp(30px,3vw,48px);letter-spacing:-.03em}
.c-body .main-txt{color:#aab8d6;max-width:none;font-size:1.0625rem}
.c-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.c-tiles span{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#122448;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.c-tiles img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
.c-body .rnd-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.c-body .rnd-item{background:#fff;color:#444c55;border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:8px;min-height:180px}
.c-body .rnd-item b{color:#15191f;font-size:1.25rem}.c-body .rnd-item span{color:#444c55}.c-body .rnd-item i{margin-top:auto;color:#1442c8;font-style:normal}
.c-body .rnd-badges{margin-top:28px}
/* OEM·ODM 제목은 디스플레이체 */
.theme-c .main-tit{font-family:var(--disp);font-weight:800}
.theme-c .c-body .main-tit{font-family:var(--sans);font-weight:700}
@media(max-width:960px){.c-hero-in{padding:calc(var(--hh-s) + 40px) 24px 96px}.c-stats-in{grid-template-columns:1fr 1fr}.c-stats .fact{padding:28px 10px 26px}.c-body-grid{grid-template-columns:1fr;gap:28px}.c-body .rnd-list{grid-template-columns:1fr 1fr}.c-scroll{display:none}}
@media(max-width:600px){.c-h{font-size:38px}.c-sub{font-size:16px}.c-stats-in{grid-template-columns:1fr 1fr;gap:8px}.c-body .rnd-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.c-h .k{animation:none;opacity:1;transform:none}.c-scroll{animation:none}}
