content sections, excluding hero/header sections that use bespoke typography (large white-on-dark headings). `!important` is required to win over Tailwind utility classes (text-2xl, font-bold, text-neutral-900) loaded via Tailwind CDN. HNWEB-19: Scope to `body.is-sub-page` so the home page (which loads its own home.css BEM design system: .section-text__*, .section-image__*, .solution-card with bg-image overlays, etc.) is unaffected. Sub-pages add ``. ============================================= */ body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div h2, body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) h2.section-title { font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important; font-size: 35px !important; font-weight: 600 !important; /* semibold */ color: #000000 !important; letter-spacing: -1px !important; line-height: 1.25 !important; } body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div p:not(.text-sm):not(.text-xs):not(.text-base):not([class*="text-primary"]):not([class*="text-white"]):not([class*="text-green"]) { font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #5A5A5A !important; letter-spacing: -0.8px !important; line-height: 1.6 !important; } /* Mobile readability */ @media (max-width: 640px) { body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div h2, body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) h2.section-title { font-size: 28px !important; letter-spacing: -2px !important; } body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div p:not(.text-sm):not(.text-xs):not(.text-base):not([class*="text-primary"]):not([class*="text-white"]):not([class*="text-green"]) { font-size: 17px !important; letter-spacing: -0.8px !important; } } /* Sub-page letter-spacing baseline for body text (Issue #9). HNWEB-19: was previously `body { ... }` globally, which tightened the home page Hero copy. Now scoped to sub-pages only. */ body.is-sub-page { letter-spacing: -0.02em; } /* ============================================= Issue #12 / #20: English needs looser, size-proportional tracking. KO uses -4px titles / -0.8px body (correct for 한글 glyphs), but a fixed px value over-compresses small Latin text (a -1px offset on a 14px glyph crowds far more than on a 35px glyph). Use a uniform `em` value so every font size keeps the same visual tracking ratio. ============================================= */ html[lang="en"] body.is-sub-page { letter-spacing: -0.01em; } html[lang="en"] body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div h2, html[lang="en"] body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) h2.section-title { letter-spacing: -0.025em !important; } /* HNWEB-18: EN body-p selector now matches the KO rule's specificity (added :not(.text-sm/.text-xs/.text-base)) so it actually wins the cascade instead of being out-specified by the KO -0.8px rule. Value set to `normal` because the KO-targeted -0.8px tracking was crowding 16px English copy and hurting readability. */ html[lang="en"] body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div p:not(.text-sm):not(.text-xs):not(.text-base):not([class*="text-primary"]):not([class*="text-white"]):not([class*="text-green"]) { letter-spacing: normal !important; } @media (max-width: 640px) { html[lang="en"] body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div h2, html[lang="en"] body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) h2.section-title { letter-spacing: -0.025em !important; } html[lang="en"] body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div p:not(.text-sm):not(.text-xs):not(.text-base):not([class*="text-primary"]):not([class*="text-white"]):not([class*="text-green"]) { letter-spacing: normal !important; } } /* ============================================= Issue #13: Body content should span the full section container. Sub-pages wrap text blocks in extra max-w-3xl/4xl wrappers that leave large empty gutters on wide viewports. Drop those caps for pure text blocks (paragraphs, spacing stacks) in content sections. Card grids / form wrappers keep their widths (they're not `.space-y-*` stacks and most use `mx-auto` which we don't touch anyway). ============================================= */ body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div > div[class*="space-y-"], body.is-sub-page main section:not([aria-label="히어로"]):not([aria-label="페이지 헤더"]) > div > p[class*="max-w-"] { max-width: none !important; } /* ============================================= Issue #15: Solution cards (Care Portal 해결 방식). Solid brand-blue cards with white icon well and white title. Rules beat Tailwind utility classes via !important. HNWEB-19: The home page uses a different `.solution-card` design (background image + overlay, see home.css). Scope to sub-pages only. ============================================= */ body.is-sub-page .solution-card { background-color: #1578B8 !important; border: none !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } body.is-sub-page .solution-card__icon { background-color: #ffffff !important; } body.is-sub-page .solution-card__icon .material-symbols-outlined { color: #1578B8 !important; } body.is-sub-page .solution-card__title { font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important; font-size: 20px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.03em !important; line-height: 1.3 !important; } html[lang="en"] body.is-sub-page .solution-card__title { letter-spacing: -0.02em !important; } body.is-sub-page .solution-card__desc { font-size: 14px !important; color: rgba(255, 255, 255, 0.92) !important; } /* ============================================= Issue #17: Korean-mode English text letter-spacing. In KO mode, h2/body text gets tight tracking (-4px / -0.8px) which is appropriate for Korean glyphs but too cramped for Latin characters. Use the font-display class (Inter-first stack) or the .tracking-latin utility to opt specific elements into looser -1px tracking, matching the EN-mode value. ============================================= */ html[lang="ko"] .tracking-latin, html[lang="ko"] h2.tracking-latin, html[lang="ko"] h3.tracking-latin { letter-spacing: -0.02em !important; } /* Mega-menu CSS is injected from js/main.js (initMegaMenu) so it works uniformly on pages that load home.css instead of common.css. */ /* ============================================= Legal document typography (privacy / terms). The default sub-page CSS above forces heavy 35px / -4px tracking on every section h2 and 20px paragraphs, which makes dense legal text feel cramped and visually noisy. Override for .legal-doc pages to use quieter, more readable typography. ============================================= */ .legal-doc h1 { font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; font-weight: 700; } .legal-doc .legal-subtitle { font-family: 'Inter', 'Pretendard Variable', 'Pretendard', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; color: #64748B; } /* Override the global section h2 rule for legal docs only. Use strong selector specificity to beat the default `main section:not(...) > div h2` rule above (which itself uses !important). */ main section article.legal-doc h2, main section article.legal-doc > div h2, main section.legal-doc h1, main section article.legal-doc div.legal-article h2 { font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; color: #0F172A !important; letter-spacing: -0.01em !important; line-height: 1.5 !important; padding-bottom: 8px !important; border-bottom: 1px solid #E2E8F0 !important; margin-bottom: 14px !important; } /* Page header h1 — bigger but still calm. */ main section.legal-doc h1 { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; padding-bottom: 0 !important; border-bottom: none !important; line-height: 1.3 !important; } /* Override the global section paragraph rule for legal docs. */ main section article.legal-doc p, main section article.legal-doc > div p, main section article.legal-doc li, main section article.legal-doc dd, main section article.legal-doc dt, main section article.legal-doc div.legal-article p, main section article.legal-doc div.legal-article li, main section.legal-doc p { font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #334155 !important; letter-spacing: -0.005em !important; line-height: 1.75 !important; word-break: keep-all; } /* Slightly larger lead paragraph in the preamble. */ main section article.legal-doc div.legal-preamble p { font-size: 14.5px !important; color: #475569 !important; } /* Article numbering gets a colored accent. */ .legal-doc .legal-article { margin-bottom: 36px; } .legal-doc .legal-article h2 { position: relative; } .legal-doc .legal-article h2::before { content: ''; position: absolute; left: -12px; top: 6px; bottom: 14px; width: 3px; background: #1A8FD8; border-radius: 2px; } /* Contact cards (officer / department). */ .legal-doc .legal-contact-card { border: 1px solid #E2E8F0 !important; border-radius: 8px !important; padding: 18px 22px !important; background: #F8FAFC !important; } .legal-doc .legal-contact-card .legal-card-title { font-weight: 600 !important; color: #1578B8 !important; font-size: 13.5px !important; margin-bottom: 10px !important; letter-spacing: 0 !important; } /* Note box (※). */ main section article.legal-doc .legal-note, main section article.legal-doc p.legal-note { font-size: 13px !important; color: #78716C !important; background: #FFFBEB !important; border-left: 3px solid #F59E0B !important; padding: 10px 14px !important; border-radius: 0 4px 4px 0 !important; margin: 12px 0 !important; letter-spacing: 0 !important; line-height: 1.6 !important; } /* Effective date footer. */ main section article.legal-doc .legal-effective, main section article.legal-doc p.legal-effective { font-size: 13px !important; color: #64748B !important; letter-spacing: 0 !important; text-align: right; padding-top: 18px; margin-top: 32px; border-top: 1px solid #E2E8F0; } /* Legal card title (officer / department). */ main section article.legal-doc .legal-card-title, main section article.legal-doc p.legal-card-title { font-size: 13.5px !important; font-weight: 600 !important; color: #1578B8 !important; margin-bottom: 10px !important; letter-spacing: 0 !important; line-height: 1.4 !important; } /* English typography inside .legal-doc — looser tracking for Latin. */ html[lang="en"] .legal-doc h1 { letter-spacing: -0.01em; } html[lang="en"] main section .legal-doc h2, html[lang="en"] main section .legal-doc > div h2, html[lang="en"] main section .legal-doc p, html[lang="en"] main section .legal-doc > div p, html[lang="en"] main section .legal-doc li { letter-spacing: 0 !important; } /* Mobile adjustments. */ @media (max-width: 640px) { main section .legal-doc h2, main section .legal-doc > div h2 { font-size: 16px !important; } main section .legal-doc p, main section .legal-doc > div p, main section .legal-doc li { font-size: 13.5px !important; } } /* ============================================= Unified Footer (HNWEB-14): one design across home + sub-pages ============================================= */ /* html[lang]-driven footer language toggle. is set by main.js on every page (home + sub); body.lang-ko is only toggled on home, so keying off html[lang] keeps EN/KO footers in sync across all pages. */ html[lang="ko"] .footer-en { display: none !important; } html[lang="en"] .footer-ko { display: none !important; } /* HNWEB-18: reset baseline letter-spacing inside the footer so sub-pages (which inherit -0.02em from body.is-sub-page) match the home page's default tracking. Intentional uppercase tracking on .footer__menu-title / .footer__cert-badge below still overrides this. */ .footer { background: #111118; color: rgba(255,255,255,0.7); letter-spacing: normal; } .footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; } .footer__main { padding: 64px 0 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__main .footer__inner { display: flex; gap: 64px; } .footer__company { flex: 0 0 340px; } .footer__logo { margin-bottom: 20px; } .footer__logo img { height: 32px; filter: brightness(0) invert(1); opacity: 0.9; } .footer__company-desc { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.5); margin-bottom: 28px; } .footer__contact-info { display: flex; flex-direction: column; gap: 12px; } .footer__contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; } .footer__contact-item svg { flex-shrink: 0; margin-top: 1px; color: rgba(255,255,255,0.35); } .footer__menus { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .footer__menu-title { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; } .footer__menu-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; } .footer__menu-list li a { font-size: 0.85rem; color: rgba(255,255,255,0.45); transition: color 0.3s; } .footer__menu-list li a:hover { color: rgba(255,255,255,0.9); } .footer__disclaimer { padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; } .footer__bottom { padding: 24px 0; } .footer__bottom .footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer__certs { display: flex; gap: 8px; flex-wrap: wrap; } .footer__cert-badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 4px 10px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); border-radius: 4px; letter-spacing: 0.05em; } .footer__copyright { font-size: 0.78rem; color: rgba(255,255,255,0.3); margin: 0; } .footer__legal { display: flex; gap: 24px; } .footer__legal a { font-size: 0.78rem; color: rgba(255,255,255,0.3); transition: color 0.3s; } .footer__legal a:hover { color: rgba(255,255,255,0.7); } @media (max-width: 1024px) { .footer__main .footer__inner { flex-direction: column; gap: 40px; } .footer__company { flex: none; } .footer__inner { padding: 0 24px; } } @media (max-width: 768px) { .footer__main { padding: 40px 0 32px; } .footer__menus { grid-template-columns: 1fr 1fr; gap: 28px; } .footer__inner { padding: 0 16px; } .footer__bottom .footer__inner { flex-direction: column; gap: 12px; text-align: center; } } @media (max-width: 480px) { .footer__menus { grid-template-columns: 1fr; gap: 24px; } }