/* =========================================================
DOOGO GROUP — base.css
공통 디자인 토큰 · 리셋 · 타이포 · 버튼 · 헤더 · 메가메뉴 · 모바일 메뉴 · 푸터 · 모션
페이지 전용 스타일은 assets/css/pages/*.css 에 둡니다.
========================================================= */
/* ---------- 1. 토큰 ---------- */
:root {
/* 브랜드 */
--blue: #0A5DE2; /* 로고 블루 */
--blue-600: #0850C4;
--blue-700: #0742A3;
--blue-300: #6FA2F2;
--blue-100: #D8E6FC;
--blue-50: #EEF4FE;
--sky: #4C8DF6;
/* 잉크 · 배경 */
--ink: #0B1B33; /* 짙은 네이비 본문 */
--ink-2: #2B3A52;
--muted: #5F6B7E;
--muted-2: #667085;
--line: #E5E1D8;
--line-2: #EFECE5;
--bg: #FFFFFF;
--ivory: #F7F5F0;
--ivory-2: #EFEBE2;
--navy: #0A1426; /* 어두운 구간 */
--navy-2: #111E36;
--navy-3: #1B2A47;
--on-dark: #FFFFFF;
--on-dark-2: rgba(255, 255, 255, .72);
--on-dark-3: rgba(255, 255, 255, .5);
--line-dark: rgba(255, 255, 255, .14);
/* 글꼴 */
--font-ko: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
--font-en: 'Outfit', 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
/* 크기 */
--fs-display: clamp(2.6rem, 6.2vw, 5.75rem); /* 히어로 */
--fs-h1: clamp(2.2rem, 4.6vw, 4rem); /* 페이지 제목 */
--fs-h2: clamp(1.85rem, 3.6vw, 3.25rem); /* 섹션 제목 */
--fs-h3: clamp(1.3rem, 2vw, 1.75rem);
--fs-lead: clamp(1.05rem, 1.35vw, 1.3rem);
--fs-body: 1rem;
--fs-sm: .9rem;
--fs-xs: .8rem;
/* 레이아웃 */
--container: 1320px;
--gutter: clamp(20px, 4vw, 48px);
--header-h: 84px;
--sec-y: clamp(88px, 11vw, 168px);
--radius-lg: 28px;
--radius: 20px;
--radius-sm: 12px;
/* 모션 */
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
--dur: .8s;
/* 그림자 */
--shadow-sm: 0 2px 10px rgba(11, 27, 51, .06);
--shadow: 0 18px 50px -18px rgba(11, 27, 51, .22);
--shadow-lg: 0 40px 90px -30px rgba(11, 27, 51, .35);
}
@media (max-width: 1024px) { :root { --header-h: 68px; } }
/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font-ko); font-size: var(--fs-body); line-height: 1.65;
letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: break-word;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:where(section, [id]) { scroll-margin-top: calc(var(--header-h) + 16px); }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
/* 어두운 구간에서는 밝은 링 (흰·아이보리 위 --blue 5.2:1 이상 / 네이비 위 --blue-300 7:1) */
:is(.section--navy, .page-hero--navy, .cta-band, .site-footer, .film-modal, .on-dark, .hero, .toast) :focus-visible,
body[data-header="overlay"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu) :focus-visible { outline-color: var(--blue-300); }
.section--blue :focus-visible { outline-color: #fff; }
/* Tab 이동 중에만: 포커스된 요소가 고정 헤더·서브 내비 밑으로 숨지 않게 (site.js가 html.is-tabbing 부여).
앵커 이동(scroll-margin)과 겹치지 않도록 Tab 키를 누르는 동안에만 적용합니다. */
html.is-tabbing { scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: 16px; }
html.is-tabbing:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 80px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; }
/* ---------- 3. 레이아웃 ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); position: relative; }
.section--ivory { background: var(--ivory); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--blue { background: var(--blue); color: #fff; }
.section--tight { padding-block: calc(var(--sec-y) * .6); }
main { display: block; }
/* ---------- 4. 타이포 ---------- */
.en { font-family: var(--font-en); letter-spacing: 0; }
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-en); font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
color: var(--blue);
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: .9; }
.section--navy .eyebrow, .on-dark .eyebrow, .cta-band .eyebrow { color: var(--blue-300); }
.eyebrow--plain::before { display: none; }
.display { font-size: var(--fs-display); line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; }
.h1 { font-size: var(--fs-h1); line-height: 1.18; font-weight: 700; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.22; font-weight: 700; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.35; font-weight: 700; letter-spacing: -0.025em; }
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); letter-spacing: -0.015em; }
.section--navy .lead, .on-dark .lead { color: var(--on-dark-2); }
.muted { color: var(--muted); }
.text-blue { color: var(--blue); }
.accent { color: var(--blue); }
.section--navy .accent { color: var(--blue-300); }
/* 섹션 머리 */
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head .h2 { max-width: 18ch; }
.sec-head--split { grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; }
.sec-head--split .lead { grid-column: 1; }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .h2 { max-width: 22ch; }
@media (max-width: 860px) { .sec-head--split { grid-template-columns: 1fr; } }
/* ---------- 5. 버튼 · 링크 ---------- */
.btn {
--btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 0 26px; border-radius: 999px;
background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap;
transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(4px); }
.btn--primary { --btn-bg: var(--blue); --btn-fg: #fff; box-shadow: 0 10px 28px -12px rgba(10, 93, 226, .7); }
.btn--primary:hover { --btn-bg: var(--blue-600); }
.btn--dark { --btn-bg: var(--ink); }
.btn--dark:hover { --btn-bg: var(--navy-3); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(11, 27, 51, .22); }
.btn--line:hover { --btn-bd: var(--ink); }
.btn--ghost { --btn-bg: rgba(255, 255, 255, .08); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--white:hover { --btn-bg: var(--blue-50); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .92rem; }
.btn--lg { min-height: 60px; padding: 0 32px; font-size: 1.05rem; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.btn--primary[aria-current="page"] { box-shadow: 0 0 0 3px var(--blue-100); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.link-arrow .ico { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }
.section--navy .link-arrow { color: #fff; }
.play-ring { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); }
.play-ring svg { width: 12px; height: 12px; margin-left: 2px; }
/* 칩 · 태그 · 배지 */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .92rem; font-weight: 500; color: var(--ink-2); transition: all .2s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--blue-50); color: var(--blue-700); font-size: .78rem; font-weight: 600; letter-spacing: 0; }
.tag--line { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.note { font-size: var(--fs-xs); color: var(--muted-2); }
/* 카드 공통 */
.card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.media-cover { position: relative; overflow: hidden; background: var(--ivory-2); }
.media-cover > img, .media-cover > video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hover-zoom:hover .media-cover > img, .hover-zoom:hover .media-cover > video { transform: scale(1.05); }
/* ---------- 6. 헤더 ---------- */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
color: var(--ink); background: rgba(255, 255, 255, .96);
border-bottom: 1px solid var(--line-2);
backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease);
}
body { padding-top: var(--header-h); }
body[data-header="overlay"] { padding-top: 0; }
body[data-header="overlay"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu) { background: transparent; color: #fff; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-header="overlay"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu)::before {
content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, rgba(5, 12, 26, .55), rgba(5, 12, 26, 0));
}
.site-header.is-hidden { transform: translateY(-100%); }
.hd-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.hd-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: inherit; }
.hd-logo svg { height: 36px; width: auto; }
.hd-logo .lg-sym, .hd-logo .lg-dot { transition: fill .35s var(--ease); }
body[data-header="overlay"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu) .hd-logo :is(.lg-sym, .lg-dot) { fill: #fff; }
/* DOOGO · GROUP 로고: doogo 글자와 같은 둥근 획의 GROUP 워드마크(assets/img/logo/doogo-group-lockup.svg) */
.gnb { margin-left: auto; height: 100%; }
.gnb > ul { display: flex; height: 100%; gap: clamp(14px, 2.2vw, 40px); }
.gnb > ul > li { position: relative; height: 100%; display: flex; align-items: center; }
.gnb > ul > li.has-mega { position: static; } /* 안의 .mega 가 헤더 전체 폭 기준으로 놓이도록 */
/* 메뉴 글자: 기존(1.02rem · 600)의 약 1.5배 · 굵게. 1025–1440px 에서는 화면 폭에 맞춰 줄어듦 */
.gnb-link { position: relative; display: inline-flex; align-items: center; height: 100%; font-size: clamp(1rem, .55rem + .62vw, 1.18rem); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.gnb-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 3px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.gnb > ul > li:hover > .gnb-link::after, .gnb > ul > li.is-open > .gnb-link::after, .gnb-link[aria-current="page"]::after, .gnb-link.is-current::after { transform: scaleX(1); }
.gnb-sub {
position: absolute; top: calc(100% - 10px); left: 50%; min-width: 200px; padding: 12px;
background: #fff; color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line-2);
opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.gnb-sub a { display: block; padding: 10px 14px; border-radius: 10px; font-size: .95rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.gnb-sub a:hover, .gnb-sub a:focus-visible { background: var(--ivory); color: var(--ink); }
.gnb li.is-open > .gnb-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 메가메뉴 (사업영역) */
.mega {
position: absolute; left: 0; right: 0; top: 100%; z-index: -1;
background: #fff; color: var(--ink); border-top: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(11, 27, 51, .28);
opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.site-header.is-mega .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding-block: 36px 40px; }
.mega-intro .eyebrow { margin-bottom: 14px; }
.mega-intro p { font-size: 1.35rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; margin-bottom: 18px; }
.mega-intro .link-arrow { font-size: .95rem; }
.mega-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.mega-item { display: grid; gap: 10px; padding: 10px; border-radius: 16px; transition: background-color .25s var(--ease); }
.mega-item:hover, .mega-item:focus-visible { background: var(--ivory); }
.mega-thumb { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ivory-2); }
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mega-item:hover .mega-thumb img { transform: scale(1.06); }
.mega-area { font-weight: 700; font-size: .96rem; letter-spacing: -.035em; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; } /* 6차: 분야 이름이 길어져(미디어 & 콘텐츠) 한 줄 유지 */
.mega-area .num { font-family: var(--font-en); font-size: .72rem; color: var(--blue); font-weight: 600; }
.mega-brand { font-family: var(--font-en); font-size: .7rem; letter-spacing: .04em; color: var(--muted); font-weight: 500; margin-top: -6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-desc { font-size: .82rem; line-height: 1.5; color: var(--muted); }
.mega-item[aria-current="page"] { background: var(--ivory); }
.mega-item[aria-current="page"] .mega-area { color: var(--blue); }
.hd-util { display: flex; align-items: center; gap: 12px; flex: none; }
.hd-util .btn--sm[data-nav-cta] { min-height: 46px; padding: 0 22px; font-size: clamp(.95rem, .6rem + .4vw, 1.05rem); font-weight: 700; letter-spacing: -0.02em; }
.hd-menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; color: inherit; }
.hd-menu-btn span, .hd-menu-btn span::before, .hd-menu-btn span::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s var(--ease), background-color .2s; }
.hd-menu-btn span::before, .hd-menu-btn span::after { content: ""; position: absolute; left: 0; }
.hd-menu-btn span::before { top: -7px; }
.hd-menu-btn span::after { top: 7px; }
.hd-menu-btn[aria-expanded="true"] span { background: transparent; }
.hd-menu-btn[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.hd-menu-btn[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
/* 1181–1365px 노트북: 왼쪽 소개 칸과 칸 간격을 줄여 브랜드 영문명이 잘리지 않게 */
@media (min-width: 1181px) and (max-width: 1365px) {
.mega-inner { grid-template-columns: 196px 1fr; gap: 28px; }
.mega-intro p { font-size: 1.2rem; }
.mega-grid { gap: 8px; }
.mega-item { padding: 8px; }
.mega-brand { font-size: .66rem; letter-spacing: .02em; }
.mega-area { font-size: .9rem; letter-spacing: -.04em; gap: 4px; }
}
@media (max-width: 1180px) {
.mega-inner { grid-template-columns: 1fr; gap: 20px; }
.mega-intro p { margin-bottom: 8px; }
.mega-area { font-size: .9rem; letter-spacing: -.04em; gap: 4px; }
}
@media (max-width: 1024px) {
.gnb, .mega { display: none; }
.hd-menu-btn { display: grid; }
.hd-util { margin-left: auto; }
.hd-logo svg { height: 32px; }
}
@media (max-width: 420px) {
.hd-util .btn--sm[data-nav-cta] { min-height: 42px; padding: 0 14px; font-size: .95rem; }
.hd-logo svg { height: 28px; }
}
/* 모바일 메뉴 (≤1024px · 햄버거로 여는 전체 화면 메뉴)
위: 대메뉴 6개 — 번호 · 이름 · 화살표, 누르면 바로 이동 (하위 항목은 각 페이지의 탭에서)
가운데: 사업영역 바로가기 — 일곱 사업 + '전체 보기' 타일 (2열, 600px 이상 4열)
아래: 문의하기 · 그룹 영상 보기 (한 줄)
지금 페이지: aria-current="page" / 지금 속한 대분류: .is-current (site.js) — 둘 다 블루
열릴 때: 각 줄이 --i 순번대로 살짝 올라오며 나타나고 대메뉴 구분선이 왼쪽부터 그어집니다. html.motion-off 면 바로 보임 */
.mnav {
position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: #fff; color: var(--ink);
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav-inner { max-width: 760px; margin-inline: auto; padding: 4px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); }
/* 대메뉴 */
.mnav-main > li { position: relative; }
.mnav-main > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); transform-origin: left center; }
.mnav-link {
display: flex; align-items: baseline; gap: 14px; padding: 17px 2px 16px;
color: var(--ink); -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease);
}
.mnav-num { flex: none; width: 1.6rem; font-family: var(--font-en); font-size: .74rem; font-weight: 500; letter-spacing: .06em; color: var(--muted-2); transition: color .25s var(--ease); }
.mnav-t { flex: 1; min-width: 0; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.05rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.045em; transition: transform .45s var(--ease); }
.mnav-link .ico { flex: none; align-self: center; width: 22px; height: 22px; color: var(--muted-2); transition: transform .45s var(--ease), color .25s var(--ease); }
.mnav-link:hover .mnav-t, .mnav-link:focus-visible .mnav-t { transform: translateX(4px); }
.mnav-link:hover .ico, .mnav-link:focus-visible .ico { color: var(--ink); transform: translateX(4px); }
.mnav-link:active { color: var(--blue); }
.mnav-link:is([aria-current="page"], .is-current), .mnav-link:is([aria-current="page"], .is-current) :is(.mnav-num, .ico) { color: var(--blue); }
/* 사업영역 바로가기 */
.mnav-biz { margin-top: 30px; }
.mnav-biz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mnav-biz-t { font-size: .92rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.mnav-biz-en { font-family: var(--font-en); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.mnav-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mnav-tiles > li { display: grid; }
.mnav-tile {
display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 10px; align-items: center;
min-height: 62px; padding: 11px 12px 11px 11px; border-radius: 14px; background: var(--ivory); border: 1px solid transparent;
-webkit-tap-highlight-color: transparent; transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.mnav-tile-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(11, 27, 51, .06), 0 0 0 1px rgba(11, 27, 51, .04); transition: background-color .25s var(--ease), color .25s var(--ease); }
.mnav-tile-ico svg { width: 18px; height: 18px; }
.mnav-tile-t { align-self: end; font-size: .9rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.mnav-tile-en { align-self: start; margin-top: 1px; font-family: var(--font-en); font-size: .6rem; font-weight: 600; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnav-tile:hover, .mnav-tile:active { background: var(--ivory-2); }
.mnav-tile[aria-current="page"] { background: var(--blue-50); border-color: var(--blue-100); }
.mnav-tile[aria-current="page"] .mnav-tile-t { color: var(--blue); }
.mnav-tile[aria-current="page"] .mnav-tile-ico { background: var(--blue); color: #fff; }
/* 여덟째 칸: 사업영역 전체 보기 */
.mnav-tile--all { background: transparent; border-color: var(--line); }
.mnav-tile--all .mnav-tile-ico { background: var(--ink); color: #fff; box-shadow: none; }
.mnav-tile--all .mnav-tile-ico svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.mnav-tile--all:hover, .mnav-tile--all:active { background: var(--ivory); }
.mnav-tile--all:hover .mnav-tile-ico svg { transform: translateX(2px); }
.mnav-tile--all[aria-current="page"] { background: transparent; border-color: var(--blue-100); }
.mnav-tile--all[aria-current="page"] .mnav-tile-ico { background: var(--blue); }
/* 문의 · 그룹 영상 */
.mnav-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.mnav-cta .btn { min-height: 50px; padding: 0 12px; gap: 8px; font-size: .95rem; }
.mnav-cta .btn .ico { width: 16px; height: 16px; }
.mnav-cta .btn--line .ico { width: 13px; height: 13px; color: var(--blue); }
/* 열릴 때 등장 (닫을 때는 메뉴 전체가 바로 흐려지므로 지연 없이) */
.mnav :is(.mnav-main > li, .mnav-biz-head, .mnav-tiles > li, .mnav-cta) { opacity: 0; transform: translateY(14px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mnav.is-open :is(.mnav-main > li, .mnav-biz-head, .mnav-tiles > li, .mnav-cta) { opacity: 1; transform: none; transition: opacity .55s var(--ease) calc(var(--i, 0) * 45ms + 40ms), transform .7s var(--ease) calc(var(--i, 0) * 45ms + 40ms); }
.mnav .mnav-main > li::after { transform: scaleX(0); transition: transform .2s var(--ease); }
.mnav.is-open .mnav-main > li::after { transform: none; transition: transform .9s var(--ease) calc(var(--i, 0) * 45ms + 120ms); }
html.motion-off .mnav :is(.mnav-main > li, .mnav-biz-head, .mnav-tiles > li, .mnav-cta), html.motion-off .mnav .mnav-main > li::after { opacity: 1; transform: none; transition: none; }
/* 600px 이상: 타일 4열(두 줄) · 대메뉴 조금 더 넉넉히 */
@media (min-width: 600px) {
.mnav-inner { padding-top: 16px; }
.mnav-link { padding-block: 20px 19px; gap: 18px; }
.mnav-num { width: 1.8rem; font-size: .8rem; }
.mnav-link .ico { width: 26px; height: 26px; }
.mnav-biz { margin-top: 40px; }
.mnav-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mnav-tile { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0; align-items: start; min-height: 0; padding: 14px; }
.mnav-tile-ico { grid-row: auto; margin-bottom: 14px; }
}
/* 900px 이상(태블릿 가로): 왼쪽 대메뉴 · 오른쪽 사업영역 바로가기와 버튼 */
@media (min-width: 900px) {
.mnav-inner { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 72px); align-items: start; padding-top: 20px; }
.mnav-main { grid-row: 1 / 3; }
.mnav-biz { margin-top: 20px; }
.mnav-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mnav-tile { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; padding: 12px; }
.mnav-tile-ico { grid-row: 1 / 3; margin-bottom: 0; }
}
/* 359px 이하(작은 폰): 칸이 좁아 이름이 넘치지 않도록 아이콘을 위로 올림 */
@media (max-width: 359px) {
.mnav-tile { grid-template-columns: 1fr; grid-template-rows: auto; align-items: start; padding: 12px; }
.mnav-tile-ico { grid-row: auto; width: 30px; height: 30px; margin-bottom: 10px; }
.mnav-cta .btn { padding: 0 8px; font-size: .9rem; }
}
html.is-locked, html.is-locked body { overflow: hidden; }
/* ---------- 7. 서브페이지 공통 히어로 ---------- */
.page-hero { position: relative; padding: clamp(72px, 9vw, 132px) 0 clamp(48px, 6vw, 88px); background: var(--ivory); overflow: hidden; }
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero .h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 24px; max-width: 46ch; }
.page-hero--navy { background: var(--navy); color: #fff; }
.page-hero--navy .lead { color: var(--on-dark-2); }
.page-hero--navy .eyebrow { color: var(--blue-300); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--muted); margin-bottom: 28px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--muted-2); }
.page-hero--navy .breadcrumb { color: var(--on-dark-3); }
.page-hero--navy .breadcrumb a:hover { color: #fff; }
/* 페이지 안 탭 (앵커 내비) */
.subnav { position: sticky; top: var(--header-h); z-index: 50; transition: top .45s var(--ease); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.subnav ul { display: flex; justify-content: safe center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
/* 가로로 넘치면 끝을 흐리게 해서 더 넘길 수 있음을 알립니다 (site.js 가 is-scrollable / is-start / is-end 부여) */
.subnav :is(ul, ol).is-scrollable { --fade-l: 28px; --fade-r: 44px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.subnav :is(ul, ol).is-scrollable.is-start { --fade-l: 0px; }
.subnav :is(ul, ol).is-scrollable.is-end { --fade-r: 0px; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--muted); white-space: nowrap; transition: all .2s var(--ease); }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active, .subnav a[aria-current="true"] { background: var(--ink); color: #fff; }
/* 헤더가 숨으면 서브 내비가 맨 위로 붙습니다 · 서브 내비가 있는 페이지는 앵커 이동 시 그 높이만큼 더 띄웁니다 */
.site-header.is-hidden ~ main .subnav { top: 0; }
body:has(.subnav) :where(section, [id]) { scroll-margin-top: calc(var(--header-h) + 80px); }
/* ---------- 8. CTA 띠 (모든 페이지 하단 공통) ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding-block: clamp(80px, 10vw, 140px); isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: center 55% / cover no-repeat; opacity: .3; filter: saturate(.75); }
/* 배경 사진(함께 일하는 공유오피스)은 띠가 가까워질 때만 불러옵니다 (site.js 가 .is-near 부여 — 장식이라 JS가 없으면 생략)
옛 마을 일러스트는 간판에 예전 사업 이름이 남아 있어 쓰지 않습니다 */
.cta-band.is-near::before { background-image: url(../img/photo/cowork.webp); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 120% at 85% 0%, rgba(10, 93, 226, .55), transparent 60%), linear-gradient(180deg, rgba(10, 20, 38, .65), rgba(10, 20, 38, .92)); }
.cta-band .h2 { max-width: 20ch; }
.cta-band .lead { color: var(--on-dark-2); margin-top: 20px; max-width: 44ch; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.cta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.cta-chips a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark-2); font-weight: 500; font-size: .92rem; transition: all .2s var(--ease); }
.cta-chips a:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
/* ---------- 9. 푸터 ---------- */
/* 구조: 브랜드(+맨 위로) → 메인 카테고리 6개 한 줄 → 그룹 법인 줄 → 정책·SNS·패밀리 사이트 → 회사 정보 */
/* 아래 여백: 왼쪽 아래 '움직임 멈추기' 버튼(높이 32–36px, 바닥에서 12–16px)이 맨 끝 저작권 줄을 가리지 않게 넉넉히 */
.site-footer { background: #060D1A; color: var(--on-dark-2); padding: clamp(64px, 7vw, 104px) 0 calc(76px + env(safe-area-inset-bottom, 0px)); font-size: .92rem; }
.ft-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 48px; padding-bottom: clamp(40px, 4.6vw, 64px); }
.ft-brand svg { height: 38px; width: auto; color: #fff; }
.ft-brand :is(.lg-sym, .lg-dot) { fill: #fff; }
.ft-brand p { margin-top: 12px; color: var(--on-dark-3); line-height: 1.7; }
.ft-brand .ft-slogan { margin-top: 26px; color: #fff; font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.375rem); line-height: 1.4; letter-spacing: -0.03em; }
/* 맨 위로 */
.ft-totop { display: inline-flex; align-items: center; gap: 14px; flex: none; min-height: 48px; color: var(--on-dark-2); transition: color .3s var(--ease); }
.ft-totop-t { font-size: .78rem; font-weight: 600; letter-spacing: .24em; }
.ft-totop-ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-dark); transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); }
.ft-totop-ring .ico { width: 18px; height: 18px; transform: rotate(-90deg); transition: transform .45s var(--ease); }
.ft-totop:hover { color: #fff; }
.ft-totop:hover .ft-totop-ring { background: #fff; border-color: #fff; color: var(--ink); }
.ft-totop:hover .ft-totop-ring .ico { transform: rotate(-90deg) translateX(3px); }
/* 메인 카테고리 (한 줄) */
.ft-nav ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.ft-nav li + li { border-left: 1px solid var(--line-dark); }
.ft-nav a { position: relative; display: grid; justify-items: start; gap: 16px; height: 100%; padding: 30px clamp(16px, 1.8vw, 28px) 34px; color: #fff; }
.ft-nav li:first-child a { padding-left: 0; }
.ft-nav-num { font-family: var(--font-en); font-size: .78rem; font-weight: 500; letter-spacing: .1em; color: var(--on-dark-3); transition: color .35s var(--ease); }
.ft-nav-t { position: relative; padding-bottom: 6px; font-size: clamp(1.15rem, 1.75vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.035em; white-space: nowrap; }
/* 밑줄: 올리면 왼쪽에서 그려지고, 떠나면 오른쪽으로 빠집니다 */
.ft-nav-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .55s var(--ease); }
.ft-nav .ico { position: absolute; top: 30px; right: clamp(16px, 1.8vw, 28px); width: 18px; height: 18px; color: var(--blue-300); opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.ft-nav a:hover .ft-nav-t::after, .ft-nav a:focus-visible .ft-nav-t::after, .ft-nav a.is-current .ft-nav-t::after { transform: scaleX(1); transform-origin: left center; }
.ft-nav a:hover .ico, .ft-nav a:focus-visible .ico { opacity: 1; transform: none; }
.ft-nav a:hover .ft-nav-num, .ft-nav a:focus-visible .ft-nav-num, .ft-nav a.is-current .ft-nav-num { color: var(--blue-300); }
.ft-nav a.is-current .ft-nav-t::after { background: var(--blue-300); }
/* 등장: 여섯 칸이 차례로 올라옵니다 (컨테이너는 그대로, 칸만 움직임) */
.js .ft-nav[data-reveal] { opacity: 1; transform: none; }
.js .ft-nav[data-reveal] li { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .ft-nav[data-reveal].is-in li { opacity: 1; transform: none; }
.js .ft-nav[data-reveal] li:nth-child(2) { transition-delay: .06s; }
.js .ft-nav[data-reveal] li:nth-child(3) { transition-delay: .12s; }
.js .ft-nav[data-reveal] li:nth-child(4) { transition-delay: .18s; }
.js .ft-nav[data-reveal] li:nth-child(5) { transition-delay: .24s; }
.js .ft-nav[data-reveal] li:nth-child(6) { transition-delay: .3s; }
/* 그룹 법인 줄 */
/* 점 구분자: 모든 항목 앞에 점을 두고, 목록을 점 폭(35px)만큼 왼쪽으로 당겨 잘라 냅니다
→ 줄이 바뀌어도 줄 첫머리에 점이 남지 않습니다 (위·아래·오른쪽은 포커스 링이 보이도록 넉넉히) */
/* 정책 · SNS · 패밀리 사이트 */
.ft-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 28px; }
.ft-policy { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ft-policy a { color: var(--on-dark-2); transition: color .2s; }
.ft-policy a:hover { color: #fff; }
.ft-policy .is-strong { color: #fff; font-weight: 700; }
.ft-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ft-sns { display: flex; gap: 8px; }
.ft-sns a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--on-dark-2); transition: color .2s, border-color .2s; }
.ft-sns a:hover { color: #fff; border-color: #fff; }
.ft-sns svg { width: 18px; height: 18px; }
.family { position: relative; }
.family-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 210px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-dark); color: #fff; font-weight: 600; font-size: .9rem; transition: border-color .2s; }
.family-btn:hover { border-color: rgba(255, 255, 255, .4); }
.family-btn .ico { width: 16px; height: 16px; transition: transform .3s; }
.family-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.family-list { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2; min-width: 320px; max-width: calc(100vw - 32px); padding: 8px; border-radius: 14px; background: var(--navy-2); border: 1px solid var(--line-dark); box-shadow: var(--shadow-lg); }
.family-list[hidden] { display: none; }
.family-list a, .family-list span { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--on-dark-2); }
.family-list a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.family-list small { color: var(--on-dark-3); font-size: .75rem; white-space: nowrap; }
/* 회사 정보 */
.ft-info { display: grid; gap: 8px; color: var(--on-dark-3); font-size: .875rem; line-height: 1.6; letter-spacing: -0.01em; }
.ft-info-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.ft-info-row li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ft-info-row li + li::before { content: ""; flex: none; width: 1px; height: 11px; margin: 0 14px; background: var(--line-dark); }
@media (max-width: 760px) {
.ft-info { font-size: .82rem; }
.ft-info { gap: 12px; }
.ft-info-row { display: grid; gap: 2px; }
.ft-info-row li + li::before { display: none; }
.ft-info-row li { white-space: normal; }
}
.ft-info a { color: var(--on-dark-2); text-decoration: underline; text-decoration-color: var(--line-dark); text-underline-offset: 3px; }
.ft-info a:hover { color: #fff; text-decoration-color: currentColor; }
.ft-info .sep { display: inline-block; width: 1px; height: 10px; background: var(--line-dark); margin: 0 10px; vertical-align: middle; }
.ft-copy { margin-top: 18px; font-family: var(--font-en); font-size: .8rem; letter-spacing: .02em; color: var(--on-dark-3); }
/* 태블릿: 3열 · 각 칸 위에 선 */
@media (max-width: 1024px) {
.ft-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 0; }
.ft-nav li { border-top: 1px solid var(--line-dark); }
.ft-nav li + li { border-left: 0; }
.ft-nav a, .ft-nav li:first-child a { padding: 24px 28px 26px 0; gap: 12px; }
.ft-nav .ico { top: 24px; right: 0; }
.ft-nav-t { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
}
/* 터치 화면: 화살표를 늘 흐리게 보여 링크임을 알리고, 작은 글자 링크도 누르는 영역은 44px 이상 */
@media (hover: none) {
.ft-nav .ico { opacity: .5; transform: none; }
}
@media (max-width: 1024px) {
.ft-policy { row-gap: 0; }
.ft-policy a { display: inline-block; padding-block: 10px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; padding-inline: 10px; margin-inline: -10px; }
.link-arrow { min-height: 44px; }
}
/* 모바일: 2열 */
@media (max-width: 560px) {
.ft-head { gap: 20px; }
.ft-totop-t { display: none; }
.ft-totop-ring { width: 48px; height: 48px; }
.ft-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.ft-nav a, .ft-nav li:first-child a { padding: 18px 24px 20px 0; gap: 8px; }
.ft-nav .ico { top: 19px; width: 16px; height: 16px; }
.ft-nav-num { font-size: .72rem; }
.ft-nav-t { font-size: 1.2rem; padding-bottom: 4px; }
.ft-mid { flex-direction: column; align-items: flex-start; }
.family-list { left: 0; right: auto; }
}
/* 모바일(≤560px): 지주회사 줄은 한 줄 전체를 쓰고(이름·배지가 끊기지 않게), 나머지 일곱은 아래 2열 */
@media (max-width: 560px) {
}
/* ---------- 10. 영상 모달 ---------- */
.film-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); background: rgba(3, 8, 18, .92); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.film-modal.is-open { opacity: 1; visibility: visible; }
.film-box { position: relative; width: min(1280px, 100%); }
.film-box video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; }
.film-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: #fff; }
.film-head strong { font-size: 1.05rem; letter-spacing: -0.02em; }
.film-head span { font-family: var(--font-en); color: var(--on-dark-3); font-size: .8rem; letter-spacing: .14em; margin-left: 10px; }
.film-close { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; transition: background .2s; flex: none; }
.film-close:hover { background: rgba(255, 255, 255, .2); }
.film-close svg { width: 20px; height: 20px; }
.film-note { margin-top: 12px; color: var(--on-dark-3); font-size: .82rem; }
video::cue { font-family: var(--font-ko); background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.05rem; line-height: 1.5; }
/* ---------- 11. 스크롤 모션 ---------- */
/* data-reveal: 화면에 들어오면 .is-in 이 붙습니다. 지연: style="--d:.1s" */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* 키보드 포커스가 들어오면 등장 전이라도 바로 보이게 (site.js 의 focusin 처리와 함께) */
.js [data-reveal]:focus-within, .js [data-reveal]:focus-visible { opacity: 1; transform: none; transition-delay: 0s; transition-duration: .25s; }
/* 줄 단위 마스크 등장: 텍스트 */
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line > span { display: inline-block; }
.js [data-lines] .line > span { transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * .09s + var(--d, 0s)); }
.js [data-lines].is-in .line > span { transform: none; }
/* 움직임 멈추기 — OS 설정이 아니라 사용자가 '움직임 멈추기' 버튼으로 고른 경우(html.motion-off)에만 적용 */
html.motion-off { scroll-behavior: auto; }
html.motion-off [data-reveal], html.motion-off .ft-nav[data-reveal] li, html.motion-off [data-lines] .line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
/* 움직임 멈추기 버튼 */
.motion-toggle {
position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
display: inline-flex; align-items: center; gap: 0; min-height: 36px; padding: 0 9px; border-radius: 999px;
background: rgba(10, 20, 38, .72); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: -0.01em;
border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); opacity: .82; transition: opacity .2s, background-color .2s;
}
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; background: rgba(10, 20, 38, .9); }
/* 평소엔 작은 원(아이콘만) → 마우스를 올리거나 키보드로 오면 글자가 펼쳐짐. 화면 내용을 가리지 않도록 */
.motion-toggle .mt-txt { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease), margin .35s var(--ease); }
/* 마우스가 있는 기기에서만 hover 로 펼침 — 터치 기기는 탭 후 펼친 채로 남지 않게 */
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover .mt-txt { max-width: 7.5em; margin: 0 5px 0 8px; } }
.motion-toggle:focus-visible .mt-txt { max-width: 7.5em; margin: 0 5px 0 8px; }
.motion-toggle .mt-ico { position: relative; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.motion-toggle .mt-ico::before, .motion-toggle .mt-ico::after { content: ""; position: absolute; top: 4px; width: 2px; height: 8px; border-radius: 1px; background: #fff; }
.motion-toggle .mt-ico::before { left: 5px; } .motion-toggle .mt-ico::after { left: 9px; }
.motion-toggle[aria-pressed="true"] .mt-ico::before { left: 6px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #fff; background: none; }
.motion-toggle[aria-pressed="true"] .mt-ico::after { display: none; }
@media (max-width: 760px) {
.motion-toggle { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 32px; padding: 0 7px; font-size: .72rem; opacity: .7; }
}
/* ---------- 12. 폼 기본 ---------- */
.field { display: grid; gap: 8px; }
.field label, .field .label { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--blue); margin-left: 2px; }
.input, .select, .textarea { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s; }
.textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: #D93A3A; }
.field-error { color: #C62F2F; font-size: .85rem; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); flex: none; }
/* ---------- 13. 유틸 ---------- */
.grid { display: grid; gap: 24px; }
.flow > * + * { margin-top: 1em; }
.hide-mobile { }
@media (max-width: 760px) { .hide-mobile { display: none !important; } }
.show-mobile { display: none !important; }
@media (max-width: 760px) { .show-mobile { display: revert !important; } }
/* ---------- 14. 토스트 ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 400; transform: translate(-50%, 16px); padding: 14px 20px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .92rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); max-width: calc(100vw - 32px); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* 모바일 토스트는 화면 폭을 거의 다 쓰므로 왼쪽 아래 '움직임 멈추기' 버튼 위로 띄워 겹치지 않게 */
@media (max-width: 760px) { .toast { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } }
/* =========================================================
15. 리더 프로필 카드 공통 (.pcard) — 메인 #leaders · leadership.html · 사업 상세 '담당 대표' · about 에서 함께 씀
생김새: 흰 사진 칸(3:4, 순백) + 인물 뒤에 크게·옅게 깔린 두고 'd' 심볼 + 배경 없는 상반신 사진(머리 위 약 8% ~ 배꼽)
→ 이름(굵게) + 대표 · 영문 회사명(블루) · 분야(회색) · 얇은 구분선 · '자세히 보기 →'
사진이 없는 대표: 같은 칸 + 같은 구도의 중립 실루엣(.pcard-sil) + '사진 준비 중'(.pcard-soon) — 머리 높이가 사진과 같음
(페이지는 배치만 맡고, 생김새는 여기 한 곳에서만 정의합니다)
← 흰 배경 섹션: 기본(사진 칸 + 본문, 테두리 없음)
← 아이보리 등 색 배경: 흰 패널(테두리 · 본문 여백)
← 카드 하나를 가로로(왼쪽 사진 · 오른쪽 본문, 560px 이하 세로)
문원오 대표
DOOGO HOLDINGS
교육 · 총괄 운영
· .pcard-stretch: 그 링크가 카드 전체를 덮음(카드 어디를 눌러도 이동 · 포커스 링은 카드 둘레). 카드 안 다른 링크·버튼은 그 위로 올라옵니다.
· 등장 모션: 카드 묶음에 class="pcards" + data-reveal (각 카드나 감싼 li 에 style="--i:0…5" → 왼쪽부터 0.08초 간격)
또는 카드 하나에 data-reveal (+ style="--d:.08s" 지연). 인물·실루엣은 아래에서 살짝 올라오며 선명해집니다.
html.motion-off 면 처음부터 정지 상태로 다 보입니다. (OS '움직임 줄이기' 설정과 관계없이 재생 · BRIEF3)
· 칸 크기를 바꿔도(작은 칸 · 세로로 긴 칸) 심볼 · 사진 · 실루엣은 칸에 맞춰 같은 비율로 따라갑니다.
========================================================= */
.pcard {
--pc-r: 16px; /* 모서리 */
--pc-mark: .09; /* 심볼 불투명도 (호버 · 포커스 때 진해짐) */
--pc-lift: 8px; /* 인물이 위로 뜰 때 칸 아래가 비지 않도록 아래로 더 그려 두는 여유 */
position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%;
border-radius: var(--pc-r); background: #fff; color: var(--ink);
transition: box-shadow .5s var(--ease);
}
.pcard:hover, .pcard:focus-within { --pc-mark: .14; box-shadow: 0 26px 48px -34px rgba(11, 27, 51, .32); }
/* 사진 칸: 순백 · 아래쪽에만 얇은 선 · 심볼은 인물 뒤(z-index -1) */
.pcard-ph {
position: relative; isolation: isolate; overflow: hidden; flex: none; aspect-ratio: 3 / 4;
background: #fff; border-bottom: 1px solid var(--line-2); border-radius: var(--pc-r, 16px) var(--pc-r, 16px) 0 0;
}
.pcard-ph::before {
content: ""; position: absolute; z-index: -1; left: 50%; top: 9%; width: 90%; aspect-ratio: 85.3 / 88.7; translate: -50% 0;
background: var(--blue); opacity: var(--pc-mark, .09); pointer-events: none;
-webkit-mask: url("../img/logo/doogo-mark-d.svg") center / contain no-repeat; mask: url("../img/logo/doogo-mark-d.svg") center / contain no-repeat;
transition: opacity .5s var(--ease), scale 1.1s var(--ease);
}
/* 인물 사진(900×1200 · 투명 배경)과 실루엣: 칸을 꽉 채우고 아래 정렬 */
.pcard-img, .pcard-sil {
position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--pc-lift, 8px)); max-width: none;
transform-origin: 50% 100%; transition: transform .7s var(--ease);
}
.pcard-img { object-fit: cover; object-position: 50% 100%; }
.pcard-sil {
display: block; background: linear-gradient(180deg, #E9EDF3 0%, #EDF0F5 50%, #F4F6F9 100%);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1200'%3E%3Cpath d='M450 95C541 95 604 152 604 238C604 330 579 398 534 438L534 508C548 540 640 560 735 590C800 612 828 660 836 740L846 1200L54 1200L64 740C72 660 100 612 165 590C260 560 352 540 366 508L366 438C321 398 296 330 296 238C296 152 359 95 450 95Z'/%3E%3C/svg%3E") 50% 100% / cover no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1200'%3E%3Cpath d='M450 95C541 95 604 152 604 238C604 330 579 398 534 438L534 508C548 540 640 560 735 590C800 612 828 660 836 740L846 1200L54 1200L64 740C72 660 100 612 165 590C260 560 352 540 366 508L366 438C321 398 296 330 296 238C296 152 359 95 450 95Z'/%3E%3C/svg%3E") 50% 100% / cover no-repeat;
}
.pcard:hover :is(.pcard-img, .pcard-sil), .pcard:focus-within :is(.pcard-img, .pcard-sil) { transform: translateY(-4px) scale(1.03); }
/* 호버 · 포커스: 사진 칸 아래 선이 왼쪽부터 블루로 그어짐 */
.pcard-ph::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); pointer-events: none; }
.pcard:hover .pcard-ph::after, .pcard:focus-within .pcard-ph::after { transform: none; }
.pcard-soon {
position: absolute; z-index: 1; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(11, 27, 51, .08); box-shadow: 0 6px 14px -10px rgba(11, 27, 51, .4);
color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
}
.pcard-soon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-300); }
/* 본문: 이름 → 영문 회사명 → 분야 → 구분선 → 링크 (카드 높이는 줄 안에서 모두 같게 · 링크는 맨 아래) */
.pcard-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 18px 0 4px; }
.pcard-name { font-size: clamp(1.18rem, 1.08rem + .3vw, 1.34rem); font-weight: 800; line-height: 1.25; letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.pcard-name small { margin-left: 3px; font-size: .64em; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.pcard-co { margin-top: 6px; font-family: var(--font-en); font-size: .74rem; font-weight: 600; line-height: 1.3; letter-spacing: .12em; color: var(--blue); white-space: nowrap; }
.pcard-field { margin-top: 3px; font-size: .86rem; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }
.pcard-foot { width: 100%; margin-top: auto; }
.pcard-foot::before { content: ""; display: block; height: 1px; margin: 16px 0 6px; background: var(--line-2); }
.pcard-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: .86rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); transition: color .25s var(--ease); }
.pcard-link .ico { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.pcard-link:hover, .pcard:hover .pcard-stretch { color: var(--blue); }
.pcard-link:hover .ico, .pcard:hover .pcard-stretch .ico { transform: translateX(3px); }
/* 카드 전체를 덮는 링크: 포커스 링은 카드 둘레에 */
.pcard-stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--pc-r, 16px); }
.pcard-body :is(a, button):not(.pcard-stretch) { position: relative; z-index: 3; }
@supports selector(:has(*)) {
.pcard-stretch:focus-visible { outline: none; }
.pcard:has(.pcard-stretch:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }
}
/* 색 배경 위: 흰 패널 */
.pcard--panel { overflow: hidden; border: 1px solid var(--line-2); }
.pcard--panel .pcard-body { padding: 20px 22px 14px; }
/* 가로형(카드 하나 · 사업 상세 '담당 대표' 같은 자리): 왼쪽 사진 칸(기본 폭 38% · --pc-ph-w 로 조절) + 오른쪽 본문. 560px 이하는 세로로 */
.pcard--row { flex-direction: row; align-items: flex-start; }
.pcard--row .pcard-ph { flex: 0 0 var(--pc-ph-w, 38%); border-bottom: 0; border-right: 1px solid var(--line-2); border-radius: var(--pc-r, 16px) 0 0 var(--pc-r, 16px); }
.pcard--row .pcard-ph::after { top: 0; bottom: 0; left: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: center top; }
.pcard--row:is(:hover, :focus-within) .pcard-ph::after { transform: none; }
.pcard--row .pcard-body { align-self: stretch; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px) 16px; }
@media (max-width: 560px) {
.pcard--row { flex-direction: column; align-items: stretch; }
.pcard--row .pcard-ph { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--line-2); border-radius: var(--pc-r, 16px) var(--pc-r, 16px) 0 0; }
.pcard--row .pcard-ph::after { top: auto; left: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left center; }
.pcard--row .pcard-body { padding: 20px 20px 14px; }
}
/* 등장: 카드가 왼쪽부터 차례로 올라오고(0.08초 간격) → 심볼이 번지고 → 인물이 아래에서 올라오며 선명해짐 */
.js .pcards[data-reveal] { opacity: 1; transform: none; }
.js .pcards[data-reveal] .pcard {
opacity: 0; transform: translateY(36px);
transition: opacity .8s var(--ease), transform 1s var(--ease), box-shadow .5s var(--ease);
transition-delay: calc(var(--i, 0) * .08s), calc(var(--i, 0) * .08s), 0s;
}
.js .pcards[data-reveal].is-in .pcard, .js .pcards[data-reveal]:focus-within .pcard { opacity: 1; transform: none; }
.js .pcard[data-reveal] { transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), box-shadow .5s var(--ease) 0s; }
.js :is(.pcards, .pcard)[data-reveal] :is(.pcard-img, .pcard-sil) {
opacity: 0; translate: 0 7%; filter: blur(6px);
transition: opacity .9s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease), transform .7s var(--ease);
transition-delay: calc(var(--i, 0) * .08s + var(--d, 0s) + .2s), calc(var(--i, 0) * .08s + var(--d, 0s) + .2s), calc(var(--i, 0) * .08s + var(--d, 0s) + .2s), 0s;
}
.js :is(.pcards, .pcard)[data-reveal] .pcard-ph::before { opacity: 0; scale: .9; transition-delay: calc(var(--i, 0) * .08s + var(--d, 0s) + .1s); }
.js :is(.pcards, .pcard)[data-reveal]:is(.is-in, :focus-within) :is(.pcard-img, .pcard-sil) { opacity: 1; translate: none; filter: none; }
.js :is(.pcards, .pcard)[data-reveal]:is(.is-in, :focus-within) .pcard-ph::before { opacity: var(--pc-mark, .09); scale: none; }
/* 호버로 진해지는 심볼은 바로 반응 (등장 지연 없이) */
.js :is(.pcards, .pcard)[data-reveal].is-in .pcard:is(:hover, :focus-within) .pcard-ph::before,
.js .pcard[data-reveal].is-in:is(:hover, :focus-within) .pcard-ph::before { transition-delay: 0s; }
/* 움직임 멈추기: 처음부터 정지 상태로 모두 보임 */
html.motion-off .pcards[data-reveal] .pcard { opacity: 1 !important; transform: none !important; }
html.motion-off .pcard :is(.pcard-img, .pcard-sil) { opacity: 1 !important; translate: none !important; filter: none !important; }
html.motion-off .pcard .pcard-ph::before { opacity: var(--pc-mark, .09) !important; scale: none !important; }
/* 법적 고지 팝업 (푸터 '개인정보처리방침'·'이메일무단수집거부' — site.js 가 본문을 불러와 띄움) */
.legal-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.legal-modal[hidden] { display: none; }
.legal-modal-dim { position: absolute; inset: 0; background: rgba(5, 12, 26, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.legal-modal-box { position: relative; display: flex; flex-direction: column; width: min(860px, 100%); max-height: min(86vh, 900px); border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); overflow: hidden; }
.legal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--line-2); }
.legal-modal-head h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }
.legal-modal-x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); }
.legal-modal-x svg { width: 20px; height: 20px; }
.legal-modal-body { overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 32px; font-size: .95rem; line-height: 1.75; color: var(--ink-2); }
.legal-modal-body h2, .legal-modal-body h3 { margin: 28px 0 10px; font-size: 1.08rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.legal-modal-body > :first-child h2, .legal-modal-body section:first-child h2 { margin-top: 0; }
.legal-modal-body p, .legal-modal-body ul, .legal-modal-body ol, .legal-modal-body dl, .legal-modal-body table { margin: 8px 0; }
.legal-modal-body ul { padding-left: 1.1em; list-style: disc; }
.legal-modal-body ol { padding-left: 1.2em; list-style: decimal; }
.legal-modal-body table { width: 100%; border-collapse: collapse; font-size: .88rem; display: block; overflow-x: auto; }
.legal-modal-body th, .legal-modal-body td { padding: 10px 12px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.legal-modal-body th { background: var(--ivory); color: var(--ink); font-weight: 700; white-space: nowrap; }
.legal-modal-body dl > div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.legal-modal-body dt { flex: none; min-width: 7em; font-weight: 700; color: var(--ink); }
.legal-modal-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-modal-body [data-reveal], .legal-modal-body [data-lines] .line > span { opacity: 1 !important; transform: none !important; }
.legal-modal-body svg { max-width: 24px; max-height: 24px; }
.legal-modal-foot { padding: 14px 28px; border-top: 1px solid var(--line-2); font-size: .85rem; }
.legal-modal-foot a { color: var(--blue); font-weight: 700; }
html.legal-open { overflow: hidden; }
@media (max-width: 760px) {
.legal-modal { padding: 0; align-items: end; }
.legal-modal-box { width: 100%; max-height: 92svh; border-radius: 20px 20px 0 0; }
.legal-modal-head { padding: 18px 20px; }
.legal-modal-body { padding: 18px 20px 28px; font-size: .92rem; }
.legal-modal-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.legal-modal-body :is(th, td) { min-width: 7.5em; }
.legal-modal-body :is(th, td) > * + * { margin-left: 4px; }
.legal-modal-body .pv-num { margin-right: 8px; color: var(--blue); }
/* 모바일 메뉴가 열려 있을 때는 헤더의 '문의하기' 버튼을 숨김(메뉴 안 06 행·아래 버튼과 중복 방지) */
@media (max-width: 1024px) { .site-header.is-menu .hd-util .btn[data-nav-cta] { visibility: hidden; opacity: 0; } }
/* ---------- 메가메뉴(사업영역) 크게 · 가독성 개선 (11차) ----------
소개 문구는 위쪽 한 줄로, 7개 사업 칸은 컨테이너 전체 폭을 써서 사진·글자를 키움 */
@media (min-width: 1025px) {
.mega-inner { grid-template-columns: 1fr; gap: 26px; padding-block: 34px 40px; }
.mega-intro { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.mega-intro .eyebrow, .mega-intro p { grid-column: 1; }
.mega-intro .link-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.mega-intro .eyebrow { margin-bottom: 10px; }
.mega-intro p { margin: 0; font-size: 1.5rem; }
.mega-intro p br { display: none; }
.mega-intro .link-arrow { font-size: 1rem; font-weight: 700; flex: none; }
.mega-grid { gap: 16px; }
.mega-item { gap: 12px; padding: 12px; border-radius: 18px; }
.mega-thumb { aspect-ratio: 4 / 3.1; border-radius: 14px; }
.mega-area { font-size: 1.08rem; gap: 6px; white-space: nowrap; letter-spacing: -.045em; }
.mega-area .num { font-size: .8rem; }
.mega-brand { font-size: .8rem; margin-top: -4px; letter-spacing: .03em; }
.mega-desc { font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
}
@media (min-width: 1025px) and (max-width: 1280px) {
.mega-grid { gap: 10px; }
.mega-item { padding: 8px; }
.mega-area { font-size: .94rem; letter-spacing: -.05em; gap: 4px; }
.mega-desc { font-size: .85rem; }
}
/* ---------- 메가메뉴 브랜드명 강조 (13차) ----------
'운영 법인' 줄을 없애고, 분야는 작은 칩 · 브랜드명(DOOGO AD, DOOGOFOOD …)은 굵은 영문 헤드라인으로 */
.mega-item { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-content: start; }
.mega-thumb { position: relative; }
.mega-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .06); pointer-events: none; }
.mega-area { justify-self: start; align-items: center; height: 26px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--ivory-2); color: var(--ink-2); font-size: .8rem !important; font-weight: 700; letter-spacing: -.03em !important; gap: 6px !important; }
.mega-area .num { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .66rem !important; font-weight: 700; letter-spacing: .02em; }
.mega-brand {
display: block; margin-top: 0; padding-bottom: 10px;
font-family: var(--font-en); font-weight: 800; font-size: clamp(.92rem, .05rem + 1.24vw, 1.32rem); line-height: 1.1; letter-spacing: -.03em; color: var(--blue);
white-space: nowrap; overflow: visible;
background: linear-gradient(90deg, #0A5DE2, #3B8BFF 60%, #9CC3FF) no-repeat 0 100% / 22px 3px; transition: background-size .5s var(--ease);
}
.mega-brand-t {
display: inline-block; max-width: 100%; vertical-align: top; overflow: hidden; text-overflow: ellipsis;
background: linear-gradient(90deg, #0A4FC4 0%, #2F7BFF 50%, var(--ink) 50%, var(--ink) 100%); background-size: 200% 100%; background-position: 0 0;
-webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .55s var(--ease);
}
/* 사진 오른쪽 위 둥근 화살표 (호버 시 등장) */
.mega-brand .ico {
position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; padding: 8px; border-radius: 50%;
background: #fff; color: var(--blue); box-shadow: 0 6px 18px -6px rgba(11, 27, 51, .35);
opacity: 0; transform: translate(-6px, 6px) scale(.85); transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.mega-item:hover .mega-brand, .mega-item:focus-visible .mega-brand, .mega-item[aria-current="page"] .mega-brand { background-size: 100% 3px; }
.mega-item:hover .mega-brand-t, .mega-item:focus-visible .mega-brand-t, .mega-item[aria-current="page"] .mega-brand-t { background-position: -100% 0; }
.mega-item:hover .mega-brand .ico, .mega-item:focus-visible .mega-brand .ico { opacity: 1; transform: none; }
.mega-item[aria-current="page"] .mega-area { color: var(--ink); }
.mega-item:hover .mega-area .num, .mega-item:focus-visible .mega-area .num, .mega-item[aria-current="page"] .mega-area .num { background: var(--blue); }
.mega-area .num { transition: background-color .3s var(--ease); }
@media (min-width: 1025px) { .mega-desc { margin-top: 2px; } }
@media (min-width: 1025px) and (max-width: 1280px) {
.mega-area { font-size: .74rem !important; padding: 0 8px 0 5px; }
.mega-brand .ico { top: 14px; right: 14px; width: 28px; height: 28px; padding: 7px; }
}
