/* ========================================================================== BTN Lab — Corporate Website Stylesheet -------------------------------------------------------------------------- 01. Design Tokens 02. Reset & Base 03. Layout Utilities 04. Typography Components 05. Buttons & Links 06. Media / Image Slots 07. Header 08. Mobile Navigation 09. HOME — Hero 10. HOME — About 11. HOME — IB-100 12. HOME — Technology 13. HOME — Research & Field Data 14. HOME — Milestones 15. HOME — Mission 16. HOME — News 17. HOME — CTA 18. Footer 19. Sub Page (공통 서브페이지) 20. Utilities (To Top, Reveal) 21. Responsive 22. Reduced Motion / Print ========================================================================== */ /* ========================================================================== 01. Design Tokens ========================================================================== */ :root { /* Brand colors */ --c-navy-950: #061430; --c-navy-900: #0A1F44; --c-navy-800: #10295A; --c-navy-700: #1A3A73; --c-blue-600: #1F5BD6; --c-blue-500: #2F6FE4; --c-blue-100: #E4ECFB; --c-blue-50: #F1F5FD; --c-cyan-400: #38BDE0; /* Accent — 매우 제한적으로 사용 */ --c-cyan-100: #E2F5FA; /* Neutrals */ --c-ink: #0B1B34; --c-text: #3A475C; --c-muted: #5E6B80; --c-line: #E2E7EF; --c-line-strong: #CAD3E0; --c-bg: #FFFFFF; --c-bg-soft: #F5F7FA; --c-bg-tint: #EEF3F9; /* To-be-confirmed marker */ --c-tbc-text: #8A5B00; --c-tbc-bg: #FFF7E6; --c-tbc-border: #E6C88A; /* Typography */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Layout */ --container: 1280px; --gutter: clamp(20px, 4vw, 40px); --header-h: 84px; --section-y: clamp(88px, 10vw, 144px); /* Shape & depth */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(10, 31, 68, .06); --shadow: 0 12px 32px -16px rgba(10, 31, 68, .20); --shadow-lg: 0 32px 64px -32px rgba(10, 31, 68, .32); /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); --dur: .3s; } /* ========================================================================== 02. Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) - 4px); } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.75; color: var(--c-text); background: var(--c-bg); word-break: keep-all; /* 한글 어절 단위 줄바꿈 */ overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.nav-open { overflow: hidden; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; } address { font-style: normal; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--c-blue-600); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--c-blue-100); color: var(--c-navy-900); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 18px; background: var(--c-navy-900); color: #fff; font-weight: 600; border-radius: var(--radius-sm); transition: top .2s; } .skip-link:focus { top: 16px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 03. Layout Utilities ========================================================================== */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .bg-soft { background: var(--c-bg-soft); } .section-head { margin-bottom: clamp(48px, 6vw, 72px); max-width: 760px; } .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; } .section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .section-foot { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; } .br-sm, .br-md { display: none; } /* ========================================================================== 04. Typography Components ========================================================================== */ .eyebrow, .section-label { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; color: var(--c-blue-600); text-transform: uppercase; margin-bottom: 20px; } .eyebrow::before, .section-label::before { content: ""; width: 28px; height: 1px; background: currentColor; } .section-label--light { color: #8FD3EA; } .section-title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.24; letter-spacing: -0.03em; color: var(--c-ink); } .prose { margin-top: 28px; max-width: 620px; } .prose p { font-size: 17px; line-height: 1.85; color: var(--c-text); } .prose p + p { margin-top: 16px; } .section-note { margin-top: 32px; font-size: 14px; line-height: 1.7; color: var(--c-muted); } .section-foot .section-note { margin-top: 0; max-width: 760px; } /* .tbc — 내부 검토용 마커 스타일 (공개 버전 HTML에서는 사용하지 않음) */ .tbc { display: inline-block; padding: 2px 8px; font-size: 12.5px; font-weight: 500; line-height: 1.6; letter-spacing: 0; color: var(--c-tbc-text); background: var(--c-tbc-bg); border: 1px dashed var(--c-tbc-border); border-radius: 4px; white-space: nowrap; } /* ========================================================================== 05. Buttons & Links ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; border: 1px solid transparent; border-radius: var(--radius-sm); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap; } .btn .icon { font-size: 18px; transition: transform var(--dur) var(--ease); } .btn:hover .icon { transform: translateX(4px); } .btn-primary { background: var(--c-navy-900); color: #fff; } .btn-primary:hover { background: var(--c-blue-600); box-shadow: 0 10px 24px -12px rgba(31, 91, 214, .6); } .btn-outline { background: #fff; color: var(--c-navy-900); border-color: var(--c-line-strong); } .btn-outline:hover { border-color: var(--c-navy-900); background: var(--c-navy-900); color: #fff; } .btn-lg { min-height: 60px; padding: 0 36px; font-size: 16px; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; padding-block: 8px; font-size: 15px; font-weight: 600; color: var(--c-navy-900); border-bottom: 1px solid var(--c-line-strong); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .link-arrow .icon { font-size: 18px; transition: transform var(--dur) var(--ease); } .link-arrow:hover { color: var(--c-blue-600); border-color: var(--c-blue-600); } .link-arrow:hover .icon { transform: translateX(4px); } .section-head--row .link-arrow, .section-foot .link-arrow { margin-top: 0; } /* ========================================================================== 06. Media / Image Slots -------------------------------------------------------------------------- 실제 이미지 교체 방법: 1) 경로를 실제 이미지로 변경 2) width/height 속성을 실제 비율에 맞게 수정 (CLS 방지) 3)
삭제 ========================================================================== */ .media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-tint); } .media img { width: 100%; height: 100%; object-fit: cover; } .media--4x3 { aspect-ratio: 4 / 3; } .media--4x5 { aspect-ratio: 4 / 5; } .media--16x10 { aspect-ratio: 16 / 10; } .media--16x9 { aspect-ratio: 16 / 9; } /* 임시 이미지 표시 라벨 (개발용 배지) — 실제 이미지로 교체 시 figcaption 삭제 */ .slot-label { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 3px 8px 3px 3px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; color: var(--c-muted); background: rgba(255, 255, 255, .88); border: 1px solid var(--c-line); border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot-tag { flex-shrink: 0; padding: 1px 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--c-tbc-text); background: var(--c-tbc-bg); border-radius: 2px; } /* ========================================================================== 07. Header ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); background: transparent; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), height var(--dur) var(--ease); } .site-header.is-scrolled, .site-header.is-menu-open { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--c-line), 0 8px 24px -16px rgba(10, 31, 68, .18); } .site-header.is-scrolled { height: 72px; } @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { .site-header.is-scrolled { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); } } .header-inner { height: 100%; display: flex; align-items: center; gap: 40px; } /* Typography Logo */ .logo { display: inline-flex; align-items: baseline; gap: 7px; font-size: 23px; line-height: 1; letter-spacing: .06em; color: var(--c-navy-900); flex-shrink: 0; } .logo-btn { font-weight: 800; } .logo-lab { font-weight: 400; color: var(--c-blue-600); padding-left: 8px; border-left: 1px solid var(--c-line-strong); } .logo--light { color: #fff; } .logo--light .logo-lab { color: #9DC0F5; border-color: rgba(255, 255, 255, .25); } /* Global Navigation */ .gnb { margin-left: auto; } .gnb-list { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); } .gnb-list a { position: relative; display: inline-block; padding-block: 10px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--c-navy-900); transition: color var(--dur) var(--ease); } .gnb-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--c-blue-600); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease); } .gnb-list a:hover, .gnb-list a[aria-current="page"] { color: var(--c-blue-600); } .gnb-list a:hover::after, .gnb-list a[aria-current="page"]::after { transform: scaleX(1); } /* Utility: language + hamburger */ .header-util { display: flex; align-items: center; gap: 20px; } .lang { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; } .lang-link { position: relative; display: inline-flex; align-items: center; min-height: 32px; color: var(--c-muted); transition: color var(--dur) var(--ease); } .lang-link.is-active { color: var(--c-navy-900); } .lang-link:hover { color: var(--c-blue-600); } .lang-sep { color: var(--c-line-strong); } .lang-link[data-lang-pending] { cursor: default; } .lang-link[data-lang-pending]::after { content: "Coming soon"; position: absolute; top: calc(100% + 6px); right: 0; padding: 5px 9px; font-size: 11px; letter-spacing: .04em; color: #fff; background: var(--c-navy-900); border-radius: 4px; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; } .lang-link[data-lang-pending]:hover::after, .lang-link[data-lang-pending]:focus-visible::after, .lang-link[data-lang-pending].show-tip::after { opacity: 1; transform: none; } .menu-toggle { display: none; position: relative; width: 48px; height: 48px; margin-right: -12px; border-radius: var(--radius-sm); } .menu-toggle-bar { position: absolute; left: 13px; width: 22px; height: 2px; background: var(--c-navy-900); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity .2s, top var(--dur) var(--ease); } .menu-toggle-bar:nth-child(1) { top: 16px; } .menu-toggle-bar:nth-child(2) { top: 23px; } .menu-toggle-bar:nth-child(3) { top: 30px; } .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { top: 23px; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { top: 23px; transform: rotate(-45deg); } /* ========================================================================== 08. Mobile Navigation ========================================================================== */ .mobile-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; padding: 16px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .mobile-nav.is-open { opacity: 1; transform: none; } .mobile-nav-list li { border-bottom: 1px solid var(--c-line); } .mobile-nav-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 18px; } .mn-en { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--c-navy-900); } .mn-ko { font-size: 14px; color: var(--c-muted); } .mobile-nav-list a[aria-current="page"] .mn-en, .mobile-nav-list a:hover .mn-en { color: var(--c-blue-600); } .mobile-nav-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; } .mobile-nav-foot .lang-link[data-lang-pending]::after { right: auto; left: 0; top: auto; bottom: calc(100% + 6px); } .mobile-nav-copy { font-size: 13px; color: var(--c-muted); } /* ========================================================================== 09. HOME — Hero ========================================================================== */ .hero { position: relative; padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(80px, 9vw, 128px); background: var(--c-bg-soft); overflow: hidden; } /* 우측의 절제된 그리드 패턴 */ .hero::before { content: ""; position: absolute; inset: 0 0 0 50%; background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 56px 56px; opacity: .6; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; } .hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .hero-title { margin: 0; } .hero-title-en { display: block; font-size: clamp(40px, 5.4vw, 76px); font-weight: 700; line-height: 1.06; letter-spacing: -0.04em; color: var(--c-navy-900); } .hero-title-ko { display: block; margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; line-height: 1.45; letter-spacing: -0.03em; color: var(--c-navy-700); } .hero-desc { margin-top: 28px; max-width: 540px; font-size: 17px; line-height: 1.85; color: var(--c-text); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .hero-keywords { display: flex; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--c-muted); text-transform: uppercase; } .hero-keywords::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--c-cyan-400); flex-shrink: 0; } .hero-visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-lg); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } .hero-visual .slot-label { top: 16px; bottom: auto; } .hero-visual-card { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; background: rgba(255, 255, 255, .95); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); } .hvc-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue-600); } .hvc-v { font-size: 14px; font-weight: 600; color: var(--c-navy-900); } /* ========================================================================== 10. HOME — About ========================================================================== */ .about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 8vw, 120px); align-items: center; } .about-media { max-width: 520px; justify-self: end; width: 100%; } /* R&D Approach — 기초 연구 → 제품 개발 → 현장 적용·검증 */ .approach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; max-width: 620px; } .approach-step { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 22px 16px 0 0; border-top: 1px solid var(--c-line-strong); } .approach-step::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; background: #fff; border: 2px solid var(--c-blue-600); border-radius: 50%; } .approach-step:last-child::before { background: var(--c-blue-600); } .approach-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--c-blue-600); } .approach-en { margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink); } .approach-ko { font-size: 13px; color: var(--c-muted); } .keyword-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(64px, 8vw, 104px); } .keyword-card { padding: 36px 32px 40px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .keyword-card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow); transform: translateY(-4px); } .keyword-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; font-size: 24px; color: var(--c-blue-600); background: var(--c-blue-50); border-radius: 50%; } .keyword-title { margin-top: 28px; font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--c-navy-900); } .keyword-desc { margin-top: 8px; font-size: 15px; color: var(--c-muted); line-height: 1.7; } /* ========================================================================== 11. HOME — IB-100 ========================================================================== */ .ib100-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 112px); align-items: center; } .ib100-name { font-size: clamp(64px, 8vw, 116px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--c-navy-900); } .ib100-sub { margin-top: 16px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--c-blue-600); } .ib100-text .btn { margin-top: 40px; } .product-card { background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-navy-900); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(28px, 3.4vw, 44px); } .product-media { margin-block: 24px 4px; border: 1px solid var(--c-line); } .product-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--c-navy-900); } .product-card-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--c-muted); } .product-card-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--c-navy-900); } .spec-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--c-line); } .spec-row:last-child { border-bottom: 0; padding-bottom: 0; } .spec-row dt { display: flex; flex-direction: column; gap: 2px; } .spec-en { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .spec-ko { font-size: 13px; color: var(--c-muted); } .spec-row dd { align-self: center; font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--c-ink); } .feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(64px, 8vw, 96px); background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; } .feature-card { position: relative; padding: 40px 32px 44px; background: #fff; transition: background-color var(--dur) var(--ease); } .feature-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--c-blue-600); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease); } .feature-card:hover { background: var(--c-blue-50); } .feature-card:hover::before { transform: scaleX(1); } .feature-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--c-blue-600); } .feature-icon { position: absolute; top: 36px; right: 32px; font-size: 28px; color: var(--c-navy-700); } .feature-title { margin-top: 56px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--c-ink); } .feature-ko { margin-top: 8px; font-size: 15px; color: var(--c-muted); } /* ========================================================================== 12. HOME — Technology ========================================================================== */ .tech-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; } .tech-media { margin-top: 48px; } .concept { padding: clamp(28px, 3.6vw, 48px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .concept-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line); } .concept-tag { display: inline-block; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--c-navy-800); background: var(--c-cyan-100); border-radius: 999px; } .concept-title { font-size: 15px; font-weight: 600; color: var(--c-ink); } .concept-title span { margin-left: 6px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--c-muted); } .concept-intro { margin-top: 20px; font-size: 14px; color: var(--c-muted); } .concept-flow { margin-top: 24px; } .concept-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 24px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius); } .concept-step + .concept-step { margin-top: 36px; } /* 단계 간 연결선 + 화살표 — 점선으로 표현해 '개념적 흐름'임을 강조 */ .concept-step + .concept-step::before { content: ""; position: absolute; left: 47px; top: -37px; width: 2px; height: 30px; background: repeating-linear-gradient(to bottom, var(--c-line-strong) 0 4px, transparent 4px 8px); } .concept-step + .concept-step::after { content: ""; position: absolute; left: 44px; top: -12px; width: 8px; height: 8px; border-right: 2px solid var(--c-blue-600); border-bottom: 2px solid var(--c-blue-600); transform: rotate(45deg); } .concept-num { display: grid; place-items: center; width: 48px; height: 48px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-line-strong); border-radius: 50%; } .concept-en { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink); } .concept-ko { margin-top: 2px; font-size: 14px; color: var(--c-muted); line-height: 1.6; } .concept-step--final { background: var(--c-navy-900); border-color: var(--c-navy-900); } .concept-step--final .concept-num { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .concept-step--final .concept-en { color: #fff; } .concept-step--final .concept-ko { color: rgba(255, 255, 255, .75); } .concept-note { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--c-line-strong); font-size: 13px; line-height: 1.7; color: var(--c-muted); } /* ========================================================================== 13. HOME — Research & Field Data ========================================================================== */ .research .section-head--split .prose { margin-top: 0; } .research-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .research-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .research-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); } .research-card .media { border-radius: 0; } .research-card .media img { transition: transform .8s var(--ease); } .research-card:hover .media img { transform: scale(1.03); } .research-body { padding: 28px 28px 32px; } .study-tag { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 4px; } .study-tag--field { color: var(--c-navy-900); border: 1px solid var(--c-navy-900); } .study-tag--research { color: var(--c-blue-600); background: var(--c-blue-50); border: 1px solid var(--c-blue-100); } .research-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 20px; font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--c-navy-900); } .research-title span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--c-muted); } .research-desc { margin-top: 10px; font-size: 16px; color: var(--c-text); } /* ========================================================================== 14. HOME — Milestones ========================================================================== */ .milestone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .milestone-card { display: flex; flex-direction: column; padding: 36px 28px 32px; background: var(--c-bg-soft); border-top: 2px solid var(--c-navy-900); border-radius: 0 0 var(--radius) var(--radius); } .milestone-icon { font-size: 32px; color: var(--c-navy-700); } .milestone-media { margin-top: 24px; border: 1px solid var(--c-line); background: #fff; } .milestone-cat { margin-top: 32px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue-600); } .milestone-title { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--c-ink); } .milestone-meta { margin-top: auto; padding-top: 28px; } .milestone-meta div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-block: 12px; border-top: 1px solid var(--c-line); } .milestone-meta dt { font-size: 13px; color: var(--c-muted); } .milestone-meta dd { font-size: 14px; font-weight: 600; color: var(--c-ink); } /* ========================================================================== 15. HOME — Mission ========================================================================== */ .mission { position: relative; padding-block: calc(var(--section-y) * 1.1); background: var(--c-navy-900); color: #fff; overflow: hidden; } .mission-deco { position: absolute; right: -12%; top: 50%; width: min(760px, 70vw); height: auto; color: #6FA4F0; opacity: .14; transform: translateY(-50%); pointer-events: none; } .mission-inner { position: relative; } .mission-title { max-width: 980px; font-size: clamp(36px, 5.4vw, 76px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; color: #fff; } .mission-lead { margin-top: clamp(28px, 3vw, 40px); max-width: 880px; font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255, 255, 255, .92); } .mission-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(32px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .16); } .mission-body p { font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, .74); } /* ========================================================================== 16. HOME — News ========================================================================== */ .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .news-grid > li { display: flex; } .news-card { display: flex; flex-direction: column; width: 100%; min-height: 280px; padding: 32px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .news-card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow); } .news-cat { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--c-blue-600); } .news-title { margin-top: 20px; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--c-ink); transition: color var(--dur) var(--ease); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card:hover .news-title { color: var(--c-blue-600); } .news-excerpt { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-muted); } .news-meta .icon { font-size: 18px; color: var(--c-navy-900); transition: transform var(--dur) var(--ease); } .news-card:hover .news-meta .icon { transform: translateX(4px); color: var(--c-blue-600); } .news-card--placeholder time { font-family: var(--font-mono); letter-spacing: .04em; } .news-card > .news-excerpt { margin-bottom: 32px; } /* ========================================================================== 17. HOME — CTA ========================================================================== */ .cta { padding-block: clamp(72px, 8vw, 112px); background: var(--c-bg-tint); border-top: 1px solid var(--c-line); } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; } .cta-title { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; color: var(--c-navy-900); } .cta-ko { margin-top: 16px; font-size: 17px; color: var(--c-text); line-height: 1.7; } /* ========================================================================== 18. Footer ========================================================================== */ .site-footer { padding-top: clamp(64px, 7vw, 96px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--c-navy-950); color: rgba(255, 255, 255, .72); font-size: 14px; } .footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; padding-bottom: 48px; } .footer-tagline { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .72); } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; } .footer-nav li + li { margin-top: 6px; } .footer-nav a { display: inline-block; padding-block: 6px; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: rgba(255, 255, 255, .85); transition: color var(--dur) var(--ease); } .footer-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; } .footer-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 28px; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); } .footer-company { font-weight: 600; color: #fff; } .footer-company span { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2); font-weight: 400; color: rgba(255, 255, 255, .72); } .footer-contact { display: flex; flex-wrap: wrap; gap: 12px 32px; } .footer-contact div { display: flex; align-items: center; gap: 10px; } .footer-contact dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .5); } .footer-contact dd { color: rgba(255, 255, 255, .85); } .site-footer .tbc { color: #F3D9A4; background: rgba(243, 217, 164, .08); border-color: rgba(243, 217, 164, .35); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; padding-right: 64px; /* 맨 위로 버튼과 겹치지 않도록 */ font-size: 13px; } .footer-copy { color: rgba(255, 255, 255, .6); } .footer-policy { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; color: rgba(255, 255, 255, .88); } .footer-policy:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } /* ========================================================================== 19. Sub Page (공통 서브페이지 레이아웃) ========================================================================== */ .page-hero { position: relative; padding: calc(var(--header-h) + clamp(56px, 7vw, 104px)) 0 clamp(56px, 7vw, 96px); background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0 0 0 55%; background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 56px 56px; opacity: .6; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; } .page-hero .container { position: relative; } .page-title { font-size: clamp(40px, 5.4vw, 72px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; color: var(--c-navy-900); } .page-title-ko { margin-top: 16px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; color: var(--c-navy-700); } .breadcrumb { margin-bottom: 28px; font-size: 13px; color: var(--c-muted); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; } .breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--c-line-strong); } .breadcrumb a:hover { color: var(--c-blue-600); } .page-body { padding-block: clamp(64px, 8vw, 112px); } .notice-box { max-width: 760px; padding: clamp(32px, 4vw, 48px); background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-navy-900); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .notice-box h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); } .notice-box p { margin-top: 12px; font-size: 16px; line-height: 1.8; } .notice-box .btn { margin-top: 32px; } .notice-tag { display: inline-block; margin-bottom: 16px; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--c-blue-600); background: var(--c-blue-50); border: 1px solid var(--c-blue-100); border-radius: 4px; } .contact-list { margin-top: 28px; border-top: 1px solid var(--c-navy-900); } .contact-list div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--c-line); } .contact-list dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--c-muted); } .contact-list dd { font-size: 15px; font-weight: 600; color: var(--c-ink); } .nowrap { white-space: nowrap; } @media (max-width: 560px) { .contact-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; } } /* ========================================================================== 20. Utilities — To Top, Reveal ========================================================================== */ .to-top { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 80; display: grid; place-items: center; width: 48px; height: 48px; font-size: 20px; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-line-strong); border-radius: 50%; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background-color var(--dur), color var(--dur); } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--c-navy-900); color: #fff; border-color: var(--c-navy-900); } /* Scroll Reveal — JS가 html.has-reveal 을 추가한 경우에만 동작 (JS 로딩 실패 시에도 콘텐츠는 항상 보임) */ .has-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } .has-reveal .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== 21. Responsive ========================================================================== */ /* ---------- ≤ 1200px ---------- */ @media (max-width: 1200px) { .header-inner { gap: 28px; } .gnb-list { gap: 24px; } .gnb-list a { font-size: 13px; letter-spacing: .06em; } .feature-card { padding: 36px 24px 40px; } .feature-icon { right: 24px; } .milestone-card { padding: 32px 24px 28px; } } /* ---------- ≤ 1024px (Tablet) ---------- */ @media (max-width: 1024px) { :root { --header-h: 72px; } .gnb { display: none; } .header-util { margin-left: auto; } .menu-toggle { display: block; } .site-header.is-scrolled { height: var(--header-h); } .hero-inner { grid-template-columns: minmax(0, 1fr); } .hero-content { max-width: 720px; } .hero-visual { aspect-ratio: 16 / 10; } .hero::before { inset: 45% 0 0 0; } .about-grid { grid-template-columns: minmax(0, 1fr); } .about-media { max-width: none; justify-self: stretch; aspect-ratio: 16 / 10; } .ib100-grid { grid-template-columns: minmax(0, 1fr); } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tech-grid { grid-template-columns: minmax(0, 1fr); } .section-head--split { grid-template-columns: minmax(0, 1fr); gap: 24px; } .research-grid { gap: 16px; } .research-body { padding: 24px 22px 28px; } .research-title { font-size: 19px; } .milestone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-grid { gap: 16px; } .news-card { padding: 28px 24px; } .news-title { font-size: 20px; } .footer-top { grid-template-columns: minmax(0, 1fr); gap: 36px; } .footer-nav { max-width: 480px; } } /* ---------- ≤ 860px ---------- */ @media (max-width: 860px) { .research-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .research-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .research-card .media { aspect-ratio: auto; height: 100%; min-height: 200px; } .research-body { align-self: center; } .news-grid { grid-template-columns: minmax(0, 1fr); } .news-card { min-height: 0; } .mission-body { grid-template-columns: minmax(0, 1fr); } .cta-inner { flex-direction: column; align-items: flex-start; } } /* ---------- ≤ 768px (Mobile) ---------- */ @media (max-width: 768px) { :root { --header-h: 64px; } body { font-size: 15px; } .logo { font-size: 20px; } .hero { padding-top: calc(var(--header-h) + 40px); } .hero-desc { font-size: 16px; } .hero-visual { aspect-ratio: 4 / 3; } .hero-visual-card { left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; } .hvc-v { font-size: 13px; } .prose p { font-size: 16px; } .keyword-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .keyword-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 24px; } .keyword-icon { grid-row: span 2; } .keyword-title { margin-top: 0; font-size: 14px; } .keyword-desc { margin-top: 2px; font-size: 14px; } .spec-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 16px; } .spec-row dt { flex-direction: row; align-items: baseline; gap: 8px; } .section-head--row { flex-direction: column; align-items: flex-start; } .milestone-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .milestone-cat { margin-top: 24px; } .mission-deco { right: -40%; width: 120vw; opacity: .1; } .footer-info { flex-direction: column; align-items: flex-start; } .footer-contact { flex-direction: column; gap: 10px; } .footer-company span { display: inline-block; } .br-md { display: inline; } } /* ---------- ≤ 560px ---------- */ @media (max-width: 560px) { .header-util > .lang { display: none; } /* 모바일 메뉴 내 언어 선택 사용 */ .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .hero-keywords { font-size: 11px; letter-spacing: .08em; } .br-lg { display: none; } .feature-grid { grid-template-columns: minmax(0, 1fr); } .feature-card { padding: 28px 24px 32px; } .feature-title { margin-top: 32px; } .feature-icon { top: 26px; } .concept-step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; } .concept-num { width: 40px; height: 40px; font-size: 13px; } .concept-step + .concept-step::before { left: 35px; } .concept-step + .concept-step::after { left: 32px; } .concept-en { font-size: 15px; } .concept-ko { font-size: 13px; } .research-card { display: flex; } .research-card .media { aspect-ratio: 4 / 3; height: auto; min-height: 0; } .research-body { align-self: stretch; } .approach-step { padding-right: 10px; } .approach-en { font-size: 13px; } .approach-ko { font-size: 12px; } .slot-label { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 10px; } .eyebrow { font-size: 12px; letter-spacing: .12em; gap: 10px; } .eyebrow::before { width: 20px; } .ib100-text .btn, .cta .btn { width: 100%; } .footer-nav { gap: 16px 24px; } .footer-company span { display: block; margin: 6px 0 0; padding: 0; border: 0; } .footer-bottom { flex-direction: column; align-items: flex-start; } .br-sm { display: inline; } } /* ---------- ≥ 1025px: 모바일 메뉴 강제 숨김 ---------- */ @media (min-width: 1025px) { .mobile-nav { display: none !important; } } /* ========================================================================== 22. Reduced Motion / Print ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .has-reveal .reveal { opacity: 1; transform: none; } } @media print { .site-header, .mobile-nav, .to-top, .skip-link { display: none !important; } .hero { padding-top: 24px; } .has-reveal .reveal { opacity: 1 !important; transform: none !important; } .mission, .site-footer { background: #fff !important; color: #000 !important; } .mission-title, .mission-lead, .mission-body p { color: #000 !important; } } /* ========================================================================== 23. Sub Page Components — ABOUT / IB-100 (및 향후 서브페이지 공용) -------------------------------------------------------------------------- 23-1. Sub Hero 23-6. Timeline 23-2. Overview/Metric 23-7. Data Table / Info Box 23-3. Vision & Mission 23-8. Species Cards 23-4. Competence 23-9. CTA variants / Light buttons 23-5. Process Flow 23-10. Responsive ========================================================================== */ /* ---------- 23-1. Sub Hero (HOME .hero 재사용 + 변형) ---------- */ .hero--sub .breadcrumb { margin-bottom: 28px; } .hero--sub .hero-title-en { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; } .hero--sub .hero-title-ko { font-size: clamp(20px, 2vw, 28px); } .hero-desc + .hero-desc { margin-top: 14px; } .hero-product-name { display: block; font-size: clamp(72px, 9vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--c-navy-900); } .hero-product-sub { display: block; margin-top: 18px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.01em; color: var(--c-blue-600); } /* ---------- 23-2. Company Overview / Metric ---------- */ .overview-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 112px); align-items: start; } .overview-grid .prose p.prose-emphasis { font-size: 19px; font-weight: 600; color: var(--c-navy-900); } .metric-list { border-top: 2px solid var(--c-navy-900); } .metric-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: baseline; padding-block: 32px; border-bottom: 1px solid var(--c-line); } .metric-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-blue-600); } .metric-en { font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--c-navy-900); } .metric-ko { margin-top: 8px; font-size: 15px; color: var(--c-muted); } /* ---------- 23-3. Vision & Mission ---------- */ .vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .vm-item { padding: clamp(32px, 4vw, 52px); background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-navy-900); } .vm-item--dark { background: var(--c-navy-900); border-color: var(--c-navy-900); } .vm-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--c-blue-600); } .vm-item--dark .vm-label { color: #8FD3EA; } .vm-statement { margin-top: 20px; font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; color: var(--c-ink); } .vm-item--dark .vm-statement { color: #fff; } .value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); margin-top: clamp(48px, 6vw, 72px); } .value-item { padding-top: 24px; border-top: 1px solid var(--c-line-strong); } .value-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-blue-600); } .value-en { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); } .value-ko { margin-top: 6px; font-size: 15px; color: var(--c-muted); } /* ---------- 23-4. Core Competence ---------- */ .scale-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--c-muted); } .scale-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line-strong), var(--c-blue-600)); position: relative; } .scale-line::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--c-blue-600); border-right: 1px solid var(--c-blue-600); transform: rotate(45deg); } .competence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .competence-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: clamp(28px, 3vw, 40px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color var(--dur) var(--ease); } .competence-card:hover { border-color: var(--c-line-strong); } .competence-icon { display: grid; place-items: center; width: 56px; height: 56px; font-size: 26px; color: var(--c-blue-600); background: var(--c-blue-50); border-radius: 50%; } .competence-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-blue-600); } .competence-title { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--c-ink); } .competence-desc { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--c-muted); } /* ---------- 23-5. Process Flow (가로 단계 흐름) ---------- 단계 수는 style="--steps:5" 로 지정 */ .flow { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); } .flow-step { position: relative; padding-right: 20px; } .flow-step:not(:last-child)::before { content: ""; position: absolute; top: 24px; left: 60px; right: 22px; height: 1px; background: var(--c-line-strong); } .flow-step:not(:last-child)::after { content: ""; position: absolute; top: 20px; right: 22px; width: 8px; height: 8px; border-top: 1.5px solid var(--c-blue-600); border-right: 1.5px solid var(--c-blue-600); transform: rotate(45deg); } .flow-num { position: relative; display: grid; place-items: center; width: 48px; height: 48px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-line-strong); border-radius: 50%; } .flow-body { margin-top: 20px; } .flow-en { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink); } .flow-ko { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--c-muted); } .flow-step--key .flow-num { color: #fff; background: var(--c-navy-900); border-color: var(--c-navy-900); } .flow--dark .flow-num { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .35); } .flow--dark .flow-step:not(:last-child)::before { background: rgba(255, 255, 255, .2); } .flow--dark .flow-step:not(:last-child)::after { border-color: #8FD3EA; } .flow--dark .flow-en { color: #fff; } .flow--dark .flow-ko { color: rgba(255, 255, 255, .7); } .flow--dark .flow-step--key .flow-num { color: var(--c-navy-900); background: #fff; border-color: #fff; } .mission-body--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-loop { display: flex; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: rgba(255, 255, 255, .72); } .flow-loop .icon { font-size: 20px; color: #8FD3EA; } /* ---------- 23-6. Timeline ---------- */ .timeline-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: start; } .timeline-head { position: sticky; top: calc(var(--header-h) + 32px); } .timeline { position: relative; margin-left: 6px; border-left: 1px solid var(--c-line-strong); } .timeline-item { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 0 0 40px 36px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: -7px; top: 7px; width: 13px; height: 13px; background: #fff; border: 2px solid var(--c-blue-600); border-radius: 50%; } .timeline-item--dated::before { background: var(--c-blue-600); } .timeline-year { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--c-navy-900); } .timeline-year .tbc { vertical-align: middle; } .timeline-text { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--c-ink); } .timeline-sub { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--c-muted); } /* ---------- 23-7. Data Table / Info Box ---------- */ .product-overview { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: start; } .data-table { border-top: 2px solid var(--c-navy-900); } .data-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--c-line); } .data-row dt { display: flex; flex-direction: column; gap: 2px; } .data-row dd { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--c-ink); } .data-row dd small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--c-muted); } .info-box { margin-top: 40px; padding: 24px 28px; background: var(--c-bg-soft); border-left: 3px solid var(--c-navy-900); } .info-box-title { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--c-navy-900); } .info-box-title span { margin-left: 8px; font-weight: 500; letter-spacing: 0; color: var(--c-muted); } .info-box p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: var(--c-text); } /* ---------- 23-8. Species Cards ---------- */ .species-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .species-card { display: flex; flex-direction: column; min-height: 210px; padding: 32px 28px 28px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-navy-900); } .species-card--pending { background: var(--c-bg-soft); border-top-color: var(--c-line-strong); } .species-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-blue-600); } .species-en { margin-top: 24px; font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--c-navy-900); } .species-ko { margin-top: 4px; font-size: 15px; color: var(--c-muted); } .species-status { margin-top: auto; padding-top: 24px; } /* ---------- 23-9. CTA variants / Light buttons ---------- */ .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; } .cta--dark { background: var(--c-navy-900); border-top: 0; } .cta--dark .cta-title { color: #fff; } .cta--dark .cta-ko { color: rgba(255, 255, 255, .78); } .cta--dark + .site-footer { border-top: 1px solid rgba(255, 255, 255, .08); } .btn-light { background: #fff; color: var(--c-navy-900); } .btn-light:hover { background: var(--c-blue-100); } .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .4); } .btn-outline-light:hover { background: #fff; color: var(--c-navy-900); border-color: #fff; } /* ---------- 23-10. Responsive ---------- */ @media (max-width: 1024px) { .overview-grid, .timeline-wrap, .product-overview { grid-template-columns: minmax(0, 1fr); } .timeline-head { position: static; } .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .flow-step { padding-right: 12px; } .flow-step:not(:last-child)::before { left: 56px; right: 14px; } .flow-step:not(:last-child)::after { right: 14px; } .flow-en { font-size: 15px; } } @media (max-width: 860px) { .mission-body--two { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .vm-grid, .value-grid, .competence-grid { grid-template-columns: minmax(0, 1fr); } .value-grid { gap: 24px; } /* Process Flow → 세로 */ .flow { grid-template-columns: minmax(0, 1fr); } .flow-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 0 0 28px; } .flow-step:last-child { padding-bottom: 0; } .flow-step:not(:last-child)::before { top: 52px; bottom: 4px; left: 23px; right: auto; width: 1px; height: auto; } .flow-step:not(:last-child)::after { display: none; } .flow-body { margin-top: 0; padding-top: 11px; } .flow-en { font-size: 16px; } .timeline-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 28px; } .timeline-year { font-size: 20px; } .data-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 16px; } .data-row dt { flex-direction: row; align-items: baseline; gap: 8px; } .metric-card { padding-block: 24px; } .competence-card { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; } .competence-icon { width: 48px; height: 48px; font-size: 22px; } .cta--dark .cta-inner, .cta-inner { align-items: flex-start; } } @media (max-width: 560px) { .species-grid { grid-template-columns: minmax(0, 1fr); } .species-card { min-height: 0; } .cta-actions { flex-direction: column; align-items: stretch; width: 100%; } .cta-actions .btn { width: 100%; } .info-box { padding: 20px; } } /* ========================================================================== 24. TECHNOLOGY / FIELD DATA Components -------------------------------------------------------------------------- 24-1. Evidence Badges 24-6. Chart Frame (차트 입력 영역) 24-2. Concept Pair (Zn + Asp) 24-7. Observation / Field Note 24-3. Indicator Cards 24-8. Study Index (Hero) 24-4. Immune Window Visual 24-9. Scientific Note 24-5. Study Block / Panel 24-10. Responsive ========================================================================== */ /* ---------- 24-1. Evidence Badges ---------- 논문 게재가 확인된 자료에만 ev-badge--published 사용 */ .ev-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; border-radius: 4px; } .ev-badge--controlled { color: #fff; background: var(--c-navy-900); border-color: var(--c-navy-900); } .ev-badge--field { color: var(--c-navy-900); background: #fff; border-color: var(--c-navy-900); } .ev-badge--observational { color: var(--c-blue-600); background: var(--c-blue-50); border-color: var(--c-blue-100); } .ev-badge--preliminary { color: var(--c-muted); background: var(--c-bg-soft); border: 1px dashed var(--c-line-strong); } .ev-badge--published { color: var(--c-navy-900); background: var(--c-cyan-100); border-color: #B5E3F0; } .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } /* ---------- 24-2. Concept Pair (Zinc + Aspartate) ---------- */ .concept-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; } .concept-atom { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius); } .concept-atom-symbol { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; font-size: 14px; font-weight: 800; color: #fff; background: var(--c-navy-900); border-radius: 50%; } .concept-atom--asp .concept-atom-symbol { color: var(--c-navy-900); background: #fff; border: 1.5px solid var(--c-blue-600); } .concept-plus { font-size: 22px; font-weight: 300; color: var(--c-blue-600); } .concept-pair + .concept-flow { margin-top: 36px; position: relative; } .concept-pair + .concept-flow::before { content: ""; position: absolute; left: 47px; top: -33px; width: 2px; height: 26px; background: repeating-linear-gradient(to bottom, var(--c-line-strong) 0 4px, transparent 4px 8px); } .concept-pair + .concept-flow::after { content: ""; position: absolute; left: 44px; top: -12px; width: 8px; height: 8px; border-right: 2px solid var(--c-blue-600); border-bottom: 2px solid var(--c-blue-600); transform: rotate(45deg); } /* ---------- 24-3. Indicator Cards ---------- */ .indicator-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 6vw, 72px); background: var(--c-line); border: 1px solid var(--c-line); } .indicator-card { display: flex; flex-direction: column; padding: 32px 28px; background: #fff; } .indicator-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-blue-600); } .indicator-en { margin-top: 28px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink); } .indicator-ko { margin-top: 4px; font-size: 14px; color: var(--c-muted); } .indicator-status { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-size: 12px; color: var(--c-muted); } .indicator-status::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--c-line-strong); border-radius: 50%; } .indicator-caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 13px; color: var(--c-muted); } /* ---------- 24-4. Immune Window Visual (Dark section) ---------- */ .window-visual { margin-top: clamp(48px, 6vw, 72px); } .window-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } .window-seg { position: relative; padding: 36px 20px 0 0; } .window-seg::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, .18); } .window-seg::after { content: ""; position: absolute; top: 1px; left: 0; width: 16px; height: 16px; background: var(--c-navy-900); border: 2px solid #fff; border-radius: 50%; } .window-seg--focus::before { background: repeating-linear-gradient(90deg, #38BDE0 0 12px, rgba(56, 189, 224, .25) 12px 18px); } .window-seg--focus::after { border-color: #38BDE0; } .window-seg--end::before { background: rgba(255, 255, 255, .55); } .window-en { font-size: 17px; font-weight: 700; line-height: 1.35; color: #fff; } .window-ko { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .7); } .window-label { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 18px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #8FD3EA; border: 1px dashed rgba(56, 189, 224, .6); border-radius: 999px; } /* ---------- 24-5. Study Block / Panel ---------- */ .study { padding-block: var(--section-y); border-top: 1px solid var(--c-line); } .study.bg-soft { border-top: 0; } .study-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 56px); } .study-head .prose { margin-top: 0; } .study-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: start; } .panel { background: #fff; border: 1px solid var(--c-line); } .panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 16px 24px; border-bottom: 1px solid var(--c-line); } .panel-title { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--c-navy-900); } .panel-sub { font-size: 12px; color: var(--c-muted); } .panel-body { padding: 8px 24px 24px; } .panel + .panel { margin-top: 24px; } .data-table--compact { border-top: 0; } .data-table--compact .data-row { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding-block: 14px; } .data-table--compact .data-row:last-child { border-bottom: 0; } .data-table--compact .data-row dd { font-size: 15px; } .chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-line-strong); border-radius: 999px; } /* ---------- 24-6. Chart Frame (차트 입력 영역) ---------- 공식 자료 확정 후: .chart-empty 를 삭제하고 차트 이미지(SVG/PNG)를 로 넣거나, 데이터 표로 대체 */ .chart { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; padding-top: 16px; } .chart-y { grid-row: 1; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--c-muted); white-space: nowrap; } .chart-area { position: relative; grid-row: 1; aspect-ratio: 16 / 9; min-height: 180px; border-left: 1px solid var(--c-line-strong); border-bottom: 1px solid var(--c-line-strong); background-image: repeating-linear-gradient(to top, transparent 0 calc(20% - 1px), var(--c-line) calc(20% - 1px) 20%); } .chart-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .chart-x { grid-column: 2; padding-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--c-muted); } .chart-ticks { display: flex; justify-content: space-between; grid-column: 2; padding-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); } .chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .chart-empty strong { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--c-navy-700); } /* ---------- 24-7. Observation / Field Note ---------- */ .observation { margin-top: 24px; padding: 20px 24px; background: var(--c-blue-50); border-left: 3px solid var(--c-blue-600); } .observation-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--c-blue-600); } .observation-text { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.7; color: var(--c-ink); } .observation-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--c-muted); } .field-note { margin-top: 16px; padding: 16px 20px; font-size: 13.5px; line-height: 1.75; color: var(--c-text); background: #fff; border: 1px dashed var(--c-line-strong); } .field-note p + p { margin-top: 8px; } .field-note [lang="en"] { font-style: italic; color: var(--c-muted); } /* ---------- 24-8. Study Index (Field Data Hero) ---------- */ .study-index { position: relative; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-navy-900); box-shadow: var(--shadow); } .study-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--c-line); } .study-index-row a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--c-line); transition: background-color var(--dur) var(--ease); } .study-index-row:last-child a { border-bottom: 0; } .study-index-row a:hover { background: var(--c-bg-soft); } .study-index-row .icon { font-size: 18px; color: var(--c-navy-900); transition: transform var(--dur) var(--ease); } .study-index-row a:hover .icon { transform: translateX(3px); color: var(--c-blue-600); } .si-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--c-blue-600); } .si-species { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--c-muted); } .si-title { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--c-ink); } .si-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .si-badges .ev-badge { padding: 2px 7px; font-size: 9.5px; } /* ---------- 24-9. Scientific Note ---------- */ .sci-note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; max-width: 920px; padding: 28px 32px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-navy-900); } .sci-note-icon { display: grid; place-items: center; width: 40px; height: 40px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-style: italic; font-weight: 700; color: var(--c-navy-900); border: 1.5px solid var(--c-navy-900); border-radius: 50%; } .sci-note-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--c-navy-900); } .sci-note p { margin-top: 8px; font-size: 14.5px; line-height: 1.85; color: var(--c-text); } /* Evidence approach / legend cards */ .evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .evidence-card { padding: 32px 28px; background: #fff; border: 1px solid var(--c-line); } .evidence-en { margin-top: 24px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-ink); } .evidence-ko { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--c-muted); } .legend-list { border-top: 2px solid var(--c-navy-900); } .legend-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 20px; border-bottom: 1px solid var(--c-line); } .legend-row dd { font-size: 16px; font-weight: 600; color: var(--c-ink); } .legend-row dd small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--c-muted); } /* ---------- 24-10. Responsive ---------- */ @media (max-width: 1024px) { .indicator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .study-head, .study-grid { grid-template-columns: minmax(0, 1fr); } .evidence-grid { gap: 16px; } .evidence-card { padding: 28px 22px; } } @media (max-width: 768px) { .evidence-grid { grid-template-columns: minmax(0, 1fr); } .window-track { grid-template-columns: minmax(0, 1fr); gap: 28px; } .window-seg { padding-right: 0; } .legend-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 16px; } .data-table--compact .data-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .panel-head, .panel-body { padding-inline: 18px; } .sci-note { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 20px; } } @media (max-width: 560px) { .indicator-grid { grid-template-columns: minmax(0, 1fr); } .indicator-en { margin-top: 16px; } .concept-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; } .concept-plus { text-align: center; line-height: 1; } .concept-pair + .concept-flow::before { left: 35px; } .concept-pair + .concept-flow::after { left: 32px; } .chart-area { aspect-ratio: 4 / 3; } .study-index-row a { padding: 16px 18px; grid-template-columns: 26px minmax(0, 1fr) 18px; } } /* ========================================================================== 25. STORYLINE Visuals — Labile Zinc · Evidence · Immunity Management -------------------------------------------------------------------------- 25-1. Hero Diagram 25-7. Cellular Zinc Uptake Diagram 25-2. Key Message 25-8. Evidence Summary Cards 25-3. Vaccination Timeline (vx) 25-9. Bar Compare / Paper Card / Results 25-4. Two-Stage Diagram 25-10. Credentials (Emblem · Certificate · Patent) 25-5. Zinc Comparison 25-11. Biosecurity Paradigm 25-6. Dynamic Coordination 25-12. Responsive ========================================================================== */ /* ---------- 25-1. Hero Diagram (inline SVG, 텍스트는 사이트 폰트 사용) ---------- */ .hero-visual--diagram { background: #fff; } .hero-visual.hero-visual--diagram { aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center; } .hero-visual--diagram svg { display: block; width: 100%; height: 100%; } .hv-chip { fill: var(--c-navy-900); } .hv-chip-text { fill: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; } .hv-num { fill: var(--c-blue-600); font-family: var(--font-mono); font-size: 11px; font-weight: 600; } .hv-label { fill: var(--c-navy-900); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .hv-small { fill: var(--c-navy-700); font-size: 10px; font-weight: 700; } .hv-caption { fill: var(--c-muted); font-size: 12.5px; } .product-media--photo { aspect-ratio: 16 / 10; background: #fff; } .product-media--photo img { object-fit: contain; padding: 12px; } .hero-visual--product img { object-fit: contain; padding: 24px; background: #fff; } .prose p.prose-emphasis { font-size: 19px; font-weight: 600; color: var(--c-navy-900); } .section-head .keymsg-ko { margin-top: 14px; } /* ---------- 25-2. Key Message ---------- */ .keymsg-en { font-size: clamp(30px, 4.2vw, 56px); font-weight: 700; line-height: 1.14; letter-spacing: -0.035em; color: var(--c-navy-900); } .keymsg-en em { font-style: normal; color: var(--c-blue-600); } .keymsg-ko { margin-top: 18px; font-size: clamp(18px, 1.8vw, 23px); font-weight: 500; line-height: 1.6; color: var(--c-navy-700); } .keymsg-sub { margin-top: 32px; padding: 20px 24px; background: #fff; border-left: 3px solid var(--c-blue-600); max-width: 760px; } .keymsg-sub p { font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--c-ink); } .keymsg-sub p + p { margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--c-muted); } /* ---------- 25-3. Vaccination Timeline (vx) ---------- 위치 계산: 주령(week) 5~17 범위 → left = (week - 5) / 12 사용: style="--at:8" / style="--from:8; --to:16" */ .vx { margin-top: clamp(40px, 5vw, 56px); background: #fff; border: 1px solid var(--c-line); } .vx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .vx-body { min-width: 640px; padding: 12px 28px 24px; } .vx-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px dashed var(--c-line); } .vx-label { font-size: 14px; font-weight: 700; color: var(--c-ink); line-height: 1.4; } .vx-label span { display: block; font-size: 12px; font-weight: 400; color: var(--c-muted); } .vx-track { position: relative; height: 112px; } .vx-track::before { content: ""; position: absolute; left: 0; right: 0; top: 51px; height: 2px; background: var(--c-line-strong); } .vx-window, .vx-bar { position: absolute; top: 40px; height: 24px; left: calc((var(--from) - var(--vx-min, 5)) * 100% / var(--vx-span, 12)); width: calc((var(--to) - var(--from)) * 100% / var(--vx-span, 12)); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; overflow: hidden; } .vx-window { color: var(--c-navy-700); background: repeating-linear-gradient(135deg, var(--c-cyan-100) 0 8px, #fff 8px 14px); border: 1px dashed #7CCFE6; } .vx-bar { justify-content: flex-start; padding-left: 10px; color: #fff; background: var(--c-navy-900); } .vx-flag--neutral { color: var(--c-navy-700); background: #fff; border: 1px dashed #7CCFE6; } .vx-mark { position: absolute; top: 45px; left: calc((var(--at) - var(--vx-min, 5)) * 100% / var(--vx-span, 12)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 130px; text-align: center; } .vx-mark::before { content: ""; width: 14px; height: 14px; background: #fff; border: 3px solid var(--c-blue-600); border-radius: 50%; } .vx-mark b { margin-top: 12px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--c-ink); } .vx-mark small { font-size: 11px; color: var(--c-muted); } .vx-mark--end::before { background: var(--c-blue-600); } .vx-flag { position: absolute; top: 6px; left: calc((var(--at) - var(--vx-min, 5)) * 100% / var(--vx-span, 12)); transform: translateX(-50%); padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--c-blue-600); background: var(--c-blue-50); border: 1px solid var(--c-blue-100); border-radius: 999px; white-space: nowrap; } .vx-axis { position: relative; height: 28px; margin-left: 166px; } .vx-axis span { position: absolute; top: 8px; left: calc((var(--at) - var(--vx-min, 5)) * 100% / var(--vx-span, 12)); transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); } .vx-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); } .vx-foot > div { padding: 18px 28px; background: var(--c-bg-soft); } .vx-foot-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--c-navy-900); } .vx-foot p:not(.vx-foot-label) { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--c-text); } .vx-hint { display: none; padding: 10px 20px 0; font-size: 12px; color: var(--c-muted); } /* ---------- 25-4. Two-Stage Zinc Utilization Diagram ---------- */ .stages { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1.2fr) minmax(0, .85fr); margin-top: clamp(40px, 5vw, 64px); background: #fff; border: 1px solid var(--c-line); } .stage { padding: 32px 28px 36px; } .stage--1 { background: var(--c-bg-soft); } .stage--2 { border-right: 1px solid var(--c-line); } .stage-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--c-blue-600); } .stage-title { margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-ink); } .stage-ko { margin-top: 2px; font-size: 14px; color: var(--c-muted); } .stage-steps { display: flex; flex-direction: column; gap: 26px; margin-top: 28px; } .stage-step { position: relative; padding: 11px 16px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); } .stage-step + .stage-step::before { content: ""; position: absolute; left: 22px; top: -24px; width: 1px; height: 18px; background: var(--c-line-strong); } .stage-step + .stage-step::after { content: ""; position: absolute; left: 19px; top: -10px; width: 7px; height: 7px; border-right: 1.5px solid var(--c-blue-600); border-bottom: 1.5px solid var(--c-blue-600); transform: rotate(45deg); } .stage-step--soft { color: var(--c-navy-700); background: var(--c-blue-50); border-color: var(--c-blue-100); } .stage-step--labile { color: var(--c-navy-900); background: var(--c-cyan-100); border-color: #8ED3E8; } .stage-step--key { color: #fff; background: var(--c-navy-900); border-color: var(--c-navy-900); } .stage-step small { display: block; font-size: 12px; font-weight: 400; color: inherit; opacity: .75; } .stage-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 10px; color: #fff; background: var(--c-navy-900); text-align: center; } .stage-divider-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; line-height: 1.5; } .stage-divider .icon { font-size: 28px; color: #8FD3EA; stroke-width: 2; } .stage-outcome { padding: 32px 24px 36px; background: var(--c-blue-50); } .stage-outcome .stage-title { font-size: 17px; } .outcome-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } .outcome-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14.5px; font-weight: 700; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-blue-100); border-radius: var(--radius-sm); } .outcome-list li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; background: var(--c-blue-600); border-radius: 50%; } .stage-outcome-note { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); } .stages-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; margin-top: 24px; padding: 20px 28px; background: var(--c-navy-900); color: #fff; } .stages-brand { font-size: 12px; font-weight: 700; letter-spacing: .18em; line-height: 1.5; } .stages-brand span { display: block; color: #8FD3EA; } .stages-caption p { font-size: 15px; font-weight: 600; line-height: 1.6; } .stages-caption p + p { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .75); } /* ---------- 25-5. Zinc Comparison ---------- */ .zc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 56px); } .zc-card { display: flex; flex-direction: column; padding: 32px 28px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-line-strong); } .zc-card--ib { border-color: var(--c-navy-900); border-top: 4px solid var(--c-navy-900); box-shadow: var(--shadow); } .zc-type { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--c-navy-900); } .zc-type-ko { margin-top: 4px; font-size: 14px; color: var(--c-muted); } .zc-card--ib .zc-type-ko { color: var(--c-blue-600); font-weight: 600; } .zc-rows { margin-top: 24px; border-top: 1px solid var(--c-line); } .zc-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding-block: 16px; border-bottom: 1px solid var(--c-line); } .zc-rows dt { font-size: 14px; font-weight: 600; color: var(--c-ink); line-height: 1.4; } .zc-rows dt span { display: block; font-size: 11.5px; font-weight: 400; color: var(--c-muted); } .zc-rows dd { text-align: right; } .lvl { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 1.4; border-radius: 999px; } .lvl--limited { color: var(--c-muted); background: var(--c-bg-soft); border: 1px solid var(--c-line); } .lvl--improved { color: var(--c-blue-600); background: var(--c-blue-50); border: 1px solid var(--c-blue-100); } .lvl--variable { color: var(--c-navy-700); background: #fff; border: 1px dashed var(--c-line-strong); } .lvl--design { color: #fff; background: var(--c-navy-900); border: 1px solid var(--c-navy-900); } .lvl--focus { color: var(--c-navy-900); background: var(--c-cyan-100); border: 1px solid #8ED3E8; } .lvl--na { color: var(--c-muted); padding-inline: 4px; } /* ---------- 25-6. Dynamic Coordination ---------- */ .dyn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding-bottom: 56px; } .dyn::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 22px; height: 2px; background: linear-gradient(90deg, var(--c-navy-900), var(--c-blue-600) 50%, #38BDE0); } .dyn::before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 22px solid var(--c-navy-900); } .dyn-side { padding: 28px; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-navy-900); } .dyn-side--right { border-top-color: #38BDE0; } .dyn-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--c-blue-600); } .dyn-en { margin-top: 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--c-navy-900); } .dyn-ko { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--c-muted); } .dyn-core { text-align: center; } .dyn-core svg { width: 100%; max-width: 300px; margin: 0 auto; } .dyn-core-title { margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--c-navy-900); } .dyn-core-ko { margin-top: 2px; font-size: 14px; color: var(--c-muted); } /* ---------- 25-7. Cellular Zinc Uptake Diagram ---------- */ .cell-dia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 56px); background: #fff; border: 1px solid var(--c-line); } .cd-zone { position: relative; display: flex; flex-direction: column; padding: 24px 22px 28px; } .cd-zone + .cd-zone { border-left: 1px solid var(--c-line); } .cd-zone:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -9px; top: 118px; width: 16px; height: 16px; background: #fff; border-top: 1.5px solid var(--c-blue-600); border-right: 1.5px solid var(--c-blue-600); transform: rotate(45deg); } .cd-zone--membrane { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(31, 91, 214, .05) 18px 20px), var(--c-bg-soft); } .cd-zone--resp { background: var(--c-blue-50); } .cd-zone-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--c-muted); } .cd-art { height: 150px; margin-top: 12px; display: grid; place-items: center; } .cd-art svg { width: 100%; max-width: 200px; height: 100%; } .cd-en { margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--c-ink); } .cd-ko { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--c-muted); } .resp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .resp-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid var(--c-blue-100); border-radius: var(--radius-sm); } .resp-list b { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c-blue-600); } .resp-list span { font-size: 14px; font-weight: 700; color: var(--c-navy-900); } /* ---------- 25-8. Evidence Summary Cards ---------- */ .evs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .evs-card { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--c-line); } .evs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .evs-species { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--c-muted); } .evs-title { margin-top: 18px; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink); } .evs-source { margin-top: 4px; font-size: 13px; color: var(--c-muted); } .evs-source em { font-style: italic; } .evs-metric { margin-top: 20px; padding: 16px 18px; background: var(--c-bg-soft); border-left: 3px solid var(--c-blue-600); } .evs-k { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); } .evs-v { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-navy-900); } .evs-n { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--c-muted); } .evs-card .link-arrow { margin-top: auto; padding-top: 24px; align-self: flex-start; border-bottom: 0; } /* ---------- 25-9. Bar Compare / Paper Card / Results ---------- */ .bars { display: flex; flex-direction: column; gap: 14px; } .bar-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; gap: 14px; align-items: center; } .bar-label { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--c-ink); } .bar-label small { display: block; font-size: 11.5px; font-weight: 400; color: var(--c-muted); } .bar-track { position: relative; height: 22px; background: var(--c-bg-soft); border: 1px solid var(--c-line); } .bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--c-line-strong); } .bar-row--ib .bar-fill { background: var(--c-navy-900); } .bar-val { font-size: 16px; font-weight: 700; color: var(--c-navy-900); text-align: right; } .bars-caption { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); } .paper-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-navy-900); } .paper-visual { padding: 28px; background: var(--c-bg-soft); border-right: 1px solid var(--c-line); } .paper-visual figure { background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow); } .paper-visual img { width: 100%; height: auto; } .paper-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--c-navy-900); } .paper-cite { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--c-text); } .paper-cite em { font-style: italic; } .paper-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .paper-actions .btn { min-height: 46px; padding: 0 20px; font-size: 14px; } .paper-credit { margin-top: 12px; font-size: 11.5px; color: var(--c-muted); } .paper-body { padding: 28px; } .result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .result-tile { padding: 16px 18px; background: var(--c-bg-soft); border: 1px solid var(--c-line); } .result-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-muted); } .result-v { margin-top: 6px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-navy-900); } .result-n { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--c-muted); } .virus-visual { position: relative; background: #fff; border: 1px solid var(--c-line); } .virus-visual img { width: 100%; height: auto; mix-blend-mode: multiply; } .virus-visual figcaption { padding: 12px 16px; font-size: 12px; color: var(--c-muted); border-top: 1px solid var(--c-line); } /* ---------- 25-10. Credentials ---------- */ .milestone-emblem { width: 64px; height: auto; } .cert-card { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-navy-900); } .cert-emblem { width: 140px; height: auto; } .cert-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--c-blue-600); } .cert-title { margin-top: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); } .cert-title span { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--c-muted); } .cert-meta { margin-top: 18px; border-top: 1px solid var(--c-line); } .cert-meta > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--c-line); font-size: 14px; } .cert-meta dt { color: var(--c-muted); } .cert-meta dd { font-weight: 700; color: var(--c-ink); } .cert-crop { border: 1px solid var(--c-line); box-shadow: var(--shadow); background: #fff; } .cert-crop img { width: 100%; height: auto; } .cert-crop figcaption { padding: 8px 12px; font-size: 11.5px; color: var(--c-muted); border-top: 1px solid var(--c-line); } .patent-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 112px); align-items: center; } .patent-stack { position: relative; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; margin-inline: auto; } .pdoc { position: absolute; inset: 0; background: #fff; border: 1px solid var(--c-line-strong); box-shadow: var(--shadow); } .pdoc--3 { transform: rotate(-7deg) translate(-18px, 10px); background: #F1F4F9; } .pdoc--2 { transform: rotate(4deg) translate(16px, 4px); background: #F7F9FC; } .pdoc--3::before, .pdoc--2::before { content: ""; position: absolute; inset: 18% 12% 20%; background: repeating-linear-gradient(to bottom, var(--c-line) 0 2px, transparent 2px 16px); filter: blur(1px); } .pdoc--1 { display: flex; flex-direction: column; padding: 36px 32px; border-top: 6px solid var(--c-navy-900); } .pdoc-top { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--c-blue-600); } .pdoc-title { margin-top: 16px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-navy-900); } .pdoc-lines { flex: 1; margin-top: 28px; background: repeating-linear-gradient(to bottom, var(--c-line) 0 2px, transparent 2px 14px); filter: blur(.6px); opacity: .9; } .pdoc-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 20px; } .pdoc-brand { font-size: 14px; font-weight: 800; letter-spacing: .1em; color: var(--c-navy-900); } .pdoc-seal { display: grid; place-items: center; width: 56px; height: 56px; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--c-blue-600); border: 1.5px solid var(--c-blue-600); border-radius: 50%; } .region-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } /* ---------- 25-11. Biosecurity Paradigm ---------- */ .paradigm { margin-top: clamp(40px, 5vw, 64px); } .pd-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-items: center; } .pd-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--c-muted); } .pd-row--next .pd-label { color: var(--c-blue-600); } .pd-blocks { display: flex; align-items: stretch; gap: 10px; } .pd-block { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 84px; padding: 16px 18px; background: #fff; border: 1px solid var(--c-line-strong); } .pd-block b { font-size: 16px; font-weight: 700; color: var(--c-navy-900); line-height: 1.3; } .pd-block span { margin-top: 2px; font-size: 13px; color: var(--c-muted); } .pd-block--host { flex: 1.4; color: #fff; background: var(--c-blue-600); border-color: var(--c-blue-600); box-shadow: 0 12px 28px -14px rgba(31, 91, 214, .7); } .pd-block--host b { color: #fff; letter-spacing: .02em; } .pd-block--host span { color: rgba(255, 255, 255, .85); } .pd-plus { display: grid; place-items: center; font-size: 20px; font-weight: 300; color: var(--c-muted); } .pd-arrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding-block: 14px; color: var(--c-blue-600); } .pd-arrow span { grid-column: 2; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; } .pd-arrow .icon { font-size: 22px; stroke-width: 2; } .pd-row--current .pd-block { background: var(--c-bg-soft); } .policy-q { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: center; margin-top: clamp(40px, 5vw, 56px); padding: clamp(28px, 3.5vw, 44px); background: var(--c-navy-900); color: #fff; } .policy-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #8FD3EA; } .policy-steps span + span::before { content: "→"; margin-right: 8px; color: rgba(255, 255, 255, .5); } .policy-lead { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .75); } .policy-quote { margin-top: 10px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; } .policy-quote-ko { margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); } .pei { padding: 24px; text-align: center; border: 1px dashed rgba(143, 211, 234, .6); } .pei-kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: rgba(255, 255, 255, .7); } .pei-title { margin-top: 10px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: .06em; color: #fff; } .pei-ko { margin-top: 4px; font-size: 18px; font-weight: 700; color: #8FD3EA; } .paradigm-note { margin-top: 24px; max-width: 860px; } .paradigm-note p { font-size: 16px; line-height: 1.85; color: var(--c-text); } .paradigm-note p + p { margin-top: 10px; } .species-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .milestone-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cert-card + .milestone-grid { margin-top: 24px; } /* ---------- 25-12. Responsive ---------- */ @media (max-width: 1024px) { .species-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .milestone-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .species-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .milestone-grid--3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 400px) { .species-grid--5 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1200px) { .stages { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1.2fr) minmax(0, .9fr); } .stage { padding: 28px 20px 32px; } .stage-outcome { padding: 28px 18px 32px; } } @media (max-width: 1024px) { .stages { grid-template-columns: minmax(0, 1fr); } .stage--2 { border-right: 0; border-bottom: 1px solid var(--c-line); } .stage-divider { flex-direction: row; padding: 16px; } .stage-divider-text { writing-mode: horizontal-tb; transform: none; } .stage-divider .icon { transform: rotate(90deg); } .zc-grid { gap: 16px; } .zc-card { padding: 28px 20px; } .dyn { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; } .dyn::after, .dyn::before { display: none; } .dyn-core { order: -1; } .cell-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cd-zone:nth-child(3) { border-left: 0; } .cd-zone:nth-child(n+3) { border-top: 1px solid var(--c-line); } .cd-zone:nth-child(2)::after { display: none; } .evs { grid-template-columns: minmax(0, 1fr); gap: 16px; } .paper-card { grid-template-columns: minmax(0, 1fr); } .paper-visual { border-right: 0; border-bottom: 1px solid var(--c-line); } .cert-card { grid-template-columns: 110px minmax(0, 1fr); } .cert-emblem { width: 110px; } .cert-crop { grid-column: 1 / -1; } .patent-wrap { grid-template-columns: minmax(0, 1fr); } .policy-q { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .zc-grid { grid-template-columns: minmax(0, 1fr); } .cell-dia { grid-template-columns: minmax(0, 1fr); } .cd-zone + .cd-zone { border-left: 0; border-top: 1px solid var(--c-line); } .cd-zone:not(:last-child)::after { display: block; right: auto; left: 50%; top: auto; bottom: -9px; transform: translateX(-50%) rotate(135deg); } .cd-art { height: 120px; } .vx-hint { display: none; } .vx-foot { grid-template-columns: minmax(0, 1fr); } .vx-foot > div { padding: 16px 20px; } .bar-row { grid-template-columns: minmax(0, 1fr) 56px; gap: 6px 12px; } .bar-label { grid-column: 1 / -1; } .result-grid { grid-template-columns: minmax(0, 1fr); } .stages-foot { grid-template-columns: minmax(0, 1fr); padding: 20px; } .pd-row, .pd-arrow { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pd-arrow span { grid-column: 1; } .pd-blocks { flex-direction: column; gap: 6px; } .pd-plus { height: 16px; } .pd-block { min-height: 0; } } @media (max-width: 560px) { .patent-stack { max-width: 280px; } .pdoc--3 { transform: rotate(-5deg) translate(-6px, 6px); } .pdoc--2 { transform: rotate(3deg) translate(6px, 2px); } .cert-card { grid-template-columns: minmax(0, 1fr); text-align: left; } .cert-emblem { width: 96px; } .paper-visual, .paper-body { padding: 20px; } .stage { padding: 24px 20px 28px; } } /* ========================================================================== 26. PUBLIC RELEASE — Contact · Company Updates · Privacy · Notes ========================================================================== */ /* Large dark-section titles are always visible (no reveal hiding / clipping) */ .mission-inner { z-index: 1; } .has-reveal .mission-title.reveal { opacity: 1; transform: none; } /* Footer contact links */ .footer-contact a { color: rgba(255, 255, 255, .9); transition: color var(--dur) var(--ease); } .footer-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .footer-contact dd { overflow-wrap: anywhere; } /* Mechanistic model note */ .mech-note { margin-top: 16px; padding: 14px 18px; font-size: 13px; line-height: 1.7; color: var(--c-text); background: #fff; border: 1px dashed var(--c-line-strong); } .mech-note-label { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--c-blue-600); } .mech-note [lang="en"] { margin-top: 4px; font-style: italic; color: var(--c-muted); } /* Technology hierarchy: BTN LAB → Labile Zinc → Dynamic Coordination → Material → Product */ .tech-hierarchy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; } .tech-hierarchy li { display: inline-flex; flex-direction: column; padding: 8px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-line-strong); } .tech-hierarchy li small { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--c-muted); } .tech-hierarchy li.is-core { color: #fff; background: var(--c-navy-900); border-color: var(--c-navy-900); } .tech-hierarchy li.is-core small { color: #8FD3EA; } .tech-hierarchy li.is-current { border-color: var(--c-blue-600); box-shadow: inset 0 -3px 0 var(--c-blue-600); } .tech-hierarchy li + li::before { content: none; } .tech-hierarchy .th-arrow { padding: 0; border: 0; background: none; color: var(--c-blue-600); font-weight: 400; } .evidence-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Contact */ .contact-card { background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-navy-900); box-shadow: var(--shadow-lg); } .contact-card-head { padding: 28px 32px 20px; border-bottom: 1px solid var(--c-line); } .contact-card-name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--c-navy-900); } .contact-card-name span { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--c-muted); } .contact-lines { padding: 8px 32px; } .contact-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--c-line); } .contact-line:last-child { border-bottom: 0; } .contact-line dt { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--c-muted); } .contact-line dd { font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--c-ink); overflow-wrap: anywhere; } .contact-line dd a:hover { color: var(--c-blue-600); } .contact-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); } .contact-actions .btn { min-height: 56px; border-radius: 0; font-size: 14px; } .contact-actions .btn-outline { border: 0; } .copy-status { min-height: 20px; padding: 0 32px 16px; font-size: 13px; color: var(--c-blue-600); } .copy-status:empty { display: none; } .location { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); background: #fff; border: 1px solid var(--c-line); } .location-info { padding: clamp(28px, 3.5vw, 44px); } .location-info .section-note { margin-top: 20px; } .location-map { position: relative; min-height: 320px; background: linear-gradient(90deg, transparent 0 calc(38% - 10px), #E6ECF4 calc(38% - 10px) calc(38% + 10px), transparent calc(38% + 10px)), linear-gradient(0deg, transparent 0 calc(58% - 8px), #E6ECF4 calc(58% - 8px) calc(58% + 8px), transparent calc(58% + 8px)), linear-gradient(35deg, transparent 0 calc(70% - 5px), #EDF1F7 calc(70% - 5px) calc(70% + 5px), transparent calc(70% + 5px)), repeating-linear-gradient(0deg, transparent 0 39px, #F0F3F8 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #F0F3F8 39px 40px), var(--c-bg-soft); border-left: 1px solid var(--c-line); } .location-pin { position: absolute; left: 38%; top: 58%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 8px; } .location-pin svg { width: 44px; height: 44px; fill: var(--c-navy-900); filter: drop-shadow(0 6px 10px rgba(10, 31, 68, .25)); } .location-pin span { padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--c-navy-900); background: #fff; border: 1px solid var(--c-line-strong); white-space: nowrap; } .inquiry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .inquiry-card { display: flex; flex-direction: column; height: 100%; padding: 28px 24px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-navy-900); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .inquiry-card:hover { box-shadow: var(--shadow); border-color: var(--c-line-strong); } .inquiry-en { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--c-blue-600); } .inquiry-ko { margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--c-ink); } .inquiry-desc { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--c-muted); } .inquiry-card .link-arrow { margin-top: auto; padding-top: 20px; border-bottom: 0; align-self: flex-start; font-size: 14px; } /* Company updates list */ .update-list { border-top: 2px solid var(--c-navy-900); } .update-item a { display: grid; grid-template-columns: 150px 190px minmax(0, 1fr) 24px; gap: 24px; align-items: center; padding: 28px 8px; border-bottom: 1px solid var(--c-line); transition: background-color var(--dur) var(--ease); } .update-item a:hover { background: var(--c-bg-soft); } .update-date { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--c-navy-900); } .update-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--c-blue-600); } .update-title { font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--c-ink); } .update-desc { margin-top: 4px; font-size: 14px; line-height: 1.65; color: var(--c-muted); } .update-item .icon { font-size: 20px; color: var(--c-navy-900); transition: transform var(--dur) var(--ease); } .update-item a:hover .icon { transform: translateX(4px); color: var(--c-blue-600); } /* Privacy policy document */ .policy-doc { max-width: 880px; } .policy-doc h2 { margin-top: 48px; padding-top: 24px; font-size: 19px; font-weight: 700; color: var(--c-ink); border-top: 1px solid var(--c-line); } .policy-doc h2:first-of-type { margin-top: 0; } .policy-doc p, .policy-doc li { font-size: 15.5px; line-height: 1.85; color: var(--c-text); } .policy-doc p { margin-top: 12px; } .policy-doc ul { margin-top: 12px; padding-left: 20px; list-style: disc; } .policy-doc li + li { margin-top: 4px; } .policy-doc a { color: var(--c-blue-600); text-decoration: underline; text-underline-offset: 3px; } .policy-meta { margin-top: 40px; padding: 20px 24px; background: var(--c-bg-soft); border-left: 3px solid var(--c-navy-900); font-size: 14px; } @media (max-width: 1024px) { .evidence-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inquiry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .location { grid-template-columns: minmax(0, 1fr); } .location-map { border-left: 0; border-top: 1px solid var(--c-line); min-height: 260px; } .update-item a { grid-template-columns: 130px minmax(0, 1fr) 24px; gap: 8px 20px; } .update-cat { grid-column: 2; grid-row: 1; } .update-date { grid-row: 1 / span 2; } .update-item a > div { grid-column: 2; } .update-item .icon { grid-column: 3; grid-row: 1 / span 2; } } @media (max-width: 768px) { .evidence-grid--4 { grid-template-columns: minmax(0, 1fr); } .contact-actions { grid-template-columns: minmax(0, 1fr); } .contact-card-head, .contact-lines { padding-inline: 20px; } .copy-status { padding-inline: 20px; } .contact-line { grid-template-columns: minmax(0, 1fr); gap: 2px; } .update-item a { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; padding: 22px 4px; } .update-date, .update-cat, .update-item a > div { grid-column: 1; grid-row: auto; } .update-item .icon { grid-column: 2; grid-row: 1 / span 3; } .tech-hierarchy .th-arrow { display: none; } } @media (max-width: 560px) { .inquiry-grid { grid-template-columns: minmax(0, 1fr); } } /* Vaccination timeline — 모바일에서 가로 스크롤 없이 화면 폭에 맞춤 */ @media (max-width: 768px) { .vx { --vx-min: 4.6; --vx-span: 13.2; } .vx-scroll { overflow: visible; } .vx-body { min-width: 0; padding: 4px 16px 16px; } .vx-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-top: 14px; } .vx-label { font-size: 13px; } .vx-track { height: 118px; } .vx-mark { width: 84px; } .vx-mark b { margin-top: 10px; font-size: 11px; } .vx-mark small { font-size: 10px; } .vx-flag { font-size: 10px; padding: 3px 8px; } .vx-bar { justify-content: flex-end; padding: 0 8px 0 0; } .vx-axis { margin-left: 0; } .vx-axis span { font-size: 10px; } }