@charset "utf-8"; /* ============================================================ ㈜명문이엔지 — 하이브리드 테마 다크는 헤더 · 메인 상단(히어로/지표/시뮬레이션/정책) · 푸터에만. 본문과 서브 페이지는 라이트(style.css 원본)를 유지한다. ============================================================ */ :root { --dk-deep: #0a1526; --dk-panel: #101e33; --dk-raise: #16283f; --dk-line: #223a57; --dk-line2: #182c46; --dk-hi: #f2f7fc; --dk-text: #c3d2e2; --dk-dim: #7c90a8; --glow: #7fb8e8; --glow-soft: rgba(127, 184, 232, .45); } /* ============================================================ 헤더 — 항상 다크 (영상 우상단 워드마크 스타일) ============================================================ */ .header { background: rgba(10, 21, 38, .88); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--dk-line2); } .brand { display: flex; align-items: center; gap: 13px; min-width: 0; } .brand__sym { height: 23px; width: auto; flex: none; } .brand__bar { width: 1px; height: 28px; background: rgba(255,255,255,.28); flex: none; } .brand__txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; } .brand__wm { height: 11px; width: auto; display: block; align-self: flex-start; opacity: .96; } .brand__tag { margin-top: 5px; font-size: 9px; font-weight: 600; letter-spacing: .28em; color: var(--dk-dim); white-space: nowrap; } .gnb__link { color: var(--dk-text); } .gnb__link:hover, .gnb__link[aria-current="page"] { color: var(--dk-hi); background: rgba(127, 184, 232, .1); } .gnb__link--accent { color: #4fd8c4; } .gnb__link--accent::after { background: linear-gradient(90deg, #1fa896, #4fd8c4); } .gnb__link--accent:hover, .gnb__link--accent[aria-current="page"] { color: #6fe8d6; background: rgba(31, 168, 150, .12); } .header__partner img { filter: brightness(0) invert(1); opacity: .85; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--dk-hi); } @media (max-width: 1023px) { .gnb { background: var(--dk-panel); border-bottom: 1px solid var(--dk-line); box-shadow: 0 20px 48px rgba(0, 0, 0, .55); } .gnb__link { border-bottom: 1px solid var(--dk-line2); color: var(--dk-text); } } @media (max-width: 620px) { .brand__sym { height: 19px; } .brand__bar { height: 22px; } .brand__wm { height: 9px; } .brand__tag { display: none; } } /* ============================================================ 섹션 라벨 — 라이트 기본, 다크 스코프에서 색만 교체 ============================================================ */ .slabel { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--navy-600); margin-bottom: 16px; } .slabel::before { content: attr(data-no); opacity: .5; letter-spacing: .08em; } .slabel small { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-500); text-transform: none; } .dkzone .slabel { color: var(--glow); } .dkzone .slabel small { color: var(--dk-dim); } /* ============================================================ 다크 존 공통 ============================================================ */ .dkzone { background: var(--dk-deep); color: var(--dk-text); } .dkzone .section-title { color: var(--dk-hi); } .dkzone .section-lead { color: var(--dk-dim); } .dkzone .glow { text-shadow: 0 0 24px var(--glow-soft), 0 0 60px rgba(127,184,232,.18); } .dkzone .btn--primary { background: var(--glow); color: #0a1526; } .dkzone .btn--primary:hover { background: #9cc8ef; box-shadow: 0 0 26px rgba(127,184,232,.35); } .dkzone .btn--ghost, .vhero .btn--ghost { background: transparent; border-color: var(--dk-line); color: var(--dk-hi); } .dkzone .btn--ghost:hover, .vhero .btn--ghost:hover { border-color: var(--glow); color: var(--glow); background: rgba(127,184,232,.06); } /* ============================================================ 00 히어로 ============================================================ */ .vhero { position: relative; overflow: hidden; min-height: clamp(560px, 86vh, 840px); display: flex; align-items: center; background: radial-gradient(1100px 520px at 78% -10%, rgba(37, 72, 128, .5), transparent 60%), radial-gradient(900px 460px at 12% 110%, rgba(23, 52, 96, .55), transparent 60%), var(--dk-deep); color: var(--dk-text); } #stars { position: absolute; inset: 0; width: 100%; height: 100%; } .vhero__grid { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(10, 21, 38, .2)), repeating-linear-gradient(90deg, rgba(127,184,232,.05) 0 1px, transparent 1px 90px), repeating-linear-gradient(0deg, rgba(127,184,232,.045) 0 1px, transparent 1px 64px); transform: perspective(620px) rotateX(58deg) scale(1.55); transform-origin: 50% 100%; mask-image: linear-gradient(transparent, #000 45%); -webkit-mask-image: linear-gradient(transparent, #000 45%); pointer-events: none; } .vhero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 5vw, 80px); align-items: center; width: 100%; } .vhero__kicker { font-size: 13px; font-weight: 700; letter-spacing: .3em; color: var(--glow); text-transform: uppercase; } .vhero__title { margin-top: 18px; font-size: clamp(38px, 5.4vw, 66px); font-weight: 800; line-height: 1.18; letter-spacing: -.035em; color: var(--dk-hi); text-shadow: 0 0 30px rgba(127,184,232,.35), 0 0 80px rgba(127,184,232,.14); } .vhero__title em { font-style: normal; color: var(--glow); } .vhero__text { margin-top: 22px; max-width: 34em; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.85; color: var(--dk-text); } .vhero__badge { margin-top: 26px; display: inline-flex; padding: 9px 22px; border: 1px solid rgba(127,184,232,.5); border-radius: 100px; font-size: 14px; font-weight: 700; letter-spacing: .38em; text-indent: .38em; color: var(--glow); box-shadow: 0 0 18px rgba(127,184,232,.14) inset, 0 0 18px rgba(127,184,232,.1); } .vhero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- 궤도 링 (재디자인) ---------- 구성: 은은한 풀 서클 2개 + 길이가 다른 호 3개 + 위성점 2개. 각 호는 반경·속도·방향이 달라 겹치며 리듬을 만든다. */ .orbit { position: relative; width: min(360px, 74vw); aspect-ratio: 1; margin-inline: auto; } .orbit__m { position: absolute; inset: 0; margin: auto; width: 47%; height: auto; filter: drop-shadow(0 0 30px rgba(127,184,232,.45)); } .orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .orbit g { transform-origin: 180px 180px; } .orbit__spin-a { animation: orbitSpin 26s linear infinite; } .orbit__spin-b { animation: orbitSpin 15s linear infinite reverse; } .orbit__spin-c { animation: orbitSpin 38s linear infinite; } @keyframes orbitSpin { to { transform: rotate(360deg); } } /* ============================================================ 01 CREDENTIALS (다크) — 등록·인증 링크 카드 4장 숫자 카운터를 걷어내고 인증현황 앵커로 가는 카드로 바꿨다(2026-09-08). 글로우는 소형 태그·화살표 호버에만(화면당 5% 이하). 카드 라운드 12px. ============================================================ */ .proof { border-top: 1px solid var(--dk-line2); background: var(--dk-panel); color: var(--dk-text); } .proof__inner { padding-block: 44px 48px; } .proof__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; } .proof__head .slabel { margin-bottom: 0; } .proof__since { font-size: 14px; color: var(--dk-dim); } /* ============================================================ 01 ROUTES (다크) — 상황별 갈림길 밴드 등록·인증 링크 카드 4장을 걷어내고 행 목록으로 바꿨다(2026-09-08). 상단 2px 규칙선은 .wlist(works.css:43) · .dtable 문법이고, 행 하단 1px 리듬은 .keylist(sub.css:210) 문법이다 — 홈에 처음 들어오는 형태다. 바로 아래 02 가 4열 막대이므로 4열 카드 격자를 반복하지 않는다. · 새 색 · 새 값을 만들지 않았다. 테두리 .18/.55, 틴트 .06(theme-dark.css:94 .dkzone .btn--ghost:hover) / .07(:248 .sim__callout) / .10(:42 .gnb__link:hover), 글자 4단(--dk-dim → --dk-text → --dk-hi → --glow) 전부 기존 사다리 값이다. · --glow 불투명 채움은 쓰지 않는다. 히어로 .btn--primary 와 모바일 .mcta__quote 가 이미 글로우 채움이라, 여기에 또 채우면 모바일 한 화면에 셋이 된다. · 기존 .proof / .proof__inner / .proof__head / .proof__since / .slabel / .secbg 는 그대로 재사용한다. 특히 클래스 .proof 를 떼지 말 것 — theme-dark.css:360 의 `.proof :focus-visible` 이 이 밴드의 포커스 링이고, :426~430 의 `.proof{position:relative;overflow:hidden}` · `.proof .secbg::after` · `.proof > .wrap{z-index:1}` 가 배경 사진 레이어를 세운다. · 반응형 전환점은 이 밴드의 기존 예외값 1023px / 600px 을 그대로 쓴다(620px 아님). theme-dark.css:397~398 주석이 그 예외의 근거를 적어 두었다. [구 01 에서 지울 범위 — 통째로 지우지 말 것] 지울 것은 카드 전용 규칙뿐이다. · theme-dark.css 185~208행: .proof__grid · .proof__card · .proof__card:hover · .proof__tag · .proof__name · .proof__meta · .proof__arrow · .proof__card:hover .proof__arrow · theme-dark.css 397~405행: 구 01 미디어쿼리 전체. 통째로 지워도 안전하다 — 403행 .proof__inner{padding-block:36px 40px} 는 아래 600px 블록이 대신 받고, .proof__grid 는 마크업에서 사라진다. 남길 것 — 174~184행(.proof · .proof__inner · .proof__head · .proof__head .slabel · .proof__since). 이 밴드가 그대로 쓰는 규칙이고, 아래 새 블록은 이 넷을 다시 정의하지 않는다(덮는 것은 .proof--routes .proof__inner 의 padding 뿐). 지우면 (1) .proof__head 가 flex 를 잃어 slabel 과 .proof__since 가 좌우 양끝 배치 대신 세로로 쌓이고, (2) .slabel 기본 margin-bottom:16px(theme-dark.css:74)이 되살아나 머리가 벌어지며, (3) .proof__since 가 14px/--dk-dim 에서 .dkzone 상속 본문 크기/--dk-text 로 커져 위계가 사라지고, (4) 히어로와 이 밴드를 가르던 상단 1px 헤어라인이 없어지고 바탕이 --dk-panel 에서 .dkzone 의 --dk-deep 으로 떨어진다. 삭제 전 .proof__card|__grid|__tag|__name|__meta|__arrow 가 다른 HTML 에 남아 있지 않은지 grep 으로 확인한다. 이 블록은 theme-dark.css 맨 끝에 덧붙인다. ============================================================ */ .proof--routes .proof__inner { padding-block: 36px 40px; } /* 얇은 1px 행 구분선이 배경 사진 위에서 죽지 않도록 오버레이만 한 단계 누른다(.88/.94 → .92/.96). 기존 .proof .secbg::after(theme-dark.css:427)와 명시도가 같으면 파일 순서에만 의존하므로, .proof 를 겹쳐 (0,3,1)로 올려 순서와 무관하게 이기게 한다. */ .proof.proof--routes .secbg::after { background: linear-gradient(180deg, rgba(16, 30, 51, .92) 0%, rgba(10, 21, 38, .96) 100%); } /* 물음 — index 의 다른 다섯 섹션은 모두 h2 를 갖는데 01 만 없었다. .section-title(28~42px)보다 한 단계 낮춰 밴드가 히어로·02 보다 커지지 않게 한다. */ .rt__q { margin-top: 16px; font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.02em; line-height: 1.4; color: var(--dk-hi); } /* 이 밴드의 형태를 만드는 것이 수평선이므로 상단 2px 과 행 하단 1px 의 끝단이 맞아야 한다. 블리드는 목록(.rt)에 한 번만 건다 — 행에도 margin-inline 을 주면 행이 목록보다 다시 24px 더 넓어져 어긋난다. 좌우 12px 은 .wrap 의 --gut 24px(1023px 이하 20px) 안쪽이라 가로 스크롤을 만들지 않고, 행 padding 12px 이 이를 되돌려 글자는 .wrap 모서리에 맞는다. */ .rt { margin-top: 14px; margin-inline: -12px; border-top: 2px solid rgba(127, 184, 232, .55); } .rt__row { display: grid; grid-template-columns: clamp(240px, 27%, 320px) minmax(0, 1fr) 18px; gap: 0 20px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid rgba(127, 184, 232, .18); transition: background .25s var(--ease), box-shadow .25s var(--ease); } .rt__when { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.5; color: var(--dk-hi); word-break: keep-all; } /* 얻는 것 + 목적지 이름. 목적지는 margin-left:auto 로 항상 오른쪽에 붙는다 — 한 줄에 들어가면 화살표 앞, 넘치면 다음 줄에서도 오른쪽이다. 이름은 착지 화면 h1 과 같은 말을 쓴다. 클릭 전에 어디로 가는지 보이게 하는 것은 접근성이 아니라 전환의 문제이고, 이름이 착지 제목과 다르면 그 목적이 깨진다. */ .rt__get { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-size: 13.5px; line-height: 1.5; color: var(--dk-dim); transition: color .25s var(--ease); } .rt__what { word-break: keep-all; } .rt__dest { flex: none; margin-left: auto; font-size: 12.5px; white-space: nowrap; color: var(--dk-dim); transition: color .25s var(--ease); } .rt__go { width: 18px; height: 18px; align-self: center; color: var(--dk-dim); transition: transform .25s var(--ease), color .25s var(--ease); } /* 상시 강조 — 이 밴드 아래 02·03 이 250행 넘게 한 번도 말 걸지 않는 갈래 하나만 세운다. 색이 아니라 규칙선과 틴트로만. 좌측 3px 은 .ehs-fig 의 border-top:3px(ehs.css:377)를 방향만 바꾼 것이고, .07 은 .sim__callout 이 쓰는 틴트다. glow 불투명 면적 증가 0. */ .rt__row--lead { background: rgba(127, 184, 232, .07); box-shadow: inset 3px 0 0 var(--glow); } .rt__row--lead .rt__get { color: var(--dk-text); } .rt__row:hover { background: rgba(127, 184, 232, .06); box-shadow: inset 3px 0 0 var(--glow); } .rt__row:hover .rt__get { color: var(--dk-text); } .rt__row:hover .rt__dest { color: var(--glow); } .rt__row:hover .rt__go { color: var(--glow); transform: translateX(3px); } /* 강조 행은 상시 틴트(.07)보다 진해져야 호버가 읽힌다 — .gnb__link:hover 의 .10 을 쓴다. `.rt__row:hover` 와 명시도가 같으므로 반드시 그 뒤에 온다. */ .rt__row--lead:hover { background: rgba(127, 184, 232, .10); } /* 1023px — 조건절과 얻는 것을 위아래로 접는다. 고정폭 컬럼을 좁은 화면까지 끌고 가면 한국어 조건절이 두 줄로 접혀 목록의 리듬이 깨진다. 블리드와 행 padding 을 같이 10px 로 내려 두 규칙선의 끝단을 계속 맞춘다. */ @media (max-width: 1023px) { .rt { margin-inline: -10px; } .rt__row { grid-template-columns: minmax(0, 1fr) 18px; gap: 3px 14px; padding: 12px 10px; } .rt__when { grid-column: 1; grid-row: 1; } .rt__get { grid-column: 1; grid-row: 2; } .rt__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } @media (max-width: 600px) { .proof--routes .proof__inner { padding-block: 30px 34px; } .rt__q { margin-top: 14px; } .rt { margin-top: 12px; } .rt__when { font-size: 15px; } .rt__get { font-size: 13px; } .rt__dest { font-size: 12px; } } /* ============================================================ 02 시뮬레이션 (다크) ============================================================ */ .sim { background: var(--dk-deep); color: var(--dk-text); } .sim__note { font-size: 12.5px; color: var(--dk-dim); margin-top: 10px; line-height: 1.7; } /* 전국 난방 실태 세 숫자 — 차트 앞 한 줄. 숫자는 헤드라인 색, 라벨은 dim. 포인트색(glow)은 쓰지 않는다 — 차트의 EHS 막대와 콜아웃이 이미 이 화면의 5% 를 쓴다. */ .sim__why { list-style: none; margin: 28px auto 34px; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(3, 1fr); } .sim__why li { padding: 4px 18px; text-align: center; border-left: 1px solid rgba(127, 184, 232, .16); } .sim__why li:first-child { border-left: 0; } .sim__why b { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--dk-hi); font-variant-numeric: tabular-nums; } .sim__why b small { font-size: .42em; font-weight: 700; letter-spacing: 0; margin-left: 3px; color: var(--dk-text); } .sim__why span { display: block; margin-top: 8px; font-size: 14px; color: var(--dk-text); word-break: keep-all; } .sim__why em { display: block; margin-top: 4px; font-size: 12px; font-style: normal; letter-spacing: .06em; color: var(--dk-dim); } @media (max-width: 600px) { .sim__why { grid-template-columns: 1fr; gap: 14px; max-width: 320px; } .sim__why li { border-left: 0; border-top: 1px solid rgba(127, 184, 232, .16); padding-top: 14px; } .sim__why li:first-child { border-top: 0; padding-top: 0; } } .sim__chart { margin-top: 52px; /* 비교 대상 4종(LPG·등유·심야전기·EHS) — 3열로 두면 마지막 막대가 줄바꿈된다 */ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2.4vw, 36px); align-items: end; height: 340px; padding-inline: clamp(2px, 2vw, 32px); } .simbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .simbar__val { font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--dk-hi); font-variant-numeric: tabular-nums; } .simbar__val small { font-size: .5em; margin-left: 2px; color: var(--dk-dim); } .simbar__bar { width: min(120px, 100%); border-radius: 12px; margin-top: 14px; transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); } .is-in .simbar__bar { transform: scaleY(1); } /* 막대 높이는 영상 v27 의 값(LPG 239 · 등유 206 · 심야 128 · EHS 81만원)에 비례한다 — 260px = 239만원 */ .simbar--lpg .simbar__bar { height: 260px; background: linear-gradient(180deg, #ff7a45, #e8542a); box-shadow: 0 0 34px rgba(255,122,69,.30); } .simbar--kero .simbar__bar { height: 224px; background: linear-gradient(180deg, #ffb340, #f09526); box-shadow: 0 0 34px rgba(255,179,64,.28); transition-delay: .12s; } .simbar--night .simbar__bar { height: 139px; background: linear-gradient(180deg, #e0c766, #c8a23c); box-shadow: 0 0 34px rgba(224,199,102,.26); transition-delay: .24s; } .simbar--ehs .simbar__bar { height: 88px; background: linear-gradient(180deg, #9cc8ef, #3f8fd8); box-shadow: 0 0 34px rgba(127,184,232,.45); transition-delay: .36s; } .simbar__name { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--dk-text); text-align: center; word-break: keep-all; line-height: 1.35; } .simbar__name small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--dk-dim); } .simbar--ehs .simbar__name { color: var(--dk-hi); } .sim__callout { margin: 44px auto 0; max-width: 640px; padding: 18px 30px; border-radius: 100px; text-align: center; font-size: clamp(17px, 2vw, 22px); font-weight: 800; letter-spacing: -.01em; color: var(--dk-hi); border: 1px solid rgba(127,184,232,.55); background: rgba(127,184,232,.07); box-shadow: 0 0 30px rgba(127,184,232,.18), 0 0 24px rgba(127,184,232,.12) inset; } .sim__callout b { color: var(--glow); } /* v27_4: 「절감」 대신 「차이 · 시뮬레이션 예시」 — 제목 옆 작은 알약, 콜아웃 둘째 줄, 콜아웃 아래 면책 한 단락 */ .sim__tag { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px 4px; border-radius: 100px; border: 1px solid rgba(127, 184, 232, .4); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--dk-text); text-shadow: none; white-space: nowrap; } .sim__callout small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--dk-dim); } .sim__disc { margin: 14px auto 0; max-width: 720px; text-align: center; font-size: 13px; line-height: 1.75; color: var(--dk-dim); word-break: keep-all; } .simulator { margin: 56px auto 0; max-width: 720px; padding: 30px clamp(20px, 4vw, 40px) 34px; background: var(--dk-panel); border: 1px solid var(--dk-line2); border-radius: 8px; } .simulator h3 { font-size: 18px; font-weight: 800; color: var(--dk-hi); } .simulator__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; } .simulator__row label { font-size: 14px; font-weight: 700; color: var(--dk-dim); } .simulator select, .simulator input[type="number"] { padding: 11px 14px; font: inherit; font-size: 15px; background: var(--dk-raise); color: var(--dk-hi); border: 1px solid var(--dk-line); border-radius: 6px; max-width: 100%; } .simulator input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--glow); } /* 소비자 입력(월 난방비·등유량·가스요금) 칸 — 입력 기준 전환 시 슬라이더와 번갈아 보인다 */ .simulator input[type="number"] { flex: 1; min-width: 140px; -moz-appearance: textfield; appearance: textfield; } .simulator input[type="number"]::-webkit-outer-spin-button, .simulator input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .simulator input::placeholder { color: rgba(124, 144, 168, .8); } .simulator [hidden] { display: none !important; } .simulator__kwh { font-size: 14px; color: var(--dk-text); font-variant-numeric: tabular-nums; min-width: 96px; } .simulator__out { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--dk-line2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: center; } .simulator__out div span { display: block; font-size: 13px; color: var(--dk-dim); } .simulator__out div b { display: block; margin-top: 6px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dk-hi); } .simulator__out .save b { color: var(--glow); text-shadow: 0 0 18px rgba(127,184,232,.35); } /* ============================================================ 03 POLICY (다크 → 라이트 전환 밴드) ============================================================ */ .policy { text-align: center; } .policy--dark { background: linear-gradient(180deg, var(--dk-panel) 0%, var(--dk-deep) 100%); color: var(--dk-text); } .policy__head { font-size: clamp(30px, 4.4vw, 54px); font-weight: 800; letter-spacing: -.03em; color: var(--dk-hi); text-shadow: 0 0 26px rgba(127,184,232,.4), 0 0 70px rgba(127,184,232,.16); } .policy__head b { color: var(--glow); } /* 다크 → 라이트 이음새 */ .seam { height: 90px; background: linear-gradient(180deg, var(--dk-deep) 0%, #ffffff 100%); } /* ============================================================ 푸터 워드마크 ============================================================ */ .footer__brand-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .footer__mark { height: 30px; width: auto; } .footer__wordmark { line-height: 1.25; } .footer__wordmark img { display: block; height: 12px; width: auto; opacity: .95; } .footer__wordmark span { display: block; margin-top: 7px; font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.45); } /* ============================================================ 모션 확장 v2 — 히어로 진입 · 계통도 흐름 · 콜아웃 펄스 (CSS 애니메이션만 사용: JS 실패와 무관하게 최종 상태 보존) ============================================================ */ @keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .vhero__kicker { animation: heroRise .6s var(--ease) both; } .vhero__title { animation: heroRise .7s var(--ease) .12s both; } .vhero__text { animation: heroRise .7s var(--ease) .24s both; } .vhero__badge { animation: heroRise .6s var(--ease) .36s both; } .vhero__actions { animation: heroRise .6s var(--ease) .46s both; } @keyframes orbitIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .orbit { animation: orbitIn .9s var(--ease) .2s both; } /* 05 R&D 계통도 — 파선이 열 흐름 방향으로 이동 */ @keyframes rndFlow { to { stroke-dashoffset: -64; } } .rnd-dash { animation: rndFlow 4s linear infinite; } /* 02 절감 콜아웃 — 은은한 글로우 호흡 */ @keyframes calloutBreath { 0%, 100% { box-shadow: 0 0 30px rgba(127,184,232,.18), 0 0 24px rgba(127,184,232,.12) inset; } 50% { box-shadow: 0 0 44px rgba(127,184,232,.34), 0 0 30px rgba(127,184,232,.18) inset; } } .sim__callout { animation: calloutBreath 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .vhero__kicker, .vhero__title, .vhero__text, .vhero__badge, .vhero__actions, .orbit, .rnd-dash, .sim__callout { animation: none; } } /* ============================================================ 접근성 · 반응형 ============================================================ */ .header :focus-visible, .vhero :focus-visible, .proof :focus-visible, .sim :focus-visible, .policy--dark :focus-visible, .footer :focus-visible, .subvisual :focus-visible, .simulator :focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .orbit__spin-a, .orbit__spin-b, .orbit__spin-c { animation: none; } } /* ---------- 반응형 (2026-08-22 정비) ---------- 히어로 2단은 1024px 까지 유지한다. 1080px 로 잡으면 노트북·태블릿 가로에서 불필요하게 1단이 되어 우측이 비고 페이지가 길어진다. 실적 4열도 601px 까지 유지 — 900px 에서 2열로 떨어지면 카드가 과도하게 넓어진다. */ @media (max-width: 1023px) { .vhero__inner { grid-template-columns: 1fr; text-align: center; } .vhero__text { margin-inline: auto; } .vhero__actions { justify-content: center; } /* 1단이 되면 가로 공간이 남으므로 궤도를 키워 균형을 잡는다 */ .orbit { order: -1; width: min(300px, 62vw); margin-top: 8px; } } @media (max-width: 1023px) { .sim__chart { height: 280px; gap: 14px; } .simbar--lpg .simbar__bar { height: 215px; } .simbar--kero .simbar__bar { height: 185px; } .simbar--night .simbar__bar { height: 115px; } .simbar--ehs .simbar__bar { height: 73px; } } @media (max-width: 620px) { .simulator__out { grid-template-columns: 1fr; } .sim__chart { gap: 8px; padding-inline: 0; } .simbar__name { font-size: 12px; } .simbar__name small { display: none; } .simbar__val { font-size: 20px; } .vhero { min-height: 76vh; } .orbit { width: min(250px, 60vw); } .sim__chart { height: 250px; } .simbar--lpg .simbar__bar { height: 185px; } .simbar--kero .simbar__bar { height: 159px; } .simbar--night .simbar__bar { height: 99px; } .simbar--ehs .simbar__bar { height: 63px; } } /* ============================================================ 섹션 배경 실사 레이어 — 2026-08-21 리뉴얼 DNA 준수: 새 색 발명 없음(딥네이비 --dk-deep 투명도 변형만), 바탕 70~80% 유지를 위해 오버레이를 강하게 건다. ============================================================ */ .secbg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .secbg img { width: 100%; height: 100%; object-fit: cover; display: block; } .secbg::after { content: ""; position: absolute; inset: 0; } /* 히어로 — 기존 래디얼 브랜드 글로우를 오버레이로 이어받는다 */ .vhero .secbg::after { background: radial-gradient(1100px 520px at 78% -10%, rgba(37, 72, 128, .55), transparent 60%), radial-gradient(900px 460px at 12% 110%, rgba(23, 52, 96, .6), transparent 60%), linear-gradient(180deg, rgba(10, 21, 38, .76) 0%, rgba(10, 21, 38, .9) 100%); } .vhero__inner { position: relative; z-index: 2; } /* 실적 밴드 — 숫자가 주인공, 배경은 흔적만 */ .proof { position: relative; overflow: hidden; } .proof .secbg::after { background: linear-gradient(180deg, rgba(16, 30, 51, .88) 0%, rgba(10, 21, 38, .94) 100%); } .proof > .wrap { position: relative; z-index: 1; } /* 풀블리드 밴드 (시뮬레이션·사업영역·상담) */ .band { position: relative; margin: 0; overflow: hidden; } .band img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 밴드 사진 위 네이비 오버레이는 "연출된 이미지입니다" 캡션을 읽히게 하려던 장치였다. 캡션을 전 사이트에서 걷어낸 뒤로는 사진만 어둡게 만드는 역할만 남아 제거한다(대표님 지적). 하단 살짝만 눌러 다음 섹션과의 경계를 유지한다. */ .band--dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 68%, rgba(10, 21, 38, .18) 100%); } .band__cap { position: absolute; right: 16px; bottom: 12px; font-size: 12px; letter-spacing: .01em; color: rgba(255, 255, 255, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } .band--light .band__cap { color: var(--ink-500); text-shadow: none; } /* 홍보영상 밴드 — 사진 밴드 자리에