/* ============================================================
Foun_D — 강점 기반 퍼스널 브랜딩 컨설팅
============================================================ */
/* ────────────────────────────────────────────────────────────
⚠ 윤고딕 웹폰트 — 라이선스 구매 후 여기에 넣어주세요
────────────────────────────────────────────────────────────
윤고딕은 윤디자인그룹(font.co.kr)의 유료 서체입니다.
웹사이트에 쓰려면 '웹폰트(웹서버) 라이선스'가 별도로 필요합니다.
구매하시면 보통 아래 둘 중 하나를 받게 됩니다.
① 웹폰트 링크(CDN) 방식 — src/_includes/base.njk 의 에 추가
② 폰트 파일(woff2) 방식 — 파일을 src/assets/fonts/ 에 넣고 아래처럼 선언
@font-face{
font-family:"YoonGothic";
src:url("/assets/fonts/YoonGothic-Regular.woff2") format("woff2");
font-weight:400; font-display:swap;
}
@font-face{
font-family:"YoonGothic";
src:url("/assets/fonts/YoonGothic-Bold.woff2") format("woff2");
font-weight:700; font-display:swap;
}
넣기 전까지는 --font 스택의 다음 순위 서체가 표시됩니다.
──────────────────────────────────────────────────────────── */
:root{
--ink: #0E0F12;
--ink-2: #16181D;
--ink-3: #1F222A;
--line-dark: rgba(255,255,255,.12);
--paper: #FBFAF7;
--paper-2: #F4F1EC;
--line: rgba(14,15,18,.12);
/* ── 포인트 컬러: 에르메스 오렌지 ──
--accent 밝은 배경/어두운 배경 공통 메인
--accent-2 밝은 배경 위 텍스트용 (대비 확보)
--accent-3 호버 시 밝은 변형 */
--accent: #E85D10;
--accent-2: #C0490F;
--accent-3: #FF7A2E;
--accent-soft: rgba(232,93,16,.13);
--tx: #14161A;
--tx-mid: #55595F;
--tx-dim: #71767D;
--tx-light: rgba(255,255,255,.72);
--tx-light-2: rgba(255,255,255,.48);
/* ── 서체: 윤고딕 우선, 미보유 시 대체 서체 ──
윤디자인 웹폰트 라이선스를 구매하시면 styles.css 맨 위의
"윤고딕 웹폰트" 주석 블록에 발급받은 @font-face 또는 를 넣으시면
아래 스택이 자동으로 윤고딕을 먼저 잡습니다. */
--font: "YoonGothic","윤고딕","YDGothic","YDGothic320","Yoon Gothic",
"Pretendard Variable",Pretendard,
-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
--wrap: 1180px;
--ease: cubic-bezier(.22,.7,.28,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--paper);
color:var(--tx);
font-family:var(--font);
font-size:16.5px;
line-height:1.8;
letter-spacing:-.008em;
font-variant-numeric:tabular-nums;
word-break:keep-all;
overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
margin:0; line-height:1.34; letter-spacing:-.03em; font-weight:700;
text-wrap:balance;
}
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
.wrap{ width:min(100% - 44px,var(--wrap)); margin-inline:auto; }
:where(a,button,input,select,textarea,summary,details):focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:4px;
}
.skip{
position:absolute; left:-9999px; top:0; z-index:999;
background:var(--accent); color:#000; padding:10px 18px;
}
.skip:focus{ left:12px; top:12px; }
/* ── reveal ─────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.on{ opacity:1; transform:none; }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s }
.d4{ transition-delay:.32s } .d5{ transition-delay:.44s }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
.rv{ opacity:1; transform:none; transition:none; }
}
/* ============================================================
HEADER
============================================================ */
.hd{
position:fixed; inset:0 0 auto 0; z-index:100;
transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
border-bottom:1px solid transparent;
}
.hd__in{
width:min(100% - 44px,var(--wrap)); margin-inline:auto;
height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hd.stuck,.hd--solid{
background:rgba(14,15,18,.82);
backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
border-bottom-color:var(--line-dark);
}
/* 하위 페이지(칼럼 등)는 배경이 밝으므로 헤더를 항상 어둡게 유지 */
.hd--solid{ background:rgba(14,15,18,.94); }
.logo{
font-size:21px; font-weight:800; letter-spacing:.02em; color:#fff;
display:inline-flex; align-items:baseline;
}
.logo span{ color:var(--accent); }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
font-size:12.5px; font-weight:600; letter-spacing:.14em;
color:rgba(255,255,255,.66); transition:color .25s;
position:relative; padding:6px 0;
}
.nav a::after{
content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
background:var(--accent); transition:right .35s var(--ease);
}
.nav a:hover,.nav a.is-active{ color:#fff; }
.nav a:hover::after,.nav a.is-active::after{ right:0; }
.nav__cta.is-active{ color:var(--accent) !important; }
.nav__cta{
border:1px solid rgba(232,93,16,.55); border-radius:100px;
padding:9px 20px !important; color:var(--accent) !important;
letter-spacing:-.01em !important; font-size:13px !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--accent); color:#0E0F12 !important; border-color:var(--accent); }
.burger{
display:none; width:44px; height:44px; border:0; background:none;
cursor:pointer; padding:0; position:relative;
}
.burger span{
display:block; width:24px; height:1.5px; background:#fff; margin:6px auto;
transition:transform .35s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
/* ============================================================
HERO — Define · Design · Deliver 가 하나의 D 로 모이는 시퀀스
============================================================ */
.hero{
position:relative; min-height:100svh; background:var(--ink); color:#fff;
display:flex; flex-direction:column; justify-content:center;
padding:150px 0 130px; overflow:hidden;
}
.hero__bg{
position:absolute; inset:0;
background:
radial-gradient(1100px 700px at 72% 18%, rgba(232,93,16,.10), transparent 66%),
linear-gradient(180deg,#08090B 0%,#0E0F12 62%,#101216 100%);
}
.hero__in{ position:relative; }
/* ── 시퀀스 무대 ─────────────────────────────────────
세 단어가 위·가운데·아래에서 나타나 꼬리를 떨구고
가운데 한 줄로 모여 하나의 D 가 됩니다. */
.cine{
position:relative;
height:1.1em; margin-bottom:clamp(30px,4vw,46px);
font-size:clamp(38px,7.2vw,92px);
font-weight:800; line-height:1.1; letter-spacing:-.045em;
--pre:3.05em; /* Foun_ 자리. JS 가 실제 폭으로 보정 */
--gap:1.14em; /* 위·아래 줄 간격 */
}
.cine__foun{
position:absolute; left:0; top:0; white-space:nowrap;
opacity:0; transform:translateX(-.22em);
animation:founIn .9s var(--ease) 3.35s forwards;
}
.cine__foun i{ font-style:normal; color:var(--accent); }
/* Foun_D 의 _D 전체가 포인트 컬러 — 시퀀스 내내 D 는 같은 색으로 유지됩니다 */
.cw b{ color:var(--accent); }
.cw{
position:absolute; left:var(--pre); top:0; white-space:nowrap;
opacity:0; will-change:transform,opacity;
}
.cw em{
font-style:normal; display:inline-block;
animation:tailOut .62s var(--ease) 1.92s forwards;
}
.cw--1{ animation:word1 3.1s var(--ease) .18s forwards; }
.cw--2{ animation:word2 .62s var(--ease) .44s forwards; }
.cw--3{ animation:word3 3.1s var(--ease) .70s forwards; }
@keyframes word1{
0% { opacity:0; transform:translateY(calc(-1 * var(--gap) - 16px)); }
16% { opacity:1; transform:translateY(calc(-1 * var(--gap))); }
58% { opacity:1; transform:translateY(calc(-1 * var(--gap))); }
88% { opacity:1; transform:translateY(0); }
100% { opacity:0; transform:translateY(0); }
}
@keyframes word2{
0% { opacity:0; transform:translateY(16px); }
100% { opacity:1; transform:translateY(0); }
}
@keyframes word3{
0% { opacity:0; transform:translateY(calc(var(--gap) + 16px)); }
16% { opacity:1; transform:translateY(var(--gap)); }
58% { opacity:1; transform:translateY(var(--gap)); }
88% { opacity:1; transform:translateY(0); }
100% { opacity:0; transform:translateY(0); }
}
@keyframes tailOut{
0% { opacity:1; transform:translateX(0); }
100% { opacity:0; transform:translateX(.34em); }
}
@keyframes founIn{
0% { opacity:0; transform:translateX(-.22em); }
100% { opacity:1; transform:translateX(0); }
}
/* ── 오렌지 규칙선 ───────────────────────────────────── */
.hero__rule{
display:block; height:2px; width:0; background:var(--accent);
margin-bottom:clamp(26px,3.4vw,38px);
animation:ruleDraw .8s var(--ease) 4.3s forwards;
}
@keyframes ruleDraw{ to{ width:92px; } }
/* ── 문구 ────────────────────────────────────────────── */
.hero__h{ margin:0; }
.hero__tag,.hero__ko{ display:block; opacity:0; }
.hero__tag{
font-size:clamp(17px,2.4vw,28px); font-weight:600;
letter-spacing:-.032em; line-height:1.6; color:#fff;
margin-bottom:clamp(14px,1.8vw,20px);
animation:tagIn 1s var(--ease) 4.6s forwards;
}
@keyframes tagIn{
0% { opacity:0; transform:translateY(14px); }
100% { opacity:1; transform:translateY(0); }
}
.hero__ko{
font-size:clamp(13.5px,1.5vw,16px); font-weight:500;
letter-spacing:.01em; line-height:1.7; color:rgba(255,255,255,.42);
animation:koIn .9s var(--ease) 5.25s forwards;
}
@keyframes koIn{
0% { opacity:0; transform:translateY(10px); }
100% { opacity:1; transform:translateY(0); }
}
/* ── 스크롤 유도 ─────────────────────────────────────── */
.hero__cue{
position:absolute; left:50%; bottom:46px; transform:translateX(-50%);
width:1px; height:62px; overflow:hidden;
opacity:0; animation:cueIn .8s var(--ease) 5.9s forwards;
}
.hero__cue span{ position:absolute; inset:0; display:block; background:rgba(255,255,255,.2); }
.hero__cue span::after{
content:""; position:absolute; inset:0; background:var(--accent);
animation:cue 2.6s var(--ease) 6.2s infinite;
}
@keyframes cueIn{ to{ opacity:1; } }
@keyframes cue{
0% { transform:translateY(-100%); }
55% { transform:translateY(0); }
100% { transform:translateY(100%); }
}
/* ── 모션을 줄이는 설정: 최종 화면만 ─────────────────── */
@media (prefers-reduced-motion:reduce){
.cine__foun,.cw,.cw em,.hero__rule,.hero__tag,.hero__ko,.hero__cue,.hero__cue span::after{
animation:none !important;
}
.cine__foun{ opacity:1; transform:none; }
.cw--1,.cw--3,.cw em{ display:none; }
.cw--2{ opacity:1; transform:none; }
.hero__rule{ width:92px; }
.hero__tag,.hero__ko,.hero__cue{ opacity:1; transform:translateX(-50%); }
.hero__tag,.hero__ko{ transform:none; }
}
/* ── 버튼 ───────────────────────────────────────────── */
.btn{
display:inline-flex; align-items:center; justify-content:center;
height:56px; padding:0 34px; border-radius:100px; border:1px solid transparent;
font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:pointer;
transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--accent{ background:var(--accent); color:#0B0C0F; }
.btn--accent:hover{ background:var(--accent-3); }
.btn--ghost{ border-color:rgba(255,255,255,.26); color:#fff; }
.btn--ghost:hover{ border-color:#fff; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#25282F; }
.btn--line{ border-color:var(--line); color:var(--tx); }
.btn--line:hover{ border-color:var(--ink); }
.btn--full{ width:100%; }
/* ============================================================
섹션 기본 — 여백이 곧 디자인
============================================================ */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.sec{ padding:clamp(110px,15vw,210px) 0; background:var(--paper); }
.sec--paper{ background:var(--paper); }
.sec--paper2{ background:var(--paper-2); }
.sec--ink{ background:var(--ink); color:#fff; }
.eyebrow{
font-size:11px; font-weight:700; letter-spacing:.26em; line-height:1.5;
color:var(--accent); margin-bottom:20px;
}
.eyebrow--dark{ color:var(--accent-2); }
.sec__h{
font-size:clamp(28px,4.2vw,46px); line-height:1.3; letter-spacing:-.036em;
margin-bottom:24px;
}
.sec__h em{ font-style:normal; color:var(--accent-2); }
.sec__h--light em{ color:var(--accent); }
.sec__lead{
font-size:clamp(15.5px,1.6vw,17.5px); color:var(--tx-mid); line-height:1.95;
letter-spacing:-.01em; max-width:620px; margin-bottom:64px;
}
.sec--ink .sec__lead{ color:var(--tx-light); }
/* 섹션 제목 — 좌측 정렬, 얇은 규칙선 하나 */
.truths__h{
font-size:clamp(24px,3.2vw,36px); letter-spacing:-.034em; line-height:1.3;
padding-bottom:30px; margin-bottom:clamp(56px,7vw,88px);
border-bottom:1px solid var(--line);
}
/* ── FAQ ────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{
list-style:none; cursor:pointer; padding:30px 48px 30px 0; position:relative;
font-size:clamp(16px,1.8vw,18.5px); font-weight:600; letter-spacing:-.025em;
line-height:1.55; transition:color .25s;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary:hover{ color:var(--accent-2); }
.faq__i summary::after{
content:""; position:absolute; right:6px; top:50%; width:13px; height:1px;
background:var(--tx-dim); transition:background .25s;
}
.faq__i summary::before{
content:""; position:absolute; right:12px; top:50%; width:1px; height:13px;
margin-top:-6px; background:var(--tx-dim);
transition:transform .35s var(--ease), opacity .25s;
}
.faq__i[open] summary::before{ transform:scaleY(0); opacity:0; }
.faq__a{ padding:2px 40px 34px 0; }
.faq__a p{
font-size:15.5px; color:var(--tx-mid); line-height:2;
letter-spacing:-.008em; max-width:720px;
}
.faq__a b{ color:var(--tx); font-weight:600; }
/* ============================================================
하나의 문장 — 키노트 슬라이드처럼
============================================================ */
.state{
background:var(--paper);
padding:clamp(130px,19vw,260px) 0;
}
.state__p{
font-size:clamp(27px,5vw,60px); font-weight:700;
line-height:1.34; letter-spacing:-.04em; color:var(--tx);
}
.state__p--turn{ margin-top:clamp(28px,4vw,56px); }
.state__p em{ font-style:normal; color:var(--accent); }
.state__note{
margin-top:clamp(48px,7vw,96px);
font-size:14px; letter-spacing:.02em; color:var(--tx-dim);
}
.state__note i{ font-style:normal; color:var(--accent-2); font-weight:700; }
/* ============================================================
세 가지 — 카드 대신 규칙선
============================================================ */
.truth{ border-top:1px solid var(--line); }
.truth li{
display:grid; grid-template-columns:132px minmax(0,1.05fr) minmax(0,1fr);
gap:0 48px; align-items:start;
padding:clamp(44px,5.5vw,68px) 0; border-bottom:1px solid var(--line);
}
.truth__n{
font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--tx-dim);
padding-top:.55em;
}
.truth h3{
font-size:clamp(21px,2.6vw,29px); letter-spacing:-.034em; line-height:1.44;
}
.truth p{
font-size:15.5px; color:var(--tx-mid); line-height:2; letter-spacing:-.008em;
padding-top:.4em;
}
/* ============================================================
방법론
============================================================ */
.method-sec{ background:var(--ink); color:#fff; }
.method__h{
display:flex; flex-wrap:wrap; align-items:baseline; gap:0 18px;
font-size:clamp(30px,5.4vw,66px); font-weight:800;
letter-spacing:-.04em; line-height:1.16; margin-bottom:34px;
}
.method__h i{ font-style:normal; color:var(--accent); }
.method__h--sm{ font-size:clamp(26px,4.4vw,52px); display:block; }
.method__intro{
font-size:clamp(15.5px,1.6vw,17.5px); color:var(--tx-light); line-height:1.95;
letter-spacing:-.008em; max-width:560px;
padding-bottom:clamp(48px,6vw,80px); border-bottom:1px solid var(--line-dark);
}
.method li{
display:grid; grid-template-columns:260px 1fr; gap:0 56px;
padding:clamp(48px,6vw,76px) 0; border-bottom:1px solid var(--line-dark);
}
.method__d{
display:block; font-size:11.5px; font-weight:800; letter-spacing:.2em;
color:var(--accent); margin-bottom:16px;
}
.method__d sub{ font-size:9px; }
.method__key h3{
font-size:clamp(28px,3.6vw,42px); letter-spacing:-.038em; line-height:1.1; color:#fff;
}
.method__ko{
margin-top:10px; font-size:13px; letter-spacing:.16em; color:var(--tx-light-2);
}
.method__lead{
font-size:clamp(17px,1.9vw,20px); font-weight:600; letter-spacing:-.026em;
line-height:1.6; color:#fff; margin-bottom:18px;
}
.method__body p{
font-size:15.5px; color:var(--tx-light); line-height:2;
letter-spacing:-.008em; max-width:580px;
}
.method__out{
margin-top:24px; font-size:13.5px !important; color:var(--tx-light-2) !important;
letter-spacing:.01em; padding-top:18px; border-top:1px solid var(--line-dark);
}
/* ============================================================
서비스 — 세 개의 결
============================================================ */
.tracks{ border-top:1px solid var(--line); }
.tk{
display:grid; grid-template-columns:300px 1fr; gap:0 56px;
padding:clamp(48px,6vw,76px) 0; border-bottom:1px solid var(--line);
transition:background .4s var(--ease);
}
.tk__n{
display:block; font-size:12px; font-weight:700; letter-spacing:.2em;
color:var(--tx-dim); margin-bottom:18px;
}
.tk__l h3{
font-size:clamp(24px,3vw,34px); letter-spacing:-.036em; line-height:1.22;
margin-bottom:20px;
}
.tk__for{ font-size:14px; line-height:2; color:var(--tx-dim); letter-spacing:-.005em; }
.tk__desc{
font-size:16px; color:var(--tx-mid); line-height:2; letter-spacing:-.008em;
max-width:620px; margin-bottom:36px;
}
.tk__desc b{ color:var(--tx); font-weight:600; }
.tk__list{ border-top:1px solid var(--line); }
.tk__list li{ border-bottom:1px solid var(--line); }
.tk__list a{
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
padding:22px 44px 22px 0; position:relative;
transition:padding-left .4s var(--ease);
}
.tk__list a:hover{ padding-left:10px; }
.tk__list b{ font-size:17.5px; font-weight:700; letter-spacing:-.028em; }
.tk__list span{ font-size:14px; color:var(--tx-dim); letter-spacing:-.005em; }
.tk__list a::after{
content:"→"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
color:var(--accent); opacity:0; transition:opacity .3s, right .3s var(--ease);
}
.tk__list a:hover::after{ opacity:1; right:0; }
/* 주력 트랙 — 왼쪽에 오렌지 규칙선 하나로만 강조 */
.tk--main{ position:relative; }
.tk--main::before{
content:""; position:absolute; left:-24px; top:clamp(48px,6vw,76px); bottom:clamp(48px,6vw,76px);
width:2px; background:var(--accent);
}
.tk--main .tk__n{ color:var(--accent); }
/* ============================================================
Foun_D가 가진 것
============================================================ */
.own-sec{ background:var(--ink); color:#fff; }
.own{ margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--line-dark); }
.own li{
display:grid; grid-template-columns:132px minmax(0,.95fr) minmax(0,1.15fr);
gap:0 48px; align-items:start;
padding:clamp(42px,5.2vw,64px) 0; border-bottom:1px solid var(--line-dark);
}
.own__n{
font-size:13px; font-weight:700; letter-spacing:.2em;
color:var(--tx-light-2); padding-top:.55em;
}
.own h3{
font-size:clamp(20px,2.5vw,28px); letter-spacing:-.034em;
line-height:1.44; color:#fff;
}
/* display:contents 로 h3·p 가 li 그리드에 직접 놓이게 합니다 */
.own__b{ display:contents; }
.own h3{ grid-column:2; }
.own__b p{ grid-column:3; }
.own__k{ grid-column:3; }
.own__b p{
font-size:15.5px; color:var(--tx-light); line-height:2;
letter-spacing:-.008em; padding-top:.4em;
}
.own__b p b{ color:#fff; font-weight:600; }
.own__k{
padding-top:16px !important; margin-top:16px;
border-top:1px solid var(--line-dark);
font-size:13px !important; letter-spacing:.02em;
color:var(--accent) !important;
}
.own__end{
margin-top:clamp(48px,6vw,72px);
font-size:clamp(17px,2.1vw,24px); color:var(--tx-light-2);
letter-spacing:-.03em; line-height:1.75;
}
.own__end b{ color:#fff; font-weight:700; }
@media (max-width:1040px){
.own li{ grid-template-columns:96px 1fr; gap:0 32px; }
.own h3,.own__b p,.own__k{ grid-column:2; }
.own__b p{ padding-top:16px; }
}
@media (max-width:640px){
.own li{ grid-template-columns:1fr; gap:14px; padding:36px 0; }
.own h3,.own__b p,.own__k{ grid-column:1; }
.own__n{ padding-top:0; }
.own__b p{ padding-top:0; }
}
/* ============================================================
대표
============================================================ */
.who__in{ display:grid; grid-template-columns:280px 1fr; gap:0 72px; align-items:start; }
.who__photo{
margin:0 0 28px; width:100%; aspect-ratio:3/4; overflow:hidden;
background:var(--paper-2);
}
.who__photo img{
width:100%; height:100%; object-fit:cover; object-position:center 12%;
filter:grayscale(100%) contrast(1.04);
transition:filter .6s var(--ease);
}
.who__side:hover .who__photo img{ filter:none; }
.who__name{ font-size:26px; font-weight:800; letter-spacing:-.03em; }
.who__role{ margin-top:10px; font-size:13.5px; line-height:1.8; color:var(--tx-dim); }
.who__quote{
font-size:clamp(24px,3.4vw,40px); font-weight:700; letter-spacing:-.038em;
line-height:1.4; margin-bottom:clamp(36px,4.5vw,56px);
}
.who__txt{
font-size:16px; color:var(--tx-mid); line-height:2.05;
letter-spacing:-.008em; margin-bottom:24px; max-width:620px;
}
.who__txt b{ color:var(--tx); font-weight:600; }
.cv{ margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--line); max-width:620px; }
.cv li{
display:grid; grid-template-columns:88px 1fr; gap:20px;
padding:18px 0; border-bottom:1px solid var(--line);
font-size:15px; line-height:1.7; color:var(--tx-mid);
}
.cv span{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--tx-dim); }
.cv b{ color:var(--tx); font-weight:700; margin-right:8px; }
.who__more,.jn__more{ margin-top:34px; }
.who__more a,.jn__more a{
font-size:15px; font-weight:600; color:var(--tx);
border-bottom:1px solid var(--accent); padding-bottom:3px;
transition:color .25s;
}
.who__more a:hover,.jn__more a:hover{ color:var(--accent-2); }
/* ============================================================
칼럼
============================================================ */
.journal{ background:var(--paper-2); }
.jn{ border-top:1px solid var(--line); }
.jn li{ border-bottom:1px solid var(--line); }
.jn a{
display:grid; grid-template-columns:180px 1fr; gap:0 48px; align-items:start;
padding:clamp(34px,4vw,48px) 0;
transition:padding-left .4s var(--ease);
}
.jn a:hover{ padding-left:10px; }
.jn__cat{
font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--tx-dim);
padding-top:.5em;
}
.jn h3,.jn h2,.jn p{ grid-column:2; }
.jn h3{
font-size:clamp(19px,2.3vw,25px); letter-spacing:-.03em; line-height:1.45;
margin-bottom:14px; transition:color .25s;
}
.jn a:hover h3{ color:var(--accent-2); }
.jn p{
font-size:15px; color:var(--tx-mid); line-height:1.95;
letter-spacing:-.008em; max-width:660px;
}
/* ============================================================
연락
============================================================ */
.talk{ background:var(--ink); color:#fff; }
.talk__h{
font-size:clamp(34px,6vw,76px); font-weight:800; letter-spacing:-.042em;
line-height:1.12; margin-bottom:clamp(56px,7vw,88px);
}
.talk__h i{ font-style:normal; color:var(--accent); }
.talk__in{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.talk__lead{
font-size:16px; color:var(--tx-light); line-height:2.05;
letter-spacing:-.008em; margin-bottom:48px; max-width:440px;
}
.talk__info{ border-top:1px solid var(--line-dark); }
.talk__info li{
display:grid; grid-template-columns:76px 1fr; gap:16px; align-items:center;
padding:18px 0; border-bottom:1px solid var(--line-dark);
}
.talk__info span{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--tx-light-2); }
.talk__info a{ font-size:16px; color:#fff; letter-spacing:-.02em; transition:color .25s; }
.talk__info a:hover{ color:var(--accent); }
/* 폼 — 테두리 상자 대신 밑줄 */
.form{ display:block; }
.form__row{ margin-bottom:26px; }
.form label{
display:block; font-size:12px; font-weight:600; letter-spacing:.06em;
color:var(--tx-light-2); margin-bottom:12px;
}
.form label b{ color:var(--tx-light-2); }
.form input[type=text],.form select,.form textarea{
width:100%; background:none; color:#fff;
border:0; border-bottom:1px solid rgba(255,255,255,.22); border-radius:0;
padding:12px 2px; font:inherit; font-size:16px; letter-spacing:-.015em;
transition:border-color .3s;
}
.form textarea{ resize:vertical; line-height:1.8; }
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.26); }
.form input:focus,.form select:focus,.form textarea:focus{
outline:none; border-bottom-color:var(--accent);
}
.form select{ appearance:none; cursor:pointer; }
.form select option{ background:#16181D; color:#fff; }
.form__agree{
display:flex; align-items:center; gap:11px; margin:30px 0 26px;
font-size:13.5px; color:var(--tx-light-2); cursor:pointer;
}
.form__agree input{ width:17px; height:17px; accent-color:var(--accent); flex:none; }
.form__hint{ margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.34); text-align:center; }
/* ============================================================
ABOUT
============================================================ */
.about__lead{
max-width:800px; font-size:clamp(15.5px,1.75vw,18px); color:var(--tx-mid);
line-height:1.95; margin-bottom:64px;
}
.about__lead b{ color:var(--tx); font-weight:600; }
.ddd{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; }
.ddd__card{
background:#fff; border:1px solid var(--line); border-radius:20px; padding:38px 32px 40px;
position:relative; overflow:hidden;
transition:transform .4s var(--ease), box-shadow .4s;
}
.ddd__card::before{
content:""; position:absolute; inset:0 0 auto 0; height:3px;
background:linear-gradient(90deg,var(--accent),transparent);
transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.ddd__card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -32px rgba(14,15,18,.4); }
.ddd__card:hover::before{ transform:scaleX(1); }
.ddd__k{
display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em;
color:var(--accent-2); margin-bottom:20px;
}
.ddd__k sub{ font-size:9px; }
.ddd__card h3{ font-size:26px; letter-spacing:-.04em; margin-bottom:14px; }
.ddd__card h3 small{ font-size:14px; font-weight:600; color:var(--tx-dim); margin-left:10px; letter-spacing:-.02em; }
.ddd__card p{ font-size:15px; color:var(--tx-mid); line-height:1.85; }
/* ── CEO ────────────────────────────────────────────── */
.ceo{
margin-top:76px; display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start;
}
.ceo__badge{
background:var(--ink); color:#fff; border-radius:20px; padding:44px 32px;
position:relative; overflow:hidden;
}
.ceo__badge::after{
content:""; position:absolute; right:-56px; bottom:-56px; width:170px; height:170px;
border-radius:50%; background:radial-gradient(circle,rgba(232,93,16,.28),transparent 70%);
}
.ceo__photo{
margin:0 0 26px; width:132px; height:132px; border-radius:50%;
overflow:hidden; position:relative; z-index:1;
border:1px solid rgba(232,93,16,.45);
box-shadow:0 14px 30px -16px rgba(0,0,0,.8);
}
.ceo__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.ceo__mark{ font-size:15px; font-weight:800; letter-spacing:.04em; color:rgba(255,255,255,.55); position:relative; z-index:1; }
.ceo__mark i{ font-style:normal; color:var(--accent); }
.ceo__name{
font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.25; margin-top:26px;
}
.ceo__name span{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.18em; color:var(--accent); margin-top:8px; }
.ceo__role{ font-size:13px; color:var(--tx-light-2); margin-top:14px; letter-spacing:-.01em; }
.ceo__cert{ margin-top:24px; }
.ceo__cert li{
font-size:14px; color:var(--tx-mid); padding:13px 0 13px 20px;
border-bottom:1px solid var(--line); position:relative;
}
.ceo__cert li::before{
content:""; position:absolute; left:2px; top:22px; width:6px; height:6px;
border-radius:50%; background:var(--accent);
}
.ceo__cert b{ color:var(--tx); font-weight:700; }
.ceo__quote{
font-size:clamp(21px,2.6vw,28px); font-weight:700; letter-spacing:-.032em;
line-height:1.55; margin-bottom:30px;
}
.ceo__txt{
font-size:15.8px; color:var(--tx-mid); line-height:2;
letter-spacing:-.008em; margin-bottom:22px; max-width:640px;
}
.ceo__txt b{ color:var(--tx); font-weight:600; }
.career{ margin-top:38px; border-top:1px solid var(--line); }
.career li{
display:grid; grid-template-columns:118px 1fr; gap:18px;
padding:20px 0; border-bottom:1px solid var(--line);
font-size:15px; line-height:1.65; color:var(--tx-mid); align-items:baseline;
}
.career span{ font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--accent-2); }
.career b{ color:var(--tx); font-weight:700; margin-right:6px; }
.career i{ font-style:normal; display:block; font-size:13.5px; line-height:1.65; color:var(--tx-dim); margin-top:5px; }
/* ============================================================
FOOTER
============================================================ */
.ft{ background:#08090B; color:#fff; padding:64px 0 46px; border-top:1px solid var(--line-dark); }
.ft__in{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:44px; align-items:start; }
.logo--ft{ font-size:24px; margin-bottom:16px; }
.ft__brand p{ font-size:13.5px; color:var(--tx-light-2); line-height:1.9; }
.ft__nav{ display:flex; flex-direction:column; gap:13px; }
.ft__nav a{ font-size:14px; color:var(--tx-light-2); transition:color .25s; width:fit-content; }
.ft__nav a:hover{ color:var(--accent); }
.ft__info p{ font-size:13.5px; color:var(--tx-light-2); line-height:2; }
.ft__info p span{ display:block; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.34); }
.ft__copy{ margin-top:18px !important; font-size:12px !important; color:rgba(255,255,255,.3) !important; }
/* ── to top ─────────────────────────────────────────── */
.totop{
position:fixed; right:22px; bottom:22px; z-index:90;
width:46px; height:46px; border-radius:50%;
display:grid; place-items:center;
background:var(--accent); color:#0B0C0F; font-size:17px; font-weight:700;
box-shadow:0 12px 28px -12px rgba(0,0,0,.6);
opacity:0; pointer-events:none; transform:translateY(12px);
transition:opacity .35s, transform .35s var(--ease);
}
.totop.on{ opacity:1; pointer-events:auto; transform:none; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1040px){
.who__in{ grid-template-columns:1fr; gap:44px; }
.talk__in{ grid-template-columns:1fr; gap:52px; }
.truth li{ grid-template-columns:96px 1fr; gap:0 32px; }
.truth p{ grid-column:2; padding-top:16px; }
}
@media (max-width:900px){
.hd__in{ height:66px; }
.burger{ display:block; }
.nav{
position:fixed; inset:66px 0 auto 0;
flex-direction:column; align-items:stretch; gap:0;
background:#0B0C0F;
border-bottom:1px solid var(--line-dark);
box-shadow:0 24px 44px -24px rgba(0,0,0,.9);
padding:12px 22px 26px;
transform:translateY(-12px); opacity:0; pointer-events:none;
transition:opacity .3s, transform .3s var(--ease);
}
.nav.open{ opacity:1; transform:none; pointer-events:auto; }
.nav a{ padding:16px 0; font-size:14px; letter-spacing:.06em; border-bottom:1px solid rgba(255,255,255,.07); }
.nav a::after{ display:none; }
.nav__cta{ margin-top:18px; text-align:center; justify-content:center; border-bottom:0 !important; }
.hero{ min-height:92svh; padding:130px 0 110px; }
.method li{ grid-template-columns:1fr; gap:24px; }
.tk{ grid-template-columns:1fr; gap:28px; }
.tk--main::before{ left:-16px; top:36px; bottom:36px; }
.jn a{ grid-template-columns:1fr; gap:12px; }
.jn h3,.jn h2,.jn p{ grid-column:1; }
.jn__cat{ padding-top:0; }
.ft__in{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:640px){
.wrap{ width:calc(100% - 36px); }
.sec{ padding:88px 0; }
.state{ padding:100px 0; }
.truth li{ grid-template-columns:1fr; gap:14px; padding:38px 0; }
.truth__n{ padding-top:0; }
.truth p{ grid-column:1; padding-top:0; }
.cmp{ font-size:14.5px; }
.cmp th,.cmp td{ padding:16px 12px; }
.cmp tbody th{ width:76px; }
.cv li{ grid-template-columns:1fr; gap:4px; }
.form,.who__photo{ margin-inline:0; }
.btn{ height:54px; padding:0 28px; font-size:14.5px; }
}
/* ============================================================
하위 페이지 공통 — 머리말
============================================================ */
.wrap--narrow{ width:min(100% - 44px,720px); }
.pagehead{
background:var(--paper);
padding:calc(76px + clamp(72px,9vw,124px)) 0 clamp(56px,7vw,88px);
}
.pagehead--ink{ background:var(--ink); color:#fff; }
.pagehead__k{
font-size:12px; font-weight:700; letter-spacing:.26em;
color:var(--tx-dim); margin-bottom:24px;
}
.pagehead--ink .pagehead__k{ color:var(--tx-light-2); }
.pagehead__h{
font-size:clamp(32px,5.2vw,58px); font-weight:800;
letter-spacing:-.04em; line-height:1.2; margin-bottom:24px;
}
.pagehead__h--big{ font-size:clamp(34px,6vw,68px); }
.pagehead__en{
font-size:13px; font-weight:600; letter-spacing:.18em;
color:var(--tx-light-2); margin:-14px 0 26px;
}
.pagehead__lead{
font-size:clamp(15.5px,1.65vw,17.5px); line-height:2;
letter-spacing:-.008em; color:var(--tx-mid); max-width:620px;
}
.pagehead--ink .pagehead__lead{ color:var(--tx-light); }
.crumb{
display:flex; align-items:center; gap:11px;
font-size:12.5px; letter-spacing:.02em; color:var(--tx-dim); margin-bottom:30px;
}
.crumb a{ transition:color .25s; }
.crumb a:hover{ color:var(--accent-2); }
.crumb i{ font-style:normal; opacity:.45; }
.crumb--light{ color:var(--tx-light-2); }
.crumb--light a:hover{ color:var(--accent); }
/* 지표 — 큰 숫자 대신 한 줄 규칙선 */
.facts{
display:grid; grid-template-columns:repeat(4,1fr); gap:0;
margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--line-dark);
}
.facts li{
padding:22px 22px 0 0; display:flex; flex-direction:column; gap:7px;
}
.facts b{ font-size:16px; font-weight:700; color:var(--accent); letter-spacing:-.01em; }
.facts span{ font-size:12.5px; line-height:1.65; color:var(--tx-light-2); }
.pagefoot{ margin-top:clamp(56px,7vw,84px); display:flex; flex-wrap:wrap; gap:12px; }
.empty{
padding:72px 0; color:var(--tx-dim); font-size:16px;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* ── 칼럼 목록 행 (홈과 공용 .jn) ────────────────────── */
.jn h2{
font-size:clamp(20px,2.4vw,27px); letter-spacing:-.03em; line-height:1.45;
margin-bottom:14px; transition:color .25s;
}
.jn a:hover h2{ color:var(--accent-2); }
.jn__cat i{
font-style:normal; display:block; margin-top:8px;
font-size:12px; letter-spacing:.04em; color:var(--tx-dim); font-weight:600;
}
/* ============================================================
칼럼 본문
============================================================ */
.post{
background:var(--paper);
padding:calc(76px + clamp(52px,6.5vw,88px)) 0 clamp(88px,11vw,140px);
}
.post__head{
padding-bottom:clamp(36px,4.5vw,52px);
border-bottom:1px solid var(--line); margin-bottom:clamp(40px,5vw,60px);
}
.post__k{
display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--tx-dim);
margin-bottom:22px;
}
.post__k i{ font-style:normal; font-weight:600; letter-spacing:.04em; color:var(--tx-dim); }
.post__h{
font-size:clamp(29px,4.4vw,46px); letter-spacing:-.04em; line-height:1.32;
margin:0 0 24px;
}
.post__sum{
font-size:17px; line-height:1.95; letter-spacing:-.01em; color:var(--tx-mid);
padding-left:22px; border-left:2px solid var(--accent);
}
.post__cover{ margin:0 0 44px; overflow:hidden; }
.post__cover img{ width:100%; height:auto; }
.post__foot{ margin-top:clamp(72px,9vw,110px); }
.post__by{
padding-top:26px; border-top:1px solid var(--line);
font-size:14.5px; font-weight:600; color:var(--tx);
}
.post__by span{ font-weight:400; color:var(--tx-dim); margin-left:8px; }
.post__cta{
margin-top:clamp(48px,6vw,72px); padding-top:clamp(40px,5vw,56px);
border-top:1px solid var(--line);
}
.post__cta-h{
font-size:clamp(21px,2.6vw,28px); font-weight:700;
letter-spacing:-.034em; line-height:1.45; margin-bottom:16px;
}
.post__cta-p{
font-size:15.5px; color:var(--tx-mid); line-height:2;
letter-spacing:-.008em; margin-bottom:30px; max-width:520px;
}
.post__back{
display:inline-block; margin-top:clamp(48px,6vw,68px);
font-size:14.5px; font-weight:600; color:var(--tx-dim); transition:color .25s;
}
.post__back:hover{ color:var(--accent-2); }
/* ── 본문 타이포 ────────────────────────────────────── */
.prose{ font-size:17px; line-height:2.05; color:#26292E; letter-spacing:-.008em; }
.prose > * + *{ margin-top:32px; }
.prose h2{
font-size:clamp(21px,2.5vw,26px); letter-spacing:-.03em; line-height:1.42;
margin-top:72px !important; padding-top:26px; border-top:1px solid var(--line);
}
.prose h3{ font-size:19px; letter-spacing:-.028em; line-height:1.45; margin-top:48px !important; }
.prose h2 + *,.prose h3 + *{ margin-top:22px !important; }
.prose strong{ font-weight:700; color:var(--tx); }
.prose em{ font-style:normal; color:var(--accent-2); font-weight:600; }
.prose a{ color:var(--tx); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.prose a:hover{ color:var(--accent-2); }
.prose ul,.prose ol{ padding-left:22px; }
.prose ul li{ list-style:disc; margin-bottom:12px; }
.prose ol li{ list-style:decimal; margin-bottom:12px; }
.prose li:last-child{ margin-bottom:0; }
.prose li::marker{ color:var(--tx-dim); }
.prose blockquote{
margin-left:0; padding:4px 0 4px 26px;
border-left:2px solid var(--accent);
color:var(--tx); font-size:clamp(18px,2.1vw,21px); font-weight:600;
line-height:1.75; letter-spacing:-.026em;
}
.prose img{ margin-inline:auto; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:56px 0; }
.prose code{
background:var(--paper-2); padding:2px 7px; border-radius:4px;
font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* 본문 표 */
.prose table{
width:100%; border-collapse:collapse; font-size:15px; line-height:1.7;
display:block; overflow-x:auto;
}
.prose thead th{
text-align:left; font-size:12px; font-weight:700; letter-spacing:.1em;
color:var(--tx-dim); padding:0 18px 14px 0; border-bottom:1px solid var(--line);
white-space:nowrap;
}
.prose tbody th{
text-align:left; font-size:13px; font-weight:700; color:var(--accent-2);
padding:18px 18px 18px 0; border-bottom:1px solid var(--line);
white-space:nowrap; vertical-align:top;
}
.prose tbody td{
padding:18px 18px 18px 0; border-bottom:1px solid var(--line);
color:var(--tx-mid); vertical-align:top;
}
.prose tbody tr td:last-child{ color:var(--tx); font-weight:500; }
/* ============================================================
서비스 상세 — 이런 분께 · 진행 방식 · 맺음
============================================================ */
.fw{ border-top:1px solid var(--line); }
.fw li{
display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
gap:0 48px; align-items:start;
padding:clamp(32px,4vw,46px) 0; border-bottom:1px solid var(--line);
transition:padding-left .4s var(--ease);
}
.fw li:hover{ padding-left:10px; }
.fw h3{ font-size:clamp(18px,2.1vw,22px); letter-spacing:-.03em; line-height:1.45; }
.fw p{
font-size:15.5px; color:var(--tx-mid); line-height:2;
letter-spacing:-.008em; padding-top:.3em;
}
/* 진행 방식 */
.flow{ border-top:1px solid var(--line-dark); }
.flow li{
display:grid; grid-template-columns:200px 1fr; gap:0 48px;
padding:clamp(40px,5vw,60px) 0; border-bottom:1px solid var(--line-dark);
}
.flow__n{
display:block; font-size:clamp(30px,4vw,44px); font-weight:800; line-height:1;
letter-spacing:-.05em; color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.28);
transition:color .4s var(--ease), -webkit-text-stroke-color .4s;
}
.flow li:hover .flow__n{ color:var(--accent); -webkit-text-stroke-color:var(--accent); }
.flow__ph{
display:block; margin-top:14px;
font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--tx-light-2);
}
.flow__b h3{
font-size:clamp(20px,2.4vw,26px); letter-spacing:-.032em; line-height:1.35;
color:#fff; margin-bottom:14px;
}
.flow__b p{
font-size:15.5px; color:var(--tx-light); line-height:2;
letter-spacing:-.008em; max-width:580px;
}
.flow__out{
margin-top:22px; padding-top:18px; border-top:1px solid var(--line-dark);
font-size:13.5px !important; color:var(--tx-light-2) !important; letter-spacing:.01em;
}
/* 함께 만드는 사람들 */
.team{ border-top:1px solid var(--line); }
.team li{
display:grid; grid-template-columns:120px minmax(0,.85fr) minmax(0,1.25fr);
gap:0 48px; align-items:start;
padding:clamp(38px,4.6vw,56px) 0; border-bottom:1px solid var(--line);
}
.team__n{
font-size:12px; font-weight:700; letter-spacing:.2em;
color:var(--tx-dim); padding-top:.6em;
}
.team__b{ display:contents; }
.team h3{
grid-column:2; font-size:clamp(19px,2.2vw,24px);
letter-spacing:-.032em; line-height:1.4;
}
.team__b p{
grid-column:3; font-size:15.5px; color:var(--tx-mid);
line-height:2; letter-spacing:-.008em;
}
.team__k{
grid-column:2 !important; grid-row:2;
margin-top:12px; font-size:13px !important;
color:var(--tx-dim) !important; line-height:1.7 !important;
}
.team__end{
margin-top:clamp(40px,5vw,60px);
font-size:clamp(16px,2vw,21px); color:var(--tx-mid);
letter-spacing:-.028em; line-height:1.75;
}
.team__end b{ color:var(--tx); font-weight:700; }
@media (max-width:1040px){
.team li{ grid-template-columns:96px 1fr; gap:0 32px; }
.team h3,.team__b p,.team__k{ grid-column:2 !important; }
.team__b p{ padding-top:14px; }
.team__k{ grid-row:auto; }
}
@media (max-width:640px){
.team li{ grid-template-columns:1fr; gap:12px; padding:32px 0; }
.team__n{ padding-top:0; }
.team h3,.team__b p,.team__k{ grid-column:1 !important; }
.team__b p{ padding-top:0; }
}
/* 맺음 */
.close__h{
font-size:clamp(28px,4.6vw,54px); font-weight:800;
letter-spacing:-.04em; line-height:1.24; margin-bottom:26px;
}
.close__p{
font-size:16px; color:var(--tx-light); line-height:2;
letter-spacing:-.008em; max-width:520px; margin-bottom:38px;
}
.close__cta{ display:flex; flex-wrap:wrap; gap:12px; }
/* 대표 소개 */
.bio__in{ display:grid; grid-template-columns:300px 1fr; gap:0 72px; align-items:start; }
.bio__photo{
margin:0 0 30px; width:100%; aspect-ratio:3/4; overflow:hidden;
background:var(--paper-2);
}
.bio__photo img{
width:100%; height:100%; object-fit:cover; object-position:center 12%;
filter:grayscale(100%) contrast(1.04);
transition:filter .6s var(--ease);
}
.bio__side:hover .bio__photo img{ filter:none; }
.bio__cert{ border-top:1px solid var(--line); }
.bio__cert li{
padding:16px 0; border-bottom:1px solid var(--line);
display:flex; flex-direction:column; gap:5px;
}
.bio__cert b{ font-size:16px; font-weight:700; color:var(--accent-2); letter-spacing:-.01em; }
.bio__cert span{ font-size:13px; line-height:1.6; color:var(--tx-dim); }
.bio__quote{
font-size:clamp(23px,3.2vw,36px); font-weight:700; letter-spacing:-.038em;
line-height:1.42; margin-bottom:clamp(36px,4.5vw,52px);
padding-bottom:clamp(32px,4vw,44px); border-bottom:1px solid var(--line);
}
.bio .prose{ font-size:16.5px; }
.bio .prose h2{ margin-top:60px !important; }
.cv--about{ margin-top:clamp(48px,6vw,68px); max-width:none; }
.bio__write{
margin-top:clamp(40px,5vw,56px); padding-top:26px;
border-top:1px solid var(--line);
font-size:15px; line-height:1.95; color:var(--tx-mid); letter-spacing:-.008em;
}
.bio__write a{
color:var(--tx); border-bottom:1px solid var(--accent); padding-bottom:2px;
transition:color .25s;
}
.bio__write a:hover{ color:var(--accent-2); }
@media (max-width:1040px){
.bio__in{ grid-template-columns:1fr; gap:44px; }
.bio__photo{ max-width:300px; }
}
/* 404 */
.nf{ min-height:76svh; display:flex; align-items:center; }
.nf__links{
display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:52px;
padding-top:28px; border-top:1px solid var(--line-dark);
}
.nf__links a{ font-size:14px; color:var(--tx-light-2); transition:color .25s; }
.nf__links a:hover{ color:var(--accent); }
/* 대표 소개 페이지 */
.career--about{ margin:0 0 56px; border-top:1px solid var(--line); }
@media (max-width:900px){
.facts{ grid-template-columns:repeat(2,1fr); }
.fw li{ grid-template-columns:1fr; gap:12px; }
.flow li{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:640px){
.wrap--narrow{ width:calc(100% - 36px); }
.prose{ font-size:16.5px; line-height:1.98; }
.prose > * + *{ margin-top:26px; }
.prose h2{ margin-top:52px !important; }
.pagefoot .btn,.close__cta .btn{ flex:1 1 100%; }
}
/* ============================================================
타이포그래피 — 좁은 화면 미세 조정
============================================================ */
@media (max-width:640px){
body{ font-size:16px; line-height:1.78; }
.sec__h{ line-height:1.34; }
.hero__h{ line-height:1.18; letter-spacing:-.035em; }
.sec__lead{ margin-bottom:44px; }
.philo h3{ line-height:1.48; }
.prose{ font-size:16.5px; line-height:1.98; }
.prose > * + *{ margin-top:26px; }
.prose h2{ margin-top:52px !important; }
.method__body p,.track__desc,.ceo__txt{ line-height:1.92; }
}
/* ══════════════════════════════════════════════════
AVCD 구조 반영 — 히어로 리드 · 문제 제시 · 증거 · 반복 CTA
══════════════════════════════════════════════════ */
/* ── 히어로 서브헤드 ───────────────────────────── */
.hero__lead{
max-width:44ch; margin:26px 0 0;
font-size:clamp(13px,1.35vw,15.5px); font-weight:400;
line-height:1.85; letter-spacing:.005em;
color:rgba(255,255,255,.56);
opacity:0; animation:koIn .9s var(--ease) 5.5s forwards;
}
/* ── 반복 CTA ──────────────────────────────────── */
.cta{
display:inline-flex; align-items:center; gap:.6em;
font-size:13.5px; font-weight:600; letter-spacing:.02em;
text-decoration:none; transition:all .3s var(--ease);
}
.cta i{ font-style:normal; transition:transform .3s var(--ease); }
.cta:hover i{ transform:translateX(4px); }
/* 히어로 위 — 어두운 배경 */
.cta--hero{
margin-top:34px; padding:14px 26px;
color:var(--accent-3); border:1px solid rgba(255,122,46,.42);
border-radius:999px;
opacity:0; animation:koIn .9s var(--ease) 5.75s forwards;
}
.cta--hero:hover{
background:var(--accent); border-color:var(--accent);
color:#fff;
}
/* 본문 섹션 — 밝은 배경, 규칙선 스타일 */
.cta--line{
margin-top:56px; padding-bottom:9px;
color:var(--accent-2);
border-bottom:1px solid var(--accent-soft);
}
.cta--line:hover{ border-bottom-color:var(--accent); }
/* ── 고객 문제 제시 ────────────────────────────── */
.probs-sec{ background:var(--paper-2); }
.probs{
list-style:none; margin:52px 0 0; padding:0;
border-top:1px solid rgba(20,22,26,.11);
}
.probs li{
display:grid; grid-template-columns:64px 1fr;
gap:0 8px; align-items:baseline;
padding:26px 0;
border-bottom:1px solid rgba(20,22,26,.11);
}
.probs__n{
font-size:12px; font-weight:600; letter-spacing:.1em;
color:var(--tx-dim); font-variant-numeric:tabular-nums;
}
.probs li p{
margin:0;
font-size:clamp(16px,1.9vw,20px); font-weight:500;
line-height:1.65; letter-spacing:-.008em; color:var(--tx);
}
.probs li p b{ font-weight:700; color:var(--accent-2); }
/* ── 왜 Foun_D인가 (증거) ──────────────────────── */
.ev-sec{ background:var(--ink); color:#fff; }
.ev-sec .truths__h{ color:#fff; }
.ev{
list-style:none; margin:52px 0 0; padding:0;
display:grid; gap:0;
border-top:1px solid rgba(255,255,255,.13);
}
.ev li{
display:grid; grid-template-columns:150px 1fr;
gap:0 24px; align-items:start;
padding:30px 0;
border-bottom:1px solid rgba(255,255,255,.13);
}
.ev__n{
font-size:clamp(24px,3vw,34px); font-weight:700;
letter-spacing:-.02em; line-height:1.1;
color:var(--accent-3); font-variant-numeric:tabular-nums;
}
.ev__b h3{
margin:0 0 9px;
font-size:clamp(15px,1.7vw,17.5px); font-weight:600;
letter-spacing:-.005em; color:#fff;
}
.ev__b p{
margin:0;
font-size:clamp(13.5px,1.45vw,15px); font-weight:400;
line-height:1.85; color:rgba(255,255,255,.62);
}
.ev__end{
margin:42px 0 0; max-width:58ch;
font-size:clamp(14px,1.6vw,16.5px); font-weight:400;
line-height:1.8; color:rgba(255,255,255,.74);
}
.ev__end b{ font-weight:600; color:#fff; }
.ev-sec .cta--line{
color:var(--accent-3);
border-bottom-color:rgba(255,122,46,.34);
}
.ev-sec .cta--line:hover{ border-bottom-color:var(--accent-3); }
/* ── 모바일 ────────────────────────────────────── */
@media (max-width:720px){
.hero__lead{ max-width:none; margin-top:20px; }
.cta--hero{ margin-top:26px; padding:12px 22px; }
.cta--line{ margin-top:40px; }
.probs li{ grid-template-columns:44px 1fr; padding:22px 0; }
.ev li{ grid-template-columns:1fr; gap:10px 0; padding:26px 0; }
.ev__n{ font-size:26px; }
}
/* ── 모션 최소화 설정 존중 ─────────────────────── */
@media (prefers-reduced-motion:reduce){
.hero__lead,
.cta--hero{ opacity:1; animation:none; }
}