/* ============================================================ mpc-style.css · PARA 회사소개 — globalmpc 스타일 프리미엄 본문 ------------------------------------------------------------ · 통일 헤더(site-header.js)·서브탭(.subnav)·lang.js 는 그대로 유지. 이 파일은 "서브탭 + 본문(다크 히어로/그래픽/인증띠/섹션/푸터)" 담당. · 각 페이지 에서 색 3개만 덮어쓰면 색만 바뀜: --accent 메인색 · --accent-soft 밝은톤(다크 위 글자) · --hero 히어로 베이스 · 컨테이너 .wrap = 1080 (헤더와 동일 정렬). 헤더 전용 클래스는 두지 않음. ============================================================ */ :root{ --porcelain:#f4f1ea; --paper:#ffffff; --ink:#1d2330; --muted:#5d6273; --navy:#21386b; --line:rgba(29,35,48,.12); --dark:#17141a; --accent:#a8243f; --accent-soft:#e7b07a; --hero:#1a1216; /* 페이지에서 덮어씀 */ } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--porcelain);color:var(--ink); font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif; font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} .fr{font-family:"Fraunces","Noto Serif KR",serif} /* ── 서브탭(통일 헤더 아래 sticky) — 라이브와 동일 ─────────── */ .subnav{background:var(--paper);border-bottom:1px solid var(--line); position:sticky;top:62px;z-index:50} .subnav .wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center; padding-top:12px;padding-bottom:12px} .subnav .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em; color:var(--muted);margin-right:6px;text-transform:uppercase} .subnav a{font-size:14px;font-weight:600;color:var(--muted); padding:7px 13px;border-radius:999px;border:1px solid transparent; white-space:nowrap;transition:.15s} .subnav a:hover{color:var(--ink);background:rgba(29,35,48,.05)} .subnav a.on{color:#fff;background:var(--accent);border-color:var(--accent)} /* ── 히어로(다크) ──────────────────────────────────────── */ .hero{position:relative;overflow:hidden;color:#fff; background: radial-gradient(1100px 520px at 80% 16%, color-mix(in srgb,var(--accent) 38%, transparent), transparent 60%), radial-gradient(680px 460px at 6% 92%, color-mix(in srgb,var(--accent) 15%, transparent), transparent 60%), linear-gradient(160deg,var(--hero), #0e0b10 88%)} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:38px; align-items:center;padding:74px 22px} .hero .eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em; color:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent-soft) 45%, transparent); border-radius:999px;padding:8px 16px;margin-bottom:24px} .hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.1;margin:0 0 20px; font-weight:800;letter-spacing:-.02em} .hero h1 .em{color:var(--accent)} .hero .sub{font-size:clamp(16px,2.1vw,19px);color:#cfcad6;max-width:46ch;margin:0 0 12px} .hero .tag{font-style:italic;font-size:clamp(17px,2.2vw,21px);color:var(--accent-soft);margin:0 0 28px} .cta{display:flex;gap:13px;flex-wrap:wrap} .btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px; padding:14px 24px;transition:.15s;cursor:pointer} .btn-a{background:var(--accent);color:#fff} .btn-a:hover{filter:brightness(1.08);transform:translateY(-2px)} .btn-o{border:1.5px solid rgba(255,255,255,.42);color:#fff} .btn-o:hover{background:rgba(255,255,255,.1)} /* 허브-스포크 그래픽 */ .hubwrap{position:relative;min-height:420px;display:grid;place-items:center} .hub svg{width:100%;height:auto;max-width:540px;overflow:visible} .hub .line{stroke:rgba(255,255,255,.22);stroke-width:1} .hub .dot{fill:var(--accent-soft)} .hub .lbl{fill:#d9d4df;font-size:13px;font-weight:600;font-family:"Pretendard",sans-serif} .hub .core{fill:var(--accent)} .hub .ring{fill:none;stroke:color-mix(in srgb,var(--accent-soft) 60%, transparent);stroke-width:1.4} .hub .ctext{fill:#fff;font-weight:800;font-size:24px;text-anchor:middle} .hub .csub{fill:var(--accent-soft);font-weight:700;font-size:11px;letter-spacing:.18em;text-anchor:middle} /* ── 인증/통계 띠(다크) ────────────────────────────────── */ .band{background:#0e0b10;border-top:1px solid rgba(255,255,255,.07)} .band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:32px 22px} .band .it{position:relative;padding-left:18px} .band .it::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px; border-radius:50%;background:var(--accent-soft)} .band .it b{display:block;color:#fff;font-size:15px;font-weight:800;margin-bottom:5px} .band .it span{color:#9c97a4;font-size:13px;line-height:1.5} /* ── 본문 섹션 ─────────────────────────────────────────── */ .sec{padding:78px 0} .sec.alt{background:var(--paper)} .kic{font-family:"Fraunces",serif;font-style:italic;font-size:15px;color:var(--accent);margin:0 0 8px} .h2{font-size:clamp(25px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px} .micro{font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin:0 0 28px} .lead{font-size:17px;color:#41454f;max-width:70ch;margin:0} .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:32px} .card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:.18s} .sec.alt .card{background:var(--porcelain)} .card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 40px -24px rgba(29,35,48,.5)} .card .no{font-family:"Fraunces",serif;font-size:22px;font-weight:600;color:var(--accent);display:block;margin-bottom:12px} .card h3{margin:0 0 4px;font-size:19px;font-weight:800} .card .en{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:12px} .card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.65} .course{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--paper); border:1px solid var(--line);border-radius:16px;padding:22px 24px} .sec.alt .course{background:var(--porcelain)} .course+.course{margin-top:14px} .course .code{font-weight:800;font-size:14px;color:#fff;background:var(--accent); border-radius:9px;padding:9px 13px;min-width:48px;text-align:center} .course .nm{flex:1 1 280px;font-weight:800;font-size:17px} .course .nm small{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:3px} .course .price{font-weight:800;font-size:18px;color:var(--accent);white-space:nowrap} .facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:16px;overflow:hidden;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .facts div{background:var(--paper);padding:22px 24px} .sec.alt .facts div{background:var(--porcelain)} .facts dt{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;margin:0 0 6px} .facts dd{margin:0;font-size:16px;font-weight:700} .contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:30px} .contact div{background:var(--paper);padding:22px 24px} .contact dt{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin:0 0 7px} .contact dd{margin:0;font-size:15.5px;font-weight:600;line-height:1.5} .cband{margin-top:38px;background:var(--accent);color:#fff;border-radius:20px; padding:42px 34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px} .cband h3{margin:0;font-size:clamp(20px,3vw,26px);font-weight:800;color:#fff} .cband p{margin:6px 0 0;color:rgba(255,255,255,.85);font-size:15px} .cband .acts{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap} .cband .btn-w{background:#fff;color:var(--accent)} .cband .btn-w:hover{transform:translateY(-2px)} .cband .btn-go{border:1.5px solid rgba(255,255,255,.6);color:#fff} .cband .btn-go:hover{background:rgba(255,255,255,.12)} /* ── 푸터(다크) ────────────────────────────────────────── */ .ft{background:var(--dark);color:#cfcad6} .ft .wrap{padding:52px 22px 38px} .ft .ttl{font-size:19px;font-weight:800;color:#fff;margin:0 0 12px} .ft p.d{font-size:14px;color:#9c97a4;max-width:62ch;margin:0 0 20px;line-height:1.7} .ft .lk{display:flex;gap:10px 20px;flex-wrap:wrap;margin:0 0 22px} .ft .lk a{font-size:14px;font-weight:600;color:#cfcad6} .ft .lk a:hover{color:var(--accent-soft)} .ft .co{font-size:12.5px;color:#7d7886;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;line-height:1.8} /* ── 접근성/모션/반응형 ────────────────────────────────── */ a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;padding:56px 22px;gap:16px} .hubwrap{min-height:330px;order:2} .band .wrap{grid-template-columns:repeat(2,1fr);gap:22px} } @media (max-width:640px){ .subnav{top:0} .sec{padding:54px 0} .cband{padding:30px 24px}.cband .acts{margin-left:0;width:100%} }