/* ========================================================================= ZILAB — 회사·제품 소개 사이트 공통 스타일 ------------------------------------------------------------------------- 빌드 도구 없음. 이 파일 하나와 site.js 하나면 사이트가 선다. 색·간격·글자 크기는 모두 아래 :root 토큰에서 나온다. 색을 바꾸려면 개별 규칙이 아니라 토큰을 고친다. 테마: 밝은 클린룸 흰색 한 벌로 의도적으로 고정했다. 장비 도면(zafs4000-iso.png)이 흰 바탕 선화라 어두운 바탕에서는 선이 사라진다. 다크 테마를 넣으려면 도면부터 다시 만들어야 한다. ========================================================================= */ :root{ color-scheme: light; /* 바탕 — 차가운 회색(클린룸 조명) */ --ground: #F4F6FA; --surface: #FFFFFF; --surface-2: #EAEDF5; /* 글자 */ --ink: #10141E; --ink-2: #39425A; --muted: #6C7488; /* 선 */ --line: #DCE0EA; --line-2: #C2C8D8; /* 브랜드 — ZILAB 로고의 짙은 남색 */ --brand: #1E3268; --brand-2: #2E4B96; --brand-wash: #E9EDF8; /* 강조 — 제안서에서 쓰던 신호 주황. 한 화면에 한 번만 쓴다 */ --accent: #D9530B; --accent-wash: #FDEEE4; /* 검증·규격 표시 */ --verified: #0F6B52; --verified-wash: #E5F2ED; /* 글꼴 */ --sans: "IBM Plex Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif; --mono: "IBM Plex Mono", "D2Coding", Consolas, "Courier New", monospace; --serif:"Noto Serif KR", "Nanum Myeongjo", Batang, serif; /* 글자 크기 층위 */ --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.5rem; --t-2xl: 2rem; --t-3xl: 2.75rem; --t-4xl: 3.5rem; } /* 언어별 글꼴 — 페이지의 이 토큰을 갈아 끼운다. 각 페이지는 자기 언어에 맞는 Google Fonts 만 불러온다. */ html[lang^="en"]{ --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --serif:"Noto Serif", Georgia, "Times New Roman", serif; } html[lang^="zh"]{ --sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; --serif:"Noto Serif SC", "Songti SC", SimSun, serif; } /* 한자는 글자 폭이 꽉 차 있어 음수 자간을 주면 붙어 보인다 */ html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4{ letter-spacing: 0; } html[lang^="zh"] .thesis{ letter-spacing: 0; line-height: 1.45; } *,*::before,*::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } body{ margin:0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--t-md); line-height: 1.75; -webkit-font-smoothing: antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color: var(--brand-2); text-underline-offset: .2em; } a:hover{ color: var(--accent); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } h1,h2,h3,h4{ font-weight: 600; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; margin: 0; } /* ---------- 레이아웃 ---------- */ .wrap{ width:100%; max-width: 1160px; margin-inline:auto; padding-inline: 24px; } .wrap-narrow{ max-width: 860px; } .section{ padding-block: 88px; border-top: 1px solid var(--line); } .section.alt{ background: var(--surface); } .section.first{ border-top: 0; } .sec-head{ display:flex; flex-direction:column; gap:14px; margin-bottom: 44px; max-width: 70ch; } .sec-head h2{ font-size: var(--t-2xl); } .sec-head p{ margin:0; color: var(--ink-2); font-size: var(--t-lg); } .kicker{ font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display:flex; align-items:center; gap:10px; } .kicker::after{ content:""; flex:1; height:1px; background: var(--line-2); } /* ---------- 머리글 ---------- */ .site-head{ position: sticky; top:0; z-index: 50; background: rgba(244,246,250,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-head .wrap{ display:flex; align-items:center; gap:24px; height: 64px; } .brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color: var(--ink); } .brand .mark{ font-family: var(--mono); font-weight:600; font-size: 1.125rem; letter-spacing: .22em; color: var(--brand); } .brand .sub{ font-size: var(--t-xs); color: var(--muted); letter-spacing:.02em; } .nav{ margin-left:auto; display:flex; align-items:center; gap: 4px; } .nav a{ display:block; padding: 8px 12px; border-radius: 2px; font-size: var(--t-sm); color: var(--ink-2); text-decoration:none; } .nav a:hover{ background: var(--surface-2); color: var(--ink); } .nav a[aria-current="page"]{ color: var(--brand); font-weight:600; box-shadow: inset 0 -2px 0 var(--accent); } /* 언어 전환 — 좁은 화면에서도 접히지 않고 늘 보인다 */ .lang{ display:flex; align-items:center; gap:2px; margin-left:14px; } .lang a{ font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.08em; padding: 5px 8px; border-radius:2px; color: var(--muted); text-decoration:none; white-space:nowrap; } .lang a:hover{ background: var(--surface-2); color: var(--ink); } .lang a[aria-current="true"]{ color: var(--brand); background: var(--brand-wash); font-weight:600; } .nav-toggle{ display:none; background: var(--surface); border:1px solid var(--line-2); border-radius:2px; font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.1em; padding: 7px 12px; cursor:pointer; color: var(--ink); } @media (max-width: 880px){ .nav-toggle{ display:block; order:2; margin-left:8px; } .lang{ order:1; margin-left:auto; } .lang a{ padding: 5px 6px; } .nav{ position:absolute; inset: 64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background: var(--surface); border-bottom:1px solid var(--line); padding: 8px 16px 16px; margin:0; } .nav:not(.open){ display:none; } .nav a{ padding: 12px 4px; border-bottom:1px solid var(--line); } } /* ---------- 히어로 ---------- */ .hero{ background: var(--surface); border-bottom:1px solid var(--line); overflow:hidden; } .hero .wrap{ padding-block: 72px 64px; } .hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; } .thesis{ font-family: var(--serif); font-weight: 600; font-size: var(--t-4xl); line-height: 1.3; letter-spacing: -.01em; margin: 20px 0 0; } .thesis em{ font-style: normal; color: var(--brand); } .lede{ margin: 24px 0 0; font-size: var(--t-lg); color: var(--ink-2); max-width: 46ch; } .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 32px; } .btn{ display:inline-flex; align-items:center; gap:8px; padding: 12px 20px; border-radius: 2px; text-decoration:none; font-size: var(--t-sm); font-weight:600; border:1px solid transparent; } .btn-primary{ background: var(--brand); color:#fff; } .btn-primary:hover{ background: var(--brand-2); color:#fff; } .btn-ghost{ border-color: var(--line-2); color: var(--ink); background: var(--surface); } .btn-ghost:hover{ border-color: var(--brand); color: var(--brand); } .hero-canvas{ position:relative; width:100%; max-width: 460px; margin: 0 auto; } .hero-canvas canvas{ width:100%; aspect-ratio: 1/1; display:block; } .hero-canvas figcaption{ font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); letter-spacing:.06em; text-align:center; margin-top: 8px; } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; gap: 40px; } :root{ --t-4xl: 2.375rem; --t-3xl: 2rem; --t-2xl: 1.625rem; } } /* ---------- 수치 띠 ---------- */ .specstrip{ display:grid; grid-template-columns: repeat(4, 1fr); border-top:1px solid var(--line); margin: 44px 0 0; } .specstrip > div{ padding: 18px 20px 0 0; } .specstrip dt{ font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.12em; text-transform: uppercase; color: var(--muted); margin:0; } .specstrip dd{ margin: 6px 0 0; font-size: var(--t-xl); font-weight:600; font-variant-numeric: tabular-nums; letter-spacing:-.02em; } .specstrip dd span{ font-size: var(--t-sm); font-weight:400; color: var(--muted); margin-left:3px; } @media (max-width: 720px){ .specstrip{ grid-template-columns: repeat(2,1fr); } } /* ---------- 카드 ---------- */ .grid{ display:grid; gap: 20px; } .grid-2{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px){ .grid-2,.grid-3{ grid-template-columns: 1fr; } } .card{ background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 26px 24px; display:flex; flex-direction:column; gap: 12px; } .section.alt .card{ background: var(--ground); } .card h3{ font-size: var(--t-lg); } .card p{ margin:0; color: var(--ink-2); font-size: var(--t-sm); } .card .tag{ font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.12em; text-transform: uppercase; color: var(--muted); } /* ---------- 번호가 붙은 공정·단계 ---------- */ .steps{ list-style:none; margin:0; padding:0; } .steps > li{ display:grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); } .steps > li:last-child{ border-bottom: 1px solid var(--line); } .steps .no{ font-family: var(--mono); font-size: var(--t-sm); font-weight:600; color: var(--accent); letter-spacing:.08em; padding-top: 4px; } .steps h3{ font-size: var(--t-lg); margin-bottom: 8px; } .steps p{ margin:0; color: var(--ink-2); } .steps p + p{ margin-top: 10px; } .steps .why{ margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--line-2); font-size: var(--t-sm); color: var(--muted); } @media (max-width: 640px){ .steps > li{ grid-template-columns: 1fr; gap: 8px; } } /* ---------- 사양표 ---------- */ .table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:2px; background: var(--surface); } .section.alt .table-scroll{ background: var(--ground); } table.spec{ width:100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 540px; } table.spec caption{ text-align:left; padding: 16px 20px; border-bottom:1px solid var(--line); font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.14em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); } table.spec th, table.spec td{ text-align:left; padding: 13px 20px; border-bottom: 1px solid var(--line); vertical-align: top; } table.spec tbody tr:last-child th, table.spec tbody tr:last-child td{ border-bottom:0; } table.spec tbody th{ font-weight:500; color: var(--ink-2); width: 34%; } table.spec td{ font-variant-numeric: tabular-nums; } table.spec thead th{ background: var(--surface-2); color: var(--ink); font-weight:600; white-space:nowrap; width:auto; } .pill{ display:inline-block; font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.08em; padding: 2px 8px; border-radius: 2px; background: var(--verified-wash); color: var(--verified); white-space:nowrap; } .pill.warn{ background: var(--accent-wash); color: var(--accent); } .pill.plain{ background: var(--surface-2); color: var(--ink-2); } /* ---------- 그림 ---------- */ .figure{ background: var(--surface); border:1px solid var(--line); border-radius:2px; padding: 20px; margin:0; } .section.alt .figure{ background: var(--ground); } .figure img{ margin-inline:auto; } .figure figcaption{ margin-top: 14px; padding-top: 12px; border-top:1px solid var(--line); font-size: var(--t-xs); color: var(--muted); font-family: var(--mono); letter-spacing:.04em; } .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:center; } .split.wide-left{ grid-template-columns: 1.15fr .85fr; } .split.wide-right{ grid-template-columns: .85fr 1.15fr; } @media (max-width: 900px){ .split, .split.wide-left, .split.wide-right{ grid-template-columns:1fr; gap:28px; } } /* ---------- 연혁 ---------- */ .timeline{ list-style:none; margin:0; padding:0; } .timeline li{ display:grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 16px 0; border-top:1px solid var(--line); } .timeline li:last-child{ border-bottom:1px solid var(--line); } .timeline time{ font-family: var(--mono); font-size: var(--t-sm); color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing:.04em; } .timeline p{ margin:0; } .timeline .note{ font-size: var(--t-sm); color: var(--muted); } @media (max-width: 640px){ .timeline li{ grid-template-columns:1fr; gap:4px; } } /* ---------- 인용 ---------- */ .pull{ font-family: var(--serif); font-size: var(--t-xl); line-height:1.65; color: var(--brand); border-left: 3px solid var(--accent); padding: 6px 0 6px 24px; margin: 0; } /* ---------- 알림 상자 ---------- */ .note-box{ background: var(--brand-wash); border:1px solid var(--line); border-left: 3px solid var(--brand); border-radius:2px; padding: 24px; display:flex; flex-direction:column; gap:10px; } .note-box h3{ font-size: var(--t-md); } .note-box p{ margin:0; font-size: var(--t-sm); color: var(--ink-2); } /* ---------- 꼬리말 ---------- */ .site-foot{ background: var(--ink); color: #C9CFDE; padding-block: 56px 32px; } .site-foot a{ color: #C9CFDE; text-decoration:none; } .site-foot a:hover{ color:#fff; } .foot-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } .site-foot .mark{ font-family: var(--mono); letter-spacing:.22em; color:#fff; font-size:1.125rem; font-weight:600; } .site-foot h4{ font-family: var(--mono); font-size: var(--t-xs); letter-spacing:.14em; text-transform: uppercase; color:#7B849C; margin: 0 0 12px; font-weight:500; } .site-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size: var(--t-sm); } .site-foot .addr{ font-size: var(--t-sm); line-height:1.9; margin: 14px 0 0; color:#9AA3B7; } .site-foot .legal{ margin-top: 40px; padding-top: 20px; border-top:1px solid #262C3A; font-size: var(--t-xs); color:#6E7689; display:flex; flex-wrap:wrap; gap: 16px; justify-content:space-between; } @media (max-width: 860px){ .foot-grid{ grid-template-columns: 1fr; gap:28px; } } /* ---------- 잡동사니 ---------- */ .skip{ position:absolute; left:-9999px; top:0; background: var(--brand); color:#fff; padding: 10px 16px; z-index:100; } .skip:focus{ left: 8px; top: 8px; } .lead-list{ margin:0; padding-left: 1.2em; color: var(--ink-2); } .lead-list li{ margin-bottom: 10px; } .mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted{ color: var(--muted); } .stack{ display:flex; flex-direction:column; gap: 20px; } .stack-lg{ display:flex; flex-direction:column; gap: 44px; }