@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap');
:root {
--color-primary: #111111;
--color-accent: #009bdf; /* 브랜드 블루: 버튼·테두리·배경 등 (텍스트 강조 X) */
--color-accent-text: #0b2e4f; /* 강조 텍스트 전용 네이비 (밝은 시안블루 대체) */
--color-text: #1a1a1a;
--color-muted: #6b7280;
--color-sub: #555555;
--color-border: #ececec;
/* ===== 추가 색상 변수 (자주 쓰이는 raw 값에서 변수화) ===== */
--color-white: #ffffff;
--color-bg-soft: #fafbfc; /* 카드/섹션 옅은 배경 */
--color-bg-subtle: #f8fafc; /* 호버/보조 배경 */
--color-bg-muted: #f3f4f6; /* 카드 보조 배경 */
--color-border-light: #e5e7eb; /* 옅은 테두리 */
--color-muted-light: #999999; /* 푸터/메타 텍스트 */
/* 자주 쓰이는 투명색 (rgba) */
--overlay-black-6: rgba(0, 0, 0, 0.06); /* 카드 그림자 */
--overlay-black-8: rgba(0, 0, 0, 0.08); /* 강한 그림자 */
--overlay-white-70: rgba(255, 255, 255, 0.7);
--overlay-white-85: rgba(255, 255, 255, 0.85);
--accent-alpha-10: rgba(0, 155, 223, 0.1);
--accent-alpha-25: rgba(0, 155, 223, 0.25);
--accent-alpha-40: rgba(0, 155, 223, 0.4);
/* ===== Width scale (unified) ===== */
--max-width: 1480px; /* 메인 그리드 (네비·푸터·홈 섹션) */
--max-width-content: 1280px; /* 상세 페이지 본문 콘텐츠 폭 (전 페이지 통일 기준) */
--max-width-narrow: 820px; /* 텍스트 가독성 (hero desc, 섹션 head) */
/* ===== Typography scale (unified) ===== */
/* Eyebrow: section labels */
--fs-eyebrow: 17px;
--fw-eyebrow: 600;
--ls-eyebrow: 0.08em;
/* Section title (page-intro / section heading) */
--fs-title: clamp(1.875rem, 3.6vw, 3rem);
--fw-title: 600;
--ls-title: -0.025em;
--lh-title: 1.3;
/* Sub heading (h3 / card title) */
--fs-h3: clamp(1.375rem, 1.6vw, 1.5rem);
--fw-h3: 600;
--ls-h3: -0.02em;
/* Body lead (large body / intro paragraph) */
--fs-lead: clamp(1.0625rem, 1.35vw, 1.3125rem);
--fw-lead: 400;
--lh-lead: 1.65;
/* Body */
--fs-body: 18px;
--fw-body: 400;
--lh-body: 1.65;
/* Small (보조 본문 · 카드 메타 · 라벨 — 최소 사이즈) */
--fs-small: 16px;
--fw-small: 500;
--ls-small: -0.005em;
}
body {
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
font-size: var(--fs-body);
color: var(--color-text);
letter-spacing: -0.02em;
margin: 0;
padding: 0;
line-height: 1.65;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--color-white);
/* 한글 줄바꿈을 어절(단어) 단위로 — 단어 중간에서 끊기지 않음.
긴 영문/URL 등 한 단어가 칸을 넘칠 때만 강제로 줄바꿈하여 레이아웃 보호 */
word-break: keep-all;
overflow-wrap: break-word;
}
/* 일본어: 위 word-break:keep-all은 한국어 어절 줄바꿈용이지만, 공백이 없는 일본어에선
문장이 통째로 안 끊겨 카드/그리드 밖으로 가로 넘침을 유발한다. 일본어일 때만 자연
줄바꿈(문자 단위)으로 복원한다. applyLanguage()가 를 설정함. */
html[lang="ja"] * {
word-break: normal !important;
}
main {
flex: 1;
padding-top: 90px;
}
body.has-hero main {
padding-top: 0;
}
.site-header {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
}
body.has-hero .site-header:not(.is-scrolled) {
background: transparent;
border-bottom-color: transparent;
}
body.has-hero .site-header:not(.is-scrolled):not(:hover):not(.is-open) .gnb-item > a,
body.has-hero .site-header:not(.is-scrolled):not(:hover):not(.is-open) .menu-toggle,
body.has-hero .site-header:not(.is-scrolled):not(:hover):not(.is-open) .lang-toggle {
color: var(--color-white);
}
body.has-hero .site-header:not(.is-scrolled):hover {
background: var(--color-white);
border-bottom-color: var(--color-border);
}
.site-header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 32px;
height: 90px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 64px;
}
.logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.logo img {
height: 36px;
width: auto;
display: block;
}
.logo .logo-white {
display: none;
}
body.has-hero .site-header:not(.is-scrolled):not(:hover) .logo .logo-default {
display: none;
}
body.has-hero .site-header:not(.is-scrolled):not(:hover) .logo .logo-white {
display: block;
}
.gnb-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 24px;
}
.gnb-item > a {
display: inline-flex;
align-items: center;
height: 90px;
padding: 0 20px;
text-decoration: none;
color: var(--color-primary);
font-size: var(--fs-body);
font-weight: 600;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: color;
}
.gnb-item:hover > a,
.gnb-item > a:hover {
color: var(--color-accent-text);
}
.header-utility {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
/* 헤더 우측 CTA: 문의하기 버튼 (메뉴는 왼쪽 유지, .header-utility가 우측으로 띄움) */
/* 기본(흰 헤더): 흰 배경 + 검정 글씨 + 검정 테두리. 호버 시 검정 채움 */
.header-cta {
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 22px;
background: var(--color-white);
color: var(--color-primary);
box-shadow: inset 0 0 0 1px var(--color-primary); /* 테두리 — 레이아웃 안 밀게 inset */
font-size: var(--fs-body);
font-weight: 600;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.header-cta:hover {
background: var(--color-primary); /* 검정 채움 */
color: var(--color-white);
}
/* 홈 히어로(어두운 배경) 위에서는 흰 아웃라인으로 — 스크롤/호버 시 위 솔리드로 복귀 */
body.has-hero .site-header:not(.is-scrolled):not(:hover):not(.is-open) .header-cta {
background: transparent;
color: var(--color-white);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.lang-switch {
position: relative;
}
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 10px;
background: transparent;
border: none;
color: var(--color-primary);
cursor: pointer;
border-radius: 6px;
font-family: inherit;
font-size: var(--fs-small);
transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle:hover {
background: #f5f5f5;
color: var(--color-accent-text);
}
.lang-toggle svg {
display: block;
}
.lang-menu {
position: absolute;
top: 100%;
right: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
box-shadow: 0 12px 24px var(--overlay-black-8);
border-radius: 8px;
padding: 8px;
min-width: 140px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 100;
}
.lang-switch:hover .lang-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.lang-menu a {
display: block;
padding: 8px 12px;
color: var(--color-primary);
text-decoration: none;
font-size: var(--fs-small);
font-weight: 500;
border-radius: 4px;
transition: background 0.15s ease, color 0.15s ease;
}
.lang-menu a:hover {
background: #f5f5f5;
color: var(--color-accent-text);
}
.lang-menu a.is-active {
color: var(--color-accent-text);
font-weight: 600;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-white);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
z-index: 100;
}
.gnb-item:hover > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.dropdown-inner {
max-width: calc(var(--max-width) + 64px);
box-sizing: border-box;
margin: 0 auto;
padding: 0 32px 0 177px;
display: flex;
gap: 0;
flex-wrap: wrap;
}
.dropdown-inner:has(> .dropdown-col:only-child) {
justify-content: center;
}
.dropdown-col {
box-sizing: border-box;
flex: 1 1 250px;
max-width: 340px;
padding: 32px 28px 64px;
border-left: 1px solid var(--color-border);
transition: background 0.15s ease;
}
.dropdown-col:first-child {
border-left: none;
}
.dropdown-col:hover {
background: #fafafa;
}
.dropdown-col h4 {
margin: 0 0 24px 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--color-primary);
letter-spacing: -0.02em;
transition: color 0.15s ease;
}
.dropdown-col h4 .h4-sub {
margin-left: 4px;
}
.h4-sub {
font-size: var(--fs-small);
font-weight: 400;
color: #999;
letter-spacing: -0.01em;
}
.link-sub {
font-size: var(--fs-small);
font-weight: 400;
color: #aaa;
margin-left: 2px;
}
/* 헤더 메뉴 드롭다운의 제품 구(舊)명칭 (IRIS …) 보조표기만 작게 — 사용자 승인 하에 16px 미만 예외.
sitemap 본문의 .link-sub(Thor/Rocket/Heimdall 코드명)는 16px 유지되도록 .dropdown 으로 스코프 */
.dropdown .link-sub {
font-size: 14px;
}
.dropdown-col:hover h4 {
color: var(--color-accent-text);
}
.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown a {
display: block;
padding: 10px 0;
color: #888;
text-decoration: none;
font-size: var(--fs-small);
font-weight: 400;
letter-spacing: -0.01em;
transition: color 0.15s ease;
}
.dropdown a:hover {
color: var(--color-primary);
}
/* ===== Products 전용 — Graphio 우산 밴드 (상단 브랜드 밴드 + 다른 메뉴와 동일한 컬럼) ===== */
.gd-master {
max-width: calc(var(--max-width) + 64px);
box-sizing: border-box;
margin: 0 auto;
padding: 22px 32px 22px 177px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--color-border);
}
.gd-brand { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
.gd-logo {
font-family: 'Nunito', 'Pretendard Variable', sans-serif;
font-size: 26px;
font-weight: 800;
color: var(--color-accent-text);
letter-spacing: -0.02em;
line-height: 1;
}
.gd-tagline { font-size: var(--fs-small); color: var(--color-sub); letter-spacing: -0.01em; }
.dropdown--graphio .gd-more {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-accent-text);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease;
}
.dropdown--graphio .gd-more:hover { color: #0079b0; }
@media (max-width: 1023px) {
.site-header.is-open .gd-master {
max-width: 100%; padding: 16px 20px;
flex-direction: column; align-items: flex-start; gap: 10px;
background: #f8fbfd;
}
}
.gnb-item--simple {
position: relative;
}
.gnb-item--simple > .dropdown {
left: 50%;
right: auto;
width: auto;
min-width: 220px;
border: 1px solid var(--color-border);
border-top: none;
background: var(--color-white);
box-shadow: 0 12px 24px var(--overlay-black-8);
transform: translateX(calc(-50% + 40px)) translateY(-8px);
}
.gnb-item--simple:hover > .dropdown {
transform: translateX(calc(-50% + 40px)) translateY(0);
}
.gnb-item--simple > .dropdown .dropdown-inner {
max-width: none;
padding: 12px 0;
display: block;
}
.gnb-item--simple > .dropdown .dropdown-col {
flex: none;
width: 100%;
min-width: 0;
max-width: none;
padding: 0;
border-left: none;
}
.gnb-item--simple > .dropdown .dropdown-col:hover {
background: transparent;
}
.gnb-item--simple > .dropdown a {
padding: 10px 24px;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-primary);
white-space: nowrap;
}
.gnb-item--simple > .dropdown a:hover {
background: #fafafa;
color: var(--color-accent-text);
}
.site-footer {
background: var(--color-text);
color: #999;
font-size: var(--fs-small);
text-align: left;
}
.site-footer-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 64px 32px 32px;
}
.footer-sitemap {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 32px;
padding-bottom: 56px;
border-bottom: 1px solid #333;
}
.footer-col h5 {
margin: 0 0 24px 0;
font-size: var(--fs-body);
font-weight: 700;
color: var(--color-white);
letter-spacing: -0.01em;
}
.footer-col h5 a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.footer-col h5 a:hover {
color: var(--color-accent);
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li {
margin-bottom: 10px;
}
.footer-col li a {
color: #999;
text-decoration: none;
font-size: var(--fs-small);
font-weight: 400;
transition: color 0.15s ease;
}
.footer-col li a:hover {
color: var(--color-white);
}
.footer-end {
display: flex;
align-items: center;
gap: 24px;
}
.footer-sns {
display: flex;
gap: 8px;
}
.sns-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #2a2a2a;
border-radius: 50%;
color: #bbb;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sns-link:hover {
background: var(--color-white);
color: var(--color-text);
transform: translateY(-2px);
}
.footer-company {
margin-top: 32px;
}
.footer-tagline {
margin: 0 0 16px;
color: #e2e8f0;
font-size: 17px;
font-weight: 600;
line-height: 1.6;
letter-spacing: -0.01em;
}
.footer-company-line {
margin: 0;
color: #888;
font-size: var(--fs-small);
line-height: 1.7;
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
}
.footer-company-line + .footer-company-line {
margin-top: 4px;
}
.footer-company-line span {
position: relative;
padding-right: 14px;
}
.footer-company-line span::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 11px;
background: #444;
}
.footer-company-line span:last-child {
padding-right: 0;
}
.footer-company-line span:last-child::after {
display: none;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding-top: 24px;
}
.footer-legal {
display: flex;
gap: 28px;
flex-wrap: wrap;
}
.footer-legal a {
color: #ccc;
text-decoration: none;
font-size: var(--fs-small);
font-weight: 500;
transition: color 0.15s ease;
}
.footer-legal a.is-bold {
color: var(--color-white);
font-weight: 700;
}
.footer-legal a:hover {
color: var(--color-white);
}
.footer-copy {
margin: 0;
color: #666;
font-size: var(--fs-small);
}
.floating-contact {
position: fixed;
right: 32px;
bottom: 32px;
box-sizing: border-box; /* 모바일 원형(52px)에서 width/height가 패딩 포함값이 되도록 */
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
background: var(--color-primary);
color: var(--color-white);
border-radius: 999px;
text-decoration: none;
font-size: var(--fs-small);
font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
z-index: 200;
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.floating-contact:hover {
background: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.floating-contact svg {
display: block;
}
.floating-top {
position: fixed;
right: 32px;
bottom: 100px;
width: 48px;
height: 48px;
background: rgba(17, 17, 17, 0.85);
color: var(--color-white);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
pointer-events: none;
z-index: 200;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background 0.15s ease;
}
.floating-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s, background 0.15s ease;
}
.floating-top:hover {
background: var(--color-accent);
}
.floating-top svg {
display: block;
}
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
padding: 0;
background: #000;
}
@keyframes hero-fade-up {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hero-image-zoom {
from {
transform: scale(1.08);
}
to {
transform: scale(1);
}
}
@keyframes hero-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hero-slides {
position: absolute;
inset: 0;
z-index: 1;
animation: hero-fade-in 1.2s ease both;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
will-change: opacity, transform;
animation: hero-slide-fade 28s ease-in-out infinite, hero-slide-zoom 28s ease-out infinite;
}
.hero-slide:nth-child(1) { background-image: url('../images/hero/01.jpg'); animation-delay: 0s, 0s; }
.hero-slide:nth-child(2) { background-image: url('../images/hero/02.jpg'); animation-delay: 4s, 4s; }
.hero-slide:nth-child(3) { background-image: url('../images/hero/03.jpg'); animation-delay: 8s, 8s; }
.hero-slide:nth-child(4) { background-image: url('../images/hero/04.jpg'); animation-delay: 12s, 12s; }
.hero-slide:nth-child(5) { background-image: url('../images/hero/05.jpg'); animation-delay: 16s, 16s; }
.hero-slide:nth-child(6) { background-image: url('../images/hero/06.jpg'); animation-delay: 20s, 20s; }
.hero-slide:nth-child(7) { background-image: url('../images/hero/07.jpg'); animation-delay: 24s, 24s; }
@keyframes hero-slide-fade {
0% { opacity: 0; }
3.57% { opacity: 1; }
14.28% { opacity: 1; }
17.86% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes hero-slide-zoom {
0% { transform: scale(1); }
17.86% { transform: scale(1.08); }
100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide {
animation: none;
opacity: 1;
}
.hero-slide:not(:first-child) {
display: none;
}
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 24px;
color: var(--color-white);
}
.hero-tagline {
margin: 0 0 24px;
font-size: clamp(2.5rem, 5.2vw, 4rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.16;
text-wrap: balance;
opacity: 0.7;
color: var(--color-white);
animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
/* 히어로 제목 뒤 괄호 보조 표기 (예: (IRIS VDAP)) — 본 제목 절반 크기 + 가는 굵기 + 옅은 톤 */
.hero-tagline .hero-sub {
font-weight: 400;
font-size: 0.5em;
opacity: 0.62;
white-space: nowrap;
}
.hero-headline {
margin: 0;
font-family: 'Nunito', 'Pretendard Variable', sans-serif;
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--color-white);
max-width: var(--max-width-content);
animation: hero-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.hero-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 40px;
padding: 16px 28px;
min-width: 320px;
background: rgba(255, 255, 255, 0.12);
color: var(--color-white);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
text-decoration: none;
font-size: 20px;
font-weight: 400;
letter-spacing: -0.01em;
animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero-cta:hover {
background: var(--color-white);
color: #111;
border-color: var(--color-white);
}
.hero-cta-arrow {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.hero-cta:hover .hero-cta-arrow {
transform: translateX(4px);
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
color: var(--color-primary);
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
font-weight: var(--fw-title);
}
h3 {
font-size: var(--fs-h3);
letter-spacing: var(--ls-h3);
font-weight: var(--fw-h3);
line-height: 1.35;
}
p {
line-height: var(--lh-body);
}
.blog-list {
list-style: none;
padding: 0;
}
.blog-list li {
margin: 0.5rem 0;
}
.blog-list a {
color: var(--color-accent-text);
text-decoration: none;
}
.blog-list a:hover {
text-decoration: underline;
}
.page-content {
padding: 100px 0 120px;
}
.page-intro {
padding: 100px 0 80px;
background: var(--color-white);
text-align: center;
}
.page-intro .section-eyebrow {
margin-bottom: 18px;
}
.page-intro .section-title {
margin: 0 0 28px;
font-size: clamp(1.875rem, 3.6vw, 3rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-primary);
line-height: 1.3;
text-align: center;
}
.page-intro-desc {
max-width: var(--max-width-narrow);
margin: 0 auto;
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
color: var(--color-sub);
}
.page-intro + .page-content,
.page-intro + section.page-content {
padding-top: 40px;
}
@media (max-width: 767px) {
.page-intro {
padding: 64px 0 48px;
}
.page-intro-desc {
font-size: var(--fs-small);
line-height: 1.65;
}
.page-intro + .page-content {
padding-top: 24px;
}
}
.legal-doc {
max-width: var(--max-width-narrow);
}
.legal-doc .section-title {
margin-bottom: 32px;
}
.legal-intro {
margin: 0 0 56px;
padding: 24px 28px;
background: var(--color-bg-subtle);
border-left: 4px solid var(--color-accent);
border-radius: 4px;
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.75;
color: var(--color-text);
}
.legal-article {
margin: 0 0 56px;
}
.legal-article h3 {
margin: 0 0 20px;
padding-bottom: 16px;
border-bottom: 2px solid var(--color-primary);
font-size: var(--fs-h3);
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.015em;
}
.legal-article p {
margin: 0 0 14px;
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.75;
color: var(--color-sub);
}
.legal-article p:last-child {
margin-bottom: 0;
}
.legal-article a {
color: var(--color-accent-text);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.legal-article a:hover {
opacity: 0.75;
}
.legal-article strong {
font-weight: 600;
color: var(--color-primary);
}
.legal-list {
margin: 12px 0 16px;
padding-left: 22px;
}
.legal-list li {
margin-bottom: 10px;
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.75;
color: var(--color-sub);
}
.legal-list li::marker {
color: var(--color-primary);
font-weight: 600;
}
.legal-list--bullet {
list-style: none;
padding-left: 0;
}
.legal-list--bullet li {
position: relative;
padding-left: 18px;
}
.legal-list--bullet li::before {
content: '';
position: absolute;
left: 4px;
top: 12px;
width: 5px;
height: 5px;
background: var(--color-accent);
border-radius: 50%;
}
.legal-note {
display: inline-block;
margin-top: 8px;
font-size: var(--fs-small);
color: var(--color-muted);
font-style: italic;
}
.legal-quote {
margin: 16px 0;
padding: 14px 20px;
background: #f1f5f9;
border-radius: 6px;
font-size: var(--fs-small);
line-height: 1.65;
color: var(--color-sub);
}
.legal-card {
margin: 16px 0 20px;
padding: 20px 24px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: 8px;
}
.legal-card-title {
margin: 0 0 12px !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
}
.legal-card-list {
list-style: none;
margin: 0;
padding: 0;
}
.legal-card-list li {
display: flex;
gap: 16px;
padding: 6px 0;
font-size: var(--fs-small);
line-height: 1.6;
color: var(--color-sub);
}
.legal-card-list li span {
flex-shrink: 0;
width: 90px;
font-weight: 500;
color: var(--color-muted);
}
.legal-card-list li strong {
color: var(--color-primary);
font-weight: 500;
}
.legal-effective {
margin: 64px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--color-border);
text-align: right;
font-size: var(--fs-small);
color: var(--color-muted);
}
.sitemap-intro {
max-width: var(--max-width-narrow);
margin: 0 auto 72px;
text-align: center;
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
color: var(--color-sub);
}
.sitemap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 40px;
}
.sitemap-section {
padding: 36px 32px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sitemap-section:hover {
border-color: var(--color-accent);
box-shadow: 0 12px 28px var(--overlay-black-6);
}
.sitemap-section > h3 {
margin: 0 0 28px;
padding-bottom: 18px;
border-bottom: 2px solid var(--color-primary);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
}
.sitemap-section > h3 a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.15s ease;
}
.sitemap-section > h3 a:hover {
color: var(--color-accent-text);
}
/* Why mobigen — 하위 메뉴가 없어 전폭 소개 배너로 처리 (2026-06-21) */
.sitemap-section--feature {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px 40px;
flex-wrap: wrap;
}
.sitemap-feature-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.sitemap-section--feature h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
}
.sitemap-section--feature h3 a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.15s ease;
}
.sitemap-section--feature h3 a:hover {
color: var(--color-accent-text);
}
.sitemap-feature-text p {
margin: 0;
max-width: 64ch;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-sub);
text-wrap: balance;
}
.sitemap-feature-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid var(--color-primary);
border-radius: 8px;
font-size: var(--fs-body);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sitemap-feature-cta span {
transition: transform 0.15s ease;
}
.sitemap-feature-cta:hover {
background: var(--color-primary);
color: #fff;
}
.sitemap-feature-cta:hover span {
transform: translateX(3px);
}
.sitemap-group {
margin-bottom: 28px;
}
.sitemap-group:last-child {
margin-bottom: 0;
}
.sitemap-group h4 {
margin: 0 0 14px;
padding: 6px 0 6px 12px;
border-left: 3px solid var(--color-accent);
font-size: var(--fs-body);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.sitemap-group ul {
list-style: none;
margin: 0;
padding: 0;
}
.sitemap-group li {
margin: 0;
}
.sitemap-group li a {
display: block;
padding: 8px 0;
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-sub);
text-decoration: none;
transition: color 0.15s ease, padding-left 0.15s ease;
}
.sitemap-group li a:hover {
color: var(--color-accent-text);
padding-left: 6px;
}
.sitemap-utility {
margin-top: 72px;
padding: 36px 32px;
background: #f1f5f9;
border-radius: 12px;
}
.sitemap-utility h3 {
margin: 0 0 20px;
font-size: var(--fs-h3);
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.015em;
}
.sitemap-utility ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
.sitemap-utility li a {
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-sub);
text-decoration: none;
padding: 8px 0;
transition: color 0.15s ease;
}
.sitemap-utility li a:hover {
color: var(--color-accent-text);
}
@media (max-width: 1023px) {
.sitemap-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px 24px;
}
}
@media (max-width: 767px) {
.sitemap-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.sitemap-section {
padding: 24px 20px;
}
.sitemap-utility ul {
flex-direction: column;
gap: 4px;
}
}
.page-placeholder {
min-height: calc(100vh - 90px - 400px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 120px 32px 100px;
text-align: center;
}
.page-placeholder-eyebrow {
margin: 0 0 20px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--color-accent-text);
}
.page-placeholder h1 {
margin: 0 0 24px;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-primary);
}
.page-placeholder-desc {
margin: 0;
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.6;
color: var(--color-sub);
}
.container.contact-container {
max-width: var(--max-width-content);
padding: 40px 32px 120px;
}
.contact-form-view {
max-width: var(--max-width-narrow);
margin: 0 auto;
}
.contact-form-view .form-required-notice,
.contact-form-view .form-grid,
.contact-form-view .consent-section,
.contact-form-view .form-actions {
width: 100%;
max-width: var(--max-width-narrow);
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.form-required-notice {
margin: 28px 0 16px;
text-align: right;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-sub);
letter-spacing: -0.005em;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 32px;
row-gap: 24px;
margin-bottom: 24px;
}
.form-row--full {
grid-column: 1 / -1;
}
@media (max-width: 720px) {
.form-grid {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 18px;
}
}
@media (max-width: 720px) {
.container.contact-container {
max-width: 100%;
padding: 32px 24px 80px;
}
}
.contact-intro {
margin: 0 auto 48px;
text-align: center;
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
color: var(--color-sub);
}
.contact-form {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ---------- Contact intro cards ---------- */
.contact-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.contact-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 40px 36px 36px;
background: var(--color-bg-muted);
border-radius: 16px;
min-height: 240px;
}
.contact-card-title {
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-primary);
line-height: 1.3;
}
.contact-card-desc {
margin: 0;
font-size: var(--fs-small);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--color-sub);
line-height: 1.6;
flex: 1;
}
.contact-cta {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 8px;
font-family: inherit;
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-primary);
letter-spacing: -0.01em;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-cta svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.contact-cta:hover {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.contact-cta:hover svg {
transform: translateX(3px);
}
.contact-card--list {
grid-column: 1 / -1;
padding: 36px 36px 32px;
}
.contact-card--list .contact-card-title {
margin-bottom: 8px;
}
.contact-sub-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 32px;
}
.contact-sub-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 4px;
border-bottom: 1px solid #d8dade;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-primary);
letter-spacing: -0.01em;
}
.contact-cta--sm {
padding: 10px 18px;
font-size: var(--fs-body);
}
@media (max-width: 720px) {
.contact-cards {
grid-template-columns: 1fr;
gap: 16px;
}
.contact-card {
padding: 28px 24px 24px;
min-height: 0;
}
.contact-card--list {
padding: 24px 24px 16px;
}
.contact-sub-list {
grid-template-columns: 1fr;
column-gap: 0;
}
.contact-sub-list li {
padding: 16px 4px;
}
}
/* ---------- Back to intro button ---------- */
.contact-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 24px;
padding: 8px 16px 8px 12px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 999px;
font-family: inherit;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-sub);
letter-spacing: -0.01em;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-back svg {
width: 16px;
height: 16px;
}
.contact-back:hover {
background: var(--color-bg-soft);
color: var(--color-primary);
border-color: var(--color-primary);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Tab-style category radio group ---------- */
.form-tabs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
padding: 0;
margin: 0 0 24px;
border: none;
border-bottom: 1px solid var(--color-border);
}
.form-tabs input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-tabs label {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 4px;
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-muted);
letter-spacing: -0.015em;
white-space: nowrap;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.form-tabs label:hover {
color: var(--color-primary);
}
.form-tabs input[type="radio"]:checked + label {
color: var(--color-primary);
font-weight: 700;
border-bottom-color: var(--color-primary);
}
.form-tabs input[type="radio"]:focus-visible + label {
outline: 2px solid var(--color-accent);
outline-offset: -4px;
border-radius: 2px;
}
/* ---------- Filled gray field rows (2-col grid) ---------- */
.form-row {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
border: none;
}
.form-row label {
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-primary);
letter-spacing: -0.01em;
}
.form-row input,
.form-row textarea,
.form-row select {
padding: 14px 16px;
font-family: inherit;
font-size: var(--fs-small);
font-weight: 400;
color: var(--color-primary);
background: #f1f3f5;
border: 1px solid transparent;
border-radius: 8px;
outline: none;
letter-spacing: -0.01em;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row input::placeholder,
.form-row textarea::placeholder {
color: #adb5bd;
font-weight: 400;
}
.form-row select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px 18px;
padding-right: 44px;
cursor: pointer;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
background: var(--color-white);
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(0, 155, 223, 0.12);
}
.form-row textarea {
resize: vertical;
min-height: 200px;
line-height: 1.6;
}
.form-required {
color: var(--color-accent-text);
font-weight: 600;
margin-left: 2px;
}
/* ---------- File attachment ---------- */
.file-input-wrap {
display: flex;
gap: 10px;
position: relative;
}
.file-input-display {
flex: 1;
}
.file-browse-btn {
flex-shrink: 0;
padding: 14px 28px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 8px;
font-family: inherit;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-primary);
letter-spacing: -0.01em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.file-browse-btn:hover {
background: var(--color-bg-subtle);
border-color: var(--color-primary);
}
.file-help {
margin: 10px 0 0;
font-size: var(--fs-small);
font-weight: 400;
color: var(--color-sub);
letter-spacing: -0.005em;
line-height: 1.5;
}
.file-help-detail {
color: var(--color-muted);
}
/* ---------- Consent sections (always expanded) ---------- */
.consent-section {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--color-border);
}
.consent-section + .consent-section {
border-top: 0;
}
.consent-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
font-size: var(--fs-body);
font-weight: 600;
color: var(--color-primary);
letter-spacing: -0.01em;
}
.consent-title {
display: inline-flex;
align-items: center;
gap: 4px;
}
.consent-optional {
margin-left: 4px;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-muted);
}
.consent-detail {
padding: 4px 0 12px;
}
.consent-detail ul {
list-style: none;
margin: 0;
padding: 14px 16px;
background: var(--color-bg-subtle);
border-radius: 8px;
}
.consent-detail li {
position: relative;
padding-left: 12px;
margin-bottom: 6px;
font-size: var(--fs-small);
font-weight: 400;
color: var(--color-sub);
line-height: 1.6;
letter-spacing: -0.005em;
}
.consent-detail li:last-child {
margin-bottom: 0;
}
.consent-detail li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 3px;
height: 3px;
background: var(--color-sub);
border-radius: 50%;
}
.consent-detail li strong {
color: var(--color-primary);
font-weight: 600;
margin-right: 4px;
}
.consent-check {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0 18px;
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-primary);
cursor: pointer;
letter-spacing: -0.005em;
}
.consent-check input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--color-primary);
cursor: pointer;
}
/* ---------- Action buttons ---------- */
.form-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 40px;
}
.btn-cancel,
.btn-submit {
min-width: 160px;
padding: 16px 28px;
font-family: inherit;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: -0.01em;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-cancel {
background: var(--color-white);
color: var(--color-primary);
border: 1px solid var(--color-border);
}
.btn-cancel:hover {
background: var(--color-bg-subtle);
border-color: var(--color-primary);
}
.btn-submit {
background: var(--color-primary);
color: var(--color-white);
border: 1px solid var(--color-primary);
}
.btn-submit:hover {
background: #000;
border-color: #000;
}
@media (max-width: 960px) {
.form-tabs {
grid-template-columns: repeat(3, 1fr);
}
.form-tabs label {
font-size: var(--fs-small);
padding: 14px 6px;
}
}
@media (max-width: 720px) {
.form-tabs {
grid-template-columns: repeat(2, 1fr);
}
.form-tabs label {
padding: 14px 4px;
font-size: var(--fs-small);
}
.form-actions {
flex-direction: column-reverse;
gap: 10px;
}
.btn-cancel,
.btn-submit {
width: 100%;
min-width: 0;
}
}
.contact-submit {
margin-top: 16px;
padding: 16px 32px;
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 999px;
font-family: inherit;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
align-self: center;
min-width: 240px;
transition: background 0.2s ease, transform 0.15s ease;
}
.contact-submit:hover {
background: var(--color-accent);
transform: translateY(-2px);
}
.menu-toggle {
display: none;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
color: var(--color-primary);
align-items: center;
justify-content: center;
}
.menu-toggle .menu-icon-close {
display: none;
}
.site-header.is-open .menu-toggle .menu-icon-open {
display: none;
}
.site-header.is-open .menu-toggle .menu-icon-close {
display: block;
}
@media (max-width: 1023px) {
.site-header-inner {
height: 72px;
padding: 0 20px;
gap: 0;
}
.menu-toggle {
display: inline-flex;
z-index: 101;
order: 2; /* 햄버거는 언어 버튼 뒤(오른쪽)에 배치 */
}
.gnb {
display: none;
}
/* 언어 전환 버튼: 모바일에서도 노출 — 햄버거 앞(왼쪽)에 표시 */
.lang-switch {
order: 1;
z-index: 101;
}
.header-cta {
display: none;
}
/* 모바일은 hover가 없으므로 버튼 탭 시 .is-open 으로 드롭다운 표시 */
.lang-switch.is-open .lang-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.site-header.is-open .gnb {
display: block;
position: fixed;
top: 72px;
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
overflow-y: auto;
z-index: 100;
padding: 0 0 32px;
}
.site-header.is-open .gnb-list {
flex-direction: column;
gap: 0;
}
.site-header.is-open .gnb-item {
border-bottom: 1px solid var(--color-border);
}
.site-header.is-open .gnb-item > a {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
padding: 18px 20px;
font-size: var(--fs-body);
cursor: pointer;
}
.site-header.is-open .gnb-item:not(.gnb-item--simple) > a::after {
content: '';
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.site-header.is-open .gnb-item.is-expanded > a::after {
transform: rotate(180deg);
}
.site-header.is-open .dropdown {
display: none;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition: none;
}
.site-header.is-open .gnb-item.is-expanded .dropdown {
display: block;
position: static;
box-shadow: none;
border: none;
background: #fafafa;
}
.site-header.is-open .dropdown-inner {
padding: 0;
flex-direction: column;
gap: 0;
max-width: 100%;
}
.site-header.is-open .dropdown-col {
flex: none;
width: 100%;
max-width: 100%;
padding: 0;
border-left: none;
border-bottom: 1px solid var(--color-border);
}
.site-header.is-open .dropdown-col:last-child {
border-bottom: none;
}
.site-header.is-open .dropdown-col:hover {
background: transparent;
}
.site-header.is-open .dropdown-col h4 {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin: 0;
padding: 14px 36px;
border-bottom: none;
font-size: var(--fs-small);
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.01em;
}
.site-header.is-open .dropdown-col h4::after {
content: '';
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.site-header.is-open .dropdown-col.is-expanded h4::after {
transform: rotate(180deg);
}
.site-header.is-open .dropdown-col:hover h4 {
color: var(--color-primary);
}
.site-header.is-open .dropdown-col h4 + ul {
display: none;
}
.site-header.is-open .dropdown-col.is-expanded h4 + ul {
display: block;
padding-bottom: 12px;
}
.site-header.is-open .dropdown a {
padding: 10px 36px;
font-size: var(--fs-small);
}
.site-header.is-open .dropdown-col h4 + ul a {
padding: 10px 52px;
}
.footer-sitemap {
grid-template-columns: repeat(3, 1fr);
gap: 32px 24px;
padding-bottom: 40px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.floating-contact {
bottom: 20px;
right: 20px;
padding: 12px 18px;
font-size: var(--fs-small);
}
}
@media (max-width: 767px) {
.site-header-inner {
height: 64px;
}
.logo img {
height: 24px;
}
.site-header.is-open .gnb {
top: 64px;
}
.page-content {
padding: 64px 0 80px;
}
.footer-sitemap {
grid-template-columns: repeat(2, 1fr);
gap: 28px 16px;
}
.site-footer-inner {
padding: 48px 20px 24px;
}
.footer-legal {
gap: 14px 20px;
}
.floating-contact {
bottom: 16px;
right: 16px;
padding: 14px;
width: 52px;
height: 52px;
justify-content: center;
border-radius: 50%;
}
.floating-contact span {
display: none;
}
.floating-top {
right: 16px;
bottom: 80px;
width: 44px;
height: 44px;
}
.hero {
min-height: 480px;
}
main {
padding-top: 64px;
}
body.has-hero main {
padding-top: 0;
}
}
/* ============ CLIENTS BAND (히어로 하단) ============ */
.home-clients {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
/* ============ PRODUCTS LIST ============ */
.home-product-list {
max-width: 960px;
margin: 0 auto;
}
.home-product-item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
padding: 60px 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.home-product-item:last-child {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.home-product-item:nth-child(even) .home-product-visual {
order: -1;
}
.home-product-meta {
margin: 0 0 8px;
font-size: var(--fs-small);
font-weight: 700;
text-transform: uppercase;
color: var(--color-accent-text);
}
.home-product-name {
margin: 0 0 16px;
font-family: 'Nunito', 'Pretendard Variable', sans-serif;
font-size: clamp(1.75rem, 2.5vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
line-height: 1.15;
}
.home-product-desc {
margin: 0 0 24px;
font-size: var(--fs-body);
line-height: 1.65;
color: rgba(255,255,255,0.6);
}
.home-product-modules {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.home-product-modules span {
padding: 4px 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
font-size: var(--fs-small);
color: rgba(255,255,255,0.7);
}
.home-product-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-accent-text);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
transition: gap 0.2s ease;
}
.home-product-link::after { content: "→"; }
.home-product-link:hover { gap: 10px; }
.home-product-visual {
border-radius: 20px;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.home-product-visual--graphio { background: linear-gradient(135deg, #2b5fff 0%, #00a8ff 50%, #4dd4ff 100%); }
.home-product-visual--iris { background: linear-gradient(135deg, #6e2bff 0%, #b14dff 50%, #ff6ec4 100%); }
.home-product-visual--ov { background: linear-gradient(135deg, #00c879 0%, #00b39a 50%, #0084c1 100%); }
.home-product-tiles {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 28px;
justify-content: center;
}
.home-product-tiles span {
padding: 6px 14px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 999px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--color-white);
}
/* ============ WHY MOBIGEN ============ */
.home-why {
background: #f5f7fa;
}
.why-pillars {
max-width: 960px;
margin: 0 auto 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.why-pillar {
padding: 36px 28px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 20px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.why-pillar:hover {
transform: translateY(-3px);
border-color: var(--color-accent);
box-shadow: 0 20px 48px -16px rgba(0,155,223,0.18);
}
.why-pillar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, #2b5fff, #4dd4ff);
color: var(--color-white);
margin-bottom: 20px;
box-shadow: 0 6px 16px rgba(0,155,223,0.22);
}
.why-pillar:nth-child(2) .why-pillar-icon {
background: linear-gradient(135deg, #6e2bff, #ff6ec4);
box-shadow: 0 6px 16px rgba(177,77,255,0.22);
}
.why-pillar:nth-child(3) .why-pillar-icon {
background: linear-gradient(135deg, #00c879, #0084c1);
box-shadow: 0 6px 16px rgba(0,200,121,0.22);
}
.why-pillar-title {
margin: 0 0 12px;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.why-pillar-desc {
margin: 0;
font-size: var(--fs-body);
line-height: 1.65;
color: var(--color-muted);
}
.why-cta {
text-align: center;
max-width: 960px;
margin: 0 auto;
}
.why-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-primary);
font-size: var(--fs-body);
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid var(--color-primary);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.why-cta-link:hover { color: var(--color-accent-text); border-color: var(--color-accent); }
@media (max-width: 1023px) {
.why-pillars { grid-template-columns: repeat(2, 1fr); }
.home-product-item { gap: 40px; }
}
@media (max-width: 767px) {
.why-pillars { grid-template-columns: 1fr; }
.home-product-item { grid-template-columns: 1fr; gap: 32px; }
.home-product-item:nth-child(even) .home-product-visual { order: 0; }
}
/* 단어 사이 가운데 점(•) 시각적 축소 — font-size는 16px 유지하고 transform으로만 축소 */
.dot-sep {
display: inline-block;
transform: scale(0.55);
vertical-align: 0.06em;
margin: 0 -0.18em;
color: currentColor;
opacity: 0.7;
}
/* ============================================================
노트북 등 좁은 화면 좌우 여백 — 공통 헤더/푸터 (2026-06-19)
본문 .container(culture.css)와 좌우 패딩을 동일하게 맞춰
로고·메뉴·푸터가 본문과 같은 라인에서 시작하도록 정렬을 통일한다.
============================================================ */
@media (min-width: 1024px) and (max-width: 1480px) {
.site-header-inner,
.site-footer-inner,
.home-container {
padding-left: clamp(40px, 5vw, 80px);
padding-right: clamp(40px, 5vw, 80px);
}
/* 좌우 여백이 커진 만큼 헤더 메뉴 간격을 좁혀 내비가 줄바꿈되지 않게 함 */
.site-header-inner {
gap: clamp(28px, 3.5vw, 64px);
}
}
/* ============================================================
페이지 전환 부드럽게 — View Transitions (2026-06-19 성능 최적화)
지원 브라우저(크롬·엣지·사파리 최신)에서 메뉴로 페이지를 이동할 때
흰 화면 깜빡임 대신 짧은 크로스페이드로 전환된다.
미지원 브라우저는 무시되어 기존처럼 즉시 전환(점진적 향상).
============================================================ */
@view-transition { navigation: auto; }
/* 헤더는 전환 중 제자리에 고정(본문만 크로스페이드)되도록 별도 이름 부여 */
.site-header { view-transition-name: site-header; }
/* 전환 속도(과하지 않게 짧게) */
::view-transition-group(root) { animation-duration: 0.22s; }
/* 모션 최소화를 켠 사용자에겐 전환 애니메이션을 끔 */
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ── 모바일 전용 줄바꿈(.br-m) ───────────────────────────────
제목·리드의 의도적
를 넓은 화면(768px↑)에선 숨겨 한 줄로 흐르게 하고,
모바일에서만 줄바꿈을 살린다. HTML에서
앞에 공백을 두어
데스크탑에서 앞뒤 단어가 붙지 않도록 한다(about challenge-quote는
뒤 개행 공백이 이미 있어 별도 공백 불필요). */
@media (min-width: 768px) {
br.br-m { display: none; }
}
/* ── 줄바꿈 균형: 제목·리드 고아꼬리 방지 (text-wrap: balance) ───────────────
짧은 디스플레이 텍스트(제목/리드/아이브로/히어로 보조문)에서 마지막 줄에
단어 하나·짧은 꼬리만 떨어지는 '고아꼬리'를 막아 두세 줄을 균등하게 나눈다.
- 한 줄로 들어가면 아무 효과 없음(no-op)
- 긴 본문(대략 6줄 초과)은 브라우저가 자동으로 무시 → 본문엔 영향 없음
- 의도적
· 는 그대로 존중됨
산업 페이지 리드는 각 css에서 직접 balance로 지정(이 전역 규칙과 동일 값). */
h1, h2, h3, h4,
[class*="lead"],
[class*="title"],
[class*="eyebrow"],
[class*="headline"],
[class*="tagline"],
[class*="subtitle"],
[class*="hero-sub"],
[class*="hero-desc"],
[class*="intro"] {
text-wrap: balance;
}
/* 2문장 리드: 각 문장(절)을 블록으로 분리 → 부모의 balance가 상속돼
문장별로 균형 잡힘. 기존의 항상-켜진
를 대체(같은 줄 분리 + 고아꼬리 제거). */
.lead-line { display: block; }
/* 모바일 전용 절 분리(.clause-m): 데스크탑(768px↑)은 inline으로 한 줄 흐름+balance,
모바일은 절마다 블록 → 부모의 balance가 상속돼 절별로 균형(고아꼬리 방지).
기존
를 대체. */
@media (max-width: 767px) {
.clause-m { display: block; }
}