/* ============================================================ iAID Design Tokens ------------------------------------------------------------ 브랜드 색상은 전부 로고(logo_top.png)에서 추출한 실측값에서 파생시킨다. 임의의 보라/금색 계열을 도입하지 않는다. #00154C navy 로고 심볼 안쪽 어두운 면 #00438F deep blue 로고 지배색 (primary) #0068B7 mid blue 로고 중간 면 #52C3F1 sky 로고 좌측 밝은 면 #23B8BC teal 로고 중앙 청록 면 #595757 gray "iAID" 워드마크 구조는 Wanted(Montage) 디자인 시스템 규약을 따른다. - dual neutral: 채도 0 gray(utility) + cool tinted neutral(UI 표면) - 텍스트 위계는 별도 hex가 아니라 alpha multiplier로 합성 - 카드는 평면 + 1px 헤어라인, 그림자는 elevated 표면 전용 - 17px 이상 헤딩은 네거티브 트래킹, body 이하는 positive ============================================================ */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); :root { /* ---------- Brand (로고 추출) ---------- */ --brand-50: #EBF3FC; --brand-100: #D6E6F8; --brand-200: #A8C8EC; --brand-300: #6FA3DC; --brand-400: #3B82CC; --brand-500: #0068B7; /* 로고 mid blue */ --brand-600: #005AA3; --brand-700: #00438F; /* 로고 deep blue — PRIMARY */ --brand-800: #003876; --brand-900: #002A5C; --brand-950: #00154C; /* 로고 navy */ /* 로고 밝은 면 — accent 전용, CTA 에는 쓰지 않는다 */ --sky-400: #52C3F1; --sky-500: #2FB0E6; --teal-500: #23B8BC; --teal-600: #1A9CA0; --teal-700: #0E6E78; /* 히어로 그라디언트 종점 — 흰 글씨 5.97:1 */ /* ---------- Gray (채도 0, utility 전용) ---------- */ --gray-500: #7A7878; --gray-600: #595757; /* 로고 워드마크 */ --gray-700: #454343; /* ---------- Neutral (cool tinted, UI 표면 워크호스) ---------- */ --neutral-50: #F7F8FA; --neutral-75: #F2F4F7; --neutral-100: #E9ECF1; --neutral-200: #DCE0E8; --neutral-300: #C3C9D4; --neutral-400: #A4ACBB; --neutral-500: #828B9C; --neutral-600: #666E7E; --neutral-700: #4E5665; /* border alpha 베이스 */ --neutral-800: #38404D; --neutral-825: #2E3540; /* secondary text alpha 베이스 */ --neutral-875: #252B34; /* body text alpha 베이스 */ --neutral-950: #171B21; --neutral-960: #12161B; /* 다크 캔버스 */ /* ---------- Semantic: Background ---------- */ --bg-canvas: #FFFFFF; --bg-surface: #FFFFFF; --bg-subtle: var(--neutral-50); --bg-muted: var(--neutral-75); --bg-elevated: #FFFFFF; --bg-inverse: var(--neutral-960); --bg-brand: var(--brand-700); --bg-brand-subtle: var(--brand-50); /* ---------- Semantic: Foreground (alpha multiplier) ---------- */ --fg-strong: #12161B; --fg-default: rgba(37, 43, 52, 0.88); --fg-secondary: rgba(46, 53, 64, 0.72); --fg-tertiary: rgba(46, 53, 64, 0.43); --fg-disabled: rgba(46, 53, 64, 0.28); --fg-on-brand: #FFFFFF; --fg-brand: var(--brand-700); --fg-link: var(--brand-700); --fg-danger: #C62828; /* 흰 배경 5.62:1 */ --bg-danger-subtle: #FDECEC; /* 그라디언트 위(어두운 표면) 전용 알파 사다리 */ --fg-on-dark: #FFFFFF; --fg-on-dark-default: rgba(255, 255, 255, 0.88); --fg-on-dark-secondary: rgba(255, 255, 255, 0.61); --fg-on-dark-tertiary: rgba(255, 255, 255, 0.43); /* ---------- Semantic: Border (neutral-700 알파) ---------- */ --border-subtle: rgba(78, 86, 101, 0.08); --border-default: rgba(78, 86, 101, 0.22); --border-strong: rgba(78, 86, 101, 0.35); --border-brand: var(--brand-700); --border-on-dark: rgba(255, 255, 255, 0.16); /* ---------- Brand gradient ---------- 문서화된 자리에만 사용한다: 마케팅 히어로 배너. CTA·헤더·카드 표면에는 적용하지 않는다. */ --gradient-hero: linear-gradient( 125deg, #00154C 0%, #00438F 45%, #0068B7 78%, #0E6E78 100% ); /* ---------- Typography ---------- */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif; /* ---------- Spacing (4배수 기본, 시각보정용 2px 단계 포함) ---------- */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-128: 128px; /* ---------- Radius ---------- */ --radius-2: 2px; --radius-4: 4px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-32: 32px; --radius-full: 9999px; /* ---------- Elevation (ambient + key 2겹, elevated 표면 전용) ---------- */ --shadow-1: 0 1px 2px rgba(23, 27, 33, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-2: 0 2px 6px rgba(23, 27, 33, 0.07), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(23, 27, 33, 0.06); --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(23, 27, 33, 0.07); --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12); /* ---------- Motion (spring·bounce 없음) ---------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-hover: 120ms; --dur-control: 150ms; --dur-reveal: 400ms; /* ---------- Icon masks (유니코드 글리프 대체) ---------- */ --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); /* ---------- Layout ---------- */ --header-h: 68px; /* 데스크톱 고정 헤더 높이 */ --content-max: 1200px; --content-pad: 24px; } /* ============================================================ Base ============================================================ */ body { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0.0057em; color: var(--fg-default); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; font-feature-settings: "calt", "kern"; } /* 포커스 링은 항상 visible 하게 유지한다 */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: var(--radius-4); } .hero :where(a, button):focus-visible { outline-color: #FFFFFF; } /* ============================================================ Typography scale 17px 이상은 네거티브 트래킹, body 이하는 positive ============================================================ */ .t-display1 { font-size: 56px; font-weight: 700; line-height: 1.286; letter-spacing: -0.0319em; } .t-display2 { font-size: 40px; font-weight: 700; line-height: 1.300; letter-spacing: -0.0282em; } .t-display3 { font-size: 36px; font-weight: 700; line-height: 1.334; letter-spacing: -0.0270em; } .t-title1 { font-size: 32px; font-weight: 700; line-height: 1.375; letter-spacing: -0.0253em; } .t-title2 { font-size: 28px; font-weight: 700; line-height: 1.358; letter-spacing: -0.0236em; } .t-title3 { font-size: 24px; font-weight: 700; line-height: 1.334; letter-spacing: -0.0230em; } .t-heading1 { font-size: 22px; font-weight: 700; line-height: 1.364; letter-spacing: -0.0194em; } .t-heading2 { font-size: 20px; font-weight: 700; line-height: 1.400; letter-spacing: -0.0120em; } .t-headline1{ font-size: 18px; font-weight: 600; line-height: 1.445; letter-spacing: -0.0020em; } .t-body1 { font-size: 16px; font-weight: 500; line-height: 1.500; letter-spacing: 0.0057em; } .t-body1-read { font-size: 16px; font-weight: 500; line-height: 1.625; letter-spacing: 0.0057em; } .t-body2 { font-size: 15px; font-weight: 500; line-height: 1.467; letter-spacing: 0.0096em; } .t-label1 { font-size: 14px; font-weight: 500; line-height: 1.429; letter-spacing: 0.0145em; } .t-label2 { font-size: 13px; font-weight: 500; line-height: 1.385; letter-spacing: 0.0194em; } .t-caption1 { font-size: 12px; font-weight: 500; line-height: 1.334; letter-spacing: 0.0252em; } /* ============================================================ Buttons 단일 강조색 정책: primary CTA 는 --bg-brand 하나로 통일. 그라디언트 버튼을 만들지 않는다. ============================================================ */ .ib { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 48px; padding: 0 var(--space-24); border: 1px solid transparent; border-radius: var(--radius-12); font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: 0.0057em; text-decoration: none; cursor: pointer; transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); } .ib--sm { height: 40px; padding: 0 var(--space-20); font-size: 15px; border-radius: 10px; } .ib--lg { height: 56px; padding: 0 var(--space-32); font-size: 17px; border-radius: 14px; } /* solid — 화면당 가장 중요한 단일 액션 */ .ib--solid { background: var(--bg-brand); color: var(--fg-on-brand) !important; } .ib--solid:hover { background: var(--brand-800); color: var(--fg-on-brand) !important; } .ib--solid:active { background: var(--brand-900); } /* outlined — 같은 화면의 보조 액션 */ .ib--outlined { background: var(--bg-surface); border-color: var(--border-default); color: var(--fg-brand) !important; } .ib--outlined:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--fg-brand) !important; } /* 어두운 표면(히어로) 위 변형 */ .ib--on-dark-solid { background: #FFFFFF; color: var(--brand-700) !important; } .ib--on-dark-solid:hover { background: var(--brand-50); color: var(--brand-800) !important; } .ib--on-dark-outlined { background: transparent; border-color: var(--border-on-dark); color: var(--fg-on-dark) !important; } .ib--on-dark-outlined:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.38); color: var(--fg-on-dark) !important; } /* ============================================================ Surfaces 카드는 1px 헤어라인이 구조를 짊어진다. 그림자를 올리지 않는다. ============================================================ */ .icard { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-16); transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); } .icard:hover { transform: translateY(-2px); border-color: var(--border-default); } /* ============================================================ Scroll reveal ~400ms fade + 소폭 상승. bounce·scale·parallax 없음. ============================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } /* 모션 최소화 설정을 존중한다 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================ Iconography 24x24 그리드, currentColor 상속. 이모지를 product UI 에 인라인으로 쓰지 않는다 — monochrome SVG 로 대체한다. ============================================================ */ .ico { width: 1em; height: 1em; display: block; flex: none; } /* 아이콘은 원형 surface 안에 놓는다(빈 상태 패턴과 동일) */ .icon-surface { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: 26px; border-radius: var(--radius-full); background: var(--bg-brand-subtle); color: var(--fg-brand); } .icon-surface--lg { width: 72px; height: 72px; font-size: 34px; } .icon-surface--sm { width: 44px; height: 44px; font-size: 22px; } /* 컬러 표면(히어로) 위 변형 */ .icon-surface--on-dark { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; } /* 본문 안 인라인 불릿용 */ .ico-bullet { width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.35em; color: var(--fg-brand); flex: none; } /* ============================================================ Line breaking 한국어는 음절 단위로 줄바꿈되므로 디자인 단계에서 개행을 넣지 않는다. 대신 브라우저가 줄을 고르게 나누도록 맡긴다. balance : 제목을 여러 줄에 균등 배분 pretty : 본문 마지막 줄에 단어 하나만 남는 고아(orphan) 방지 한국어 단어가 음절로 쪼개지는 것은 keep-all 로 막는다. ============================================================ */ :where(h1, h2, h3, h4, .section-title, .hero h1, .service-hero-title, .infra-hero-title, .muscle-hero-title, .pub-hero-title, .product-info h3) { text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; } :where(p, li, .section-subtitle, .hero-subtitle, dd, figcaption) { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; } /* 산문 단락의 measure 제한. 한 줄이 1000px 를 넘으면 시선 복귀가 어렵고, 마지막 줄에 단어 하나만 남는 고아(orphan)가 생긴다. 46em ≒ 한글 46자 안팎. */ :where(.service-description-text, .infra-description-text, .research-highlight p, .muscle-research p, .muscle-cta-section p, .service-cta-section p, .pub-description p) { max-width: 46em; } /* 가운데 정렬된 블록은 제한한 폭도 가운데에 둔다 */ :where(.muscle-cta-section, .service-cta-section, .infra-cta) p { margin-inline: auto; } /* ════════════════════════════════════════════════════════════ COMPONENT LAYER ------------------------------------------------------------ 지금까지 페이지마다 자기 히어로·카드·배지를 새로 정의하고 있었다. 같은 역할의 표면이 페이지마다 다른 그림자·라운드·패딩을 갖는 것이 통일감이 없는 근본 원인이었다. 여기서 역할별 표면을 한 번만 정의하고, 각 페이지의 고유 클래스는 아래 "PAGE CHROME" 절에서 이 표면에 연결한다. ════════════════════════════════════════════════════════════ */ /* ───────────── Layout ───────────── */ .iw { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-24); } .iw--narrow { max-width: 880px; } /* 마케팅 섹션 수직 간격은 64–96px 를 표준으로 한다 */ .isection { padding-block: var(--space-96); } .isection--tight { padding-block: var(--space-64); } .isection--subtle { background: var(--bg-subtle); } .isection--inverse { background: var(--brand-950); color: #FFFFFF; } /* ───────────── Page header ───────────── 서브 페이지의 표준 머리말. 그라디언트를 쓰지 않는다 — 그라디언트는 메인 히어로 한 자리에만 둔다. */ .page-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-64) var(--space-48); text-align: left; } .page-header__eyebrow { display: block; margin-bottom: var(--space-12); color: var(--fg-brand); font-size: 13px; font-weight: 700; letter-spacing: 0.0194em; } .page-header__title { margin: 0; color: var(--fg-strong); font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.0282em; } .page-header__sub { margin: var(--space-12) 0 0; max-width: 46em; color: var(--fg-secondary); font-size: 17px; font-weight: 500; line-height: 1.6; letter-spacing: 0; } /* ───────────── Section header ───────────── */ .isection__title { margin: 0 0 var(--space-12); color: var(--fg-strong); font-size: 32px; font-weight: 700; line-height: 1.375; letter-spacing: -0.0253em; } .isection__sub { margin: 0 0 var(--space-48); max-width: 46em; color: var(--fg-secondary); font-size: 17px; font-weight: 500; line-height: 1.6; } /* ───────────── Surfaces ───────────── 카드 위계는 1px 헤어라인이 짊어진다. 그림자를 올리지 않는다. */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-16); padding: var(--space-24); transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); } .card--lg { border-radius: var(--radius-20); padding: var(--space-40); } .card--flush { padding: 0; overflow: hidden; } .card--link:hover, a.card:hover { transform: translateY(-2px); border-color: var(--border-default); } .card__title { margin: 0 0 var(--space-8); color: var(--fg-strong); font-size: 18px; font-weight: 600; line-height: 1.445; letter-spacing: -0.002em; } .card__text { margin: 0; color: var(--fg-secondary); font-size: 15px; font-weight: 500; line-height: 1.6; } /* ───────────── Grid ───────────── */ .igrid { display: grid; gap: var(--space-20); } .igrid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .igrid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .igrid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* ───────────── List cell ───────────── 행 사이 1px 헤어라인으로 구조를 만든다. */ .list-cell { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-14) 0; border-bottom: 1px solid var(--border-subtle); color: var(--fg-default); font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: 0.0096em; } .list-cell:last-child { border-bottom: 0; } /* ───────────── Divider ───────────── */ .divider { height: 1px; border: 0; background: var(--border-subtle); margin-block: var(--space-32); } .divider--strong { background: var(--border-default); } /* ───────────── Chip / Tag / Badge ───────────── */ .chip { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-14); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--fg-default); font-size: 13px; font-weight: 500; letter-spacing: 0.0194em; transition: background-color var(--dur-hover) var(--ease); } .chip--brand { background: var(--bg-brand-subtle); border-color: transparent; color: var(--fg-brand); font-weight: 600; } /* invert-fill — 채도가 아니라 명도로 강조한다 */ .chip--active { background: var(--fg-strong); border-color: var(--fg-strong); color: #FFFFFF; font-weight: 600; } .chip--on-dark { background: rgba(0, 21, 76, 0.18); border-color: rgba(255, 255, 255, 0.22); color: #FFFFFF; } .tag { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-12); border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--fg-default); font-size: 13px; font-weight: 500; } .badge { display: inline-flex; align-items: center; gap: var(--space-6); padding: 5px var(--space-8); border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.0194em; } .badge--brand { background: var(--bg-brand-subtle); color: var(--fg-brand); } .badge--solid { background: var(--bg-brand); color: #FFFFFF; } .badge--accent { background: var(--teal-500); color: #04262B; } .badge--neutral { background: var(--neutral-100); color: var(--fg-default); } /* ───────────── Stat ───────────── */ .stat { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-16); padding: var(--space-24); } .stat__num { display: block; color: var(--brand-950); font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.0282em; font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: var(--space-6); color: var(--fg-secondary); font-size: 13px; font-weight: 500; letter-spacing: 0.0194em; } /* ───────────── Alert ───────────── */ .alert { display: flex; gap: var(--space-12); padding: var(--space-14) var(--space-16); border-radius: var(--radius-12); font-size: 15px; line-height: 1.6; } .alert--info { background: var(--bg-brand-subtle); color: var(--brand-900); } .alert--warning { background: #FDF3E4; color: #7A4A00; } /* ───────────── Table ───────────── */ .itable { width: 100%; border-collapse: collapse; } .itable th { text-align: left; padding: var(--space-12) var(--space-14); border-bottom: 1px solid var(--border-default); color: var(--fg-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0.0194em; } .itable td { padding: var(--space-14); border-bottom: 1px solid var(--border-subtle); color: var(--fg-default); font-size: 14px; font-weight: 500; } .itable tbody tr:hover { background: var(--bg-subtle); } .itable .num { text-align: right; font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════ PAGE CHROME 각 페이지가 따로 만들던 히어로·카드를 위 표면에 연결한다. 그라디언트 슬래브를 걷어내고 캔버스 위 머리말로 바꾼다. ════════════════════════════════════════════════════════════ */ /* 서브 페이지 머리말 = 스펙의 hero-banner. 풀블리드 슬래브가 아니라 캔버스 위에 얹힌 둥근 배너다. 그라디언트가 허용되는 문서화된 자리이며, 카피는 좌하단에 앵커한다. */ .tech-hero, .contact-hero, .pub-hero, .service-hero, .infra-hero, .muscle-hero, .hero-section, .team-vision-section { position: relative; background: var(--bg-canvas); border-bottom: 0; color: var(--fg-default); padding: var(--space-32) var(--space-24) var(--space-24); text-align: left; overflow: visible; } /* 데스크톱 헤더는 position:fixed 다. 머리말이 그 아래로 깔리지 않도록 헤더 높이만큼 상단 여백을 더한다. */ @media (min-width: 992px) { .tech-hero, .contact-hero, .pub-hero, .service-hero, .infra-hero, .muscle-hero, .hero-section, .team-vision-section, .page-header { padding-top: calc(var(--header-h) + var(--space-56)); } } /* 회전하던 장식 오버레이는 구조에서 제거한다 */ .tech-hero::before, .contact-hero::before, .pub-hero::before, .service-hero::before, .infra-hero::before, .muscle-hero::before, .hero-section::before { display: none !important; } /* contact 의 제목은 이 장식 래퍼 안에 들어 있다. 래퍼를 숨기면 제목까지 사라지므로, 좌우 장식선만 지우고 래퍼는 흐름에 남긴다. */ .contact-hero-decoration { display: flex !important; justify-content: flex-start; align-items: center; gap: 0; margin-bottom: 0; } .contact-hero-decoration .hero-line { display: none; } .tech-hero-content, .contact-hero-content, .pub-hero-content, .service-hero-content, .infra-hero-content, .muscle-hero-content, .hero-section .hero-content, .team-vision-container { display: flex; flex-direction: column; justify-content: center; /* 바닥 앵커 → 세로 가운데 */ align-items: flex-start; width: 100%; max-width: var(--content-max); min-height: 232px; margin-inline: auto; /* 기하학적 가운데는 눈에 낮아 보인다 — 아래를 더 비워 광학 중심으로 */ padding: var(--space-32, 32px) var(--space-40, 40px) var(--space-48, 48px); border-radius: var(--radius-16); background: linear-gradient(120deg, #00154C 0%, #00438F 58%, #0E6E78 100%); color: #FFFFFF; text-align: left; overflow: hidden; } /* 배너 안쪽은 어두운 표면이다 */ .tech-hero-content *, .contact-hero-content *, .pub-hero-content *, .service-hero-content *, .infra-hero-content *, .muscle-hero-content *, .hero-section .hero-content *, .team-vision-container * { text-shadow: none; } /* 페이지 제목 — display2 */ .tech-hero h1, .contact-hero h1, .pub-hero-title, .service-hero-title, .infra-hero-title, .muscle-hero-title, .hero-section .hero-title, .service-hero h1, .pub-hero h1, .infra-hero h1, .muscle-hero h1, .hero-section h1, .team-vision-section h1 { margin: 0; max-width: 18em; color: #FFFFFF; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.0282em; text-shadow: none; } .tech-hero p, .contact-hero p, .pub-hero-subtitle, .service-hero-subtitle, .infra-hero-subtitle, .muscle-hero-subtitle, .hero-section .hero-subtitle, .service-hero > * > p, .pub-hero > * > p, .infra-hero > * > p, .muscle-hero > * > p, .hero-section > * > p { margin: var(--space-12) 0 0; max-width: 44em; color: rgba(255, 255, 255, 0.85); font-size: 17px; font-weight: 500; line-height: 1.6; text-shadow: none; } /* 머리말 아이콘은 캔버스 위 brand-subtle 원형으로 */ .pub-hero-icon, .service-hero-icon, .infra-hero-icon, .muscle-hero-icon { background: rgba(255, 255, 255, 0.14) !important; color: #FFFFFF !important; margin-bottom: var(--space-20); } /* 머리말 배지 — 어두운 표면 전제가 사라졌으므로 brand 배지로 */ .hero-badge, .hero-badges .badge-item { display: inline-flex; align-items: center; gap: var(--space-6); height: 30px; padding: 0 var(--space-12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-full); background: rgba(0, 21, 76, 0.22); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: 0.0194em; } .hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-20); } /* 페이지별 카드 → 공통 표면 */ .problem-card, .benefit-card, .feature-card, .stat-card, .showcase-card, .category-card, .publication-card, .pub-card, .project-card, .service-stat-card, .team-ceo-card, .team-partner-card, .pub-stat-card, .stat-box, .info-card, .result-card, .spec-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-16); box-shadow: none; transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); } .problem-card:hover, .benefit-card:hover, .feature-card:hover, .showcase-card:hover, .category-card:hover, .publication-card:hover, .pub-card:hover, .project-card:hover, .team-partner-card:hover { transform: translateY(-2px); border-color: var(--border-default); box-shadow: none; } /* about_team 의 비전 배너도 같은 머리말 규칙을 따른다 */ .team-vision-section::before, .team-vision-section::after { display: none !important; } .team-vision-section h1, .team-vision-section h2, .team-vision-title { color: var(--fg-strong); font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.0282em; text-shadow: none; } .team-vision-section p, .team-vision-subtitle { color: var(--fg-secondary); font-size: 17px; font-weight: 500; text-shadow: none; } /* 장식용 밑줄 바 — 위계는 타이포가 짊어진다 */ .team-section-title::after { display: none !important; } .team-ceo-line { height: 1px !important; background: var(--border-subtle) !important; border: 0; } /* ───────── 제목 램프 통일 ───────── 페이지마다 2rem·2.2rem·2.5rem 에 색도 #00438F·#333·#1a1a1a 로 제각각이었다. 역할은 두 가지뿐이다: 섹션 제목(title1) 과 카드 제목(headline1). */ .section-title, .infra-section-title, .muscle-section-title, .service-section-title, .team-section-title, .muscle-feature-title, .infra-cta-title, .pub-section-title, .service-cta-title, .muscle-cta-title { font-size: 32px; font-weight: 700; line-height: 1.375; letter-spacing: -0.0253em; color: var(--fg-strong); } .feature-title, .category-title, .project-title, .publication-title, .pub-card-title, .showcase-title, .problem-card h3, .benefit-card h3 { font-size: 18px; font-weight: 600; line-height: 1.445; letter-spacing: -0.002em; color: var(--fg-strong); } /* about_team 의 비전 배너에는 제목 태그가 없고

두 개뿐이다. 첫 문장을 페이지 제목 위계로 올린다. */ .team-vision-container { width: 100%; max-width: var(--content-max); margin-inline: auto; } .team-vision-subtitle { margin: 0; color: #FFFFFF !important; font-size: 40px !important; font-weight: 700 !important; line-height: 1.3; letter-spacing: -0.0282em; max-width: 18em; } .team-vision-desc { margin: var(--space-12) 0 0; color: rgba(255, 255, 255, 0.85) !important; font-size: 17px !important; font-weight: 500 !important; } /* 흰 카드가 흰 배경 위에 놓이면 헤어라인만으로는 구조가 읽히지 않는다. 카드를 담는 표면은 bg-subtle 로 내린다(메인 제품 섹션과 같은 리듬). */ .team-content, .product-showcase, .info-section { background: var(--bg-subtle) !important; } /* 배너 바로 아래 섹션은 위쪽 여백을 줄여 배너와 붙여 읽히게 한다 */ .tech-hero + section, .service-hero + *, .infra-hero + *, .muscle-hero + *, .pub-hero + *, .hero-section + section { padding-top: var(--space-64); } /* 배너가 Bootstrap .container 안에 중첩된 페이지가 있어 폭이 1110px 로 좁아졌다. 배너 자신이 아닌 중간 컨테이너는 폭 제한을 풀어 모든 페이지의 배너가 --content-max 로 맞도록 한다. (컨테이너가 곧 배너인 경우는 :not() 으로 제외한다) */ .tech-hero > .container:not(.tech-hero-content), .service-hero > .container:not(.service-hero-content), .hero-section > .container:not(.hero-content), .contact-hero > .container:not(.contact-hero-content), .pub-hero > .container:not(.pub-hero-content), .infra-hero > .container:not(.infra-hero-content), .muscle-hero > .container:not(.muscle-hero-content), .team-vision-section > .container:not(.team-vision-container) { max-width: none; width: 100%; padding-inline: 0; margin-inline: 0; } /* about_team 의 배너는 padding-inline 이 있는 래퍼(.team-main-wrapper) 안에 들어 있어 다른 페이지보다 좌우 20px 씩 좁았다. 래퍼 패딩을 상쇄해 모든 페이지의 배너 폭·좌측 정렬을 일치시킨다. (래퍼 패딩은 576px 아래에서 10px 로 줄어든다) */ .team-main-wrapper { --wrap-pad: 20px; } @media (max-width: 576px) { .team-main-wrapper { --wrap-pad: 10px; } } .team-main-wrapper .team-vision-section { margin-inline: calc(-1 * var(--wrap-pad, 20px)); } /* ════════════════════════════════════════════════════════════ AUTH / FORM 로그인·회원가입·찾기 화면은 자체 팔레트(#0caBE0)와 2px 보더, 카드 그림자를 쓰고 있어 나머지 사이트와 따로 놀았다. 폼 컨트롤 규격을 시스템으로 통일한다. ════════════════════════════════════════════════════════════ */ .login-page, .signup-page, .findemail-page, .findpw-page, .unlock-page { font-family: var(--font-sans); background: var(--bg-subtle); } /* 카드 — 그림자 대신 헤어라인 */ .login-card, .signup-card, .findemail-card, .findpw-card, .unlock-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-16); box-shadow: none; } /* input — height 48 / radius 12 / 1px hairline / 16px */ .input-field { height: 48px; padding: 0 var(--space-16); border: 1px solid var(--border-default); border-radius: var(--radius-12); background: var(--bg-surface); font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--fg-strong); transition: border-color var(--dur-control) var(--ease), box-shadow var(--dur-control) var(--ease); } .input-field::placeholder { color: var(--fg-tertiary); } .input-field:hover { border-color: var(--border-strong); } .input-field:focus { outline: none; border-color: var(--border-brand); box-shadow: 0 0 0 3px rgba(0, 67, 143, 0.16); } /* primary — lg(48 / r12 / 16·700). hover 는 darken, lift 하지 않는다 */ .btn-primary { height: 48px; border: 1px solid transparent; border-radius: var(--radius-12); background: var(--bg-brand); color: var(--fg-on-brand); font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: 0.0057em; box-shadow: none; transition: background-color var(--dur-hover) var(--ease); } .btn-primary:hover { background: var(--brand-800); transform: none; box-shadow: none; } .btn-primary:active { background: var(--brand-900); } /* 소셜 버튼 — outlined. 브랜드 자산 색(Kakao 등)은 각 페이지 값을 유지한다 */ .btn-social { height: 48px; border: 1px solid var(--border-default); border-radius: var(--radius-12); font-family: var(--font-sans); font-size: 15px; font-weight: 600; box-shadow: none; transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); } .btn-social:hover { background: var(--bg-muted); border-color: var(--border-strong); transform: none; box-shadow: none; } /* 카카오 버튼: 공식 노랑(#FEE500), 호버는 한 단계 진하게 */ .btn-kakao:hover { background: #F5DC00; border-color: #F5DC00; } /* 구분선·보조 링크 */ .divider span { color: var(--fg-secondary); font-size: 13px; } .divider::before, .divider::after { border-bottom-color: var(--border-subtle); } .footer-links a { color: var(--fg-brand); font-size: 14px; font-weight: 500; } /* ───────── SweetAlert2 ───────── 기본 확인 버튼 색(#3085d6)은 흰 글씨 대비가 3.85 로 미달이고 사이트 팔레트와도 무관하다. 다이얼로그를 시스템에 맞춘다. */ .swal2-popup { border-radius: var(--radius-20) !important; font-family: var(--font-sans) !important; } .swal2-title { color: var(--fg-strong) !important; letter-spacing: -0.0194em; } .swal2-html-container { color: var(--fg-secondary) !important; } .swal2-confirm.swal2-styled { height: 48px; padding: 0 var(--space-24) !important; background-color: var(--bg-brand) !important; color: var(--fg-on-brand) !important; border: 0 !important; border-radius: var(--radius-12) !important; font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: none !important; } .swal2-confirm.swal2-styled:hover { background-color: var(--brand-800) !important; } .swal2-cancel.swal2-styled { height: 48px; padding: 0 var(--space-24) !important; background-color: var(--bg-surface) !important; color: var(--fg-default) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-12) !important; font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: none !important; } .swal2-deny.swal2-styled { background-color: var(--fg-danger) !important; border-radius: var(--radius-12) !important; } /* 가운데 정렬된 섹션 제목 바로 아래의 설명문은 함께 가운데로 맞춘다. (논문 목록·카드 같은 콘텐츠 블록은 좌측 정렬을 유지한다) */ .service-description-text, .infra-description-text { text-align: center; margin-inline: auto; } /* ───────── 왼쪽 액센트 띠 제거 ───────── 컬러 left-rail 카드는 쓰지 않는다. 구조는 1px 헤어라인이 짊어진다. */ .pub-card, .citation-box, .publication-card, .publication-item, .project-details li, .muscle-alert, .research-highlight { border-left: 1px solid var(--border-subtle, rgba(78, 86, 101, 0.08)) !important; border-radius: var(--radius-12, 12px); } .citation-box, .research-highlight, .project-details li { background: var(--bg-subtle, #F7F8FA); border: 1px solid var(--border-subtle, rgba(78, 86, 101, 0.08)) !important; } .muscle-alert { background: #FDF3E4; border: 1px solid rgba(122, 74, 0, 0.16) !important; } /* ───────── 역량 칩 그리드 ───────── 고정 열 그리드라 5개짜리 묶음이 4+1 로 쪼개지고, 1개짜리 묶음은 한 칩이 가로 전체를 차지했다. 내용 폭 칩을 가운데로 흘려 마지막 줄이 자연스럽게 정렬되도록 한다. */ .category-items { display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--space-8, 8px); } .category-item { flex: 0 1 auto; padding: var(--space-10, 10px) var(--space-16, 16px) !important; border-radius: var(--radius-full, 9999px) !important; font-size: 14px !important; font-weight: 500 !important; } .category-item:hover { transform: none !important; box-shadow: none !important; background: var(--brand-800, #003876) !important; } /* ───────── 인증 카드 수직 정렬 ───────── flex 컨테이너였지만 align/justify 가 normal 이라 카드가 위로 붙고 고정 헤더에 가렸다. */ .login-page, .signup-page, .findemail-page, .findpw-page, .unlock-page { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 100vh; padding: calc(var(--header-h, 68px) + var(--space-16, 16px)) var(--space-20, 20px) 0; } /* 이 래퍼 안에는 카드와