/* ═══════════════════════════════════════════════ SR ENGINEERING v4.0 — Design System White + Deep Navy · Modern Minimal ═══════════════════════════════════════════════ */ /* 웹폰트는 각 HTML 에서 preconnect + link 로 로드합니다 (렌더 차단 감소) */ /* ══════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════ */ :root { /* Core brand */ --navy: #0A1B42; --navy2: #FFFFFF; /* card / component bg (was dark) */ --navy3: #F4F7FB; /* alt section bg (was darker) */ --navy4: #EBF0FA; /* hover state */ --navy5: #E2E8F5; --gold: #C49728; --gold2: #D4AC42; --gold3: #E8C065; --gold-text: #8A6A15; /* 흰 배경 위 텍스트용 — WCAG AA 4.5:1 충족 */ --gold-text2: #7A5C12; /* 흰 배경 위 강조 텍스트용 */ --gold-dim: rgba(196,151,40,0.10); --gold-faint: rgba(196,151,40,0.06); /* Text */ --light: #0A1B42; /* primary text — dark navy */ --steel: #4A5B7A; /* secondary text */ --steel2: #5F7093; /* tertiary / dim (darkened for readability/contrast) */ --white: #FFFFFF; /* Borders */ --border: rgba(10,27,66,0.08); --border2: rgba(10,27,66,0.14); --border3: rgba(10,27,66,0.24); /* Shadows */ --shadow-sm: 0 2px 8px rgba(10,27,66,0.06); --shadow: 0 4px 20px rgba(10,27,66,0.08); --shadow-md: 0 8px 36px rgba(10,27,66,0.10); --shadow-lg: 0 24px 60px rgba(10,27,66,0.14); /* Typography */ --font-serif: 'DM Sans', 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif; --font-sans: 'DM Sans', 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif; --font-display:'DM Sans', 'Noto Sans KR', sans-serif; /* Layout */ --nav-h: 68px; --max-w: 1180px; --pad-x: 3.5rem; --pad-section: 7rem; } /* ══════════════════════════════════════ RESET & BASE ══════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); background: #FFFFFF; color: var(--light); overflow-x: hidden; min-height: 100vh; line-height: 1.6; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } /* ══════════════════════════════════════ NAVIGATION ══════════════════════════════════════ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); background: rgba(255,255,255,0.95); backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--border); transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; } .site-nav.scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 2px 20px rgba(10,27,66,0.07); border-bottom-color: var(--border2); } /* Logo */ .nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .nav-logo-img { height: 44px; width: auto; display: block; object-fit: contain; transition: opacity 0.2s; } .nav-logo:hover .nav-logo-img { opacity: 0.82; } /* Footer logo badge */ .footer-logo-badge { display: inline-block; margin-bottom: 1.2rem; } .footer-logo-img { height: 36px; width: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; } /* Menu */ .nav-menu { display: flex; align-items: center; gap: 0; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; padding: 0 1rem; height: var(--nav-h); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); transition: color 0.2s; white-space: nowrap; gap: 0.3rem; font-weight: 500; } .nav-link svg { width: 10px; height: 10px; transition: transform 0.2s; } .nav-item:hover .nav-link { color: var(--navy); } .nav-item:hover .nav-link svg { transform: rotate(180deg); } .nav-link.active { color: var(--navy); } /* Dropdown */ .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--white); border: 1px solid var(--border2); border-top: 2px solid var(--navy); box-shadow: 0 12px 40px rgba(10,27,66,0.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.2s ease; } .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown li a { display: block; padding: 0.72rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); border-bottom: 1px solid var(--border); transition: color 0.2s, background 0.2s, padding-left 0.2s; } .nav-dropdown li:last-child a { border-bottom: none; } .nav-dropdown li a:hover { color: var(--navy); background: var(--navy3); padding-left: 1.5rem; } /* CTA button */ .nav-cta { margin-left: 1rem; height: auto !important; padding: 0.5rem 1.2rem !important; background: var(--navy) !important; color: var(--white) !important; font-weight: 600 !important; font-size: 0.7rem !important; letter-spacing: 0.12em !important; line-height: 1.4 !important; transition: background 0.2s, transform 0.15s !important; flex-shrink: 0; } .nav-cta:hover { background: var(--gold) !important; color: var(--navy) !important; transform: translateY(-1px) !important; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; background: none; border: none; cursor: pointer; } body.menu-open { overflow: hidden; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--navy); transition: all 0.3s; } /* Mobile menu */ .nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); z-index: 999; padding: 2rem var(--pad-x); flex-direction: column; gap: 0; border-top: 1px solid var(--border); overflow-y: auto; } .nav-mobile.open { display: flex; } .nav-mobile-link { display: block; padding: 1rem 0; font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); border-bottom: 1px solid var(--border); transition: color 0.2s; } .nav-mobile-link:hover { color: var(--navy); } .nav-mobile-sub { padding: 0.5rem 0 0.5rem 1rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel2); border-bottom: 1px solid var(--border); display: block; transition: color 0.2s; } .nav-mobile-sub:hover { color: var(--navy); } /* ══════════════════════════════════════ PAGE WRAPPER ══════════════════════════════════════ */ .page-wrap { padding-top: var(--nav-h); } /* ══════════════════════════════════════ SECTION BASE ══════════════════════════════════════ */ .section { padding: var(--pad-section) var(--pad-x); position: relative; } .section--alt { background: var(--navy3); } .section--dark { background: var(--white); } .section--mid { background: var(--white); } .section-inner { max-width: var(--max-w); margin: 0 auto; } /* ══════════════════════════════════════ SECTION HEADER ══════════════════════════════════════ */ .sh { margin-bottom: 3.5rem; } .sh--center { text-align: center; } .sh--center .sh-desc { margin-left: auto; margin-right: auto; } .sh-eye { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; } .sh--center .sh-eye { justify-content: center; } .sh-eye-rule { width: 24px; height: 1px; background: var(--gold); flex-shrink: 0; } .sh-eye-text { font-size: 0.62rem; letter-spacing: 0.28em; color: var(--gold-text); text-transform: uppercase; font-weight: 600; } .sh-subtitle { font-family: var(--font-serif); font-weight: 600; font-size: 1rem; color: var(--steel2); margin-bottom: 0.6rem; } .sh--center .sh-subtitle { text-align: center; } .sh-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--navy); line-height: 1.18; } .sh-title em { font-style: normal; color: var(--gold-text); } .sh-desc { margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.9; color: var(--steel); max-width: 560px; } .sh-rule { display: block; width: 36px; height: 2px; background: var(--gold); margin: 1.2rem 0; } /* ══════════════════════════════════════ PAGE HERO (inner pages) ══════════════════════════════════════ */ .page-hero { min-height: 300px; display: flex; align-items: flex-end; padding: 4rem var(--pad-x) 3rem; position: relative; overflow: hidden; background: var(--navy); } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; } .page-hero-accent { position: absolute; right: -6%; top: -30%; width: 46%; height: 160%; background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 65%); transform: skewX(-5deg); border-left: 1px solid rgba(255,255,255,0.06); } .page-hero-content { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; width: 100%; } .page-hero-crumb { font-size: 0.62rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.45); text-transform: uppercase; margin-bottom: 1rem; } .page-hero-crumb a { color: var(--gold); transition: color 0.2s; } .page-hero-crumb a:hover { color: var(--gold2); } .page-hero-crumb span { margin: 0 0.5rem; } .page-hero-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--white); line-height: 1.18; margin-bottom: 0.8rem; } .page-hero-title em { font-style: normal; color: var(--gold); } .page-hero-sub { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.85; max-width: 560px; } /* ══════════════════════════════════════ BUTTONS ══════════════════════════════════════ */ .btn { display: inline-block; padding: 0.85rem 2rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.25s; line-height: 1.4; } .btn-gold { background: var(--gold); color: var(--navy); border: 2px solid var(--gold); } .btn-gold:hover { background: transparent; color: var(--gold); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--border3); } .btn-outline:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); } /* Dark bg context (CTA band, page-hero) */ .cta-band .btn-outline, .page-hero .btn-outline { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.3); } .cta-band .btn-outline:hover, .page-hero .btn-outline:hover { color: var(--white); border-color: var(--white); } .btn-ghost { color: var(--gold-text); padding: 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.2s; } .btn-ghost::after { content: '→'; } .btn-ghost:hover { gap: 0.8rem; color: var(--gold-text2); } /* ══════════════════════════════════════ CARDS ══════════════════════════════════════ */ .card { background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 2rem; position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .card:hover { border-color: var(--border2); box-shadow: var(--shadow); transform: translateY(-3px); } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--gold); transition: height 0.4s ease; } .card:hover::before { height: 100%; } /* ══════════════════════════════════════ FORM ELEMENTS ══════════════════════════════════════ */ .form-group { display: flex; flex-direction: column; gap: 0.45rem; } .form-label { font-size: 0.65rem; letter-spacing: 0.16em; color: var(--navy); text-transform: uppercase; font-weight: 600; } .form-input, .form-select, .form-textarea { background: var(--white); border: 1px solid var(--border2); color: var(--navy); padding: 0.85rem 1rem; font-family: var(--font-sans); font-size: 0.85rem; outline: none; transition: border-color 0.25s; width: 100%; -webkit-appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--steel2); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--navy); } .form-select option { background: var(--white); color: var(--navy); } .form-textarea { resize: vertical; min-height: 110px; line-height: 1.6; } /* ══════════════════════════════════════ TAGS & BADGES ══════════════════════════════════════ */ .tag { display: inline-block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.65rem; border: 1px solid var(--border2); color: var(--navy); } .tag--steel { border-color: var(--border); color: var(--steel); } .tag--solid { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-text); } /* ══════════════════════════════════════ ANIMATIONS ══════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { transform: scaleX(0); } to { transform: scaleX(1); } } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } .reveal-d5 { transition-delay: 0.40s; } /* ══════════════════════════════════════ CTA BAND ══════════════════════════════════════ */ .cta-band { padding: 5rem var(--pad-x); background: var(--navy); text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(196,151,40,0.08) 0%, transparent 65%); pointer-events: none; } .cta-band-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--white); margin-bottom: 0.9rem; position: relative; z-index: 1; } .cta-band-sub { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-bottom: 2.5rem; position: relative; z-index: 1; } .cta-band-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ .site-footer { background: var(--navy); padding: 4rem var(--pad-x) 2.5rem; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2rem; } .footer-brand-logo { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.06em; font-weight: 700; color: var(--white); margin-bottom: 0.35rem; } .footer-brand-sub { font-size: 0.52rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 1.2rem; } .footer-brand-desc { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.85; margin-bottom: 1.5rem; } .footer-brand-contact { display: flex; flex-direction: column; gap: 0.4rem; } .footer-brand-contact a { font-size: 0.75rem; color: rgba(255,255,255,0.5); transition: color 0.2s; } .footer-brand-contact a:hover { color: var(--gold); } .footer-col-title { font-size: 0.6rem; letter-spacing: 0.22em; font-weight: 600; color: var(--gold); text-transform: uppercase; margin-bottom: 1.2rem; } .footer-col-links { display: flex; flex-direction: column; gap: 0.55rem; } .footer-col-links a { font-size: 0.78rem; color: rgba(255,255,255,0.5); transition: color 0.2s, padding-left 0.2s; } .footer-col-links a:hover { color: var(--gold2); padding-left: 0.3rem; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-size: 0.7rem; color: rgba(255,255,255,0.28); letter-spacing: 0.04em; } .footer-legal { display: flex; gap: 1.5rem; } .footer-legal a { font-size: 0.68rem; color: rgba(255,255,255,0.28); transition: color 0.2s; } .footer-legal a:hover { color: var(--gold); } /* ══════════════════════════════════════ DISCLAIMER ══════════════════════════════════════ */ .legal-disclaimer { background: rgba(196,151,40,0.05); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 1rem 1.4rem; font-size: 0.82rem; color: var(--steel); line-height: 1.75; margin-top: 3rem; } /* ══════════════════════════════════════ DISPLAY NUMBERS (force bold) ══════════════════════════════════════ */ .hero-stat-num, .exp-big, .svc-num, .svc-card-num, .value-num, .val-num, .svc-flow-num, .principle-num, .method-item-num, .protocol-item-num, .stat-big, .card-num-val, .process-circle, .nav-logo-main, .footer-brand-logo, .effect-num, .founder-photo-placeholder { font-weight: 700; } /* ══════════════════════════════════════ UTILITIES ══════════════════════════════════════ */ .gold { color: var(--gold-text); } .gold2 { color: var(--gold-text2); } .steel { color: var(--steel); } .white { color: var(--white); } .serif { font-family: var(--font-serif); } .display { font-family: var(--font-display); font-weight: 700; } .uppercase { text-transform: uppercase; } .text-center { text-align: center; } .divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } .gold-line { display: block; width: 36px; height: 2px; background: var(--gold); margin: 1.2rem 0; } /* ══════════════════════════════════════ GRID HELPERS ══════════════════════════════════════ */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } /* ══════════════════════════════════════ TAG / BADGE / CHIP FIX (prevent text wrap inside pills) ══════════════════════════════════════ */ span[class$="-tag"], span[class$="-badge"], span[class$="-chip"], .badge-item, .founder-badge, .ceo-badge, .svc-card-tag, .society-tag, .card-tag { white-space: nowrap; flex-shrink: 0; } /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ @media (max-width: 1100px) { :root { --pad-x: 2.5rem; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { :root { --pad-x: 2rem; --pad-section: 5rem; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 1200px) { .nav-menu { display: none; } .nav-hamburger { display: flex; } } @media (max-width: 768px) { :root { --pad-x: 1.5rem; --pad-section: 4rem; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .page-hero { min-height: 240px; padding: 3rem var(--pad-x) 2.5rem; } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .cta-band { padding: 3.5rem var(--pad-x); } } @media (max-width: 480px) { :root { --pad-x: 1.2rem; } } /* ══════════════════════════════════════ MOBILE REFINEMENTS ══════════════════════════════════════ */ @media (max-width: 768px) { /* 본문 내 강제 줄바꿈 해제 — 화면 폭에 맞춰 자연스럽게 흐르도록 */ .hero-sub br, .svc-desc br, .founder-text br, .founder-text p br, .approach-text br, .svc-definition br, .leader-bio br, .legal-disclaimer br, .vmg-content br, .val-desc br, .value-desc br, .sh-desc br, .cta-band-sub br, .article-cta-desc br, .org-hiring-desc br, .hiring-desc br { display: none; } } @media (max-width: 480px) { /* 작은 보조 텍스트 최소 가독성 확보 (약 10.5~11px) */ .news-cat, .ins-cat, .insight-cat, .card-tag, .org-team-desc, .scope-note, .page-hero-crumb, .insight-read-time, .insight-date, .news-date, .article-crumb, .sh-eye-text { font-size: 0.68rem; } /* 배지가 길어져도 화면을 밀어내지 않도록 */ .badge-item, .founder-badge, .ceo-badge, .card-tag { white-space: normal; line-height: 1.4; } /* 조직도 2열 유지하되 여백 축소 */ .org-team, .org-team-cell { padding: 1.3rem 0.7rem; } .org-team-name { font-size: 0.8rem; } .org-team-desc { font-size: 0.7rem; } } @media (max-width: 600px) { /* 서비스 상세 페이지 여백 최적화 */ .svc-definition { font-size: 1rem; padding: 1.4rem; } .scope-item { padding: 1rem; } .effect-item { gap: 1rem; } .svc-sidebar, .svc-sticky { padding: 1.5rem; } } /* ══════════════════════════════════════ A11Y — 대비 · 포커스 · 모션 · 인쇄 ══════════════════════════════════════ */ /* 다크 배경 내부에서는 밝은 골드 유지 (남색 위 6.25:1) */ .page-hero .sh-eye-text, .cta-band .sh-eye-text, .site-footer .sh-eye-text, .page-hero .sh-title em, .cta-band .sh-title em, .site-footer .sh-title em, .page-hero .btn-ghost, .cta-band .btn-ghost, .site-footer .btn-ghost, .page-hero .gold, .cta-band .gold, .site-footer .gold { color: var(--gold); } .page-hero .btn-ghost:hover, .cta-band .btn-ghost:hover, .site-footer .btn-ghost:hover, .page-hero .gold2, .cta-band .gold2, .site-footer .gold2 { color: var(--gold2); } /* 키보드 포커스 표시 */ :focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; border-radius: 2px; } .page-hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .site-nav.scrolled :focus-visible { outline-color: var(--gold3); } .form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; } /* 본문 바로가기 링크 */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--navy); color: var(--white); padding: 0.85rem 1.4rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 1rem; top: 1rem; outline: 3px solid var(--gold3); outline-offset: 2px; } /* 표 가로 스크롤 (모바일) */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > table { min-width: 520px; } /* v1.83: grid/flex 자식일 때 트랙이 늘어나 가로 스크롤이 생기는 문제 방지 */ .table-scroll { min-width: 0; max-width: 100%; } /* 모션 최소화 설정 존중 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* 인쇄 */ @media print { .site-nav, .nav-mobile, .site-footer, .cta-band, .skip-link { display: none !important; } body { color: #000; background: #fff; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } } /* ══════════════════════════════════════ ARTICLE (인사이트 상세) — 공통 스타일 (개별 페이지 인라인에서 통합) ══════════════════════════════════════ */ .article-hero { background: var(--navy); padding: 4rem var(--pad-x) 3.5rem; position: relative; overflow: hidden; } .article-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; } .article-hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; } .article-crumb { font-size: 0.62rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 1.2rem; } .article-crumb a { color: var(--gold); transition: color 0.2s; } .article-crumb a:hover { color: var(--gold2); } .article-crumb span { margin: 0 0.5rem; } .article-cat { display: inline-block; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(196,151,40,0.4); padding: 0.25rem 0.7rem; margin-bottom: 1.2rem; } .article-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--white); line-height: 1.25; margin-bottom: 1.2rem; } .article-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .article-meta-item { font-size: 0.68rem; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.4rem; } .article-meta-item::before { content: ''; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; display: inline-block; } .article-body-wrap { max-width: 780px; margin: 0 auto; padding: 4rem var(--pad-x); } .article-lead { font-size: 1.05rem; line-height: 1.9; color: var(--steel); margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); font-weight: 400; } .article-body h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; color: var(--navy); margin: 2.8rem 0 1rem; padding-left: 1rem; border-left: 3px solid var(--gold); line-height: 1.4; } .article-body h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--navy); margin: 2rem 0 0.7rem; } .article-body p { font-size: 0.92rem; line-height: 1.95; color: #3A4A62; margin-bottom: 1.2rem; } .article-body ul, .article-body ol { margin: 1rem 0 1.4rem 1.2rem; } .article-body li { font-size: 0.9rem; line-height: 1.85; color: #3A4A62; margin-bottom: 0.5rem; } .article-body ul li { list-style: disc; } .article-body ol li { list-style: decimal; } .article-callout { background: var(--navy3); border-left: 3px solid var(--gold); padding: 1.4rem 1.6rem; margin: 2rem 0; } .article-callout p { margin: 0; font-size: 0.88rem; line-height: 1.85; color: var(--steel); } .article-callout strong { color: var(--navy); } .article-table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.82rem; } .article-table th { background: var(--navy); color: var(--white); padding: 0.7rem 1rem; text-align: left; font-weight: 600; letter-spacing: 0.05em; font-size: 0.75rem; } .article-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); color: var(--steel); vertical-align: top; line-height: 1.7; } .article-table tr:nth-child(even) td { background: var(--navy3); } .article-tag { display: inline-block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border: 1px solid var(--border2); color: var(--steel); margin-right: 0.4rem; } .article-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: gap; gap: 1rem; } .article-cta { background: var(--navy); padding: 2.5rem; margin: 3rem 0 0; text-align: center; } .article-cta-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; } .article-cta-desc { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 1.5rem; } .article-nav { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; } .article-nav-link { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.5rem; border: 1px solid var(--border); flex: 1; min-width: 200px; max-width: 340px; transition: border-color 0.2s, background 0.2s; } .article-nav-link:hover { border-color: var(--border2); background: var(--navy3); } .article-nav-label { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel2); } .article-nav-title { font-size: 0.82rem; font-weight: 600; color: var(--navy); line-height: 1.4; } .article-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); transition: gap 0.2s; } .article-back::before { content: '←'; } .article-back:hover { gap: 0.8rem; } @media (max-width: 768px) { .article-body-wrap { padding: 2.5rem var(--pad-x); } .article-hero { padding: 3rem var(--pad-x) 2.5rem; } } .article-refs { margin-top: 3rem; padding: 1.6rem 1.8rem; background: var(--navy3); border: 1px solid var(--border); } .article-refs-title { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.9rem; } .article-refs ul { margin: 0 0 0 1.1rem; } .article-refs li { font-size: 0.78rem; color: var(--steel); line-height: 1.75; margin-bottom: 0.4rem; list-style: disc; } .article-refs-note { font-size: 0.72rem; color: var(--steel2); line-height: 1.7; margin-top: 1rem; } /* ══════════════════════════════════════ NEWS (뉴스 상세) — 공통 스타일 (개별 페이지 인라인에서 통합) ※ ARTICLE 블록과 중복되는 선언은 뉴스 페이지로 스코프 처리 ══════════════════════════════════════ */ .article-hero { background: var(--navy); padding: 4rem var(--pad-x) 3.5rem; position: relative; overflow: hidden; } .article-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; } .article-hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; } .article-crumb { font-size: 0.62rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 1.2rem; } .article-crumb a { color: var(--gold); transition: color 0.2s; } .article-crumb a:hover { color: var(--gold2); } .article-crumb span { margin: 0 0.5rem; } .article-cat { display: inline-block; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(196,151,40,0.4); padding: 0.25rem 0.7rem; margin-bottom: 1.2rem; } .article-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--white); line-height: 1.25; margin-bottom: 1.2rem; } .article-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .article-meta-item { font-size: 0.68rem; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.4rem; } .article-meta-item::before { content: ''; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; display: inline-block; } .article-body-wrap { max-width: 780px; margin: 0 auto; padding: 4rem var(--pad-x); } .article-lead { font-size: 1.05rem; line-height: 1.9; color: var(--steel); margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); font-weight: 400; } .article-body h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; color: var(--navy); margin: 2.8rem 0 1rem; padding-left: 1rem; border-left: 3px solid var(--gold); line-height: 1.4; } .article-body h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--navy); margin: 2rem 0 0.7rem; } .article-body p { font-size: 0.92rem; line-height: 1.95; color: #3A4A62; margin-bottom: 1.2rem; } .article-body ul, .article-body ol { margin: 1rem 0 1.4rem 1.2rem; } .article-body li { font-size: 0.9rem; line-height: 1.85; color: #3A4A62; margin-bottom: 0.5rem; } .article-body ul li { list-style: disc; } .article-body ol li { list-style: decimal; } .article-callout { background: var(--navy3); border-left: 3px solid var(--gold); padding: 1.4rem 1.6rem; margin: 2rem 0; } .article-callout p { margin: 0; font-size: 0.88rem; line-height: 1.85; color: var(--steel); } .article-callout strong { color: var(--navy); } .article-profile { display: flex; gap: 2rem; align-items: flex-start; background: var(--navy3); border: 1px solid var(--border); padding: 2rem; margin: 2rem 0; } .article-profile-icon { width: 72px; height: 72px; background: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; font-weight: 700; color: var(--gold); font-family: var(--font-display); } .article-profile-name { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.3rem; } .article-profile-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; } .article-profile-desc { font-size: 0.82rem; color: var(--steel); line-height: 1.8; } .article-highlight { background: var(--navy); padding: 2rem 2.5rem; margin: 2rem 0; } .article-highlight p { color: rgba(255,255,255,0.85); font-size: 0.95rem; line-height: 1.85; margin: 0; } .article-highlight strong { color: var(--gold); } .article-cta { background: var(--navy); padding: 2.5rem; margin: 3rem 0 0; text-align: center; } .article-cta-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; } .article-cta-desc { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 1.5rem; } .article-nav { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; } .article-nav-link { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.5rem; border: 1px solid var(--border); flex: 1; min-width: 200px; max-width: 340px; transition: border-color 0.2s, background 0.2s; } .article-nav-link:hover { border-color: var(--border2); background: var(--navy3); } .article-nav-label { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel2); } .article-nav-title { font-size: 0.82rem; font-weight: 600; color: var(--navy); line-height: 1.4; } .page-news .article-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); transition: gap 0.2s; margin-top: 2rem; } .article-back::before { content: '←'; } .article-back:hover { gap: 0.8rem; } @media (max-width: 768px) { .article-body-wrap { padding: 2.5rem var(--pad-x); } .article-hero { padding: 3rem var(--pad-x) 2.5rem; } .article-profile { flex-direction: column; } } /* 상시 모집 배지 (채용 공고) */ .article-meta-item--ongoing { color: #BE185D; font-weight: 600; background: rgba(190,24,93,0.08); border: 1px solid rgba(190,24,93,0.22); border-radius: 999px; padding: 0.1rem 0.6rem; } .article-meta-item--ongoing::before { display: none !important; } /* ══ v1.88: 인사이트 전문성 요소 ══ */ .article-scope { border-left: 3px solid var(--gold); background: var(--navy3); padding: 1.1rem 1.3rem; margin: 0 0 2rem; } .article-scope-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-bottom: 0.5rem; } .article-scope p { font-size: 0.83rem; color: var(--steel); line-height: 1.85; margin: 0; word-break: keep-all; } .series-badge { display: inline-flex; align-items: center; gap: 0.7rem; border: 1px solid var(--border); padding: 0.45rem 0.9rem; margin-bottom: 1.5rem; } .series-name { font-size: 0.74rem; font-weight: 700; color: var(--navy); } .series-no { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--gold-text); font-weight: 700; } .series-links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 0; } .series-links a { font-size: 0.8rem; color: var(--gold-text); font-weight: 600; border: 1px solid var(--border); padding: 0.6rem 1rem; line-height: 1.5; word-break: keep-all; flex: 1 1 240px; } .series-links a:hover { background: var(--gold-faint); } .sre-check { border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 1.5rem 1.6rem; margin: 2.5rem 0 0; background: var(--white); } .sre-check-title { font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: var(--navy); margin-bottom: 1rem; word-break: keep-all; } .sre-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .sre-check-list li { font-size: 0.83rem; color: var(--steel); line-height: 1.7; padding-left: 1.4rem; position: relative; word-break: keep-all; } .sre-check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-text); font-weight: 700; } .sre-check-note { font-size: 0.75rem; color: var(--steel2); line-height: 1.7; margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--border); word-break: keep-all; } .basis-grid { display: flex; flex-direction: column; gap: 0.5rem; } .basis-row { display: grid; grid-template-columns: 116px 1fr; gap: 0.9rem; align-items: start; } .basis-k { font-size: 0.75rem; color: var(--steel2); font-weight: 600; line-height: 1.7; } .basis-v { font-size: 0.78rem; color: var(--steel); line-height: 1.7; word-break: keep-all; } @media (max-width: 560px) { .basis-row { grid-template-columns: 1fr; gap: 0.15rem; } .basis-k { margin-top: 0.4rem; } .sre-check { padding: 1.2rem 1.1rem; } } /* ══ v1.89: 적용기준 구분표 · 관련 글 ══ */ .page-hero-note { font-size: 0.82rem; color: rgba(255,255,255,0.62); line-height: 1.8; margin-top: 0.6rem; word-break: keep-all; max-width: 620px; } .basis-wrap { overflow-x: visible; } .basis-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 0; table-layout: fixed; } .basis-table thead th { background: var(--navy); color: #fff; text-align: left; padding: 0.7rem 0.9rem; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; white-space: nowrap; } .basis-table td { border-bottom: 1px solid var(--border); padding: 0.75rem 0.9rem; vertical-align: top; } .basis-table tbody tr:last-child td { border-bottom: none; } .basis-cat { color: var(--navy); font-weight: 700; white-space: nowrap; width: 132px; } .basis-src { color: var(--steel); line-height: 1.7; word-break: keep-all; } .basis-note { font-size: 0.73rem; color: var(--steel2); line-height: 1.7; margin: 0.85rem 0 0; word-break: keep-all; } .related-wrap { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--border); } .related-title { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-bottom: 1.1rem; } .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .rel-card { display: flex; flex-direction: column; gap: 0.45rem; background: var(--white); padding: 1.1rem 1.2rem; text-decoration: none; transition: background 0.2s; } .rel-card:hover { background: var(--navy3); text-decoration: none; } .rel-cat { font-size: 0.63rem; letter-spacing: 0.1em; color: var(--gold-text); font-weight: 700; text-transform: uppercase; } .rel-title { font-family: var(--font-serif); font-weight: 700; font-size: 0.87rem; color: var(--navy); line-height: 1.55; word-break: keep-all; } .article-nav--series .article-nav-label { color: var(--gold-text); } @media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } .basis-cat { width: auto; white-space: normal; } .basis-table { font-size: 0.76rem; min-width: 0; } .basis-table thead th, .basis-table td { padding: 0.6rem 0.55rem; } .basis-table thead th { white-space: normal; } } /* ══ v1.96: 페이지 Hero 미세 차별화 (선·번호·태그) ══ */ .hero-mark { position: absolute; right: var(--pad-x); bottom: 2.2rem; z-index: 2; display: flex; align-items: flex-end; gap: 0.55rem; pointer-events: none; } .hero-mark-item { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.34); text-transform: uppercase; line-height: 1; } /* About — 조직 연결선 */ .hero-mark--about { flex-direction: column; align-items: flex-end; gap: 0.4rem; } .hero-mark--about .hero-rule { display: block; height: 1px; background: rgba(196,151,40,0.45); } .hero-mark--about .hero-rule:nth-child(1) { width: 56px; } .hero-mark--about .hero-rule:nth-child(2) { width: 34px; } .hero-mark--about .hero-rule:nth-child(3) { width: 20px; } /* Service — 서비스 인덱스 번호 */ .hero-mark--service .hero-mark-item { border-left: 1px solid rgba(196,151,40,0.35); padding-left: 0.5rem; } /* Experience — Case No. */ .hero-mark--case .hero-mark-item { font-size: 0.66rem; color: rgba(196,151,40,0.6); } .hero-mark--case .hero-rule { display: block; width: 40px; height: 1px; background: rgba(196,151,40,0.4); margin-bottom: 0.45rem; } /* How We Work — 5단계 흐름선 */ .hero-mark--flow { gap: 0.3rem; align-items: center; } .hero-mark--flow .hero-dot { width: 5px; height: 5px; border: 1px solid rgba(196,151,40,0.55); border-radius: 50%; } .hero-mark--flow .hero-dot--on { background: rgba(196,151,40,0.55); } .hero-mark--flow .hero-seg { width: 14px; height: 1px; background: rgba(196,151,40,0.35); } /* Insights — 문서 인덱스 태그 */ .hero-mark--doc { flex-direction: column; align-items: flex-end; gap: 0.35rem; } .hero-mark--doc .hero-mark-item { border: 1px solid rgba(255,255,255,0.14); padding: 0.22rem 0.5rem; } @media (max-width: 900px) { .hero-mark { display: none; } } /* ══ v1.107: 앵커 이동 시 고정 헤더 가림 방지 ══ 상단 내비게이션이 position:fixed(68px)이므로, #앵커로 이동하면 대상 요소가 헤더 아래로 파고들어 제목이 가려진다. scroll-margin-top으로 각 앵커 대상에 여백을 확보한다. */ [id]:target { scroll-margin-top: 92px; }