/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/
/* ============================================================
색 토큰 — 색 리터럴은 이 :root 안에만 존재한다.
컴포넌트는 반드시 var() 로만 참조한다. (색 하드코딩 금지)
============================================================ */
:root {
--gh-dark: #1C1614; /* 따뜻한 어둠 */
--gh-dark-2: #3A2E27; /* 어둠 위의 면 */
--gh-cream: #F5EDE0; /* 본문 배경 */
--gh-orange: #F5941F; /* 포인트 — 밝고 약간 노란빛 도는 주황 */
--gh-orange-lt: #F0A24E; /* 연한 주황 — 크림 위 메뉴 호버 강조 */
--gh-carrot: #F9A227; /* 밝은 당근색(노란빛) — 체크마크·박스 제목 강조 */
--gh-teal: #17A398; /* 청록 — 박스 슬로건 강조 호버 (요청 예외: 따뜻한 팔레트 밖) */
--gh-gold: #F0C069; /* 어두운 배경 위 강조 */
--gh-ivory: #E7D3A0; /* 어두운 배경 위 히어로 슬로건 — 크림과 금빛 사이 */
--gh-amber: #AE5E18; /* flow 다발 허리(병목)의 진한 호박빛 */
--gh-muted: #B89A6E; /* 어두운 배경 위 보조 텍스트 */
--gh-deep: #C4552A; /* 크림 배경 위 강조 */
--gh-red: #E5342B; /* 선명한 빨강 — "멈춤/위험" 강조 (요청 예외: 금빛 없는 순색 허용) */
--gh-white: #FFFFFF; /* 홈/히어로 배경 — 맥킨지식 화이트 (요청으로 순백 허용) */
/* 바다 수평선 색은 SVG 안의 가로 그라데이션(gh-sea-grad)이 직접 지닌다.
중앙 노을 / 양끝 네이비·청 — 위치별 색이라 CSS 단색 토큰을 쓰지 않는다. */
/* 밝은(크림) 배경 위 텍스트 계열 — 히어로/본문 재구현용 */
--gh-ink: #1A1714; /* 밝은 배경 위 제목 */
--gh-ink-2: #5C554B; /* 밝은 배경 위 본문 */
--gh-ink-mut: #6E675E; /* 밝은 배경 위 보조/캡션 */
--gh-gold-lo: #C99A3B; /* 밝은 배경 위 차분한 골드(eyebrow·격자) */
--gh-hairline:#E4DFD5; /* 밝은 배경 위 얇은 경계선 */
--gh-glow: rgba( 224, 123, 44, 0.22 ); /* 히어로 허리 온기(--gh-orange 기반) */
--gh-card-border: rgba( 224, 123, 44, 0.30 ); /* 어둠 위 카드 테두리 — 은은한 주황(--gh-orange 기반) */
/* 헤더 — 어두운색(--gh-dark 따뜻한 어둠) 반투명. 불투명도 0.1(= 뒤가 90%
비쳐 flow 가 거의 다 보인다). 순흑 대신 브랜드 어둠을 쓴다. */
--gh-header-bg: rgba( 28, 22, 20, 0.1 );
--gh-header-border: rgba( 184, 154, 110, 0.14 );
--gh-header-shadow: rgba( 0, 0, 0, 0.10 );
--gh-menu-ink: #3B362E; /* .dc 메뉴 텍스트 */
--gh-menu-mut: #8A8378; /* .dc 메뉴 보조 */
--gh-sep: #D3CCC0; /* 유틸 구분자 */
--gh-btn-ink: #211D19; /* .dc solid 버튼 텍스트 */
--gh-btn-line: #D6CFC3; /* .dc ghost 버튼 외곽선 */
--gh-header-h: 74px;
--gh-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
/* Pretendard 우선, 없으면 시스템 한글 폰트로 폴백 (외부 로드 없음).
실제 등록명이 한글 '프리텐다드'라 영문 'Pretendard'만으로는 매칭되지 않아
Plus Jakarta Sans 로 폴백되던 문제가 있었다. 등록명을 맨 앞에 둔다. */
--gh-font: '프리텐다드', 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
}
/* ============================================================
접근성 — 본문 건너뛰기 링크
============================================================ */
.gh-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 12px 20px;
background: var( --gh-orange );
color: var( --gh-dark );
font-weight: 700;
border-radius: 0 0 4px 0;
}
.gh-skip-link:focus {
left: 0;
}
/* ============================================================
헤더 — 스티키, 스크롤 시 축소·진해짐
============================================================ */
.gh-header {
position: sticky;
top: 0;
z-index: 900;
background: var( --gh-header-bg ); /* dark orange 반투명(50%) */
-webkit-backdrop-filter: blur( 3px );
backdrop-filter: blur( 3px );
transition: box-shadow 0.35s var( --gh-ease );
}
/* 홈에서는 배경 무대(.gh-stage) 위에 얹혀 flow 가 헤더 뒤로 비친다 */
.gh-header--over {
z-index: 20;
}
.gh-header.is-scrolled {
box-shadow: 0 6px 24px var( --gh-header-shadow );
}
.gh-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
/* 최대폭 제한 없이 화면 폭 전체 사용 — 로고가 히어로 카피(left 56px)와 같은 라인에 온다 */
margin: 0;
padding: 13px 56px;
}
/* ── 로고 (워드마크만 — .dc) ──────────────────────────── */
.gh-logo {
display: inline-flex;
align-items: baseline;
text-decoration: none;
line-height: 1;
}
.gh-logo__wordmark {
color: var( --gh-orange ); /* 서비스 카드 제목과 동일한 밝은 주황 */
font-weight: 800;
font-size: 1.3125rem; /* 21px */
letter-spacing: -0.02em;
}
/* ============================================================
데스크톱 내비게이션
============================================================ */
/* nav 는 space-between 안에서 가운데 놓인다 (.dc) */
.gh-nav {
display: flex;
justify-content: center;
}
/* Space Mono 유틸리티 폰트 (.dc — Sign In | KOR, kicker 등) */
.mono {
font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
}
/* 우측 유틸리티 */
.gh-header__utility {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8125rem;
color: var( --gh-ink-mut );
}
.gh-header__utility a:hover,
.gh-header__utility a:focus-visible {
color: var( --gh-gold-lo );
}
.gh-header__sep {
color: var( --gh-sep );
}
.gh-menu,
.gh-menu .sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.gh-menu {
display: flex;
align-items: center;
gap: 38px;
}
.gh-menu .menu-item {
position: relative;
}
.gh-menu .menu-item > a {
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 16px;
color: var( --gh-ivory ); /* 히어로 슬로건과 동일 */
font-size: 0.8125rem;
font-weight: 400;
text-decoration: none;
letter-spacing: 0.04em;
transition: color 0.25s var( --gh-ease );
}
.gh-menu .menu-item > a:hover,
.gh-menu .menu-item > a:focus-visible,
.gh-menu .current-menu-item > a {
color: var( --gh-gold ); /* dark orange 헤더 위 강조 */
}
/* 밑줄 슬라이드 (좌→우) */
.gh-menu > .menu-item > a::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 4px;
height: 2px;
background: var( --gh-gold ); /* dark orange 헤더 위 밑줄 */
transform: scaleX( 0 );
transform-origin: left center;
transition: transform 0.3s var( --gh-ease );
}
.gh-menu > .menu-item > a:hover::after,
.gh-menu > .menu-item > a:focus-visible::after,
.gh-menu > .current-menu-item > a::after {
transform: scaleX( 1 );
}
/* 드롭다운 부모의 캐럿 (▾) */
.gh-menu .menu-item-has-children > a {
padding-right: 30px;
}
.gh-menu .menu-item-has-children > a::before {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 0.42em;
height: 0.42em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY( -70% ) rotate( 45deg );
transition: transform 0.25s var( --gh-ease );
}
.gh-menu .menu-item-has-children:hover > a::before,
.gh-menu .menu-item-has-children:focus-within > a::before {
transform: translateY( -30% ) rotate( -135deg );
}
/* ── 드롭다운 서브메뉴 ────────────────────────────────── */
.gh-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
padding: 8px;
background: var( --gh-dark-2 );
border: 1px solid var( --gh-header-border );
border-radius: 10px;
box-shadow: 0 12px 32px var( --gh-header-shadow );
opacity: 0;
visibility: hidden;
transform: translateY( 8px );
transition: opacity 0.25s var( --gh-ease ), transform 0.25s var( --gh-ease ), visibility 0.25s;
}
.gh-menu .menu-item-has-children:hover > .sub-menu,
.gh-menu .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY( 0 );
}
.gh-menu .sub-menu .menu-item > a {
display: block;
padding: 10px 14px;
border-radius: 6px;
white-space: nowrap;
transition: color 0.2s var( --gh-ease ), background 0.2s var( --gh-ease );
}
.gh-menu .sub-menu .menu-item > a:hover,
.gh-menu .sub-menu .menu-item > a:focus-visible {
background: rgba( 224, 123, 44, 0.12 );
color: var( --gh-gold );
}
/* ============================================================
햄버거 버튼 (데스크톱에서는 숨김)
============================================================ */
.gh-nav-toggle {
display: none;
position: relative;
z-index: 1001;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.gh-nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
margin: 5px auto;
background: var( --gh-dark );
transition: transform 0.3s var( --gh-ease ), opacity 0.2s var( --gh-ease );
}
/* ============================================================
모바일 오버레이 (전체화면)
============================================================ */
.gh-mobile-overlay {
position: fixed;
inset: 0;
z-index: 950;
display: flex;
align-items: center;
justify-content: center;
background: var( --gh-dark );
opacity: 0;
transition: opacity 0.35s var( --gh-ease );
}
/* 닫힌 오버레이는 확실히 숨긴다. hidden 속성의 display:none 을 위 display:flex 가
이겨서, 닫혀 있어도 화면 전체를 덮은 채(opacity:0) 클릭을 가로채던 버그를 막는다.
JS 는 hidden 을 올바로 토글하므로, CSS 가 그 hidden 을 존중하기만 하면 된다. */
.gh-mobile-overlay[hidden] {
display: none;
}
.gh-mobile-overlay.is-open {
opacity: 1;
}
.gh-mobile-nav {
width: 100%;
max-width: 420px;
padding: 24px;
}
.gh-menu--mobile {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.gh-menu--mobile .menu-item > a {
justify-content: center;
padding: 16px;
font-size: 1.25rem;
}
.gh-menu--mobile > .menu-item > a::after {
display: none; /* 모바일에서는 밑줄 슬라이드 대신 정적 배치 */
}
/* 모바일에서는 서브메뉴를 접힌 드롭다운이 아니라 펼친 목록으로 */
.gh-menu--mobile .sub-menu {
position: static;
min-width: 0;
padding: 0 0 8px;
background: transparent;
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.gh-menu--mobile .sub-menu .menu-item > a {
text-align: center;
font-size: 1rem;
color: var( --gh-muted );
}
.gh-menu--mobile .menu-item-has-children > a::before {
display: none;
}
body.gh-no-scroll {
overflow: hidden;
}
/* ============================================================
반응형 — 900px 이하: 데스크톱 메뉴 숨기고 햄버거 노출
============================================================ */
@media ( max-width: 900px ) {
.gh-nav {
display: none;
}
.gh-nav-toggle {
display: block;
}
/* 열렸을 때 햄버거 → X */
.gh-nav-toggle[aria-expanded="true"] {
z-index: 1001;
}
.gh-nav-toggle[aria-expanded="true"] .gh-nav-toggle__bar:nth-child( 1 ) {
transform: translateY( 7px ) rotate( 45deg );
}
.gh-nav-toggle[aria-expanded="true"] .gh-nav-toggle__bar:nth-child( 2 ) {
opacity: 0;
}
.gh-nav-toggle[aria-expanded="true"] .gh-nav-toggle__bar:nth-child( 3 ) {
transform: translateY( -7px ) rotate( -45deg );
}
}
/* 브랜드 폰트 적용 (우리 컴포넌트에만 — Astra 콘텐츠 영역은 건드리지 않음) */
.gh-header,
.gh-hero,
.gh-footer {
font-family: var( --gh-font );
letter-spacing: -0.02em;
}
/* 홈 캔버스 — .dc 흰 배경 (실제로는 무대 배경이 덮는다) */
body.home {
background-color: var( --gh-white );
}
/* ============================================================
히어로 무대 — nav + 히어로가 공유하는 relative 컨테이너.
뒤에 배경(sea-marble 띠 + flow 다발)이 깔려 헤더 뒤까지 비친다.
============================================================ */
.gh-stage {
position: relative;
overflow: hidden;
background: var( --gh-dark ); /* 히어로 배경 — 푸터와 동일한 따뜻한 어둠 */
}
.gh-stage__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
/* 무대(.gh-stage)에 히어로 아래 서비스 섹션이 더해지면서 무대가 길어졌다.
배경(바다 grid + flow)은 히어로 무대 높이에만 고정한다 — 그러지 않으면
SVG(viewBox 1440x812, slice)가 늘어난 무대에 맞춰 스케일되어 바다가
화면 밖으로 밀린다. 높이 = 헤더 + 히어로(min-height 742px). */
height: 815px;
z-index: 0;
pointer-events: none;
}
/* 원근 격자 메쉬(바다) — 무대 전체를 덮는 SVG. 지평선으로 수렴하며 멀수록
흐려진다. flow 와 같은 좌표계(viewBox 1440x812)를 공유한다. 색은 토큰
(--gh-gold-lo), 각 선의 투명도는 SVG 안에서 stroke-opacity 로 지닌다.
DOM 에서 flow 보다 먼저 나오므로(z 동일) flow 실 다발이 격자 위에 온다. */
.gh-stage__grid {
position: absolute;
inset: 0;
z-index: 0;
}
.gh-hero-grid__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
/* 은은한 일렁임 — 지평선(상단)을 축으로 가까운 물이 더 흔들린다. */
transform-origin: 50% 0;
animation: gh-sea-drift 13s ease-in-out infinite;
will-change: transform;
}
@keyframes gh-sea-drift {
0% { transform: translate3d( 0, 0, 0 ) rotate( 0deg ); }
25% { transform: translate3d( 5px, -3px, 0 ) rotate( 0.22deg ); }
50% { transform: translate3d( -2px, -6px, 0 ) rotate( -0.16deg ); }
75% { transform: translate3d( -5px, -2px, 0 ) rotate( 0.1deg ); }
100% { transform: translate3d( 0, 0, 0 ) rotate( 0deg ); }
}
/* 모션 최소화 선호 시 정지 */
@media ( prefers-reduced-motion: reduce ) {
.gh-hero-grid__svg {
animation: none;
}
}
/* 곡선 flow 다발 — 격자와 같은 z(0), DOM 뒤이므로 격자 위. main 은 병목을 이동(누적). */
.gh-stage__flow {
position: absolute;
inset: 0;
z-index: 0; /* sea 뒤 — 이미지와 겹치는 선은 가려진다 */
transform: translate( 10px, -50px );
}
/* sub flow — main 의 이동을 물려받지 않는다. 위치는 생성기 축 파라미터로만 잡는다
(transform 으로 옮기면 상단부까지 움직이고 하단부가 sea 에서 떨어지므로 쓰지 않음) */
.gh-stage__flow--sub {
transform: none;
}
.gh-hero-flow__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* main 은 -50px 올라가 있어 viewBox 하단(812)이 무대 바닥보다 50px 위에 놓인다.
기본값(hidden)이면 좌하 부채가 거기서 잘려 바다에 닿기 전에 끊긴다. 클리핑을
풀어 무대 바닥까지 잇는다 — 최종 경계는 .gh-stage 의 overflow:hidden 이다.
마스크 rect 도 같은 폭으로 넓혀 두었다(gh-hero-flow.php).
선택자를 길게 쓴 이유: 워드프레스 리셋의 `svg:not(:root){overflow:hidden}` 이
특이도 (0,1,1) 이라 클래스 하나로는 이기지 못한다. !important 대신 특이도로 넘긴다. */
.gh-stage__flow svg.gh-hero-flow__svg--main {
overflow: visible;
}
/* ============================================================
히어로 — 무대 안. 카피는 좌하단(.dc), 대형 타이포 + CTA.
============================================================ */
.gh-hero {
position: relative;
z-index: 10;
min-height: 742px;
}
.gh-hero__inner {
position: absolute;
left: 56px;
bottom: 550px; /* 100 + 80 + 100 - 50 + 20 + 50 - 20px 위로 */
max-width: none; /* 한 줄 슬로건이 잘리지 않도록 */
}
.gh-hero__title {
margin: 0 0 36px;
/* h1 이라 Astra 의 heading 폰트 규칙이 --gh-font 상속을 이긴다. 명시 지정. */
font-family: var( --gh-font );
font-size: clamp( 18px, 1.9vw, 26px );
font-weight: 200; /* Pretendard ExtraLight — 레퍼런스의 얇은 획 */
line-height: 1.05;
letter-spacing: 0.02em; /* 영어 슬로건 — 얇은 무게에 맞춰 자간을 살짝 벌림 */
color: var( --gh-ivory );
white-space: nowrap; /* 한 줄 유지 */
}
/* 슬로건 아래 소개 리드 — 작은 폰트, 보조 위계(차분한 색). 한글 본문 자간·행간. */
.gh-hero__lead {
margin: 0;
font-family: var( --gh-font );
font-size: clamp( 14px, 1.3vw, 17px );
font-weight: 400;
line-height: 1.75;
letter-spacing: -0.02em;
color: var( --gh-ivory ); /* 히어로 슬로건과 동일 */
}
/* CTA — solid(골드) + ghost(외곽선) (.dc) */
.gh-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.gh-btn {
display: inline-flex;
align-items: center;
padding: 16px 30px;
border: 1px solid transparent;
border-radius: 2px;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: transform 0.25s var( --gh-ease ), background 0.25s var( --gh-ease ),
border-color 0.25s var( --gh-ease ), color 0.25s var( --gh-ease );
}
.gh-btn--solid {
background: var( --gh-gold-lo );
color: var( --gh-btn-ink );
}
.gh-btn--solid:hover,
.gh-btn--solid:focus-visible {
background: var( --gh-deep );
color: var( --gh-white );
transform: translateY( -2px );
}
.gh-btn--ghost {
border-color: var( --gh-btn-line );
color: var( --gh-ink );
}
.gh-btn--ghost:hover,
.gh-btn--ghost:focus-visible {
border-color: var( --gh-ink );
transform: translateY( -2px );
}
/* ============================================================
서비스 섹션 — 히어로와 동일한 어둠 배경. 컨셉 도입 + 카드 3.
============================================================ */
.gh-services {
position: relative;
z-index: 1; /* .gh-stage 배경 flow(absolute) 위로 올라온다 */
background: var( --gh-dark );
padding: clamp( 64px, 8vw, 120px ) 24px;
}
.gh-services__inner {
max-width: 1358px;
margin: 0 auto;
}
.gh-services__intro {
max-width: 720px;
margin: -50px auto clamp( 40px, 5vw, 64px ); /* 50px 위로 */
text-align: center;
}
.gh-services__eyebrow {
margin: 0 0 16px;
font-family: 'Space Mono', ui-monospace, monospace; /* .dc kicker */
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var( --gh-gold );
}
.gh-services__title {
margin: 0 0 20px;
font-family: var( --gh-font );
font-size: clamp( 26px, 3.4vw, 40px );
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.03em;
color: var( --gh-ivory ); /* 히어로 슬로건·kicker와 동일 */
}
.gh-services__lead {
margin: 0;
font-family: var( --gh-font );
font-size: clamp( 15px, 1.4vw, 17px );
line-height: 2;
letter-spacing: -0.02em;
color: var( --gh-muted );
}
/* 통계 숫자 강조 — 큰 주황 숫자 + 작은 문장(통계 후킹) */
.gh-services__lead .gh-stat {
font-size: 1.9em;
font-weight: 700;
color: var( --gh-orange );
letter-spacing: -0.01em;
margin: 0 0.06em;
}
/* 카드를 여는 헤드라인 — "For your 100%, we serve".
크기는 통계 숫자(.gh-stat, lead*1.9)와 동일, 색은 히어로 슬로건(ivory)과 동일. */
.gh-services__kicker {
margin: clamp( 94px, 7.5vw, 122px ) 0 clamp( 28px, 4vw, 44px );
text-align: center;
font-family: var( --gh-font );
font-size: clamp( 28.5px, 2.66vw, 32.3px );
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.03em;
color: var( --gh-ivory );
}
/* 카드 커버플로우 — 중앙 카드는 정면, 양옆은 3D 로 비스듬히. 자동 회전.
(CSS 3D 트랜스폼만 사용 — WebGL/라이브러리 없음. JS 는 위치 계산·자동회전만) */
.gh-carousel {
position: relative;
}
.gh-cards {
position: relative;
list-style: none;
margin: 0;
padding: 0;
height: 520px; /* 절대배치 카드의 무대 높이 (JS 가 실제 높이로 보정) */
perspective: 1800px; /* 3D 원근 */
}
/* 카드 — 섹션과 같은 어둠 배경. 얇은 테두리로만 구분(레퍼런스(2) 톤).
위치·기울기는 JS 가 offset 별 transform 으로 설정한다. */
.gh-card {
position: absolute;
top: 0;
left: 50%;
width: 422px;
margin-left: -211px; /* 무대 중앙 기준 */
box-sizing: border-box;
display: flex;
flex-direction: column;
background: var( --gh-dark );
border: 1px solid var( --gh-card-border );
border-radius: 14px;
padding: 40px 34px;
transition: transform 0.6s var( --gh-ease ), opacity 0.6s var( --gh-ease ), height 0.6s var( --gh-ease );
will-change: transform, opacity;
backface-visibility: hidden;
}
/* ±1 카드(위로 20px 큼) — 늘어난 위 공간에 맞춰 내용을 세로 중앙으로 */
.gh-card--tall {
justify-content: center;
}
.gh-card--tall .gh-card__btn {
margin-top: 24px; /* margin-top:auto 대신 고정 간격(세로 중앙 정렬 유지) */
}
/* JS 미동작(스크립트 차단) 시 폴백 — 세로로 쌓아 모두 읽히게 */
.gh-cards.gh-cards--no-js .gh-card {
position: relative;
left: auto;
margin: 0 auto 24px;
transform: none;
opacity: 1;
}
.gh-cards.gh-cards--no-js {
height: auto;
}
/* ── 캐러셀 컨트롤 ── */
.gh-carousel__nav {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 40px;
}
.gh-carousel__btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var( --gh-card-border );
background: transparent;
color: var( --gh-ivory );
font-size: 1.375rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: border-color 0.25s var( --gh-ease ), color 0.25s var( --gh-ease );
}
.gh-carousel__btn:hover,
.gh-carousel__btn:focus-visible {
border-color: var( --gh-orange );
color: var( --gh-orange );
}
/* 좌우 화살표 — 가장 바깥 카드의 바깥쪽 끝에 배치(세로는 카드 무대 중앙, top 은 JS).
테두리·배경 없이 얇은 선 꺾쇠(chevron)만. */
.gh-carousel__arrow {
position: absolute;
transform: translateY( -50% );
z-index: 10;
border: none;
background: none;
color: var( --gh-amber ); /* 차분한 어두운 주황 */
font-size: 0; /* 텍스트(‹) 숨김 — aria-label 로 접근성 유지 */
}
/* 얇은 꺾쇠 — border 두 변으로 그린다 */
.gh-carousel__arrow::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
border: solid currentColor;
border-width: 1.5px 1.5px 0 0;
}
.gh-carousel__arrow--prev::before {
transform: rotate( -135deg ); /* 왼쪽 향 */
}
.gh-carousel__arrow--next::before {
transform: rotate( 45deg ); /* 오른쪽 향 */
}
.gh-carousel__arrow:hover,
.gh-carousel__arrow:focus-visible {
border: none;
color: var( --gh-deep );
}
.gh-carousel__arrow--prev {
left: 0;
}
.gh-carousel__arrow--next {
right: 0;
}
.gh-carousel__btn--toggle::before {
content: "\275A\275A"; /* ❚❚ 정지 아이콘 (재생 중) */
font-size: 0.8rem;
letter-spacing: 1px;
}
.gh-carousel__btn--toggle[aria-pressed="false"]::before {
content: "\25B6"; /* ▶ 재생 아이콘 (정지 상태) */
font-size: 0.9rem;
}
@media ( prefers-reduced-motion: reduce ) {
.gh-card {
transition: none;
}
}
/* 문의 CTA — 카드 캐러셀 아래. 어둠 배경 위 초대 문구 + 주황 버튼.
두 문구는 kicker("For your 100%")와 같은 크기·스타일·색으로 통일. */
.gh-cta {
margin-top: clamp( 22px, 5.5vw, 70px );
text-align: center;
}
.gh-cta__title,
.gh-cta__sub {
margin: 0;
font-family: var( --gh-font );
font-size: clamp( 21px, 2vw, 25px );
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.03em;
color: var( --gh-ivory );
}
.gh-cta__title {
margin-bottom: 14px; /* 두 문구 사이 간격 */
}
.gh-cta__sub {
margin: 0 0 32px;
}
.gh-cta__btn {
display: inline-flex;
align-items: center;
padding: 15px 32px;
background: var( --gh-amber ); /* 히어로 메인 플로우 선(허리)과 동일한 진한 호박빛 #AE5E18 */
color: var( --gh-white );
border-radius: 10px; /* 서비스 페이지의 '카카오톡으로 문의하기' 버튼과 동일한 둥근 사각형 */
font-family: var( --gh-font );
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
transition: background 0.25s var( --gh-ease ), color 0.25s var( --gh-ease ), transform 0.25s var( --gh-ease );
}
.gh-cta__btn:hover,
.gh-cta__btn:focus-visible {
background: var( --gh-deep );
color: var( --gh-white );
transform: translateY( -2px );
}
/* ============================================================
블로그 — 최근 글 3개(홈 하단). 어둠 배경. 위에 구분선으로 구간 분리.
가로로 긴 카드(썸네일+텍스트)를 세로 3개. 2번째는 썸네일을 오른쪽(지그재그).
============================================================ */
.gh-blog {
position: relative;
z-index: 1; /* 위로 끌어올린 만큼 서비스 섹션(z-index:1)에 구분선이 가리지 않도록 */
margin-top: -50px; /* 구분선을 문의하기 쪽으로 50px 끌어올림 */
background: var( --gh-dark );
border-top: 1px solid var( --gh-header-border ); /* CTA 섹션과 구분선(뮤트 골드 — 카드 주황과 구분) */
padding: clamp( 14px, 5.5vw, 60px ) 24px clamp( 64px, 8vw, 110px ); /* 상단 -50: 카드를 구분선 쪽으로 */
}
.gh-blog__inner {
max-width: 1320px;
margin: 0 auto;
}
.gh-blog__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
/* 가로 카드 — 썸네일 | 본문 */
.gh-blog__link {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid var( --gh-card-border );
border-radius: 14px;
overflow: hidden;
text-decoration: none;
transition: border-color 0.3s var( --gh-ease ), transform 0.3s var( --gh-ease );
}
.gh-blog__link:hover,
.gh-blog__link:focus-visible {
border-color: var( --gh-orange );
transform: translateY( -3px );
}
/* 2번째 카드 — 썸네일 오른쪽 */
.gh-blog__item:nth-child( even ) .gh-blog__link {
flex-direction: row-reverse;
}
.gh-blog__thumb {
flex: 0 0 300px;
overflow: hidden;
}
.gh-blog__thumb img {
display: block;
width: 100%;
height: 100%;
min-height: 200px;
object-fit: cover;
}
.gh-blog__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px 36px;
}
.gh-blog__date {
display: block;
margin-bottom: 12px;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var( --gh-muted );
}
.gh-blog__title {
margin: 0 0 12px;
font-family: var( --gh-font );
font-size: 1.25rem;
font-weight: 700;
line-height: 1.45;
letter-spacing: -0.02em;
color: var( --gh-ivory );
}
.gh-blog__excerpt {
margin: 0;
font-family: var( --gh-font );
font-size: 0.9375rem;
line-height: 1.7;
letter-spacing: -0.02em;
color: var( --gh-muted );
}
@media ( max-width: 720px ) {
.gh-blog__link,
.gh-blog__item:nth-child( even ) .gh-blog__link {
flex-direction: column; /* 모바일: 썸네일 위, 본문 아래 */
}
.gh-blog__thumb {
flex-basis: auto;
}
}
.gh-card__title {
margin: 0 0 12px;
font-family: var( --gh-font );
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var( --gh-orange ); /* 로고(amber)보다 한 단계 밝은 주황 */
}
.gh-card__sub {
margin: 0 0 22px;
padding: 0 0 22px;
border-bottom: 1px solid var( --gh-header-border );
font-family: var( --gh-font );
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: -0.02em;
color: var( --gh-cream );
}
.gh-card__list {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.gh-card__list li {
position: relative;
padding-left: 26px;
font-family: var( --gh-font );
font-size: 0.875rem;
line-height: 1.55;
letter-spacing: -0.02em;
color: var( --gh-muted );
}
/* 체크 아이콘 — CSS 문자(용량 0). 색은 포인트 오렌지. */
.gh-card__list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var( --gh-orange );
font-weight: 700;
}
/* "더 알아보기" — 지금은 비활성(pill). 서비스 페이지 재구축 후 로
교체하고 활성 스타일(hover·색)을 부여한다. */
.gh-card__btn {
align-self: center;
margin-top: auto; /* 카드 높이가 달라도 버튼을 하단에 정렬 */
display: inline-flex;
align-items: center;
padding: 12px 26px;
border: 1px solid var( --gh-header-border );
border-radius: 999px;
font-family: var( --gh-font );
font-size: 0.875rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var( --gh-muted );
opacity: 0.5;
cursor: default;
}
/* 실제 서비스 페이지로 연결되는 버튼() — 클릭 가능한 활성 상태.
준비중 등 폴백은 위의 비활성 스타일 유지. */
a.gh-card__btn {
color: var( --gh-gold );
opacity: 1;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
a.gh-card__btn:hover,
a.gh-card__btn:focus-visible {
color: var( --gh-dark );
background-color: var( --gh-orange );
border-color: var( --gh-orange );
}
@media ( max-width: 900px ) {
.gh-cards {
grid-template-columns: 1fr;
max-width: 480px;
margin-inline: auto;
}
}
/* ============================================================
푸터
============================================================ */
.gh-footer {
background: var( --gh-dark );
color: var( --gh-muted );
border-top: 1px solid var( --gh-header-border );
padding: 32px 24px;
}
/* 한 라인: 저작권 가운데, 연락처 오른쪽(왼쪽 열은 비워 대칭 유지) */
.gh-footer__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.gh-footer__contact {
grid-column: 3;
grid-row: 1;
margin: 0;
text-align: right;
font-size: 0.9375rem;
color: var( --gh-muted );
}
.gh-footer__contact a {
color: var( --gh-cream );
text-decoration: none;
transition: color 0.2s var( --gh-ease );
}
.gh-footer__contact a:hover,
.gh-footer__contact a:focus-visible {
color: var( --gh-gold );
}
.gh-footer__sep {
margin: 0 12px;
color: var( --gh-muted );
}
.gh-footer__copy {
grid-column: 2;
grid-row: 1;
margin: 0;
text-align: center;
font-size: 0.8125rem;
color: var( --gh-muted );
}
/* Astra '맨 위로' 버튼 — 배경 진한 주황(amber)으로(부모 테마 인라인 스타일 오버라이드) */
#ast-scroll-top {
background-color: var( --gh-amber ) !important;
color: var( --gh-cream ) !important; /* 어두워진 배경 위 화살표 대비 */
}
/* ============================================================
등장 애니메이션 (CSS 전용, 로드 시 1회) — 페이드 + 슬라이드업
============================================================ */
.gh-reveal {
opacity: 0;
animation: gh-reveal-in 0.8s var( --gh-ease ) forwards;
}
.gh-hero__title.gh-reveal { animation-delay: 0.1s; }
.gh-hero__cta.gh-reveal { animation-delay: 0.28s; }
@keyframes gh-reveal-in {
from { opacity: 0; transform: translateY( 16px ); }
to { opacity: 1; transform: translateY( 0 ); }
}
/* ============================================================
모션 최소화 존중
============================================================ */
@media ( prefers-reduced-motion: reduce ) {
.gh-header,
.gh-header__inner,
.gh-menu > .menu-item > a::after,
.gh-menu .sub-menu,
.gh-menu .menu-item-has-children > a::before,
.gh-mobile-overlay,
.gh-nav-toggle__bar {
transition: none !important;
}
.gh-reveal {
opacity: 1;
animation: none !important;
}
}
/* ============================================================
내부 페이지 (블로그 글 / 서비스) — 크림 배경 + 솔리드 어두운 헤더
홈은 어두운 무대 위라 반투명이지만, 크림 페이지에선 헤더가 비쳐서
메뉴(아이보리)가 안 보인다. --over 가 없는 헤더만 솔리드로 채운다.
============================================================ */
/* 내부 페이지 body 배경도 크림 — sticky 헤더가 맨 위에서 본문보다 위에 있어
투명해진 헤더 아랫부분으로 body 기본 흰 배경이 비치는 것을 막는다. */
body:not( .home ) {
background-color: var( --gh-cream );
}
.gh-main:not( .gh-main--hero ) {
background-color: var( --gh-cream );
min-height: calc( 100vh - var( --gh-header-h ) );
}
/* 서비스 페이지(page)는 흰 배경 — 블로그 글(크림)과 구분. 헤더도 흰색으로 맞춤. */
body.page,
body.page .gh-main:not( .gh-main--hero ),
body.page .gh-header:not( .gh-header--over ) {
background-color: var( --gh-white );
}
/* 단, Blog 목록 페이지(3433)는 블로그 글처럼 크림 배경 + 동일 헤더(사용자 요청).
위 흰 배경 규칙과 특정성이 같으므로 반드시 뒤에 와서 이긴다. */
body.page-id-3433,
body.page-id-3433 .gh-main:not( .gh-main--hero ),
body.page-id-3433 .gh-header:not( .gh-header--over ) {
background-color: var( --gh-cream ); /* 헤더도 본문과 같은 불투명 크림 → 이음새 없음 */
}
/* GOLDEN ARTICLE 제목 — 금속 황금 그라데이션(밝은 금→진한 금→반짝임). background-clip:text. */
body.page-id-3433 .gh-page-slogan {
color: #D99E2A; /* 폴백(clip 미지원 브라우저) */
background: linear-gradient( 175deg, #FAE1A0 0%, #EFC155 40%, #DBA034 56%, #F7D585 100% );
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 서비스 페이지 텍스트 완전 검정 — 사용자 요청(CLAUDE.md 순흑 금지의 명시적 예외).
ink 계열 토큰을 페이지 범위에서 #000 으로 재정의 → 제목·본문·강조·번호가 검정.
주황 액센트(박스 제목·링크·마커)는 --gh-orange/--gh-deep 사용이라 그대로 유지된다. */
body.page .gh-page {
--gh-ink: #000000;
--gh-ink-2: #000000;
}
/* 서비스 페이지 폰트 — 원본과 동일하게 프리텐다드 무게별 패밀리 사용.
(본문 Light 300 / 제목 700 / 슬로건 900). 로컬 설치 폰트 의존은 원본과 동일. */
body.page .gh-page .entry-content {
font-family: '프리텐다드 300', var( --gh-font );
}
body.page .gh-page .entry-content strong,
body.page .gh-page .entry-content h2,
body.page .gh-page .entry-content h3 {
font-family: '프리텐다드 700', var( --gh-font );
}
body.page .gh-page .entry-content .gh-page-slogan {
font-family: '프리텐다드 900', var( --gh-font );
}
/* 박스 제목("가능합니다 !")도 슬로건과 같은 굵기(프리텐다드 900) */
body.page .gh-page .entry-content .gh-box h2 {
font-family: '프리텐다드 900', var( --gh-font );
font-weight: 900;
}
.gh-header:not( .gh-header--over ) {
/* 무색 헤더 — 페이지와 같은 크림(불투명). 헤더 바는 안 보이지만
불투명이라 스크롤 시 본문이 헤더 뒤로 비쳐 겹치지 않는다. */
background-color: var( --gh-cream );
background-image: none;
border-bottom: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* 무색 헤더 위 — 로고(base 주황 유지) + 메뉴를 주황으로 통일 */
.gh-header:not( .gh-header--over ) .gh-menu .menu-item > a {
color: var( --gh-orange );
}
.gh-header:not( .gh-header--over ) .gh-menu .menu-item > a:hover,
.gh-header:not( .gh-header--over ) .gh-menu .menu-item > a:focus-visible,
.gh-header:not( .gh-header--over ) .gh-menu .current-menu-item > a {
color: var( --gh-orange-lt );
}
.gh-header:not( .gh-header--over ) .gh-menu > .menu-item > a::after {
background: var( --gh-orange-lt );
}
/* 무색 헤더의 드롭다운 패널 — 로고와 같은 주황 배경 + 각진 모서리 + 어두운 글씨 */
.gh-header:not( .gh-header--over ) .gh-menu .sub-menu {
background: rgba( 184, 106, 20, 0.65 ); /* 더 깊은 앰버(#B86A14), 65% 불투명(35% 투명) */
border-color: rgba( 196, 85, 42, 0.30 );
border-radius: 0;
}
.gh-header:not( .gh-header--over ) .gh-menu .sub-menu .menu-item > a {
color: var( --gh-ink );
border-radius: 0;
}
.gh-header:not( .gh-header--over ) .gh-menu .sub-menu .menu-item > a:hover,
.gh-header:not( .gh-header--over ) .gh-menu .sub-menu .menu-item > a:focus-visible {
background: rgba( 255, 255, 255, 0.35 );
color: var( --gh-ink );
}
/* 홈 히어로(어두운 무대 위, --over) 헤더 메뉴도 주황색으로 (사용자 요청).
어두운 배경 위라 주황이 잘 보인다. base 아이보리 규칙을 덮는다(특정성 우위). */
.gh-header--over .gh-menu .menu-item > a {
color: var( --gh-orange );
}
.gh-header--over .gh-menu .menu-item > a:hover,
.gh-header--over .gh-menu .menu-item > a:focus-visible,
.gh-header--over .gh-menu .current-menu-item > a {
color: var( --gh-orange-lt );
}
.gh-header--over .gh-menu > .menu-item > a::after {
background: var( --gh-orange-lt );
}
/* 홈 헤더 드롭다운 패널도 내부 페이지와 동일하게 — 주황 배경·각진 모서리·어두운 글씨. */
.gh-header--over .gh-menu .sub-menu {
background: rgba( 184, 106, 20, 0.65 ); /* 더 깊은 앰버(#B86A14), 65% 불투명(35% 투명) */
border-color: rgba( 196, 85, 42, 0.30 );
border-radius: 0;
}
.gh-header--over .gh-menu .sub-menu .menu-item > a {
color: var( --gh-ink );
border-radius: 0;
}
.gh-header--over .gh-menu .sub-menu .menu-item > a:hover,
.gh-header--over .gh-menu .sub-menu .menu-item > a:focus-visible {
background: rgba( 255, 255, 255, 0.35 );
color: var( --gh-ink );
}
/* ============================================================
블로그 글 (single) — 읽는 화면. 노을 아래 앉아 읽는 톤.
본문 스타일은 .entry-content 에 걸어 구텐베르크 표준 블록을 그대로 받는다.
============================================================ */
.gh-article,
.gh-page {
max-width: 1240px;
margin: 0 auto;
padding: clamp( 40px, 7vw, 88px ) 24px clamp( 64px, 10vw, 120px );
font-family: var( --gh-font );
color: var( --gh-ink-2 );
}
/* 서비스 페이지는 일반 본문을 더 넓게(1450). 컬럼 블록은 그 안에서 1400으로 좁혀
(아래 .wp-block-columns) → 일반 본문 > 컬럼 순으로 넓다. */
.gh-page {
max-width: 1450px;
padding-bottom: 50px; /* 서비스 페이지 하단 여백(마지막 요소 아래) */
}
/* 블로그 글은 원문의 문장-단위 줄바꿈이 한 줄에 들어가도록 조금 더 넓게(1240→1300). */
.gh-article {
max-width: 1300px;
}
.gh-article__head,
.gh-page__head {
margin-bottom: clamp( 28px, 5vw, 44px );
}
.gh-article__date {
display: block;
margin-bottom: 16px;
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var( --gh-ink-mut );
}
.gh-article__title,
.gh-page__title {
margin: 0;
font-size: clamp( 28px, 5vw, 44px );
line-height: 1.3;
letter-spacing: -0.03em;
font-weight: 700;
color: var( --gh-ink );
}
.gh-article__media,
.gh-page__media {
margin: 0 0 clamp( 32px, 5vw, 52px );
}
.gh-article__media img,
.gh-page__media img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
/* 블로그 대표이미지 — 전폭으로 늘리지 않고 적당한 크기로 가운데. 작은 이미지 과확대 방지. */
.gh-article__media img {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* 본문 맨 아래로 옮긴 대표이미지(single.php) — 아래 여백 대신 위 여백으로 본문과 띄운다. */
.gh-article__media--foot {
margin: clamp( 44px, 6vw, 64px ) 0 0;
}
/* 버튼 블록 — 브랜드 주황 */
.entry-content .wp-block-buttons {
margin-top: 1.8em;
display: flex;
justify-content: center; /* CTA 버튼 가운데 정렬 */
}
/* 유형 카드 다음 문의 버튼은 카드와 70px 간격 */
.entry-content .gh-tier-cards + .wp-block-buttons {
margin-top: 70px;
}
/* 지그재그(박스 없는 문답 등) 바로 다음에 오는 문의 버튼 — 기본(약 34px)보다 넉넉히 띄운다.
섹션을 닫는 CTA 가 위 마지막 블록에 붙지 않게. */
.entry-content .gh-zigzag + .wp-block-buttons {
margin-top: 59px;
}
.entry-content .wp-block-button__link {
display: inline-block;
background-color: var( --gh-orange );
color: var( --gh-white );
border: 0;
border-radius: 10px; /* 조금 더 둥근 모서리 */
padding: 15px 32px;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
transition: background-color 0.2s var( --gh-ease );
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible {
background-color: var( --gh-deep );
color: var( --gh-white );
}
/* 컬럼(좌/우 분할) 블록 — 상단 여백 정리 + 각 칼럼 첫 요소는 위 여백 제거해
좌우 칼럼이 같은 높이에서 시작하도록. */
.entry-content .wp-block-columns {
margin-top: 1.6em;
gap: 64px; /* 칼럼 사이 간격 — 기본보다 넓혀 좌/우가 가운데서 붙지 않게 */
/* 컬럼 블록은 1400으로 좁혀 본문(page 1450) 안에 가운데 정렬 → 본문 > 컬럼. */
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.entry-content .wp-block-column > *:first-child {
margin-top: 0;
}
/* 화면에서만 숨김(SEO·스크린리더는 유지) — 서비스 페이지 제목 h1 등 */
.gh-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;
}
/* 페이지 슬로건 — 크게 가운데 정렬(히어로) */
.entry-content .gh-page-slogan {
margin-top: 0.2em;
margin-bottom: 0.8em;
text-align: center;
font-size: clamp( 24px, 3.6vw, 40px );
line-height: 1.45;
font-weight: 800;
letter-spacing: -0.02em;
color: var( --gh-ink );
}
/* 슬로건 클래스는 가운데 정렬이 기본이지만, 블록에서 정렬을 지정했으면 그쪽을 존중한다.
(구텐베르크의 has-text-align-* 는 특정성이 낮아 위 규칙에 그냥 지므로 여기서 되살린다) */
.entry-content .gh-page-slogan.has-text-align-left {
text-align: left;
}
.entry-content .gh-page-slogan.has-text-align-right {
text-align: right;
}
/* 구분선 바로 뒤 슬로건은 구분선과 너무 붙지 않게 위 여백 +50px */
.entry-content .wp-block-separator + .gh-page-slogan {
margin-top: calc( 0.2em + 50px );
}
/* 슬로건 바로 뒤 컬럼 섹션은 슬로건과 세로 간격 40px 축소 */
.entry-content .gh-page-slogan + .wp-block-columns {
margin-top: calc( 1.6em - 80px );
}
/* 구분선 바로 뒤 컬럼 — 세로 가운데 정렬(are-vertically-aligned-center)이면 짧은 쪽 칼럼이
이미 위 여백(칼럼 높이차의 절반)을 갖는다. 여기에 컬럼 여백 + 구분선 아래 여백(20px)까지
더해지면 구분선 ↔ 박스가 130px 넘게 벌어진다. 구분선 여백만 상쇄해 간격을 100px 로 맞춘다. */
.entry-content .wp-block-separator + .wp-block-columns {
margin-top: -20px;
}
/* 좁은 본문 폭 — 한 줄이 너무 길면 눈이 다음 줄 첫 글자를 놓친다.
긴 설명 문단·목록을 감싸는 그룹에 준다. (그룹 블록 기본 padding 100px 은 눌러야 한다)
폭 1100 = 글줄 1000 + 카드 좌우 여백 50×2. 카드가 떠도 글줄 길이는 그대로다. */
.entry-content .gh-narrow {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
/* 순차 부상(캐스케이드) — 위 칼럼에 호버하면 설명(1.5s)·체크리스트(5s)가 차례로 카드가 된다.
해결 슬로건과 같은 여백·모서리·그림자를 쓰고, 여기서도 padding 은 '항상' 갖고 있어
카드가 떠도 글자가 밀리지 않는다. 딜레이는 켜질 때만 걸고 꺼질 때는 즉시 사라진다. */
.entry-content .gh-narrow > p,
.entry-content .gh-narrow > ul {
padding: 40px 50px;
border-radius: 18px;
background: transparent;
box-shadow: none;
transition: background 0.35s var( --gh-ease ), box-shadow 0.35s var( --gh-ease ),
transform 0.35s var( --gh-ease );
transition-delay: 0s;
}
/* 위 칼럼에 호버 → 아래로 차례차례 (설명 1.3s → 체크리스트 3s) */
.entry-content .gh-cascade:hover + .gh-narrow > p {
background: var( --gh-white );
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
transform: translateY( -6px );
transition-delay: 1.3s;
}
.entry-content .gh-cascade:hover + .gh-narrow > ul {
background: var( --gh-white );
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
transform: translateY( -6px );
transition-delay: 3s;
}
/* 그 파트에 직접 마우스를 대면 순서를 기다리지 않고 그 파트가 곧바로 뜨고, */
.entry-content .gh-narrow > p:hover,
.entry-content .gh-narrow > ul:hover {
background: var( --gh-white );
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
transform: translateY( -6px );
transition-delay: 0s;
}
/* 이어서 다음 파트가 뜬다. 1.7s = 3s − 1.3s, 위에서 시작했을 때의 파트 간 간격과 같다.
어디서 시작하든 '다음 것까지의 리듬'이 동일하게 유지된다. */
.entry-content .gh-narrow > p:hover ~ ul {
background: var( --gh-white );
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
transform: translateY( -6px );
transition-delay: 1.7s;
}
@media ( prefers-reduced-motion: reduce ) {
.entry-content .gh-narrow > p,
.entry-content .gh-narrow > ul {
transition: none;
}
.entry-content .gh-cascade:hover + .gh-narrow > p,
.entry-content .gh-cascade:hover + .gh-narrow > ul,
.entry-content .gh-narrow > p:hover,
.entry-content .gh-narrow > ul:hover,
.entry-content .gh-narrow > p:hover ~ ul {
transform: none;
}
}
/* 좁은 본문 뒤 구분선 — 기본 20px 은 목록 끝과 붙어 보인다. 섹션 사이 규칙값(100px)으로. */
.entry-content .gh-narrow + .wp-block-separator {
margin-top: 100px;
}
/* 유형 카드 — 컬럼 블록에 gh-tier-cards 클래스를 주면 각 칼럼이 카드가 된다.
배경색 없이(흰 페이지 위 흰 카드) 그림자로 입체감. */
.entry-content .gh-tier-cards .wp-block-column {
padding: 32px 30px;
background: var( --gh-white );
border: 1px solid var( --gh-orange ); /* 밝은 주황 테두리 */
border-radius: 16px; /* 더 둥근 모서리 */
box-shadow: 0 10px 30px rgba( 28, 22, 20, 0.12 );
}
/* 흐름 카드(.gh-tier-cards--flow) — 3단계 프로세스용. gh-tier-cards 와 함께 준다.
카드 폭을 조금 줄이고(1400→1260) 칼럼 사이에 주황 화살표를 넣어 순서를 드러낸다.
화살표는 ::after + SVG mask 라 마크업이 늘지 않고(SEO 영향 0) 색은 토큰으로 제어된다. */
.entry-content .gh-tier-cards--flow {
max-width: 1260px;
gap: 72px;
}
/* 4단계 프로세스 변형 — 카드가 4장이면 폭을 조금 넓혀(1260→1340) 카드 제목이 한 줄에 들어오게.
3단계용 기본 폭은 그대로 두고 이 변형에서만 넓힌다(다른 페이지 3카드에 영향 없음). */
.entry-content .gh-tier-cards--flow.gh-tier-cards--w4 {
max-width: 1340px;
}
.entry-content .gh-tier-cards--flow .wp-block-column {
position: relative;
}
.entry-content .gh-tier-cards--flow .wp-block-column:not( :last-child )::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 36px;
height: 24px;
margin-left: 36px; /* 칼럼 간격(72)의 절반 → 간격 한가운데 */
transform: translate( -50%, -50% );
background-color: var( --gh-orange );
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 12H35M25 3L35 12L25 21' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 12H35M25 3L35 12L25 21' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 칼럼이 세로로 쌓이는 폭(코어 기준 781px)에서는 화살표도 아래를 향하게 */
@media ( max-width: 781px ) {
.entry-content .gh-tier-cards--flow .wp-block-column:not( :last-child )::after {
top: 100%;
left: 50%;
margin-left: 0;
margin-top: 18px;
transform: translate( -50%, -50% ) rotate( 90deg );
}
}
/* 카드 최상단 제목 — 가운데 정렬 + 밝은 주황 */
.entry-content .gh-tier-cards .wp-block-column h3 {
text-align: center;
color: var( --gh-orange );
}
/* 카드 부제(경우 설명)도 가운데 정렬 */
.entry-content .gh-tier-cards .wp-block-column p {
text-align: center;
}
/* 카드 컨테이너 기본 padding(100px) 제거 — 카드가 밀리지 않게(슬로건↔카드 70px 유지) */
.entry-content .gh-tier-cards {
padding: 0;
}
/* ── 서비스 클러스터 카드(.gh-tier-cards--svc) — gh-tier-cards 와 함께 준다.
허브 페이지: 카드마다 제목 + 부제 + 혜택 체크리스트 + 하단 '더 알아보기' 버튼.
카드 높이를 맞추고(flex) 버튼을 바닥에 정렬해 길이가 달라도 버튼 줄이 맞는다. */
/* 1x3 그리드 — 카드가 3개를 넘으면 다음 줄로 넘어간다(예: 4개 → 3 + 1). */
.entry-content .gh-tier-cards--svc {
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: 32px;
}
/* 슬로건 → 클러스터 카드 간격 — 기본 '슬로건 + 컬럼' 음수 마진(2컬럼 레이아웃용)을 덮어
카드가 슬로건과 겹치지 않게 양수 70px 로 띄운다. (같은 특정성이라 이 규칙이 뒤에 와서 이긴다) */
.entry-content .gh-page-slogan + .gh-tier-cards--svc {
margin-top: 70px;
}
.entry-content .gh-tier-cards--svc .wp-block-column {
display: flex;
flex-direction: column;
transition: transform 0.25s var( --gh-ease ), box-shadow 0.25s var( --gh-ease );
}
/* 카드 호버 — 부상(살짝 위로 + 그림자 깊게). 준비중 카드는 제외(비활성). */
.entry-content .gh-tier-cards--svc .wp-block-column:not( .gh-soon ):hover {
transform: translateY( -6px );
box-shadow: 0 20px 46px rgba( 28, 22, 20, 0.20 );
}
@media ( prefers-reduced-motion: reduce ) {
.entry-content .gh-tier-cards--svc .wp-block-column {
transition: none;
}
.entry-content .gh-tier-cards--svc .wp-block-column:not( .gh-soon ):hover {
transform: none;
}
}
/* 부제 — 제목 바로 아래 한 줄. 가운데·차분한 회색, 체크리스트와 간격 */
.entry-content .gh-tier-cards--svc .wp-block-column > h3 + p {
text-align: center;
color: var( --gh-ink-mut );
font-size: 0.95rem;
font-weight: 400;
margin-top: 0.4em;
margin-bottom: 0.2em; /* 부제 ↔ 체크목록 간격 축소(카드가 flex라 목록 위 여백과 합산됨) */
}
/* 부제 아래 체크목록 위 여백도 줄여 부제↔목록 간격을 더 좁힌다(기본 블록 여백 ~27px → 12px) */
.entry-content .gh-tier-cards--svc .wp-block-column > .gh-check-list {
margin-top: 12px;
}
/* 하단 버튼 — 카드 바닥에 붙이고 폭 꽉 채움 */
.entry-content .gh-tier-cards--svc .wp-block-column .wp-block-buttons {
margin-top: auto;
padding-top: 24px;
}
.entry-content .gh-tier-cards--svc .wp-block-column .wp-block-button {
width: 100%;
}
.entry-content .gh-tier-cards--svc .wp-block-column .wp-block-button__link {
display: block;
width: 100%;
text-align: center;
}
/* 준비중 카드(.gh-soon) — 회색으로 죽여 '예정' 임을 드러낸다. 링크는 비활성. */
.entry-content .gh-tier-cards--svc .gh-soon {
border-color: var( --gh-hairline );
box-shadow: none;
}
.entry-content .gh-tier-cards--svc .gh-soon h3 {
color: var( --gh-ink-mut );
}
.entry-content .gh-tier-cards--svc .gh-soon .wp-block-button__link {
background: var( --gh-hairline );
color: var( --gh-ink-mut );
pointer-events: none;
cursor: default;
}
/* ── 준비중 페이지(.gh-coming / .gh-coming-sub) — 슬로건 + 안내 + 버튼.
실제 콘텐츠가 아직 없는 서비스의 자리표시 페이지용. 안내 줄은 회색·넓은 줄간격. */
.entry-content .gh-coming-sub {
text-align: center;
color: var( --gh-ink-mut );
font-size: 1.0625rem;
line-height: 1.9;
margin-top: 24px;
margin-bottom: 44px;
}
/* ── 블로그 목록 카드 그리드(.gh-blog-grid) — 쿼리 루프 블록에 준다.
각 글이 대표이미지 + 제목 + 날짜 + 발췌 카드로. 호버 부상. */
.entry-content .gh-blog-grid .wp-block-post-template {
gap: 32px;
margin: 0;
padding: 0;
}
.entry-content .gh-blog-grid .wp-block-post {
display: flex;
flex-direction: column;
background: var( --gh-white );
border: 1px solid var( --gh-gold-lo );
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba( 28, 22, 20, 0.08 );
transition: transform 0.25s var( --gh-ease ), box-shadow 0.25s var( --gh-ease );
}
.entry-content .gh-blog-grid .wp-block-post:hover {
transform: translateY( -6px );
box-shadow: 0 20px 46px rgba( 28, 22, 20, 0.16 );
}
.entry-content .gh-blog-grid .wp-block-post-featured-image {
margin: 0;
}
.entry-content .gh-blog-grid .wp-block-post-featured-image img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.entry-content .gh-blog-grid .wp-block-post-title {
margin: 22px 22px 0;
font-size: 1.15rem;
line-height: 1.5;
font-weight: 700;
}
.entry-content .gh-blog-grid .wp-block-post-title a {
color: var( --gh-ink );
text-decoration: none;
transition: color 0.2s var( --gh-ease );
}
.entry-content .gh-blog-grid .wp-block-post-title a:hover {
color: var( --gh-orange );
}
.entry-content .gh-blog-grid .wp-block-post-date {
margin: 10px 22px 0;
color: var( --gh-ink-mut );
font-size: 0.85rem;
}
.entry-content .gh-blog-grid .wp-block-post-excerpt {
margin: 12px 22px 24px;
}
.entry-content .gh-blog-grid .wp-block-post-excerpt__excerpt {
color: var( --gh-ink-2 );
font-size: 0.95rem;
line-height: 1.7;
}
.entry-content .gh-blog-grid .wp-block-post-excerpt__more-text {
display: none; /* '더 읽기'는 카드 전체가 링크라 생략 */
}
/* 블로그 목록 제목과 그리드 사이 간격 */
.entry-content .gh-page-slogan + .gh-blog-grid {
margin-top: 60px;
}
/* 페이지 넘김 — 글이 6개(perPage) 초과 시 나타난다. 알약형 버튼, 현재 페이지 주황. */
.entry-content .gh-blog-pagination {
margin-top: 52px;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.entry-content .gh-blog-pagination a,
.entry-content .gh-blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
border: 1px solid var( --gh-hairline );
border-radius: 8px;
color: var( --gh-ink-2 );
font-size: 0.95rem;
text-decoration: none;
transition: color 0.2s var( --gh-ease ), border-color 0.2s var( --gh-ease ), background 0.2s var( --gh-ease );
}
.entry-content .gh-blog-pagination a:hover {
border-color: var( --gh-orange );
color: var( --gh-orange );
}
.entry-content .gh-blog-pagination .page-numbers.current {
background: var( --gh-orange );
border-color: var( --gh-orange );
color: var( --gh-white );
font-weight: 700;
}
.entry-content .gh-blog-pagination .page-numbers.dots {
border-color: transparent;
}
/* 카드 다음 슬로건 — 카드에서 충분히 떨어져야 '정리하는 문장'으로 읽힌다 */
.entry-content .gh-tier-cards + .gh-page-slogan {
margin-top: 58px;
}
/* 슬로건 안의 부연 줄 — 굵기·색은 슬로건 그대로 두고 크기만 한 단계 낮춘다.
em 이라 슬로건이 clamp 로 줄어들면 이 줄도 같은 비율로 따라간다. */
.entry-content .gh-page-slogan .gh-slogan-sub {
font-size: 0.8em;
}
/* 슬로건 바로 뒤 버튼 — 문장이 끝나고 행동으로 넘어가는 자리라 여백을 넉넉히 */
.entry-content .gh-page-slogan + .wp-block-buttons {
margin-top: 50px;
}
/* 페이지 끝 마크 — 대표 이미지를 본문 맨 아래에 둔다.
첫 화면은 슬로건이 잡고(page.php 는 대표 이미지를 출력하지 않는다), 이미지는 맺음말 자리에서
만난다. 실제 ![]()
라 이미지 검색에서 이 페이지와의 연결도 유지된다. */
/* figure 가 display:table (내용 크기) 이라 가운데 정렬은 figure 자체의 자동 여백으로 잡는다.
코어의 .aligncenter 규칙이 이 테마엔 없어서 margin 이 0 으로 남는다. */
.entry-content .gh-page-mark {
margin: 70px auto 0;
}
.entry-content .gh-page-mark img {
height: auto;
}
/* 가로 그림자 박스 — 폭은 내용에 맞춤(fit-content) + 좌우 50px 여백 규칙.
지그재그(좌/우 번갈아). gh-box 와 같은 그림자. */
.entry-content .gh-wide-box {
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin-top: 70px; /* 박스 ↔ 박스 간격 */
padding: 40px 50px; /* 내용 기준 여백 규칙(위아래 40 / 좌우 50) */
background: var( --gh-white );
border-radius: 18px;
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
}
.entry-content .gh-wide-box > *:first-child {
margin-top: 0;
}
.entry-content .gh-wide-box--right {
text-align: right;
}
/* 가운데 정렬 변형 — fit-content 박스를 가로 가운데에 놓는다.
gh-wide-box 는 기본이 왼쪽 정렬(지그재그에서 짝수만 오른쪽)이라, 단독으로 쓸 때 준다. */
.entry-content .gh-wide-box--center {
margin-left: auto;
margin-right: auto;
}
/* 넓은 변형 — fit-content 대신 고정 폭(930). 히어로 아래 단독으로 놓이는 설명 박스처럼
줄바꿈을 직접 잡아 넓게 펼쳐야 할 때. 좁은 화면에서는 max-width:100% 가 그대로 먹는다. */
.entry-content .gh-wide-box--w2 {
width: 930px;
}
/* 낮은 변형 — 위아래 여백만 40 → 28 로 줄인다(좌우 50 은 그대로).
폭이 넓어 줄 수가 적은 박스는 기본 여백이면 위아래가 헐거워 보인다. */
.entry-content .gh-wide-box--tight {
padding-top: 28px;
padding-bottom: 28px;
}
/* 큰 글씨 변형 — 박스 안 문단을 28 → 32 로. 단독으로 놓이는 설명 박스는
주변 본문(17)과 위계 차이를 더 벌려야 시선이 먼저 간다.
굵기는 슬로건과 같은 900. 프리텐다드는 무게별로 패밀리가 갈려 있어
font-weight 만 올리면 안 먹는다 — 패밀리도 '프리텐다드 900' 으로 바꿔야 한다. */
.entry-content .gh-wide-box.gh-wide-box--lg p {
font-size: clamp( 24px, 3.8vw, 32px );
font-weight: 900;
}
body.page .gh-page .entry-content .gh-wide-box.gh-wide-box--lg p {
font-family: '프리텐다드 900', var( --gh-font );
}
/* 그림자 박스 다음 구분선 — 박스 그림자(아래로 약 50px)에 선이 가리지 않게 위 여백을 준다.
(.gh-zigzag + 구분선은 100px 규칙이 따로 있다.) */
.entry-content .gh-wide-box + .wp-block-separator {
margin-top: 50px;
}
/* 카드 줄 다음 구분선 — 기본 20px 은 카드 그림자에 선이 붙어 보인다.
지그재그와 같은 100px 로 맞춰 섹션 사이 호흡을 통일한다. */
.entry-content .gh-tier-cards + .wp-block-separator,
/* 버튼(CTA) 다음 구분선도 동일 — 섹션을 닫는 CTA 가 다음 섹션 선에 붙지 않게. */
.entry-content .wp-block-buttons + .wp-block-separator {
margin-top: 100px;
}
/* 박스 없는 지그재그(.gh-zigzag--plain) — 배경·그림자·패딩·둥근모서리만 제거.
좌우 교차(nth-child)와 제목 타이포는 gh-wide-box 규칙 그대로 유지. */
.entry-content .gh-zigzag--plain > .gh-wide-box {
padding: 0;
background: none;
border-radius: 0;
box-shadow: none;
}
/* 박스 없는 지그재그의 하위 섹션 슬로건 — 원본과 동일: 30px / 프리텐다드 700 / 그림자.
(그림자 색은 순흑 대신 코드베이스 관례인 따뜻한 다크 28,22,20 — 육안상 동일) */
body.page .gh-page .entry-content .gh-zigzag--plain .gh-wide-box h3 {
font-size: clamp( 24px, 3vw, 30px );
font-family: '프리텐다드 700', var( --gh-font );
font-weight: 700;
text-shadow: rgba( 28, 22, 20, 0.3 ) 5px 11px 8px;
}
/* h2 로 쓰는 경우(위계 h1→h2 유지) — 크기·굵기는 위 h3 와 동일(30px/700).
그림자는 넣지 않는다(이 페이지 톤). 그림자가 필요하면 제목에 gh-text-shadow 를 따로 준다. */
body.page .gh-page .entry-content .gh-zigzag--plain .gh-wide-box h2 {
font-size: clamp( 24px, 3vw, 30px );
font-family: '프리텐다드 700', var( --gh-font );
font-weight: 700;
}
/* 강조 문구(span.gh-hl) — 밝은 주황, 호버 시 청록 */
.entry-content .gh-hl {
color: var( --gh-orange );
transition: color 0.2s var( --gh-ease );
}
.entry-content .gh-hl:hover {
color: var( --gh-teal );
}
/* 대비 강조 — 멈춤(위험, 크림 위 따뜻한 적색)·작동(회복, 청록).
히어로 슬로건 "멈춰 있던 … 다시 움직이게 하겠습니다"의 상태 대비용. */
.entry-content .gh-stop {
color: var( --gh-red );
}
.entry-content .gh-go {
color: var( --gh-teal );
}
/* 텍스트 그림자 — 원본(엘리멘터) 본문 제목이 쓰던 값(5px 11px 8px / 30%)을 그대로 옮긴 것.
제목 블록의 "추가 CSS 클래스"에 준다. 색만 순흑 대신 따뜻한 어둠(--gh-dark 28,22,20)으로.
30% 알파라 육안 차이는 없고, 이 파일의 다른 그림자(gh-box·gh-wide-box)와 같은 계열이 된다. */
.entry-content .gh-text-shadow {
text-shadow: 5px 11px 8px rgba( 28, 22, 20, 0.3 );
}
/* 또렷한 변형 — 원본이 섹션 슬로건(Q&A·서비스 선택)에 쓰던 값(8px 11px 5px).
더 멀리 밀리고 덜 번져서 큰 글씨에서 윤곽이 또렷하다. .gh-text-shadow 대신 준다. */
.entry-content .gh-text-shadow--hard {
text-shadow: 8px 11px 5px rgba( 28, 22, 20, 0.3 );
}
/* 지그재그 컨테이너 — 안의 박스가 짝수번째면 오른쪽 정렬(개수 무관 자동).
첫 박스는 위 여백 제거(컨테이너가 슬로건 아래 50px 간격을 담당). */
.entry-content .gh-zigzag {
margin-top: 100px; /* 메인 슬로건 ↔ 첫 박스 간격 */
padding: 0; /* 그룹 블록 기본 padding(100px) 제거 — 첫 박스가 밀리지 않게 */
}
/* 안쪽 여백 변형(.gh-zigzag--inset) — 좌우 끝에 붙는 지그재그 블록을 안쪽으로 당긴다.
왼쪽 블록은 오른쪽으로, 오른쪽(margin-left:auto) 블록은 왼쪽으로 각각 50px 이동.
base .gh-zigzag 의 padding:0 을 덮으므로 반드시 그 뒤에 온다. */
.entry-content .gh-zigzag--inset {
padding-left: 50px;
padding-right: 50px;
}
.entry-content .gh-zigzag > .gh-wide-box:first-child {
margin-top: 0;
}
/* 첫 항목이 이미지와 묶인 컬럼일 때도 위 여백은 컨테이너가 담당한다 */
.entry-content .gh-zigzag > .wp-block-columns:first-child,
.entry-content .gh-zigzag > .wp-block-columns:first-child .gh-wide-box {
margin-top: 0;
}
/* 지그재그 안 컬럼(박스 + 이미지)의 좌우 간격 — 기본 64px 은 박스와 이미지를 너무 떼어놓는다.
박스는 fit-content 라 칼럼 안에 남는 여백까지 더해져 실제 간격이 100px 을 넘는다. */
.entry-content .gh-zigzag > .wp-block-columns {
gap: 32px;
}
/* 첫 항목이 아닌 컬럼 항목의 위 여백 — 박스↔박스(70px)보다는 좁게, 맞닿아 보이지 않을 만큼.
(그룹 블록 기본 여백 30px 로는 앞 박스와 너무 붙는다) */
.entry-content .gh-zigzag > .wp-block-columns:not( :first-child ) {
margin-top: 56px;
}
/* 짝수 위치가 이미지와 묶인 컬럼이면, 박스를 칼럼 오른쪽 끝에 붙여 지그재그 흐름을 잇는다.
(박스는 fit-content 라 기본값이면 칼럼 왼쪽에 붙는다. 글자 정렬은 왼쪽 그대로) */
.entry-content .gh-zigzag > .wp-block-columns:nth-child( even ) .gh-wide-box {
margin-left: auto;
}
.entry-content .gh-zigzag > .gh-wide-box:nth-child( even ) {
text-align: right;
margin-left: auto; /* 짝수 박스는 오른쪽에 붙임 */
}
/* 박스 없는 지그재그의 짝수 박스 — 지그재그는 '배치'만 오른쪽이고, 글자는 왼쪽 정렬이 맞다.
위 규칙의 text-align:right 만 되돌린다(margin-left:auto 는 유지 → 박스는 그대로 오른쪽).
선택자 특정성이 위와 같으므로 반드시 위 규칙 '뒤'에 있어야 이긴다. */
.entry-content .gh-zigzag--plain > .gh-wide-box:nth-child( even ) {
text-align: left;
}
/* 본문 지그재그(.gh-zigzag--body) — .gh-zigzag--plain 과 함께 준다.
gh-wide-box 의 큰 타이포(p 28/700)는 슬로건용이라 설명 문단·목록에는 맞지 않는다.
제목은 h2 그대로 두어(위계 유지) 본문만 본문 크기로 되돌린다. */
.entry-content .gh-zigzag--body > .gh-wide-box p,
.entry-content .gh-zigzag--body > .gh-wide-box li {
font-size: 1.0625rem; /* 17px — .entry-content 본문과 동일 */
font-weight: 400;
}
body.page .gh-page .entry-content .gh-zigzag--body > .gh-wide-box p,
body.page .gh-page .entry-content .gh-zigzag--body > .gh-wide-box li {
font-family: '프리텐다드 300', var( --gh-font );
}
/* 지그재그 박스(그림자) 다음 구분선 — 박스 그림자에 가리지 않게 위 여백 100px */
.entry-content .gh-zigzag + .wp-block-separator {
margin-top: 100px;
}
/* 섹션 슬로건 — 메인 슬로건과 같은 크기·굵기·가운데. 아래 콘텐츠와 100px(규칙). */
.entry-content .gh-section-slogan {
font-size: clamp( 24px, 3.6vw, 40px );
line-height: 1.45;
text-align: center;
margin-bottom: 70px; /* 슬로건 아래 기본 간격(그림자 큰 지그재그는 자체 100px) */
}
/* 구분선 바로 뒤 섹션 슬로건 — 위 간격 50px 로 (기본 h2 여백이 너무 큼) */
.entry-content .wp-block-separator + .gh-section-slogan {
margin-top: 50px;
}
body.page .gh-page .entry-content .gh-section-slogan {
font-family: '프리텐다드 900', var( --gh-font );
font-weight: 900;
}
/* 가로 박스 안: 슬로건(h3)=메인 슬로건 크기 / 하위 슬로건(p)='저희도 가능할까요?'(h2) 크기·굵기 */
.entry-content .gh-wide-box h3 {
font-size: clamp( 24px, 3.6vw, 40px );
}
body.page .gh-page .entry-content .gh-wide-box h3 {
font-family: '프리텐다드 900', var( --gh-font );
font-weight: 900;
}
.entry-content .gh-wide-box p {
font-size: clamp( 22px, 3.4vw, 28px );
font-weight: 700;
}
body.page .gh-page .entry-content .gh-wide-box p {
font-family: '프리텐다드 700', var( --gh-font );
}
/* 이미지와 나란히 놓이는 Q&A 항목(.gh-qa-figure — 컬럼 블록에 준다).
기본값이면 컬럼 여백(30) + 박스 여백(70) + 세로 가운데 정렬 여백(약 100)이 겹쳐
앞뒤 간격이 200px 까지 벌어진다. 지그재그 박스 간격(70)에 맞춘다. */
.entry-content .gh-qa-figure {
margin-top: 70px;
padding: 0; /* 블록 기본 padding 100px 제거 — 이게 위아래 100씩 더해 200px 를 만든다 */
}
.entry-content .gh-qa-figure .gh-wide-box {
margin-top: 0;
}
.entry-content .gh-qa-figure + .gh-zigzag {
margin-top: 70px;
}
/* 이미지 40 / 박스 60. 칼럼 간격(64)을 절반씩 빼야 합이 정확히 100% 가 된다.
40%+60% 그대로 주면 gap 만큼 넘쳐 flex-wrap 으로 두 칼럼이 세로로 쌓인다. */
.entry-content .gh-qa-figure > .wp-block-column:first-child {
flex-basis: calc( 40% - 32px );
flex-grow: 0;
}
.entry-content .gh-qa-figure > .wp-block-column:last-child {
flex-basis: calc( 60% - 32px );
flex-grow: 0;
}
/* Q&A 지그재그 — .gh-zigzag 에 함께 주면 박스 안 글자를 문답 크기로 낮춘다.
질문(h3)이 여러 개 반복되므로 메인 슬로건(40px)을 그대로 쓰면 화면을 다 잡아먹는다.
질문 26 / 답 20 / 부연(.gh-qa-note) 17 로 위계만 남긴다. */
.entry-content .gh-qa .gh-wide-box h3 {
font-size: clamp( 19px, 2.2vw, 26px );
margin-bottom: 0.5em;
}
.entry-content .gh-qa .gh-wide-box p {
font-size: clamp( 17px, 1.7vw, 20px );
font-weight: 700;
margin-top: 0;
}
.entry-content .gh-qa .gh-qa-note {
margin-top: 0.9em;
font-size: 1rem;
font-weight: 400;
line-height: 1.8;
color: var( --gh-ink-2 );
}
body.page .gh-page .entry-content .gh-qa .gh-qa-note {
font-family: '프리텐다드 300', var( --gh-font );
}
/* 체크 리스트 — gh-check-list 클래스를 준 목록은 불렛 대신 오른쪽 획이 긴 체크(✓).
색은 밝은 주황(당근색). SVG 를 mask 로 써서 색은 토큰(var)으로 제어. */
.entry-content .gh-check-list {
list-style: none;
padding-left: 0;
}
.entry-content .gh-check-list li {
position: relative;
padding-left: 36px;
}
.entry-content .gh-check-list li::marker {
content: "";
}
.entry-content .gh-check-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.32em;
width: 24px;
height: 17px;
background-color: var( --gh-carrot );
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2 11L9 18L26 2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2 11L9 18L26 2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 근심 리스트 — gh-frown-list 클래스를 준 목록은 불렛 대신 근심 어린 얼굴(입 벌린 찡그림).
원본 "저희도 가능할까요?" 섹션의 fa-frown-open 을 참고. SVG mask 라 색은 토큰(var)으로 제어.
걱정을 말하는 목록이라 밝은 주황 대신 차분한 웜그레이(--gh-ink-mut)로 둔다. */
.entry-content .gh-frown-list {
list-style: none;
padding-left: 0;
}
.entry-content .gh-frown-list li {
position: relative;
padding-left: 40px;
}
.entry-content .gh-frown-list li::marker {
content: "";
}
.entry-content .gh-frown-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.12em;
width: 24px;
height: 24px;
background-color: var( --gh-ink-mut );
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='10.2' r='1.35' fill='%23000'/%3E%3Ccircle cx='15.5' cy='10.2' r='1.35' fill='%23000'/%3E%3Cpath d='M8.2 16.4 Q12 12.4 15.8 16.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='10.2' r='1.35' fill='%23000'/%3E%3Ccircle cx='15.5' cy='10.2' r='1.35' fill='%23000'/%3E%3Cpath d='M8.2 16.4 Q12 12.4 15.8 16.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 전구 리스트 — gh-bulb-list 클래스를 준 목록은 불렛 대신 전구(💡 아이디어·이유).
원본 "왜 받아야 되나요?" 섹션의 fa-lightbulb 를 참고. SVG mask 라 색은 토큰(var)으로 제어.
'이유·혜택'을 밝히는 목록이라 밝은 당근색(--gh-carrot)으로 둔다. */
.entry-content .gh-bulb-list {
list-style: none;
padding-left: 0;
}
.entry-content .gh-bulb-list li {
position: relative;
padding-left: 38px;
}
.entry-content .gh-bulb-list li::marker {
content: "";
}
.entry-content .gh-bulb-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.05em;
width: 22px;
height: 22px;
background-color: var( --gh-carrot );
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a6.5 6.5 0 0 0-4.2 11.45c.85.72 1.45 1.55 1.6 2.55h5.2c.15-1 .75-1.83 1.6-2.55A6.5 6.5 0 0 0 12 2.5z' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M9.6 19h4.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M10.6 21.4h2.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a6.5 6.5 0 0 0-4.2 11.45c.85.72 1.45 1.55 1.6 2.55h5.2c.15-1 .75-1.83 1.6-2.55A6.5 6.5 0 0 0 12 2.5z' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M9.6 19h4.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M10.6 21.4h2.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 그림자 박스 — 그룹 블록에 gh-box 클래스를 주면 둥근 모서리 + 그림자 박스가 된다.
폭을 좁혀 칼럼 안에서 가운데 정렬(콜아웃). */
.entry-content .gh-box {
max-width: 460px;
margin-left: auto;
margin-right: auto;
padding: 32px 30px;
background: var( --gh-white );
border-radius: 18px;
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
}
.entry-content .gh-box > *:first-child {
margin-top: 0;
}
/* 박스 제목("가능합니다 !") — 가운데 정렬 + 더 굵게 + 밝은 당근색 + 슬로건과 같은 크기 */
.entry-content .gh-box h2 {
text-align: center;
font-weight: 800;
color: var( --gh-carrot );
font-size: clamp( 24px, 3.6vw, 40px );
}
/* ── 문제(왼쪽) ↔ 해결(오른쪽) 2칼럼 ─────────────────────────
왼쪽 칼럼(.gh-ask)에 마우스를 올리면 오른쪽 해결 슬로건(.gh-solve 안)이 카드로 떠오른다.
"문제를 들여다보면 해결이 나타난다"를 인터랙션으로. CSS 만 쓰고 JS·라이브러리는 없다. */
.entry-content .gh-ask .gh-page-slogan {
font-size: clamp( 21px, 2.4vw, 30px );
line-height: 1.78; /* 기본 1.45 보다 넓게 — 세 줄이 답답하지 않게 */
margin-bottom: 0;
}
/* 최상단 라벨 — 크기·색·굵기는 아래 슬로건과 같게(gh-page-slogan 을 함께 준다).
이 클래스는 슬로건과의 간격만 담당한다. 위 규칙과 특정성이 같으므로 반드시 뒤에 둔다. */
.entry-content .gh-ask .gh-box-eyebrow {
margin: 0 0 12px;
}
/* 해결 슬로건 — 여백과 둥근 모서리는 '항상' 갖고 있고 배경·그림자만 나타난다.
호버 때 padding 이 생기면 글자가 밀리므로, 변하는 건 배경·그림자·살짝 뜨는 것뿐. */
.entry-content .gh-solve .gh-section-slogan {
padding: 40px 50px;
border-radius: 18px;
background: transparent;
box-shadow: none;
transition: background 0.35s var( --gh-ease ), box-shadow 0.35s var( --gh-ease ),
transform 0.35s var( --gh-ease );
}
.entry-content .gh-ask:hover + .gh-solve .gh-section-slogan,
.entry-content .gh-solve:hover .gh-section-slogan {
background: var( --gh-white );
box-shadow: 0 24px 55px rgba( 28, 22, 20, 0.22 ), 0 8px 18px rgba( 28, 22, 20, 0.12 );
transform: translateY( -6px );
}
/* 호버 때만 켜지는 강조 — 카드가 떠오를 때 같이 물든다. 기본은 본문색 그대로다.
(.gh-hl 은 '항상' 주황이라 여기엔 쓸 수 없어 별도 변형을 둔다) */
.entry-content .gh-hl--hover {
transition: color 0.35s var( --gh-ease );
}
.entry-content .gh-ask:hover + .gh-solve .gh-hl--hover,
.entry-content .gh-solve:hover .gh-hl--hover {
color: var( --gh-orange );
}
@media ( prefers-reduced-motion: reduce ) {
.entry-content .gh-solve .gh-section-slogan {
transition: none;
}
.entry-content .gh-ask:hover + .gh-solve .gh-section-slogan,
.entry-content .gh-solve:hover .gh-section-slogan {
transform: none;
}
}
/* 컬럼 안 섹션 슬로건 — 아래 70px 여백은 '다음 블록과의 간격'용이라 컬럼 안에서는 불필요 */
.entry-content .wp-block-column > .gh-section-slogan {
margin-bottom: 0;
}
/* 박스 안 번호 목록 — 숫자를 동그라미에 넣고 검정, 텍스트는 조금 더 굵게 */
.entry-content .gh-box ol {
list-style: none;
counter-reset: gh-box-num;
padding-left: 0;
}
.entry-content .gh-box ol li {
counter-increment: gh-box-num;
position: relative;
padding-left: 42px;
font-weight: 500;
}
.entry-content .gh-box ol li::before {
content: counter( gh-box-num );
position: absolute;
left: 0;
top: 0.05em;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba( 28, 22, 20, 0.07 );
color: var( --gh-ink );
font-size: 0.82em;
font-weight: 700;
}
/* ── 본문(entry-content) — 구텐베르크 표준 블록 ──────────── */
.entry-content {
font-size: 1.0625rem; /* 17px */
line-height: 1.9;
letter-spacing: -0.02em;
color: var( --gh-ink-2 );
}
.entry-content > *:first-child {
margin-top: 0;
}
.entry-content p {
margin: 1.4em 0 0;
}
.entry-content h2 {
margin: 2.2em 0 0;
padding-top: 0.4em;
font-size: clamp( 22px, 3.4vw, 28px );
line-height: 1.4;
letter-spacing: -0.02em;
font-weight: 700;
color: var( --gh-ink );
}
.entry-content h3 {
margin: 1.8em 0 0;
font-size: clamp( 18px, 2.6vw, 21px );
line-height: 1.5;
letter-spacing: -0.02em;
font-weight: 700;
color: var( --gh-ink );
}
/* 블로그 글 제목 — 원본 엘리멘터 제목의 드롭 섀도 재현(원본 값 8/8/6 그대로).
색은 순흑 대신 코드베이스 관례인 따뜻한 어둠 30%. .gh-article 스코프라 서비스 페이지엔 영향 없음.
(원본 제목 크기는 커스텀 없이 기본값이라 우리 테마 기본 크기 h2 28/h3 21 유지) */
.gh-article .entry-content h2,
.gh-article .entry-content h3 {
text-shadow: 8px 8px 6px rgba( 28, 22, 20, 0.3 );
}
.entry-content strong {
font-weight: 700;
color: var( --gh-ink );
}
.entry-content a {
color: var( --gh-deep );
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba( 196, 85, 42, 0.4 );
transition: text-decoration-color 0.2s var( --gh-ease );
}
.entry-content a:hover,
.entry-content a:focus-visible {
text-decoration-color: var( --gh-deep );
}
.entry-content ul,
.entry-content ol {
margin: 1.4em 0 0;
padding-left: 1.4em;
}
.entry-content li {
margin-top: 0.5em;
line-height: 1.8;
}
.entry-content li::marker {
color: var( --gh-deep );
}
.entry-content blockquote {
margin: 2.2em 0 0;
padding: 2px 0 2px 24px;
border-left: 3px solid var( --gh-orange );
font-size: 1.125rem;
line-height: 1.7;
color: var( --gh-ink );
}
.entry-content blockquote > *:first-child {
margin-top: 0;
}
.entry-content blockquote cite {
display: block;
margin-top: 0.8em;
font-size: 0.875rem;
font-style: normal;
color: var( --gh-ink-mut );
}
.entry-content figure {
margin: 2.2em 0 0;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.entry-content figcaption {
margin-top: 0.7em;
font-size: 0.8125rem;
text-align: center;
color: var( --gh-ink-mut );
}
.entry-content hr {
margin: 2.6em 0 0;
border: 0;
height: 1px;
background: var( --gh-hairline );
}
.entry-content code {
font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
font-size: 0.9em;
background: rgba( 28, 22, 20, 0.05 );
padding: 0.15em 0.4em;
border-radius: 4px;
}
.entry-content table {
width: 100%;
margin: 1.8em 0 0;
border-collapse: collapse;
font-size: 0.95rem;
}
.entry-content th,
.entry-content td {
border: 1px solid var( --gh-hairline );
padding: 10px 14px;
text-align: left;
}
.entry-content th {
background: rgba( 224, 123, 44, 0.08 );
font-weight: 700;
color: var( --gh-ink );
}
.gh-article__pages {
margin-top: 2.4em;
font-size: 0.9rem;
}
.gh-article__pages a {
color: var( --gh-deep );
}