/* 개편 미리보기(_preview/renewal) CSS 사본 + HZ 추가분 */ /* ========================================================================== styles.css — Dawn Sourcing, SITE-WIDE stylesheet. 2026-08-31: rebuilt on the new home's design language (site/DESIGN-HOME.md). Until today this file carried the old "Field QC Dossier" look — cream paper, IBM Plex Mono labels, 2px radius, a paper-grain overlay — while the rebuilt home ran on home.css. A visitor clicking out of the home landed on what read as a different company, which is the whole reason this file changed. Division of labour now: styles.css (this file) = tokens, base type, chrome (header/footer/WeChat), shared primitives, and every subpage component. home.css = home-only components. It carries NO tokens and no chrome — those live here, and the home links both. Change a token here and the whole site moves. That is the point. ========================================================================== */ :root{ --paper:#fff; --ink:oklch(0.19 0.012 250); --ink-60:oklch(0.19 0.012 250 / 0.62); --ink-38:oklch(0.19 0.012 250 / 0.38); --blaze:oklch(0.58 0.192 40); /* white-on-blaze buttons need 4.5:1 */ --blaze-ink:oklch(0.52 0.185 40); /* same hue, AA on white for small text */ --rule:oklch(0.90 0.004 250); --maxw:1180px; --gut:clamp(20px,5vw,44px); --disp:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ease:cubic-bezier(.22,1,.36,1); /* Compatibility aliases. ~130 component rules across nine pages still name the old tokens; pointing them at the new values migrates all of them at once and keeps this diff to the foundation instead of every line in the file. New code should use --ink-60 / --rule / --blaze-ink. */ --ink-70:var(--ink-60); --hairline:var(--rule); --stamp-green:var(--blaze-ink); /* two colours only — green is not a third */ --mono:var(--body); /* no second family; labels are Archivo caps */ } *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} [hidden]{display:none !important} html{scroll-behavior:auto;-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-weight:400; /* 2026-09-01 density pass (user: "한눈에 들어오게 — 해상도는 낮추지 말고"). The floor stays at 1rem = 16px: below that iOS Safari zooms on form focus and the phone stops being readable. What came down is the line-height and the ceiling — 18.2px body at 1.6 was setting a 29px line, and nine pages of that is where the scroll went. */ font-size:clamp(1rem,.96rem + .2vw,1.08rem); line-height:1.52; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} a[style*="color:var(--blaze)"]{color:var(--ink) !important;text-decoration:underline;text-decoration-color:var(--blaze);text-decoration-thickness:2px;text-underline-offset:3px} .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)} /* `.mono` is a label, not a typeface, and it is used ~90 times across the subpages. Redefining it here — instead of renaming every call site — turns all of them into the house uppercase Archivo label in one move. */ .mono{font-family:var(--body); text-transform:uppercase; letter-spacing:.10em; font-size:.75rem; font-weight:600} .rule{border:0; border-top:1px solid var(--rule)} .blaze{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blaze);text-decoration-thickness:.1em;text-underline-offset:.08em} h1,h2,h3{ font-family:var(--disp); font-weight:700; font-stretch:112%; line-height:1.03; letter-spacing:-.02em; font-variation-settings:"wdth" 112,"wght" 700; text-wrap:balance; } /* Display scale, 2026-09-01 density pass. The old ceilings (h1 4.15rem = 66px, h2 2.85rem = 46px at 1280) meant a three-line H1 ate 205px — a quarter of the viewport before a single fact appeared. These still read as display type at every width; they just stop being the reason a section needs two screens. The phone floors came down with them (h1 36.8 -> 31.2, h2 29.6 -> 24px) but stay well above the body, which is the ratio the 2026-08-31 note was protecting — that fix was about the phone looking like a shrunken desktop, not about any particular rem value. */ h1{font-size:clamp(1.7rem,1rem + 2.9vw,3.2rem); font-weight:800; font-variation-settings:"wdth" 112,"wght" 800} h2{font-size:clamp(1.2rem,.85rem + 2.05vw,2.2rem); margin-bottom:.38em} h3{font-size:clamp(1.08rem,1rem + .26vw,1.2rem); line-height:1.22} p{max-width:68ch} .btn{ display:inline-block; padding:15px 30px; border:1.5px solid var(--blaze); background:var(--blaze); color:#fff; text-decoration:none; font-family:var(--disp); font-weight:700; font-stretch:106%; font-size:.95rem; letter-spacing:.01em; border-radius:0; transition:background .22s var(--ease),color .22s var(--ease); } .btn:hover{background:transparent; color:var(--blaze-ink)} .btn:disabled{cursor:not-allowed; opacity:.58} /* both legacy modifiers now resolve to the one house button — a page cannot introduce a second button style just by picking a different class */ .btn--blaze{background:var(--blaze); border-color:var(--blaze); color:#fff} .btn--ghost{background:transparent; color:var(--blaze-ink); border-color:var(--blaze)} .btn--ghost:hover{background:var(--blaze); color:#fff} :focus-visible{outline:2px solid var(--blaze); outline-offset:2px} /* ---- top bar -------------------------------------------------------------- ONE header component for the whole site. Every page uses the same markup:
brand ·
with the CTA OUTSIDE