/* ============================================================
   MEGA-FENCE V3 리뉴얼 — 공용 테마 CSS
   - Site.Master 셸(header/footer) + V3 페이지 6종의 공용 컴포넌트
   - 원본: docs/superpowers/specs/assets/2026-07-07-home-renewal/
           home-mockup.html + subpages-mockup.html 의 <style> 통합
   - 클래스명은 두 목업과 동일하게 유지(페이지 마크업 verbatim 이관 전제),
     색상 토큰만 --mf-* 커스텀 프로퍼티로 일원화
   ============================================================ */

:root{
  --mf-navy-900:#081226; --mf-navy-850:#0A1730; --mf-navy-800:#0E2242; --mf-navy-700:#13315C;
  --mf-line:#1C3358; --mf-line-soft:#16294a;
  --mf-brand:#2563EB; --mf-brand-600:#1D4ED8; --mf-sky:#38BDF8; --mf-sky-200:#7DD3FC;
  --mf-slate:#93A6C6; --mf-slate-2:#B6C6E0; --mf-ink:#0F172A; --mf-paper:#F5F8FF;
  --mf-ok:#22C55E; --mf-warn:#F59E0B; --mf-r:14px;
}

/* ── 리셋 · 기본 타이포 ──
   body 배경은 home-mockup(#fff) 채택. subpages-mockup의 body{background:#0b1220}는
   5개 서브페이지를 한 파일에 세로로 나열해 보여주기 위한 목업 갤러리 전용 배경이라
   실 사이트(페이지당 1문서)에는 적용하지 않는다 — 아래 .page{background:#fff}가
   실제 페이지 콘텐츠 배경 역할을 대신한다. */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",-apple-system,"Malgun Gothic","Noto Sans KR",Roboto,sans-serif;color:var(--mf-ink);background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--mf-brand);color:#fff;box-shadow:0 10px 22px -10px rgba(37,99,235,.8)}
.btn-primary:hover{background:var(--mf-brand-600)}
.btn-ghost{background:rgba(255,255,255,.06);color:#E8F0FF;border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-light{background:#fff;color:var(--mf-brand-600)}
/* .btn-dark: subpages-mockup 정의(흰 배경+네이비 글자+보더) 채택.
   home-mockup 자체 정의는 background:var(--navy-850)(진네이비)였지만, home-mockup의
   실제 사용처(고객사 섹션 "전체 사례 보기 →")가 인라인 style로 subpages와 동일한
   흰 배경/보더로 이미 덮어쓰고 있어 사실상 죽은 선언이었다 → 단일 정의로 통합. */
.btn-dark{background:#fff;color:var(--mf-navy-800);border:1px solid #E5EBF5}

/* ── eyebrow 라벨 ── */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mf-sky)}
.sec-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mf-brand)}

/* ── 헤더 · 내비 · 브랜드 (Site.Master 공용, 전 페이지 동일 헤더 사용)
   home-mockup 정의(sticky+blur, 64px nav, 좀 더 큰 브랜드/내비 폰트) 채택.
   subpages-mockup 헤더(58px, 배경 단색, sticky 아님)는 서브페이지 목업 갤러리를
   개별 프리뷰하기 위한 축소판이었고, 실 사이트는 Site.Master 하나가 모든 페이지에
   동일 헤더를 렌더하므로 home 쪽 값으로 단일화한다. */
header{position:sticky;top:0;z-index:50;background:rgba(10,23,48,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--mf-line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:17px;letter-spacing:.2px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--mf-sky),var(--mf-brand));display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(56,189,248,.6)}
.brand b{color:var(--mf-sky)}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--mf-slate-2);font-weight:600}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-login{font-size:14px;color:var(--mf-slate-2);font-weight:600}

/* ── 페이지 셸 (subpages-mockup 갤러리 프레이밍용 — 실 페이지에서 .page-label은
   보통 미사용이지만 목업 원본 규칙은 손실 없이 보존) ── */
.page{background:#fff;color:var(--mf-ink)}
.page-label{position:sticky;top:0;z-index:80;background:#060b16;color:#9db3d6;font-size:12.5px;font-weight:700;letter-spacing:.5px;padding:9px 24px;border-top:1px solid #1a2740;border-bottom:1px solid #1a2740}
.page-label b{color:#fff}
.page-label span{color:var(--mf-sky)}

/* ── Hero (Home) ── */
.hero{position:relative;overflow:hidden;background:
    radial-gradient(900px 420px at 78% -10%, rgba(37,99,235,.45), transparent 60%),
    radial-gradient(700px 360px at 12% 8%, rgba(56,189,248,.20), transparent 55%),
    linear-gradient(180deg,var(--mf-navy-850),var(--mf-navy-900))}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--mf-line) 1px,transparent 1px),linear-gradient(90deg,var(--mf-line) 1px,transparent 1px);background-size:44px 44px;opacity:.22;mask-image:radial-gradient(1000px 600px at 60% 20%,#000,transparent 80%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:74px 0 84px}
.hero h1{color:#fff;font-size:44px;line-height:1.16;letter-spacing:-1px;margin:16px 0 16px;font-weight:800}
.hero h1 .g{background:linear-gradient(120deg,var(--mf-sky),#A5B4FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--mf-slate-2);font-size:16.5px;line-height:1.7;margin:0 0 26px;max-width:520px}
.hero-cta{display:flex;gap:12px;margin-bottom:34px;flex-wrap:wrap}
.trust{display:flex;gap:30px;border-top:1px solid var(--mf-line);padding-top:20px;max-width:520px}
.trust .t b{display:block;color:#fff;font-size:24px;font-weight:800;letter-spacing:-.5px}
.trust .t span{color:var(--mf-slate);font-size:12px}

/* ── Sub Hero (서브페이지 5종 공통 배너) ── */
.subhero{position:relative;overflow:hidden;background:
    radial-gradient(700px 320px at 82% -20%,rgba(37,99,235,.42),transparent 60%),
    linear-gradient(180deg,var(--mf-navy-850),var(--mf-navy-900));color:#fff}
.subhero .grid{position:absolute;inset:0;background-image:linear-gradient(var(--mf-line) 1px,transparent 1px),linear-gradient(90deg,var(--mf-line) 1px,transparent 1px);background-size:44px 44px;opacity:.18}
.subhero-in{position:relative;padding:56px 0 58px}
.subhero h1{font-size:34px;line-height:1.2;letter-spacing:-.8px;margin:14px 0 12px;font-weight:800}
.subhero p{color:var(--mf-slate-2);font-size:16px;line-height:1.7;max-width:640px;margin:0}
.subhero .actions{margin-top:24px;display:flex;gap:11px;flex-wrap:wrap}

/* ── Bento 실시간 데모 (Home) ── */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:14px}
.tile{background:linear-gradient(180deg,rgba(23,45,82,.75),rgba(14,34,66,.75));border:1px solid var(--mf-line);border-radius:16px;padding:16px;backdrop-filter:blur(6px);box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
.tile .lab{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mf-slate)}
.tile-lg{grid-column:1 / -1}
.live{display:flex;align-items:flex-end;justify-content:space-between}
.live .num{color:#fff;font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1;margin-top:8px}
.live .num small{font-size:14px;color:var(--mf-sky);font-weight:700;margin-left:6px}
.pulse{display:inline-flex;align-items:center;gap:6px;color:var(--mf-ok);font-size:11px;font-weight:700}
.pulse i{width:7px;height:7px;border-radius:50%;background:var(--mf-ok);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pl 1.6s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.spark{margin-top:10px;width:100%;height:34px;display:block}
.kpi .num{color:#fff;font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:6px}
.kpi .delta{font-size:11px;font-weight:700;color:var(--mf-ok)}
.gates{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.gate{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:#D7E3F7}
.chip{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px}
.chip.ok{background:rgba(34,197,94,.16);color:#86EFAC}
.chip.warn{background:rgba(245,158,11,.16);color:#FCD34D}
.chip.brk{background:rgba(148,163,184,.18);color:#CBD5E1}
.bars{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:12px}
.bars i{flex:1;background:linear-gradient(var(--mf-sky),var(--mf-brand));border-radius:3px;opacity:.9}

/* ── 로고 스트립 (Home) ── */
.logos{background:var(--mf-navy-900);border-top:1px solid var(--mf-line-soft);border-bottom:1px solid var(--mf-line-soft)}
.logos-in{padding:26px 0;text-align:center}
.logos p{color:var(--mf-slate);font-size:12.5px;letter-spacing:.5px;margin:0 0 16px}
.logo-row{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;opacity:.75}
.logo-ph{height:22px;width:104px;border-radius:6px;background:linear-gradient(90deg,#22385f,#2c477a)}

/* ── 섹션 공통 (block/center)
   home-mockup(88px/48px 여백)보다 subpages-mockup(70px/42px)이 5/6 페이지에서
   쓰이므로 subpages 값을 채택. home 쪽 섹션에서 더 넓은 여백이 필요하면 페이지
   이관 시 개별 style="padding:..."로 조정(목업 자체도 섹션별 inline 조정 관례 있음). */
section.block{padding:70px 0}
.center{text-align:center;max-width:680px;margin:0 auto 42px}
.center h2{font-size:28px;letter-spacing:-.5px;margin:12px 0 12px;color:var(--mf-ink)}
.center p{color:#55627a;font-size:15.5px;line-height:1.7;margin:0}
.muted{color:#5a6a86}

/* ── Features(Home) / 범용 그리드(서브페이지) ── */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── 카드 공통
   base(.card/.card h3/.card p)는 subpages 값 채택(다수 페이지) + home의
   transition/:hover는 손실 없이 추가. .ic(bare)/.card .ic(scoped)는 두 목업이
   원래 서로 다른 셀렉터로 정의했던 그대로 보존 — .card 안에서는 특이도가 더 높은
   .card .ic가 자연스럽게 이긴다. */
.card{border:1px solid #E5EBF5;border-radius:15px;padding:22px;background:#fff;transition:.15s}
.card:hover{box-shadow:0 20px 40px -26px rgba(15,40,90,.4);transform:translateY(-3px);border-color:#D5E0F2}
.card h3{font-size:17px;margin:0 0 8px}
.card p{color:#5a6a86;font-size:13.5px;line-height:1.6;margin:0}
.ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#E8F0FF,#DCE8FF);display:grid;place-items:center;margin-bottom:14px}
.card .ic{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#E8F0FF,#DCE8FF);display:grid;place-items:center;margin-bottom:16px}

/* ── 코드 카드 (Product) ── */
.code{background:var(--mf-navy-900);border:1px solid var(--mf-line);border-radius:14px;padding:18px 20px;font-family:"Courier New",monospace;font-size:13px;color:#9fb4d6;line-height:1.9;overflow:auto}
.code .k{color:var(--mf-sky)} .code .s{color:#86EFAC} .code .c{color:#5b6b8a}

/* ── 아키텍처 다이어그램 (Product) ── */
.arch{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;background:var(--mf-paper);border-radius:20px;padding:34px 20px}
.node{background:#fff;border:1px solid #DDE6F5;border-radius:13px;padding:14px 16px;text-align:center;min-width:120px;box-shadow:0 12px 24px -18px rgba(15,40,90,.5)}
.node .t{font-weight:800;font-size:14px;color:var(--mf-navy-800)}
.node .d{font-size:11px;color:#7b88a1;margin-top:3px}
.node.hl{background:linear-gradient(160deg,var(--mf-navy-800),var(--mf-navy-900));border-color:var(--mf-navy-700)}
.node.hl .t{color:#fff} .node.hl .d{color:var(--mf-sky-200)}
.arw{color:#9db0d0;font-size:22px;padding:0 12px}

/* ── 작동 흐름: Home(토큰 상태 4단계, .flow-wrap 안에서만 .flow) /
   Product(5단계 카드형, bare .flow) — 두 목업이 같은 .flow 클래스를 다른 의미로
   씀. .flow-wrap .flow{}로 스코프해 분리하면 셀렉터 특이도상 서로 침범하지 않고
   각자 의도대로 렌더된다. ── */
.flow-wrap{background:var(--mf-paper);border-radius:22px;padding:40px 32px}
.flow-wrap .flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.step{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:96px}
.step .bub{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid #DDE6F5;box-shadow:0 10px 22px -14px rgba(15,40,90,.4)}
.step .nm{font-size:13px;font-weight:800;color:var(--mf-navy-800)}
.step .ds{font-size:11px;color:#7b88a1}
.arrow{color:#9db0d0;font-size:20px;padding:0 8px;margin-bottom:24px}

.flow{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;justify-content:center}
.fstep{flex:1;min-width:150px;border:1px solid #E5EBF5;border-radius:14px;padding:16px;background:#fff}
.fstep .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--mf-brand);border-radius:6px;padding:3px 8px;margin-bottom:9px}
.fstep .tag.g{background:var(--mf-ok)} .fstep .tag.s{background:#64748B}
.fstep h4{margin:0 0 5px;font-size:14px}
.fstep p{margin:0;font-size:12px;color:#6a788f;line-height:1.55}

/* ── 운영 모드 카드 (Product: GATE/ALERT/BREAK) ── */
.mode{border-radius:14px;padding:20px;color:#fff}
.mode.gate{background:linear-gradient(160deg,#166534,#14532D)}
.mode.alert{background:linear-gradient(160deg,#B45309,#92400E)}
.mode.brk{background:linear-gradient(160deg,#475569,#334155)}
.mode .mh{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin-bottom:8px}
.mode .chip{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.2)}
.mode p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.9)}

/* ── 성능 지표 밴드 (Home) ── */
.perf{background:linear-gradient(180deg,var(--mf-navy-850),var(--mf-navy-900));color:#fff}
.perf-in{padding:64px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.perf .n{font-size:40px;font-weight:800;letter-spacing:-1px;background:linear-gradient(120deg,#fff,var(--mf-sky-200));-webkit-background-clip:text;background-clip:text;color:transparent}
.perf .l{color:var(--mf-slate-2);font-size:13px;margin-top:6px}

/* ── 가격 티저 (Home) ── */
.price-card{border:1px solid #E5EBF5;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr}
.price-l{padding:36px 34px}
.price-l h3{font-size:22px;margin:0 0 10px}
.price-l ul{margin:16px 0 0;padding:0;list-style:none}
.price-l li{display:flex;gap:9px;align-items:flex-start;color:#4b5872;font-size:14px;line-height:1.5;margin-bottom:10px}
.price-l li svg{flex:none;margin-top:2px}
.price-r{background:linear-gradient(160deg,var(--mf-navy-800),var(--mf-navy-900));color:#fff;padding:36px 34px;display:flex;flex-direction:column;justify-content:center}
.price-r .from{color:var(--mf-slate-2);font-size:13px}
.price-r .big{font-size:34px;font-weight:800;letter-spacing:-1px;margin:6px 0 2px}
.price-r .unit{color:var(--mf-slate);font-size:13px;margin-bottom:20px}

/* ── 가격 티어 (Pricing) ── */
.toggle{display:inline-flex;background:#EEF3FC;border-radius:999px;padding:4px;margin:0 auto 30px;gap:4px}
.toggle span{padding:8px 18px;font-size:13px;font-weight:700;border-radius:999px;color:#5a6a86;cursor:pointer}
.toggle span.on{background:#fff;color:var(--mf-brand-600);box-shadow:0 4px 10px -4px rgba(15,40,90,.25)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.tier{border:1px solid #E5EBF5;border-radius:16px;padding:24px 20px;background:#fff;display:flex;flex-direction:column}
.tier.pop{border:2px solid var(--mf-brand);box-shadow:0 24px 50px -30px rgba(37,99,235,.7);position:relative}
.tier.pop .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--mf-brand);color:#fff;font-size:11px;font-weight:800;padding:3px 12px;border-radius:999px}
.tier .nm{font-size:14px;font-weight:800;color:var(--mf-navy-800)}
.tier .sess{font-size:12px;color:#8b97ae;margin-top:2px}
.tier .amt{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:16px 0 2px}
.tier .per{font-size:12px;color:#8b97ae;margin-bottom:16px}
.tier ul{list-style:none;margin:0 0 18px;padding:0}
.tier li{display:flex;gap:8px;font-size:12.5px;color:#4b5872;margin-bottom:9px;line-height:1.4}
.tier li svg{flex:none;margin-top:1px}
.tier .btn{justify-content:center;margin-top:auto}
.note{color:#8b97ae;font-size:12.5px;line-height:1.7;margin-top:22px}

/* ── FAQ (Pricing) ── */
.faq{border:1px solid #E5EBF5;border-radius:14px;overflow:hidden}
.qa{padding:18px 22px;border-bottom:1px solid #EEF2F8}
.qa:last-child{border-bottom:none}
.qa .q{font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;align-items:center}
.qa .q span{color:#9db0d0;font-weight:400}
.qa .a{color:#5a6a86;font-size:13px;line-height:1.65;margin-top:8px}

/* ── 고객사 그리드 (Home 요약 4개) ── */
.cust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cust .c{border:1px solid #E5EBF5;border-radius:14px;padding:20px 16px;text-align:center;background:#fff}
.cust .c .lg{height:26px;width:86px;margin:0 auto 12px;border-radius:6px;background:linear-gradient(90deg,#E7EEFA,#D8E4F7)}
.cust .c .nm{font-size:13px;font-weight:700;color:var(--mf-navy-800)}
.cust .c .dy{font-size:12px;color:#8b97ae;margin-top:3px}
.cust .c .dy b{color:var(--mf-brand)}

/* ── 필터 칩 · 레퍼런스 그리드 · 케이스 스터디 (Customers) ── */
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.fchip{border:1px solid #DDE6F5;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:#5a6a86;background:#fff;cursor:pointer}
.fchip.on{background:var(--mf-navy-850);color:#fff;border-color:var(--mf-navy-850)}
.refgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ref{border:1px solid #E5EBF5;border-radius:13px;padding:18px 14px;text-align:center;background:#fff}
.ref .lg{height:24px;width:80px;margin:0 auto 11px;border-radius:6px;background:linear-gradient(90deg,#E7EEFA,#D8E4F7)}
.ref .nm{font-size:13px;font-weight:700;color:var(--mf-navy-800)}
.ref .dy{font-size:11.5px;color:#8b97ae;margin-top:3px}
.ref .dy b{color:var(--mf-brand)}
.ref .kind{display:inline-block;font-size:10px;font-weight:700;color:#64748B;background:#F1F5F9;border-radius:5px;padding:1px 7px;margin-top:8px}
.case{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border:1px solid #E5EBF5;border-radius:18px;overflow:hidden;margin-top:24px}
.case .l{background:linear-gradient(160deg,var(--mf-navy-800),var(--mf-navy-900));color:#fff;padding:34px}
.case .l .q{font-size:19px;font-weight:700;line-height:1.5}
.case .l .who{margin-top:18px;color:var(--mf-sky-200);font-size:13px}
.case .r{padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:center}
.case .r .st b{display:block;font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--mf-brand)}
.case .r .st span{font-size:12.5px;color:#6a788f}

/* ── CTA 밴드 (Home) ── */
.cta{position:relative;overflow:hidden;background:
    radial-gradient(600px 300px at 80% 0%,rgba(56,189,248,.35),transparent 60%),
    linear-gradient(120deg,var(--mf-brand-600),#4338CA)}
.cta-in{padding:64px 0;text-align:center;color:#fff;position:relative}
.cta h2{font-size:32px;letter-spacing:-.6px;margin:0 0 12px}
.cta p{color:#DCE6FF;font-size:16px;margin:0 0 26px}

/* ── 리소스 목록 · 다운로드 (Resources) ── */
.reslist{border:1px solid #E5EBF5;border-radius:14px;overflow:hidden}
.res{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #EEF2F8}
.res:last-child{border-bottom:none}
.res .cat{font-size:10.5px;font-weight:800;color:#fff;background:var(--mf-brand);border-radius:6px;padding:3px 8px;min-width:64px;text-align:center}
.res .cat.up{background:#0EA5E9}.res .cat.tech{background:#7C3AED}.res .cat.wk{background:#64748B}
.res .ti{flex:1;font-size:14px;font-weight:600}
.res .dt{font-size:12px;color:#8b97ae}
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.dlc{border:1px solid #E5EBF5;border-radius:14px;padding:20px;display:flex;gap:14px;align-items:center;background:#fff}
.dlc .pdf{width:40px;height:48px;border-radius:7px;background:#FEE2E2;color:#DC2626;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.dlc h4{margin:0 0 3px;font-size:14px}.dlc p{margin:0;font-size:12px;color:#8b97ae}

/* ── 타임라인 · 문의 폼 · 연락처 (Company) ── */
.tl{border-left:2px solid #E1E8F3;margin-left:8px;padding-left:24px}
.tli{position:relative;padding-bottom:22px}
.tli:before{content:"";position:absolute;left:-31px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--mf-brand);border:3px solid #fff;box-shadow:0 0 0 1px #DDE6F5}
.tli .yr{font-size:13px;font-weight:800;color:var(--mf-brand)}
.tli .tx{font-size:14px;color:#3f4d66;margin-top:3px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fi{display:flex;flex-direction:column;gap:6px}
.fi.full{grid-column:1/-1}
.fi label{font-size:12px;font-weight:700;color:#55627a}
.fi input,.fi textarea{border:1px solid #DDE6F5;border-radius:9px;padding:11px 13px;font-size:13.5px;font-family:inherit;background:#fff}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.info-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.info-item .ii{width:40px;height:40px;border-radius:10px;background:#EEF3FC;display:grid;place-items:center;flex:none}
.info-item h4{margin:0 0 3px;font-size:14px}.info-item p{margin:0;font-size:13px;color:#5a6a86;line-height:1.5}
.mapph{height:180px;border-radius:14px;background:linear-gradient(135deg,#DCE8FF,#EAF1FC);border:1px solid #DDE6F5;display:grid;place-items:center;color:#6a86b8;font-size:13px;margin-top:20px}

/* ── 푸터 (Site.Master 공용 — home-mockup의 풀 컬럼 footer를 전 페이지 공통 사용) ── */
footer{background:var(--mf-navy-900);color:var(--mf-slate);border-top:1px solid var(--mf-line-soft)}
.foot{padding:52px 0 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot h4{color:#fff;font-size:13px;margin:0 0 14px;letter-spacing:.3px}
.foot a{display:block;color:var(--mf-slate);font-size:13px;margin-bottom:9px}
.foot a:hover{color:#fff}
.foot .desc{font-size:12.5px;line-height:1.7;color:#7f8da6;max-width:280px}
.foot-bot{border-top:1px solid var(--mf-line-soft);padding:18px 0;font-size:12px;color:#6a789a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
/* subpages-mockup 갤러리용 축약 푸터(.footmini) — 실 사이트는 위 .foot을 공용 사용하므로
   현재는 미사용이나, 목업 원본 규칙 보존 차원에서 함께 이관 */
.footmini{padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px}
.footmini .brand{font-size:15px}
.footmini a{color:var(--mf-slate)}

/* ── 반응형 (920px 이하) ── */
@media(max-width:920px){
  .hero-in{grid-template-columns:1fr;gap:34px;padding:52px 0 60px}
  .hero h1{font-size:34px}
  .feat,.perf-in,.cust{grid-template-columns:repeat(2,1fr)}
  .price-card{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .grid3,.grid4,.tiers,.refgrid,.dl{grid-template-columns:repeat(2,1fr)}
  .grid2,.case,.contact-wrap,.form{grid-template-columns:1fr}
  .nav-links{display:none}
  .subhero h1{font-size:27px}
}