/* ============================================================
P&W International — Global Stylesheet
Aesthetic: warm-neutral, refined luxury (Aesop-inspired)
Fonts: KoPubWorld Batang (serif display) / SUIT (sans body)
============================================================ */
/* ---- Webfonts ---------------------------------------------- */
/* SUIT(sans)는 각 페이지 의 link 태그로 로드. KoPubWorld바탕체는 self-host placeholder. */
/* TODO: 한국출판인회의 승인 후 woff2 파일을 /fonts/ 에 배치하면 자동 적용 */
@font-face{
font-family:'KoPubWorld Batang';
src:url('/fonts/KoPubWorld-Batang-Light.woff2') format('woff2');
font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
font-family:'KoPubWorld Batang';
src:url('/fonts/KoPubWorld-Batang-Medium.woff2') format('woff2');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'KoPubWorld Batang';
src:url('/fonts/KoPubWorld-Batang-Bold.woff2') format('woff2');
font-weight:700; font-style:normal; font-display:swap;
}
/* ---- Design Tokens ----------------------------------------- */
:root{
/* palette */
--paper: #F6F3EC; /* 가장 밝은 배경 */
--paper-80: rgba(246,243,236,.80); /* 헤더 투명도 80% */
--cream: #ECE7DD; /* 기본 섹션 배경 */
--sand: #E0D8C9; /* 보조 섹션 배경 */
--mist: #E5DED2; /* CTA 베이지 그레이 */
--taupe: #C8BCA9; /* 카드/구획 */
--clay: #8C7F6C; /* 보조 텍스트 */
--ink: #2B2620; /* 본문 텍스트 / 다크 섹션 */
--umber: #3A2E2E; /* 시안 키 컬러 (히어로 카피 등) */
--espresso: #1E1A15; /* 푸터 */
--line: rgba(43,38,32,.16);
--line-soft: rgba(43,38,32,.08);
--bronze: #9A8253; /* 절제된 포인트(링크/언더라인) */
--on-dark: #E9E2D5; /* 다크 섹션 위 텍스트 */
--on-dark-mut:rgba(233,226,213,.62);
--accent: #ED7119; /* Partner 페이지 시안 오렌지 (Dev Mode 확정) */
--partner-grey:#EFEFEF; /* Partner 섹션 회색 (Dev Mode 확정) */
/* type */
--serif: 'KoPubWorld Batang', serif;
--sans: 'SUIT Variable', 'SUIT', system-ui, sans-serif;
/* metrics — 시안 기준 좌우 패딩 좁혀 컨텐츠 풀폭에 가깝게 */
--nav-h: 84px;
--pad-x: clamp(20px, 4vw, 72px);
--maxw: 1640px;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ---- Reset ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
font-family:var(--sans);
color:var(--ink);
background:var(--paper);
line-height:1.7;
font-weight:400;
letter-spacing:-.01em;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
/* ---- Utilities --------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.eyebrow{
font-family:var(--serif);
font-size:clamp(20px,2.4vw,30px);
font-weight:500; font-style:italic;
letter-spacing:.01em; color:var(--clay);
}
.serif{ font-family:var(--serif); }
.section{ padding-block:clamp(80px,11vw,160px); }
/* fade-in on scroll */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.12s; }
[data-reveal][data-delay="2"]{ transition-delay:.24s; }
[data-reveal][data-delay="3"]{ transition-delay:.36s; }
/* image placeholder (실제 사진 교체 전 표시) */
.ph{ background:var(--taupe) linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.05)); position:relative; overflow:hidden; }
.ph::after{
content:attr(data-label); position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(43,38,32,.40);
}
/* ============================================================
HEADER
============================================================ */
.header{
position:fixed; inset:0 0 auto 0; z-index:100;
transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.header__inner{
position:relative;
width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x);
display:flex; flex-direction:column; align-items:center; gap:14px;
padding-top:26px; padding-bottom:22px;
transition:padding .4s var(--ease), gap .4s var(--ease);
}
.logo{
font-family:var(--serif); font-weight:600; font-size:31px; letter-spacing:.05em;
color:var(--ink); transition:color .5s var(--ease), font-size .4s var(--ease);
}
.logo img{ display:block; height:25px; width:auto; transition:height .4s var(--ease), filter .4s var(--ease); }
.header.is-solid .logo img{ height:20px; }
.nav{ color:var(--ink); transition:color .5s var(--ease); }
/* 홈 히어로 위(스크롤 전) — 로고/메뉴 흰색 */
body.home-light-hero .header:not(.is-solid):not(.mega-open) .logo,
body.home-light-hero .header:not(.is-solid):not(.mega-open) .nav{ color:#fff; }
body.home-light-hero .header:not(.is-solid):not(.mega-open) .logo img{ filter:brightness(0) invert(1); }
body.home-light-hero .header:not(.is-solid):not(.mega-open) .burger span{ background:#fff; }
.nav__list{ display:flex; align-items:center; }
.nav__item{ display:flex; align-items:center; }
/* 메뉴 사이 | 구분선 */
.nav__item:not(:first-child)::before{
content:""; width:1px; height:11px; background:currentColor; opacity:.42;
margin:0 clamp(11px,1.5vw,19px);
}
.nav__link{
position:relative; font-size:16.5px; font-weight:500; letter-spacing:.015em;
color:inherit; padding-block:3px;
}
.nav__link::after{
content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px;
background:currentColor; transition:width .4s var(--ease);
}
.nav__item:hover .nav__link::after{ width:100%; }
/* 기본 헤더 — 모든 서브페이지에서 항상 #E9E5DC 솔리드 */
.header{
background:#E9E5DC;
-webkit-backdrop-filter:none;
backdrop-filter:none;
box-shadow:0 1px 0 var(--line-soft);
transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
/* 홈은 hero 위에서 투명 — 스크롤/호버 시 .is-solid/.mega-open이 색 적용 */
body.home-light-hero .header:not(.is-solid):not(.mega-open){ background:transparent; box-shadow:none; }
/* scrolled / solid state — 모든 서브페이지 기본 헤더 톤 #E9E5DC */
.header.is-solid{
background:#E9E5DC;
-webkit-backdrop-filter:none;
backdrop-filter:none;
box-shadow:0 1px 0 var(--line-soft);
}
.header.is-solid .header__inner{ padding-top:15px; padding-bottom:13px; gap:9px; }
.header.is-solid .logo{ font-size:25px; }
/* hover state — 헤더와 메가 동일한 반투명 색 + blur */
.header.mega-open{
background:var(--paper-80);
-webkit-backdrop-filter:saturate(140%) blur(10px);
backdrop-filter:saturate(140%) blur(10px);
box-shadow:0 1px 0 var(--line-soft);
}
/* body.header-solid — 페이지 로드 시점부터 솔리드 헤더 (about / why-scenting / insight) */
/* 배경/색은 글로벌 .header 기본(#E9E5DC)에서 처리. 사이즈는 기본 큰 padding 유지 — 스크롤 시 .is-solid가 축소 */
body.header-solid .header{ background:#E9E5DC; box-shadow:0 1px 0 var(--line-soft); }
/* 히어로 이미지가 헤더 영역을 침범하지 않도록 헤더 높이만큼 밀어냄 */
body.header-solid .page-hero{ margin-top:var(--nav-h); }
/* insight 하위 — 별도 히어로 없이 본문 첫 섹션이 헤더 아래에서 시작 */
body.insight-sub main{ padding-top:var(--nav-h); }
/* ============================================================
CONTACT — 문의 폼 + 주소
============================================================ */
.contact-sec{ background:#F5F5E9; }
.form-wrap{ max-width:820px; margin-inline:auto; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.8vw,38px) clamp(20px,2.2vw,32px); }
.form-field{ display:flex; flex-direction:column; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{
font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink);
letter-spacing:.01em; margin-bottom:10px;
}
.form-field label .req{ color:#B45A3E; margin-left:4px; }
.form-field input[type=text],
.form-field input[type=tel],
.form-field input[type=email],
.form-field textarea{
font-family:var(--sans); font-size:15px; color:var(--ink);
padding:14px 2px; border:none; border-bottom:1px solid rgba(43,38,32,.22);
background:transparent; outline:none;
transition:border-color .3s var(--ease);
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:rgba(43,38,32,.42); }
.form-field input:focus,
.form-field textarea:focus{ border-bottom-color:var(--ink); }
.form-field textarea{ min-height:170px; resize:vertical; line-height:1.7; }
.form-field .file-wrap{
display:flex; align-items:center; gap:14px; padding:14px 2px;
border-bottom:1px solid rgba(43,38,32,.22);
}
.form-field .file-wrap input[type=file]{
font-family:var(--sans); font-size:13.5px; color:var(--ink);
}
.form-hint{ margin-top:8px; font-size:12.5px; color:var(--clay); }
.form-agree-wrap{ margin-top:clamp(14px,2vw,24px); }
.form-agree{
display:flex; align-items:flex-start; gap:12px;
font-family:var(--sans); font-size:13.5px; color:var(--ink); line-height:1.75;
cursor:pointer;
}
.form-agree input[type=checkbox]{
margin-top:4px; width:16px; height:16px; accent-color:var(--ink); flex:0 0 16px;
}
.form-agree strong{ font-weight:600; }
.form-link{ color:var(--clay); text-decoration:underline; margin-left:4px; }
.form-link:hover{ color:var(--ink); }
.form-submit{ margin-top:clamp(28px,3.5vw,44px); text-align:center; }
.form-submit button{
font-family:var(--sans); font-size:15px; font-weight:600; padding:18px 54px;
background:var(--ink); color:#fff; border:none; cursor:pointer;
letter-spacing:.04em;
box-shadow:0 8px 22px -10px rgba(30,26,21,.4);
transition:background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.form-submit button:hover{
background:#3A2E2E; transform:translateY(-2px);
box-shadow:0 14px 28px -10px rgba(30,26,21,.5);
}
/* Contact 페이지 — 히어로 고딕 */
body.contact-page .biz-hero h1,
body.contact-page .biz-hero .biz-hero__lead,
body.contact-page .biz-hero .biz-hero__eyebrow{ font-family:var(--sans); }
@media (max-width:760px){
.form-grid{ grid-template-columns:1fr; }
}
/* solid·mega 상태에서는 항상 다크 텍스트 */
.header.is-solid .logo, .header.is-solid .nav,
.header.mega-open .logo, .header.mega-open .nav{ color:var(--ink); }
.header.is-solid .burger span, .header.mega-open .burger span{ background:var(--ink); }
/* mega dropdown (top은 JS가 헤더 높이에 맞춰 설정) */
.mega{
position:fixed; left:0; right:0; top:120px;
background:var(--paper-80);
-webkit-backdrop-filter:saturate(140%) blur(10px);
backdrop-filter:saturate(140%) blur(10px);
border-top:1px solid var(--line-soft);
box-shadow:0 24px 40px -28px rgba(30,26,21,.4);
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.header.mega-open .mega{ opacity:1; visibility:visible; transform:none; }
.mega__inner{
max-width:var(--maxw); margin-inline:auto; padding:44px var(--pad-x) 54px;
display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); justify-content:start; gap:clamp(14px,1.9vw,32px);
}
/* 서브메뉴 없는 칸: 제목만 노출 */
.mega__col.is-empty h4{ opacity:.6; }
.mega__col h4{
font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.03em;
color:var(--ink); margin-bottom:18px;
}
.mega__col h4 a{
color:inherit; padding:0; display:inline-block;
position:relative; transition:color .3s var(--ease);
}
.mega__col h4 a::after{
content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
background:currentColor; transform:scaleX(0); transform-origin:left;
transition:transform .35s var(--ease);
}
.mega__col h4 a:hover{ color:var(--bronze); transform:none; }
.mega__col h4 a:hover::after{ transform:scaleX(1); }
.mega__col > a{
display:block; font-size:13.5px; color:var(--clay); padding-block:7px;
transition:color .3s var(--ease), transform .3s var(--ease);
}
.mega__col > a:hover{ color:var(--ink); transform:translateX(4px); }
/* burger (mobile) */
.burger{ position:absolute; right:var(--pad-x); top:24px; display:none; width:30px; height:18px; }
.header.is-solid .burger{ top:16px; }
.burger span{
position:absolute; left:0; width:100%; height:1.5px; background:var(--ink);
transition:transform .4s var(--ease), opacity .3s, background-color .5s var(--ease);
}
.home-light-hero .burger span{ background:var(--ink); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
.is-menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2){ opacity:0; }
.is-menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
/* ============================================================
HERO
============================================================ */
.hero{ position:relative; height:100vh; min-height:640px; display:flex; align-items:center; color:var(--umber); overflow:hidden; }
.hero__media{
position:absolute; inset:0; z-index:-2;
transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.hero__media img,.hero__media video{
width:100%; height:100%; object-fit:cover;
transform-origin:center;
animation:hero-ken-burns 22s var(--ease) infinite alternate;
will-change:transform;
}
.hero__media .ph{ width:100%; height:100%; }
@keyframes hero-ken-burns{
0% { transform:scale(1) translate(0,0); }
100% { transform:scale(1.08) translate(-1.5%,-1%); }
}
/* 새 hero 이미지는 베이지 톤이라 다크 워시 제거 — 카피는 #3a2e2e */
.hero__content{
width:100%; text-align:center;
transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.hero__title{
font-family:var(--serif); font-weight:700; color:var(--umber);
font-size:clamp(20px,2.6vw,34px); line-height:1.3; letter-spacing:-.005em;
}
/* 키네틱 타이포 — 글자 단위 stagger 리빌 */
.hero__title .ch{
display:inline-block;
opacity:0; transform:translateY(28px);
transition:opacity .9s var(--ease), transform .9s var(--ease);
transition-delay:calc(var(--i, 0) * 55ms + 120ms);
}
.hero.is-ready .hero__title .ch{ opacity:1; transform:none; }
.hero__sub{
margin-top:26px; font-family:var(--serif); font-size:clamp(16px,1.55vw,21px); font-weight:600;
color:var(--umber); letter-spacing:.01em; line-height:1.7;
opacity:0; transform:translateY(14px);
transition:opacity 1s var(--ease) .9s, transform 1s var(--ease) .9s;
}
.hero.is-ready .hero__sub{ opacity:1; transform:none; }
.hero .btn-line{
opacity:0; transform:translateY(14px);
transition:opacity 1s var(--ease) 1.15s, transform 1s var(--ease) 1.15s,
background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.hero.is-ready .btn-line{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
.hero__media img,.hero__media video{ animation:none; }
.hero__media,.hero__content{ transition:none; }
.hero__title .ch,.hero__sub,.hero .btn-line{
opacity:1; transform:none; transition:none;
}
}
.btn-line{
display:inline-flex; align-items:center; gap:14px; margin-top:42px;
padding:16px 30px; border:1px solid var(--umber);
font-size:clamp(15px,1.35vw,18px); font-weight:600; letter-spacing:.04em; color:var(--umber);
transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn-line:hover{ background:var(--umber); color:var(--paper); border-color:var(--umber); }
.btn-line.dark{ border-color:var(--umber); color:var(--umber); }
.btn-line.dark:hover{ background:var(--umber); color:var(--paper); border-color:var(--umber); }
.hero__scroll{
position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
font-size:11px; letter-spacing:.2em; color:var(--umber);
}
.hero__scroll::after{ content:""; display:block; width:1px; height:42px; margin:12px auto 0; background:var(--umber); opacity:.65; animation:scrollLine 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes scrollLine{ 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }
/* ============================================================
PHILOSOPHY (text + image, 2col)
============================================================ */
.philosophy{ background:#D9D2C4; }
.section.philosophy{ padding-block:0; }
.philosophy__grid{ max-width:none; padding-inline:0; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0; }
.philosophy__copy{ padding-block:clamp(80px,11vw,150px); padding-left:var(--pad-x); padding-right:clamp(40px,5vw,80px); align-self:center; }
/* Hero 위계 기준 — 섹션 헤딩은 Hero 타이틀에 근접 */
.philosophy__copy .eyebrow{
display:block; margin-bottom:28px;
font-style:normal; font-weight:700; color:var(--ink);
font-size:clamp(20px,2.4vw,32px); letter-spacing:-.005em;
}
.philosophy__copy p{ font-family:var(--serif); font-size:clamp(19px,1.6vw,22px); line-height:2; color:var(--ink); font-weight:500; }
.philosophy__copy p + p{ margin-top:26px; }
.philosophy__media{ position:relative; min-height:560px; }
.philosophy__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* ============================================================
MEANING (P&W statement + 3 cards)
============================================================ */
.meaning{ background:#F0EDDC; text-align:center; }
.meaning__lead{
font-family:var(--sans); font-weight:500;
font-size:clamp(18px,2vw,26px); line-height:1.85; letter-spacing:-.01em; color:var(--ink);
max-width:920px; margin-inline:auto;
}
.meaning__lead strong{ font-weight:700; font-size:clamp(19px,2.1vw,27px); }
.meaning__lead .accent{ color:var(--clay); }
/* 시안 기준 — 이미지 풀폭으로 키우고 카드 간 여백 축소 */
.meaning__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); margin-top:clamp(50px,7vw,90px); text-align:center; }
.mcard .ph{ aspect-ratio:3/4; margin-bottom:22px; }
.mcard img{ width:100%; aspect-ratio:3/4; object-fit:cover; margin-bottom:22px; }
/* 카드 타이틀 — Hero 위계 기준 */
.mcard h3{ font-family:var(--sans); font-size:clamp(17px,1.55vw,21px); font-weight:700; letter-spacing:-.005em; margin-bottom:10px; color:var(--ink); }
.mcard .ko{ font-family:var(--sans); font-size:clamp(13.5px,1.05vw,15.5px); font-weight:500; color:var(--clay); margin-bottom:16px; letter-spacing:.005em; }
.mcard p{ font-family:var(--sans); font-size:clamp(13.5px,1.05vw,15.5px); color:var(--ink); line-height:1.85; opacity:.88; }
/* ============================================================
CAPABILITY (6-card hover grid)
============================================================ */
.capability{ background:#D9D2C4; }
.capability__head{ text-align:center; margin-bottom:clamp(48px,6vw,80px); }
.brandmark{ margin:0 auto 60px; display:flex; justify-content:center; }
.brandmark img{ width:clamp(180px,17vw,260px); height:auto; }
.brandmark .amp{ font-style:normal; font-weight:500; margin:0 .04em; }
.capability__head h2{ font-family:var(--sans); font-size:clamp(20px,2.4vw,32px); line-height:1.45; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.capability__head p{ margin-top:18px; color:var(--clay); font-size:clamp(13.5px,1.05vw,15.5px); max-width:560px; margin-inline:auto; line-height:1.8; }
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
.cap{
display:flex; flex-direction:column;
background:transparent; border:none;
transition:transform .55s var(--ease);
}
.cap:hover{ transform:translateY(-6px); }
.cap__media{ aspect-ratio:16/11; overflow:hidden; }
.cap__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.cap:hover .cap__media img{ transform:scale(1.06); }
.cap__body{ padding:24px 4px 22px; display:flex; flex-direction:column; flex:1; }
.cap h3{
font-family:var(--sans); font-size:clamp(17px,1.55vw,21px); font-weight:700; letter-spacing:-.005em; color:var(--ink);
padding-bottom:14px; border-bottom:1px solid var(--line);
}
.cap .cap__list{ margin-top:16px; flex:1; }
.cap .cap__list li{ font-size:clamp(17px,1.4vw,18.5px); color:var(--ink); opacity:.78; line-height:1.85; }
/* 박스형 more + 버튼 (그림자) */
.cap .more{
align-self:flex-start; margin-top:24px;
display:inline-flex; align-items:center; gap:8px;
padding:11px 22px; border:1px solid var(--line);
font-size:11.5px; letter-spacing:.12em; color:var(--ink);
background:#fff;
box-shadow:0 6px 18px -8px rgba(30,26,21,.30);
transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), gap .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cap .more::after{ content:"+"; font-size:13px; }
.cap:hover .more{ background:var(--ink); color:#fff; border-color:var(--ink); gap:13px; box-shadow:0 10px 24px -8px rgba(30,26,21,.45); transform:translateY(-2px); }
/* ============================================================
MARKETING CTA (dark band)
============================================================ */
.fmkt{ position:relative; background:var(--espresso); color:var(--on-dark); overflow:hidden; }
.fmkt__media{ position:absolute; inset:0; z-index:0; opacity:.32; }
.fmkt__media .ph{ width:100%; height:100%; }
.fmkt__media img{ width:100%; height:100%; object-fit:cover; }
.fmkt::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,26,21,.92) 0%, rgba(30,26,21,.55) 100%); z-index:1; }
.fmkt .wrap{ position:relative; z-index:2; }
.fmkt__inner{ max-width:640px; }
.fmkt h2{ font-family:var(--sans); font-size:clamp(20px,2.4vw,32px); line-height:1.55; font-weight:700; letter-spacing:-.01em; }
.fmkt p{ margin-top:22px; color:var(--on-dark-mut); font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.9; }
.fmkt__link{
display:inline-flex; align-items:center; gap:16px; margin-top:36px;
padding:16px 30px;
border:1px solid rgba(233,226,213,.6); background:transparent;
font-family:var(--sans); font-size:clamp(14px,1.15vw,16px); font-weight:600; letter-spacing:.04em;
color:var(--on-dark);
transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.fmkt__link .chev{ font-size:17px; line-height:1; transition:transform .4s var(--ease); }
.fmkt__link:hover{ background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); }
.fmkt__link:hover .chev{ transform:translateX(4px); }
/* ============================================================
FOOTER
============================================================ */
.footer{ background:var(--espresso); color:var(--on-dark); padding-block:64px 40px; border-top:1px solid rgba(233,226,213,.10); }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; align-items:flex-start; }
.footer__brand{ font-family:var(--serif); font-size:24px; letter-spacing:.05em; }
.footer__brand img{ display:block; height:26px; width:auto; margin-bottom:8px; filter:brightness(0) invert(1); }
.footer__brand img.footer__brand-symbol{ height:auto; width:clamp(140px,12vw,190px); filter:none; margin-bottom:14px; }
.footer__brand small{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.16em; color:var(--on-dark-mut); margin-top:8px; }
.footer__links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer__links a{ font-size:13px; color:var(--on-dark-mut); transition:color .3s var(--ease); }
.footer__links a:hover{ color:var(--on-dark); }
.footer__info{ margin-top:40px; padding-top:26px; border-top:1px solid rgba(233,226,213,.12); font-size:12.5px; line-height:1.9; color:var(--on-dark-mut); }
.footer__info b{ font-weight:500; color:rgba(233,226,213,.8); }
/* ============================================================
MOBILE
============================================================ */
@media (max-width:900px){
:root{ --nav-h:68px; }
.header{ height:var(--nav-h); }
.logo{ font-size:22px; }
.nav{ display:none; }
.burger{ display:block; }
.mega{ display:none; }
/* mobile slide-out menu */
.mnav{
position:fixed; inset:0; z-index:90; background:var(--paper);
padding:calc(var(--nav-h) + 18px) var(--pad-x) 80px;
overflow-y:auto; -webkit-overflow-scrolling:touch;
opacity:0; visibility:hidden; transform:translateY(-2%);
transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.is-menu-open .mnav{ opacity:1; visibility:visible; transform:none; }
.mnav__group{ padding:14px 0 10px; border-bottom:1px solid var(--line-soft); }
.mnav__top{
display:block; font-family:var(--serif); font-size:26px; line-height:1.3;
color:var(--ink); padding:6px 0 4px;
}
.mnav__sub{
display:block; font-family:var(--sans); font-size:13.5px;
color:var(--clay); padding:7px 0 7px 14px; letter-spacing:.01em;
}
.mnav__sub:active{ color:var(--ink); }
.philosophy__grid{ grid-template-columns:1fr; gap:0; }
.philosophy__copy{ padding-inline:var(--pad-x); padding-block:clamp(64px,12vw,90px); }
.philosophy__media{ min-height:0; aspect-ratio:4/3; }
.meaning__cards{ grid-template-columns:1fr; }
.cap-grid{ grid-template-columns:1fr; }
.cap__body{ padding:26px 26px 24px; }
.footer__top{ flex-direction:column; }
}
@media (min-width:901px){ .mnav{ display:none; } }
@media (max-width:600px){
.hero{ min-height:560px; }
.meaning__cards{ gap:36px; }
}
/* ============================================================
SUB-PAGE COMPONENTS (About, Why Scenting, …)
============================================================ */
/* page hero banner (어두운 이미지 위 라이트 텍스트) */
.page-hero{ position:relative; min-height:clamp(380px,54vh,540px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.page-hero__media{ position:absolute; inset:0; z-index:-2; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, rgba(20,17,13,.72) 0%, rgba(20,17,13,.45) 55%, rgba(20,17,13,.28) 100%); }
.page-hero__inner{ padding-bottom:clamp(48px,6vw,82px); padding-top:calc(var(--nav-h) + 30px); }
.page-hero h1{ font-family:var(--serif); font-size:clamp(30px,4.4vw,52px); font-weight:600; letter-spacing:.02em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.page-hero p{ margin-top:16px; font-size:clamp(13px,1.25vw,16px); color:#fff; line-height:1.85; font-weight:300; text-shadow:0 1px 16px rgba(0,0,0,.3); }
/* split section (이미지 풀블리드 + 텍스트 가운데정렬) */
.split{ background:var(--cream); }
.section.split{ padding-block:0; }
.split__grid{ max-width:none; padding-inline:0; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0; }
.split__media{ position:relative; min-height:540px; min-width:0; }
.split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 기본: 이미지 좌(좌측 끝까지) · 텍스트 우 */
.split__body{
align-self:center; text-align:center;
padding-block:clamp(70px,9vw,130px);
padding-left:clamp(40px,5vw,80px); padding-right:var(--pad-x);
min-width:0;
}
/* reverse: 이미지 우(우측 끝까지) · 텍스트 좌 */
.split--reverse .split__media{ order:2; }
.split--reverse .split__body{ order:1; padding-left:var(--pad-x); padding-right:clamp(40px,5vw,80px); }
.split__body .eyebrow-en{ font-family:var(--serif); font-size:clamp(22px,2.6vw,32px); font-weight:600; letter-spacing:.01em; color:var(--ink); }
.split__body .ko{ display:block; margin-top:4px; font-size:15px; color:var(--clay); letter-spacing:.02em; }
.split__body p{ margin-top:24px; font-size:clamp(14px,1.05vw,16px); line-height:1.95; color:var(--ink); opacity:.9; }
.split__body p + p{ margin-top:14px; }
/* split body 변형 — 라벨 + 굵은 고딕 헤딩 + 줄단위 본문 */
.split__body .split__label{ display:block; font-size:14px; color:var(--clay); letter-spacing:.02em; margin-bottom:14px; }
.split__body .split__title{ font-family:var(--sans); font-weight:700; font-size:clamp(20px,2.1vw,27px); line-height:1.5; letter-spacing:-.01em; color:var(--ink); }
.split__body .split__text{ margin-top:24px; font-size:clamp(13px,1vw,15px); line-height:1.95; color:var(--clay); }
/* 가장자리 정렬(에디토리얼) */
.split--alignR .split__body{ text-align:right; }
.split--alignL .split__body{ text-align:left; }
/* outline box button (라이트 배경용 다크 아웃라인) */
.btn-box{ display:inline-flex; align-items:center; gap:14px; margin-top:30px;
padding:14px 26px; border:1px solid var(--line);
font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--ink);
transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.btn-box .chev{ font-size:15px; line-height:1; transition:transform .4s var(--ease); }
.btn-box:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-box:hover .chev{ transform:translateX(4px); }
/* full-width dark band */
.band{ position:relative; min-height:clamp(320px,44vh,480px); display:flex; align-items:center; color:var(--on-dark); overflow:hidden; }
.band__media{ position:absolute; inset:0; z-index:-2; }
.band__media img{ width:100%; height:100%; object-fit:cover; }
.band::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, rgba(28,24,19,.66) 0%, rgba(28,24,19,.34) 50%, rgba(28,24,19,.12) 100%); }
.band h2{ font-family:var(--serif); font-size:clamp(24px,3vw,40px); font-weight:600; letter-spacing:.02em; }
.band p{ margin-top:14px; font-size:clamp(13px,1.2vw,15px); color:rgba(233,226,213,.8); line-height:1.85; max-width:520px; }
/* cards grid (이미지 + 캡션) */
.cards-sec{ background:var(--cream); }
.cards-sec__head{ text-align:center; margin-bottom:clamp(46px,6vw,76px); }
.cards-sec__head .eyebrow-en{ font-family:var(--serif); font-size:clamp(22px,2.8vw,34px); font-weight:600; color:var(--ink); }
.cards-sec__head .ko{ display:block; margin-top:6px; font-size:15px; color:var(--clay); }
.cards-sec__head .lead{ margin-top:22px; font-family:var(--serif); font-size:clamp(17px,1.7vw,22px); line-height:1.7; color:var(--ink); }
.cards{ display:flex; flex-wrap:wrap; justify-content:center; text-align:center; column-gap:clamp(20px,2.6vw,40px); row-gap:clamp(40px,4vw,60px); }
.cards.cards--portrait .mcard img,
.cards.cards--portrait .mcard .ph{ aspect-ratio:2/3; }
.cards > *{ width:calc((100% - 2 * clamp(20px,2.6vw,40px)) / 3); }
.cards.cols-2 > *{ width:calc((100% - clamp(20px,2.6vw,40px)) / 2); }
/* split — 키 큰 이미지 변형 (about Brand / Design Philosophy, why-scenting 등) */
.split--tall .split__media{ min-height:clamp(640px,58vh,720px); }
/* split title 세리프 변형 (why-scenting 등) — 다른 페이지의 split__title 영향 X */
.split__body .split__title--serif{ font-family:var(--serif); font-weight:500; line-height:1.45; }
/* body.en-sans — 헤더 제외 영어 디스플레이를 고딕(SUIT)으로 (about 한정) */
body.en-sans .page-hero h1,
body.en-sans .split__body .eyebrow-en,
body.en-sans .band h2,
body.en-sans .footer__brand{ font-family:var(--sans); }
/* split 한글 sub — 영문 타이틀(22-32px)보다 2px 작게 */
body.en-sans .split__body .ko{
display:block; margin-top:4px;
font-size:clamp(20px,2.3vw,30px); font-weight:500;
color:var(--ink); letter-spacing:-.005em; line-height:1.4;
}
/* split 본문 — +4pt */
body.en-sans .split__body p{
font-size:clamp(18px,1.4vw,20px); line-height:2;
}
/* page-hero — 세로 1.5배 + 오버레이 더 옅게 + 텍스트 세로 중앙 정렬 */
body.en-sans .page-hero{ min-height:clamp(570px,81vh,810px); align-items:center; }
body.en-sans .page-hero__inner{
padding-top:var(--nav-h);
padding-bottom:0;
}
body.en-sans .page-hero::before{
background:linear-gradient(90deg, rgba(20,17,13,.32) 0%, rgba(20,17,13,.16) 55%, rgba(20,17,13,.05) 100%);
}
/* band(Our Mission/Vision) — 세로 키움 + 흰 텍스트 + 검정 반투명 오버레이 */
body.en-sans .band{ min-height:clamp(440px,62vh,640px); color:#fff; }
body.en-sans .band::before{
display:block; content:"";
position:absolute; inset:0; z-index:-1;
background:rgba(20,17,13,.36);
}
body.en-sans .band h2{ color:#fff; }
body.en-sans .band p{ color:#fff; opacity:.92; }
/* 가치 카드 — .ai 실측 위계 (30 : 24 : 20) + ko 색상 ink */
body.en-sans .mcard h3{ font-size:clamp(22px,2.2vw,30px); }
body.en-sans .mcard .ko{
color:#2B2620; font-size:clamp(18px,1.7vw,24px); font-weight:600;
margin-bottom:8px;
}
body.en-sans .mcard p{ font-size:clamp(15px,1.4vw,20px); line-height:1.25; margin-top:0; }
/* 페이지 섹션 배경 #F5F5E9 통일 — 헤더는 글로벌 #E9E5DC 유지 */
body.en-sans{ background:#F5F5E9; }
body.en-sans .philosophy,
body.en-sans .cards-sec,
body.en-sans .cream-spacer,
body.en-sans .split{ background:#F5F5E9; }
/* split--tall — 첫 split(brand)는 이미지 자연 비율로, 두 번째 split(design)는 동일 비율 cover */
body.en-sans .split--tall .split__grid{ align-items:center; }
body.en-sans .split--tall:not(.split--reverse) .split__media{ min-height:auto; position:static; }
body.en-sans .split--tall:not(.split--reverse) .split__media img{ position:static; width:100%; height:auto; display:block; }
/* design 섹션 — Brand Philosophy 이미지(1100×1266) 비율로 cover */
body.en-sans .split--tall.split--reverse .split__media{
min-height:auto; position:relative; aspect-ratio:1100/1266;
}
body.en-sans .split--tall.split--reverse .split__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
/* Design Philosophy — Brand Philosophy와의 세로 간격 축소 + 텍스트 상단 정렬 */
body.en-sans .cream-spacer:has(+ #design-philosophy){ height:0; }
body.en-sans #design-philosophy .split__grid{ align-items:start; }
body.en-sans #design-philosophy .split__body{ padding-block:clamp(24px,3vw,48px); padding-left:50%; }
/* About/Brand Philosophy 페이지 — .ai 확정안 반영 (en-sans 한정) */
/* 헤더 솔리드 #E8E4DB (하우스룰 일관) */
body.en-sans .header,
body.en-sans .header.is-solid{ background:#E8E4DB; }
/* [1] page-hero — 좌측 정렬 (h1·p 좌측 시작, 블록 가로 중앙 해제) */
body.en-sans .page-hero__inner{ text-align:left; }
body.en-sans .page-hero h1,
body.en-sans .page-hero p{ margin-inline:0; }
body.en-sans .page-hero p{ max-width:760px; }
/* [4] Mission/Vision 다크 밴드 — 좌측 정렬 */
body.en-sans .band .wrap{ text-align:left; }
body.en-sans .band p{ max-width:680px; margin-inline:0; }
/* [5] 가치 카드 — .ai 정밀 정합 (행간 1.35 · weight 300 · 본문색 #4A4440) */
body.en-sans .cards--portrait .mcard .ko{ line-height:1.2; color:#2B2620; font-weight:600; }
body.en-sans .cards--portrait .mcard p{
line-height:1.25; font-weight:300; color:#4A4440;
}
/* body.serif-page — 본문 단락까지 세리프 기본 (why-scenting 등) */
body.serif-page .biz-hero h1,
body.serif-page .biz-hero__lead,
body.serif-page .split__body .split__label,
body.serif-page .split__body .split__title,
body.serif-page .split__body .split__text,
body.serif-page .cards-sec__head .eyebrow-en,
body.serif-page .cards-sec__head .ko,
body.serif-page .cards-sec__head .lead,
body.serif-page .cards-sec__head > p{ font-family:var(--serif); }
/* split 본문 영역 사이즈/굵기 ↑ (라벨 +4pt, 타이틀·본문 +2pt) */
body.serif-page .split__body .split__label{
font-size:18px; font-weight:600; color:var(--ink);
}
body.serif-page .split__body .split__title{
font-size:clamp(22px,2.35vw,29px); font-weight:700;
}
body.serif-page .split__body .split__text{
font-size:clamp(15px,1.15vw,17px); font-weight:500;
color:var(--ink); opacity:.85;
}
/* Necessity 메인 제목(ko) 크고 굵게 + lead 그보다 작게 */
body.serif-page .cards-sec__head .ko{
display:block; margin-top:14px;
font-size:clamp(20px,2.2vw,30px); font-weight:700;
color:var(--ink); letter-spacing:-.005em; line-height:1.4;
}
body.serif-page .cards-sec__head .lead{
margin-top:18px;
font-size:clamp(16px,1.3vw,19px); font-weight:600;
color:var(--ink); opacity:.82;
}
/* Necessity 본문 단락 — +2pt + weight↑ + ink 옅게(맑은 검은 톤) */
body.serif-page .cards-sec__head > p{
margin-top:18px; max-width:680px; margin-inline:auto;
font-size:clamp(16px,1.4vw,17px); font-weight:500;
color:var(--ink); opacity:.62; line-height:1.9;
}
/* 히어로 서브 1행 — 더 크게 + 살짝 두껍게 */
body.serif-page .biz-hero__lead{ font-size:clamp(18px,1.55vw,22px); font-weight:600; }
/* 예외 1 — 히어로 서브 2행 (sans + 작게) */
body.serif-page .biz-hero__lead .lead-alt{
display:inline-block; margin-top:10px;
font-family:var(--sans); font-size:clamp(13.5px,1.1vw,16px); font-weight:500;
}
/* 예외 2 — Necessity figcaption (sans, 사이즈 ↑) */
body.serif-page .figure figcaption{
font-family:var(--sans);
font-size:clamp(17px,1.4vw,22px);
font-weight:600;
letter-spacing:.01em;
margin-top:22px;
}
/* split --paneled — 섹션 배경 #F5F5E9 + 텍스트 절반 흰 패널 + 위아래 여백 */
.section.split.split--paneled{
background:#F5F5E9;
padding-block:clamp(20px,2.5vw,40px);
}
.split--paneled .split__body{ background:#FFFFFF; }
/* imgstrip --tall — 약 2배 높이 */
.imgstrip.imgstrip--tall{ height:clamp(600px,80vh,860px); }
/* ============================================================
body.serif-page (why-scenting) — .ai 확정안 반영
============================================================ */
/* 페이지 배경 #F5F5E9 + 헤더 솔리드 #E8E4DB */
body.serif-page{ background:#F5F5E9; }
body.serif-page .biz-hero,
body.serif-page .section,
body.serif-page .cards-sec{ background:#F5F5E9; }
body.serif-page .header,
body.serif-page .header.is-solid{ background:#E8E4DB; }
/* 헤더·nav·버튼·캡션은 sans 유지(페이지 기본 serif 영향 차단) */
body.serif-page .header,
body.serif-page .nav,
body.serif-page .mnav,
body.serif-page .btn-line,
body.serif-page .btn-box,
body.serif-page .btn-pill{ font-family:var(--sans); }
/* [2][3] 두 split 모두 텍스트 블록 중앙정렬 */
body.serif-page .split--alignR .split__body,
body.serif-page .split--alignL .split__body{ text-align:center; }
/* split 본문 — 줄바꿈 가독성 위해 중앙 정렬 시 안정적 가로폭 */
body.serif-page .split__body .split__title,
body.serif-page .split__body .split__text{ margin-inline:auto; }
body.serif-page .split__body .split__text{ max-width:640px; }
/* [4] 보틀 밴드(imgstrip--tall) — .ai 실측 비율(1025/2522 ≈ 40vw) */
body.serif-page .imgstrip.imgstrip--tall{ height:clamp(360px,40vw,820px); }
/* ============================================================
body.biz-page — business(제품 개발·제조) 페이지 전용 톤·위계
============================================================ */
body.biz-page{ background:#F5F5E9; font-family:var(--serif); }
body.biz-page .biz-hero,
body.biz-page .steps,
body.biz-page .section{ background:#F5F5E9; }
/* 헤더 — 솔리드 #E8E4DB */
body.biz-page .header,
body.biz-page .header.is-solid{ background:#E8E4DB; }
/* 헤더·nav·버튼은 sans 그대로 (페이지 기본 serif 영향 차단) */
body.biz-page .header,
body.biz-page .nav,
body.biz-page .mnav,
body.biz-page .btn-line,
body.biz-page .btn-box,
body.biz-page .btn-pill{ font-family:var(--sans); }
/* 히어로 — H1·서브타이틀 세리프, 본문 p 고딕 */
body.biz-page .biz-hero h1{
font-family:var(--serif); font-size:clamp(24px,3vw,38px); font-weight:700; color:var(--ink);
}
body.biz-page .biz-hero h1 .h1-sub{
display:inline-block; margin-top:8px;
font-family:var(--serif); font-size:.5em; font-weight:600; letter-spacing:.01em;
color:var(--ink);
}
body.biz-page .biz-hero .biz-hero__lead{
font-family:var(--sans); font-size:clamp(14px,1.2vw,17px); font-weight:500;
color:var(--clay); opacity:1;
}
/* WHY OEM/ODM — 흰 배경 + 텍스트 블록 중앙정렬 */
body.biz-page .split.split--alignR{ background:#FFFFFF; }
body.biz-page .split--alignR .split__body{ text-align:center; }
body.biz-page .split--alignR .split__body .biz-eyebrow{
font-family:var(--serif); font-size:clamp(16px,1.3vw,18px);
letter-spacing:.12em; color:var(--ink); margin-bottom:18px;
}
body.biz-page .split--alignR .split__body .split__title{
font-family:var(--serif); font-size:clamp(23px,2.55vw,30px); font-weight:700; line-height:1.45;
color:var(--ink);
}
/* WHY OEM 설명 본문 — 고딕(spec) */
body.biz-page .split--alignR .split__body .why-oem__lead{
font-family:var(--sans); font-size:clamp(15px,1.25vw,18px);
color:var(--clay); opacity:1; line-height:1.95;
}
/* 혜택 4줄 — 세리프, 중앙정렬, 각 줄 끝 브론즈 · */
body.biz-page .split--alignR .split__body .why-oem__bullets{
text-align:center; margin-top:32px;
}
body.biz-page .split--alignR .split__body .why-oem__bullets li{
display:block; font-family:var(--serif); font-size:clamp(18px,1.4vw,20px);
font-weight:600; color:var(--ink); padding:6px 0;
}
/* 섹션 헤딩 스왑 — 영문 eyebrow가 메인(세리프) + 한글 h2가 sub */
body.biz-page .biz-head .biz-eyebrow{
font-family:var(--serif); font-size:clamp(20px,2.4vw,32px); font-weight:600;
color:var(--ink); letter-spacing:.04em; margin-bottom:14px;
}
body.biz-page .biz-head h2{
font-family:var(--serif); font-size:clamp(16px,1.25vw,18px); font-weight:500;
color:var(--ink); opacity:.85; letter-spacing:.01em;
}
/* WHAT WE MAKE — 카드 타이틀 세리프 Bold, 캡션 고딕 --clay */
body.biz-page .make-card__img{ width:clamp(220px,22vw,300px); }
body.biz-page .make-card h3{
font-family:var(--serif); font-weight:700;
font-size:clamp(19px,1.75vw,23px); color:var(--ink);
}
body.biz-page .make-card .desc{
font-family:var(--sans); font-size:clamp(15px,1.2vw,17px);
color:var(--clay); max-width:320px;
}
/* PRODUCT DEVELOPMENT 9 steps — 번호 큰 옅은 뉴트럴 그레이 (.ai 측정 기준) */
body.biz-page .step__no{
font-family:var(--serif); color:#C0BEB4;
font-size:clamp(36px,3.4vw,46px); font-weight:600;
}
body.biz-page .step h4{
font-family:var(--sans); font-weight:700;
font-size:clamp(17px,1.4vw,20px); color:var(--ink);
}
body.biz-page .step p{
font-family:var(--sans); font-size:clamp(15px,1.2vw,17px);
color:var(--clay); opacity:1;
}
/* CTA — 카피 세리프, 버튼 알약(브론즈), 박스/아웃라인 금지 */
body.biz-page .cta--light{ min-height:clamp(460px,60vh,640px); }
body.biz-page .cta--light .cta__eyebrow{
font-family:var(--serif); font-size:clamp(14.5px,1.15vw,17px);
color:var(--ink); opacity:.78;
}
body.biz-page .cta--light h2{
font-family:var(--serif); font-weight:700; color:var(--ink);
}
body.biz-page .cta--light .btn-pill{
font-family:var(--sans);
background:#8B5E45; color:#fff;
font-size:clamp(15px,1.25vw,17px); padding:16px 36px;
border:none;
}
body.biz-page .cta--light .btn-pill:hover{ background:#6F4936; }
/* ============================================================
body.scent-page — business/scent (향기마케팅) 페이지 전용 톤·위계
============================================================ */
body.scent-page{ background:#F5F5E9; }
/* 헤더 솔리드 #E8E4DB */
body.scent-page .header,
body.scent-page .header.is-solid{ background:#E8E4DB; }
/* CUSTOMER JOURNEY 번호색 — .ai 톤(연한 뉴트럴 그레이) */
body.scent-page .jstep__no{ color:#C0BEB4; }
/* 히어로 — 흰 배경, eyebrow 제거, lead 1행 강조, 위 공백 2배 */
body.scent-page .biz-hero{
background:#FFFFFF;
padding-top:calc(var(--nav-h) + clamp(100px,14vw,220px));
}
body.scent-page .biz-hero__eyebrow{ display:none; }
body.scent-page .biz-hero .biz-hero__lead .lead-main{
display:inline-block; margin-bottom:14px;
font-size:clamp(17px,1.45vw,20px); font-weight:700; color:var(--ink);
}
/* 본문 3행 — 고딕 */
body.scent-page .biz-hero .biz-hero__lead .lead-sub{ font-family:var(--sans); }
/* hero 이미지 — 좌우 패딩 + 원본 비율 + 상하 배경 분할(위 50% 흰, 아래 50% #F5F5E9) */
body.scent-page .biz-hero-img{
background:linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #F5F5E9 50%, #F5F5E9 100%);
padding-block:clamp(24px,3vw,48px);
}
body.scent-page .biz-hero-img .wrap{ padding-inline:var(--pad-x); }
body.scent-page .biz-hero-img img{
width:100%; height:auto; object-fit:contain; display:block;
}
/* 섹션 배경 통일 (#F5F5E9), SCENT DEVICE만 어두운 톤 유지 */
body.scent-page .section,
body.scent-page .effects{ background:#F5F5E9; }
/* biz-head 위계 스왑 — 영문 eyebrow가 메인, 한글 h2가 sub(세리프), lead 제거 */
body.scent-page .biz-head .biz-eyebrow{
font-size:clamp(20px,2.4vw,32px); font-weight:600; color:var(--ink);
letter-spacing:.04em; margin-bottom:14px;
}
body.scent-page .biz-head h2{
font-family:var(--serif); font-size:clamp(18px,1.5vw,21px); font-weight:600;
color:var(--ink); opacity:1; letter-spacing:.005em; line-height:1.5;
}
body.scent-page .biz-head .lead{ display:none; }
/* CUSTOMER JOURNEY 서브: 좋은 향은 단순히 공간에 머물지 않습니다. */
body.scent-page #customer-journey .biz-head .lead{
display:block; font-family:var(--serif);
margin-top:14px; font-size:clamp(14.5px,1.15vw,17px); color:var(--ink); opacity:.78;
}
/* WHY US / OUR SOLUTION / SCENT TO BRAND — 톤 다운 배경 */
body.scent-page #why-us,
body.scent-page #our-solution,
body.scent-page #scent-to-brand{ background:#E4DFD3; }
/* 3 섹션 위쪽 공백 1/2 */
body.scent-page .effects.section,
body.scent-page #our-solution,
body.scent-page #scent-to-brand{
padding-top:clamp(40px,5.5vw,80px);
}
/* Customer Journey 카드 — 흰 배경 */
body.scent-page .jstep{ background:#FFFFFF; border-color:rgba(43,38,32,.06); }
/* Why Scent Marketing 효과 — 아이콘 + 타이틀 사이즈 ↑ */
body.scent-page .eff__ico{
width:clamp(80px,7.5vw,116px); height:clamp(80px,7.5vw,116px);
}
body.scent-page .eff h4{
margin-top:6px; font-size:clamp(16px,1.4vw,19px); font-weight:600;
}
/* SCENT DEVICE — 텍스트 연한 베이지(어두운 배경) */
body.scent-page .device .biz-eyebrow,
body.scent-page .device .biz-head h2{ color:var(--on-dark); opacity:1; }
/* SCENT DEVICE — 가로 슬라이드 (한 번에 3개 노출, 6개 스크롤) */
body.scent-page .device-grid{
display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
gap:clamp(18px,2vw,30px); padding-bottom:14px;
scrollbar-color:rgba(233,226,213,.4) transparent;
}
body.scent-page .device-grid::-webkit-scrollbar{ height:6px; }
body.scent-page .device-grid::-webkit-scrollbar-thumb{ background:rgba(233,226,213,.3); border-radius:6px; }
body.scent-page .device-card{
flex:0 0 calc((100% - 2 * clamp(18px,2vw,30px)) / 3);
scroll-snap-align:start;
padding:0; overflow:hidden; background:#fff;
}
body.scent-page .device-card > img{
width:100%; height:100%; object-fit:cover; display:block;
}
/* SCENT TO BRAND — lead 다시 노출 + flow5-grid 폭 OUR SOLUTION과 동일 */
body.scent-page #scent-to-brand .flow5-grid{ max-width:none; }
/* FINAL CTA — 흰 오버레이 + 섹션 키↑ + 문장 간격↓ */
body.scent-page .cta--light{ min-height:clamp(500px,56vh,680px); }
body.scent-page .cta--light::before{
background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.40) 100%);
}
body.scent-page .cta--light .cta__eyebrow{
font-family:var(--serif); font-size:clamp(11px,.95vw,13px); font-weight:600;
margin-bottom:12px;
}
body.scent-page .cta--light h2{
font-weight:600; font-size:clamp(20px,2.7vw,34px); margin-top:0;
}
body.scent-page .cta--light p{
margin-top:8px; font-family:var(--serif);
font-size:clamp(20px,2.7vw,34px); font-weight:600;
color:var(--ink); opacity:1; line-height:1.5;
}
body.scent-page .cta--light .btn-pill{
margin-top:22px; background:#8B5E45; color:#fff;
}
body.scent-page .cta--light .btn-pill:hover{ background:#6F4936; }
/* cream spacer — 섹션 분리용 */
.cream-spacer{ height:clamp(28px,4vw,56px); background:var(--cream); }
.figure figcaption{ margin-top:18px; text-align:center; font-size:15px; color:var(--ink); letter-spacing:.01em; }
.figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:900px){
.split__grid{ grid-template-columns:1fr; gap:0; }
.split__media{ min-height:0; aspect-ratio:4/3; order:0 !important; }
.split__body{ order:0 !important; padding-inline:var(--pad-x) !important; padding-block:clamp(56px,11vw,80px); }
.split--alignR .split__body, .split--alignL .split__body{ text-align:left; }
.cards > *{ width:100% !important; }
/* split--tall도 모바일에서는 min-height 해제 — aspect-ratio:4/3 + min-height:640 조합으로 인한 가로 overflow 방지 */
.split--tall .split__media{ min-height:0; }
}
/* plain full-width image strip (텍스트 없는 다크 밴드) */
.imgstrip{ width:100%; height:clamp(300px,42vh,460px); overflow:hidden; }
.imgstrip img{ width:100%; height:100%; object-fit:cover; }
/* ============================================================
CERTIFIED PAGE
============================================================ */
.cert-sec{ background:var(--cream); }
.cert-sec__head{ text-align:center; margin-bottom:clamp(48px,6vw,82px); }
.cert-sec__head h2{ font-family:var(--serif); font-size:clamp(24px,3vw,38px); font-weight:400; color:var(--ink); letter-spacing:.02em; }
.cert-sec__head .en{ display:block; margin-top:8px; font-family:var(--serif); font-size:15px; color:var(--clay); letter-spacing:.06em; }
.cert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); }
.cert{ position:relative; display:block; aspect-ratio:3/4.15; background:#fff; border:1px solid var(--line-soft); overflow:hidden;
transition:box-shadow .5s var(--ease), transform .5s var(--ease); }
.cert:hover{ box-shadow:0 26px 44px -32px rgba(30,26,21,.5); transform:translateY(-4px); }
.cert img{ width:100%; height:100%; object-fit:cover; }
/* placeholder (실제 스캔 받기 전) */
.cert__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; text-align:center; }
.cert__ph .ttl{ font-size:13px; color:var(--clay); letter-spacing:.04em; }
.cert__ph .sub{ font-size:11px; color:rgba(140,127,108,.6); letter-spacing:.1em; }
.cert__ph::before{ content:""; width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
/* hover overlay (각 링크) */
.cert__overlay{ position:absolute; inset:0; background:rgba(28,24,19,.5); color:var(--on-dark);
display:flex; align-items:center; justify-content:center; gap:8px;
font-size:11px; letter-spacing:.16em; opacity:0; transition:opacity .4s var(--ease); }
.cert:hover .cert__overlay{ opacity:1; }
@media (max-width:760px){ .cert-grid{ grid-template-columns:repeat(2,1fr); } }
/* ============================================================
HISTORY (timeline)
============================================================ */
.history-head{ text-align:center; margin-bottom:clamp(50px,6vw,80px); }
.history-head h1{ font-family:var(--serif); font-size:clamp(24px,3vw,38px); font-weight:400; color:var(--ink); letter-spacing:.01em; }
.history-head .sub{ display:block; margin-top:8px; font-family:var(--serif); font-size:15px; color:var(--clay); letter-spacing:.05em; }
.tl{ position:relative; max-width:1000px; margin-inline:auto; }
.tl::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:1px; background:var(--line); transform:translateX(-50%); }
.tl__item{ position:relative; margin-bottom:clamp(36px,5vw,60px); }
.tl__item:last-child{ margin-bottom:0; }
.tl__year{ position:absolute; left:50%; top:0; transform:translateX(-50%);
width:58px; height:58px; border-radius:50%; background:var(--ink); color:var(--on-dark);
display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:.02em; z-index:2; }
.tl__c{ width:calc(50% - 64px); padding-top:6px; }
.tl__item--l .tl__c{ text-align:right; }
.tl__item--r .tl__c{ margin-left:calc(50% + 64px); text-align:left; }
.tl__c h3{ font-size:clamp(15px,1.25vw,18px); font-weight:700; color:var(--ink); line-height:1.45; }
.tl__c p{ margin-top:9px; font-size:13px; color:var(--clay); line-height:1.85; }
/* ============================================================
PORTFOLIO
============================================================ */
.pf-tabs{ display:flex; justify-content:center; flex-wrap:wrap; border-bottom:1px solid var(--line-soft); background:var(--paper); }
.pf-tab{ padding:20px clamp(18px,4vw,56px); font-size:14px; letter-spacing:.03em; color:var(--clay); position:relative; transition:color .35s var(--ease); }
.pf-tab.is-active{ color:var(--ink); }
.pf-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transition:transform .35s var(--ease); }
.pf-tab.is-active::after{ transform:scaleX(1); }
.pf-head{ text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.pf-head h2{ font-family:var(--serif); font-size:clamp(22px,2.6vw,32px); font-weight:600; color:var(--ink); letter-spacing:.04em; }
.pf-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,22px); }
.pf-item{ position:relative; display:block; aspect-ratio:1/1; background:#fff; overflow:hidden; border:1px solid var(--line-soft); }
.pf-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pf-item:hover img{ transform:scale(1.05); }
.pf-item__ov{ position:absolute; inset:0; background:rgba(28,24,19,.30); opacity:0; transition:opacity .4s var(--ease);
display:flex; align-items:flex-end; padding:16px; color:var(--on-dark); font-size:11px; letter-spacing:.14em; }
.pf-item:hover .pf-item__ov{ opacity:1; }
.pf-item.is-hidden{ display:none; }
@media (max-width:760px){
.tl::before{ left:19px; }
.tl__year{ left:19px; transform:none; width:48px; height:48px; font-size:12px; }
.tl__c, .tl__item--r .tl__c{ width:auto; margin-left:66px; text-align:left; padding-top:4px; }
.pf-grid{ grid-template-columns:repeat(2,1fr); }
}
/* ============================================================
PROCESS (tabbed)
============================================================ */
.proc-tabs{ display:flex; justify-content:center; flex-wrap:wrap; border-bottom:1px solid var(--line-soft); background:var(--paper); }
.proc-tab{ padding:20px clamp(16px,3.5vw,50px); font-size:14px; letter-spacing:.02em; color:var(--clay); position:relative; transition:color .35s var(--ease); }
.proc-tab.is-active{ color:var(--ink); }
.proc-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transition:transform .35s var(--ease); }
.proc-tab.is-active::after{ transform:scaleX(1); }
.proc-panel{ display:none; }
.proc-panel.is-active{ display:block; }
.proc-head{ text-align:center; margin-bottom:clamp(48px,6vw,76px); }
.proc-head h2{ font-family:var(--serif); font-size:clamp(22px,2.8vw,34px); font-weight:600; letter-spacing:.04em; color:var(--ink); }
.proc-head p{ margin-top:16px; color:var(--clay); font-size:14.5px; line-height:1.8; }
/* flow of icon steps */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(36px,4vw,52px) 0; }
.flow__step{ position:relative; text-align:center; padding-inline:10px; }
.flow__step:not(:nth-child(5n)):not(:last-child)::after{
content:""; position:absolute; top:26px; right:-6px; width:12px; height:12px;
border-top:1px solid var(--clay); border-right:1px solid var(--clay); transform:rotate(45deg); opacity:.6; }
.flow__ico{ width:64px; height:64px; margin:0 auto 16px; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.flow__ico svg{ width:100%; height:100%; display:block; }
.flow__ico img{ width:100%; height:100%; object-fit:contain; display:block; }
.flow__step h4{ font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--ink); }
.flow__step .d{ margin-top:7px; font-size:12px; color:var(--clay); line-height:1.6; }
.flow + .flow{ margin-top:clamp(40px,5vw,64px); }
/* partnership uses .cards (이미 정의) */
/* FAQ accordion */
.faq{ max-width:860px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line-soft); }
.faq__q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px;
padding:24px 4px; font-size:16px; color:var(--ink); font-weight:500; }
.faq__q .mark{ flex:0 0 auto; width:18px; height:18px; position:relative; transition:transform .4s var(--ease); }
.faq__q .mark::before,.faq__q .mark::after{ content:""; position:absolute; background:var(--clay); }
.faq__q .mark::before{ left:0; top:8px; width:18px; height:1.5px; }
.faq__q .mark::after{ left:8px; top:0; width:1.5px; height:18px; transition:transform .4s var(--ease); }
.faq__item.is-open .mark::after{ transform:rotate(90deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq__a p{ padding:0 4px 24px; color:var(--clay); font-size:14.5px; line-height:1.85; }
.faq__item.is-open .faq__a{ max-height:300px; }
/* dark CTA band */
.cta{ position:relative; min-height:clamp(300px,40vh,420px); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--on-dark); overflow:hidden; }
.cta__media{ position:absolute; inset:0; z-index:-2; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(28,24,19,.55),rgba(28,24,19,.4)); }
.cta h2{ font-family:var(--serif); font-size:clamp(22px,3vw,38px); font-weight:400; line-height:1.5; }
.btn-pill{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:14px 30px; border-radius:40px;
background:var(--bronze); color:#fff; font-size:13.5px; letter-spacing:.04em;
transition:background-color .4s var(--ease), transform .4s var(--ease); }
.btn-pill:hover{ background:#856f44; transform:translateY(-2px); }
@media (max-width:760px){
.flow{ grid-template-columns:repeat(2,1fr); gap:34px 0; }
.flow__step::after{ display:none !important; }
}
/* ============================================================
COMING SOON
============================================================ */
.soon{
min-height:100vh; display:flex; align-items:center; justify-content:center;
text-align:center; padding:calc(var(--nav-h) + 80px) var(--pad-x) 120px;
background:var(--cream); color:var(--ink);
}
.soon__inner{ max-width:560px; }
.soon__eyebrow{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,24px); color:var(--clay); letter-spacing:.02em; }
.soon h1{ font-family:var(--serif); font-size:clamp(34px,5.4vw,64px); font-weight:400; line-height:1.2; margin-top:18px; }
.soon p{ margin-top:26px; font-size:clamp(14px,1.2vw,16px); line-height:1.95; color:var(--clay); }
.soon .btn-box{ margin-top:38px; }
.soon__rule{ width:60px; height:1px; background:var(--line); margin:34px auto 0; }
/* ============================================================
BUSINESS — Product Development & Scent Marketing
============================================================ */
/* Section heading (시안 공통) */
.biz-head{ text-align:center; margin-bottom:clamp(48px,5vw,72px); }
.biz-eyebrow{
font-family:var(--serif); font-size:clamp(14px,1.05vw,16px); letter-spacing:.18em;
color:var(--clay); text-transform:uppercase; display:block; margin-bottom:14px;
}
.biz-head h2{
font-family:var(--sans); font-size:clamp(20px,2.4vw,32px); font-weight:700;
letter-spacing:-.005em; color:var(--ink); line-height:1.45;
}
.biz-head .lead{
margin-top:22px; font-family:var(--serif); font-size:clamp(15px,1.25vw,18px);
color:var(--ink); opacity:.82; line-height:1.95;
}
/* Hero — 텍스트 전용, 라이트 톤, 가운데 정렬 (시안) */
.biz-hero{
position:relative; background:var(--paper); color:var(--ink); text-align:center;
padding:calc(var(--nav-h) + clamp(50px,7vw,110px)) 0 clamp(50px,6vw,90px);
}
.biz-hero__inner{ width:100%; max-width:880px; margin-inline:auto; }
.biz-hero h1{ font-family:var(--serif); font-size:clamp(22px,2.8vw,36px); font-weight:700; color:var(--ink); line-height:1.4; letter-spacing:-.005em; }
.biz-hero .biz-hero__lead{ margin-top:24px; font-family:var(--serif); font-size:clamp(15px,1.25vw,18px); font-weight:500; color:var(--ink); opacity:.78; line-height:1.95; }
.biz-hero .biz-hero__eyebrow{ font-family:var(--serif); font-size:clamp(13px,1vw,15px); letter-spacing:.16em; text-transform:uppercase; color:var(--clay); margin-bottom:18px; display:block; }
/* Hero 아래 풀폭 이미지 섹션 — 향기마케팅에서만 사용 */
.biz-hero-img{ width:100%; background:var(--paper); }
.biz-hero-img img{ width:100%; height:clamp(280px,44vh,500px); object-fit:cover; display:block; }
/* WHY OEM/ODM — intro 가운데정렬 변형 (향기마케팅용) */
.why-oem{ background:var(--cream); }
.why-oem__copy{ max-width:880px; margin-inline:auto; text-align:center; }
.why-oem__copy h2{ font-family:var(--sans); font-size:clamp(20px,2.4vw,32px); font-weight:700; color:var(--ink); line-height:1.45; }
.why-oem__copy .en{ font-family:var(--serif); font-size:clamp(13px,1vw,15px); letter-spacing:.18em; text-transform:uppercase; color:var(--clay); display:block; margin-bottom:14px; }
.why-oem__copy p{ margin-top:24px; font-family:var(--serif); font-size:clamp(15px,1.2vw,17px); color:var(--ink); opacity:.82; line-height:1.95; }
/* WHY OEM/ODM — split body 컨텐츠 (split 공용 컴포넌트 위에 얹는 텍스트 스타일) */
.split__body .why-oem__lead{
margin-top:22px; font-family:var(--serif); font-size:clamp(15px,1.2vw,17px);
color:var(--ink); opacity:.82; line-height:1.95;
}
.why-oem__bullets{
margin-top:36px; padding:0; list-style:none; text-align:right;
}
.why-oem__bullets li{
font-family:var(--sans); font-size:clamp(15px,1.2vw,18px); font-weight:600;
color:var(--ink); padding:6px 0;
}
.why-oem__bullets li::after{
content:" ·"; color:var(--bronze); margin-left:6px;
}
/* WHAT WE MAKE — circular product cards */
.make-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(36px,5vw,72px) clamp(24px,4vw,56px); text-align:center; }
.make-card{ display:flex; flex-direction:column; align-items:center; }
.make-card__img{
width:clamp(180px,18vw,240px); aspect-ratio:1/1; border-radius:50%;
overflow:hidden; background:var(--paper); box-shadow:0 14px 30px -22px rgba(30,26,21,.45);
margin-bottom:24px;
}
.make-card__img img{ width:100%; height:100%; object-fit:cover; }
.make-card h3{ font-family:var(--sans); font-size:clamp(17px,1.55vw,21px); font-weight:700; color:var(--ink); }
.make-card .desc{ margin-top:10px; font-family:var(--sans); font-size:clamp(13px,1.05vw,15px); color:var(--clay); line-height:1.7; max-width:280px; }
/* PRODUCT DEVELOPMENT — 9 step list */
.steps{ background:var(--paper); }
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(30px,3vw,50px) clamp(20px,2.4vw,40px); }
.step{ position:relative; padding:8px 8px 8px 0; }
.step__no{ font-family:var(--serif); font-size:clamp(28px,2.6vw,36px); font-weight:600; color:var(--bronze); letter-spacing:.02em; line-height:1; }
.step h4{ margin-top:18px; font-family:var(--sans); font-size:clamp(15px,1.3vw,18px); font-weight:700; color:var(--ink); letter-spacing:-.005em; }
.step p{ margin-top:8px; font-family:var(--sans); font-size:clamp(13px,1.05vw,15px); color:var(--clay); line-height:1.75; }
/* CTA — light 변형 (밝은 배경 이미지 위 다크 텍스트, 가운데 오버레이) */
.cta--light{ color:var(--ink); min-height:clamp(360px,46vh,520px); }
.cta--light::before{ background:linear-gradient(180deg, rgba(246,243,236,.42) 0%, rgba(246,243,236,.30) 100%); }
.cta--light h2{ color:var(--ink); font-family:var(--serif); font-weight:700; }
.cta--light .cta__eyebrow{
font-family:var(--sans); font-size:clamp(13px,1.05vw,15px); font-weight:500;
color:var(--ink); opacity:.78; letter-spacing:.02em; margin-bottom:20px; display:block;
}
/* CUSTOMER JOURNEY — 5 step cards (3+2 grid) */
.journey-grid{
display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,1.8vw,28px);
max-width:1200px; margin-inline:auto;
}
.jstep{ background:var(--paper); padding:32px 26px 30px; border:1px solid var(--line-soft); grid-column:span 2; }
/* 2-row의 마지막 2개: 가운데로 모음 */
.jstep:nth-child(4){ grid-column:2 / span 2; }
.jstep:nth-child(5){ grid-column:4 / span 2; }
.jstep__no{ font-family:var(--serif); font-size:clamp(20px,1.8vw,24px); font-weight:600; color:var(--bronze); letter-spacing:.02em; margin-bottom:14px; display:block; }
/* 위계: 작은 라벨 위 + 큰 타이틀 아래 (PDF 기준) */
.jstep .jstep__label{ display:block; font-family:var(--sans); font-size:clamp(12.5px,.95vw,14px); font-weight:500; color:var(--clay); margin-bottom:6px; letter-spacing:.02em; }
.jstep h4{ font-family:var(--sans); font-size:clamp(17px,1.55vw,21px); font-weight:700; color:var(--ink); line-height:1.45; margin-bottom:14px; letter-spacing:-.005em; }
.jstep p{ font-family:var(--sans); font-size:clamp(12.5px,.95vw,14px); color:var(--clay); line-height:1.8; }
/* WHY SCENT MARKETING — effect icons (3+2 grid, 중앙 텍스트 강조) */
.effects{ background:var(--cream); text-align:center; }
.effects-grid{
display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(28px,3vw,52px) clamp(20px,2.4vw,42px);
margin-top:clamp(40px,5vw,72px); max-width:1100px; margin-inline:auto;
}
.eff{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; grid-column:span 2; }
.eff:nth-child(4){ grid-column:2 / span 2; }
.eff:nth-child(5){ grid-column:4 / span 2; }
.eff__ico{ width:clamp(56px,5.5vw,82px); height:clamp(56px,5.5vw,82px); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.eff__ico img{ width:100%; height:100%; object-fit:contain; }
.eff h4{ font-family:var(--sans); font-size:clamp(14px,1.15vw,16px); font-weight:600; color:var(--ink); line-height:1.5; }
/* 중앙 강조형 — 아이콘 없이 큰 세리프 텍스트 */
.eff--text{ justify-content:center; }
.eff--text .eff__big{
font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); font-weight:600;
color:var(--ink); line-height:1.25; letter-spacing:.01em; text-align:center;
}
.eff--text .eff__big span{ display:block; }
/* WHY US — .cards + .figure 공용 패턴 사용. figcaption 아래 작은 서브라벨만 추가. */
.figure figcaption .sub{
display:block; margin-top:6px;
font-size:clamp(12px,.9vw,13.5px); color:var(--clay); letter-spacing:.01em;
}
/* OUR SOLUTION — 3 col */
.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px); }
.sol-card{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.sol-card img{ width:100%; height:100%; object-fit:cover; }
.sol-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,26,21,.20) 0%, rgba(30,26,21,.70) 100%); }
.sol-card__body{ position:absolute; left:0; right:0; bottom:0; padding:24px 26px 22px; color:#fff; }
.sol-card h4{ font-family:var(--sans); font-size:clamp(15px,1.3vw,18px); font-weight:700; }
.sol-card p{ margin-top:8px; font-family:var(--sans); font-size:clamp(12.5px,1vw,14px); color:rgba(255,255,255,.84); line-height:1.7; }
/* SCENT TO BRAND — 5 step flow with images (3+2 grid) */
.flow5-grid{
display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(20px,2.4vw,40px) clamp(14px,1.6vw,24px);
max-width:1100px; margin-inline:auto;
}
.flow5{ text-align:center; grid-column:span 2; }
.flow5:nth-child(4){ grid-column:2 / span 2; }
.flow5:nth-child(5){ grid-column:4 / span 2; }
.flow5__img{ aspect-ratio:1/1; overflow:hidden; margin-bottom:16px; }
.flow5__img img{ width:100%; height:100%; object-fit:cover; }
.flow5 h4{ font-family:var(--sans); font-size:clamp(15px,1.3vw,18px); font-weight:700; color:var(--ink); }
/* SCENT DEVICE placeholder slides */
.device{ background:var(--ink); color:var(--on-dark); padding:clamp(64px,7vw,100px) 0; text-align:center; }
.device .biz-head h2{ color:var(--on-dark); }
.device .biz-head .biz-eyebrow{ color:rgba(233,226,213,.62); }
.device-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px); margin-top:clamp(40px,5vw,72px); }
.device-card{ aspect-ratio:3/4; background:var(--paper); border:1px solid var(--line-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 24px; transition:transform .4s var(--ease), box-shadow .4s var(--ease); cursor:pointer; }
.device-card:hover{ transform:translateY(-4px); box-shadow:0 22px 38px -28px rgba(30,26,21,.5); }
.device-card .label{ font-family:var(--sans); font-size:clamp(17px,1.5vw,20px); font-weight:700; color:var(--ink); line-height:1.45; text-align:center; }
.device-card .note{ display:block; margin-top:16px; font-family:var(--sans); font-size:clamp(11.5px,.9vw,13px); color:var(--clay); letter-spacing:.02em; }
/* SCENT DEVICE — 슬라이더 + 좌우 컨트롤 */
.device-slider{
position:relative; margin-top:clamp(40px,5vw,72px);
}
.device-slider .device-grid{ margin-top:0; }
.device-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:48px; height:48px; border-radius:50%;
background:rgba(255,255,255,.92); color:var(--ink);
border:1px solid rgba(43,38,32,.10);
font-family:var(--serif); font-size:28px; line-height:1;
display:flex; align-items:center; justify-content:center;
cursor:pointer; z-index:2;
box-shadow:0 10px 24px -14px rgba(30,26,21,.5);
transition:background-color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.device-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.device-nav[disabled]{ opacity:.35; cursor:default; }
.device-nav--prev{ left:-22px; }
.device-nav--next{ right:-22px; }
@media (max-width:760px){
.device-nav{ width:38px; height:38px; font-size:22px; }
.device-nav--prev{ left:6px; }
.device-nav--next{ right:6px; }
}
.cta--light p{
margin-top:18px; font-family:var(--sans); font-size:clamp(13.5px,1.05vw,15.5px);
color:var(--ink); opacity:.78; line-height:1.85;
}
/* Mobile */
@media (max-width:900px){
.make-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
.steps-grid{ grid-template-columns:repeat(2,1fr); }
/* 3+2 grids → 모바일 2-col */
.journey-grid,.effects-grid,.flow5-grid{ grid-template-columns:repeat(2,1fr); gap:24px 14px; }
.journey-grid .jstep,.effects-grid .eff,.flow5-grid .flow5{ grid-column:auto !important; }
.sol-grid{ grid-template-columns:1fr; }
.device-grid{ grid-template-columns:1fr; }
/* WHY OEM/ODM split — 모바일에선 split 공용 컴포넌트가 자체적으로 1col 처리 */
}
@media (max-width:600px){
.make-grid{ grid-template-columns:1fr; }
.steps-grid{ grid-template-columns:1fr; }
.journey-grid{ grid-template-columns:1fr; }
.flow5-grid{ grid-template-columns:repeat(2,1fr); }
}
/* ============================================================
INSIGHT — 향기 트렌드 매거진 카드 + 향기 블로그 게시판형
============================================================ */
.mag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(34px,3.6vw,56px) clamp(20px,2.4vw,36px); }
.mag-card{ display:flex; flex-direction:column; }
.mag-card__thumb{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--mist); }
.mag-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mag-card:hover .mag-card__thumb img{ transform:scale(1.04); }
.mag-card__date{ margin-top:18px; font-family:var(--serif); font-size:clamp(12.5px,.9vw,13.5px); letter-spacing:.06em; color:var(--clay); }
.mag-card h4{ margin-top:8px; font-family:var(--sans); font-size:clamp(15.5px,1.3vw,18px); font-weight:700; color:var(--ink); line-height:1.5; letter-spacing:-.005em; }
.mag-card__excerpt{ margin-top:10px; font-size:clamp(13px,1.05vw,14.5px); color:var(--clay); line-height:1.75; }
.mag-card .btn-line{ align-self:flex-start; margin-top:20px; padding:11px 22px; font-size:13px; letter-spacing:.04em; }
/* INDEX 게시판형 */
.idx-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.idx-head h3{ font-family:var(--serif); font-size:clamp(20px,2.1vw,26px); font-weight:600; color:var(--ink); letter-spacing:.02em; }
.idx-head .count{ font-family:var(--sans); font-size:13px; color:var(--clay); letter-spacing:.04em; }
.idx-list{ border-top:1px solid var(--line); }
.idx-row{
display:grid; grid-template-columns:64px 220px 1fr 28px; gap:clamp(14px,1.8vw,28px); align-items:center;
padding:22px 14px; border-bottom:1px solid var(--line-soft);
color:var(--ink); transition:background-color .35s var(--ease);
}
.idx-row:hover{ background:var(--sand); }
.idx-no{ font-family:var(--serif); font-size:clamp(15px,1.25vw,17px); font-weight:600; color:var(--bronze); letter-spacing:.04em; }
.idx-meta{ font-family:var(--sans); font-size:clamp(12px,.95vw,13.5px); color:var(--clay); letter-spacing:.02em; }
.idx-meta b{ font-weight:600; color:var(--ink); margin-right:8px; }
.idx-ttl{ font-family:var(--sans); font-size:clamp(15px,1.2vw,17px); font-weight:500; color:var(--ink); letter-spacing:-.005em; transition:color .3s var(--ease); }
.idx-row:hover .idx-ttl{ color:var(--bronze); }
.idx-arrow{ font-size:18px; line-height:1; color:var(--clay); transition:transform .3s var(--ease); justify-self:end; }
.idx-row:hover .idx-arrow{ transform:translateX(4px); color:var(--ink); }
@media (max-width:900px){
.mag-grid{ grid-template-columns:1fr; }
.idx-row{ grid-template-columns:40px 1fr 24px; row-gap:6px; padding:18px 8px; }
.idx-meta{ grid-column:2; grid-row:1; }
.idx-ttl{ grid-column:2; grid-row:2; }
.idx-no{ grid-row:1 / span 2; }
.idx-arrow{ grid-column:3; grid-row:1 / span 2; align-self:center; }
}
/* ============================================================
PROCESS PAGE — 종합 수정 (히어로/탭바/섹션/CTA)
============================================================ */
/* HERO — 가운데 정렬 + 세로 1.8배 + 타이포 위계 (eyebrow / h1 / h2) */
body.process-page .page-hero{
min-height:clamp(684px,97vh,972px);
align-items:center; text-align:center;
}
body.process-page .page-hero__inner{
padding-top:calc(var(--nav-h) + clamp(24px,4vw,60px));
padding-bottom:clamp(40px,5vw,72px);
}
body.process-page .page-hero__eyebrow{
display:block; font-family:var(--serif); font-weight:600;
font-size:clamp(30px,4.4vw,52px); letter-spacing:.02em;
color:#fff; opacity:1;
text-shadow:0 2px 24px rgba(0,0,0,.25);
}
body.process-page .page-hero h1{
margin-top:14px; text-transform:uppercase;
font-family:var(--serif); font-weight:600;
font-size:clamp(28px,4.2vw,50px); letter-spacing:.04em; line-height:1.15;
}
/* OEM/ODM 페이지 한정 — h1 사이즈 1/2 */
body.process-page.is-oem .page-hero h1{
margin-top:10px;
font-size:clamp(14px,2.1vw,25px); letter-spacing:.06em;
}
/* Certification 페이지 한정 — 히어로 세로 2/3, 좌측 정렬, 고딕 */
body.process-page.is-cert .page-hero{
min-height:clamp(456px,65vh,648px);
align-items:center; text-align:left;
}
body.process-page.is-cert .page-hero__inner{
padding-top:calc(var(--nav-h) + clamp(20px,3vw,48px));
padding-bottom:clamp(32px,4vw,56px);
}
body.process-page.is-cert .page-hero h1{
margin-top:0; text-transform:none;
font-family:var(--sans); font-weight:700;
font-size:clamp(34px,4.6vw,54px); letter-spacing:-.005em; line-height:1.2;
}
body.process-page.is-cert .page-hero p{
font-family:var(--sans); font-weight:400;
font-size:clamp(15px,1.35vw,18px); margin-top:18px;
}
/* Certification 본문 3개 섹션 — 배경 통일 #F0EEDD */
body.process-page.is-cert .proc-panel > .section{
background:#F0EEDD;
}
/* Partnership 섹션 타이틀 — Certification Process h2와 동일 톤 */
body.process-page.is-cert .partnership-sec{ background:#F0EEDD; }
body.process-page.is-cert .partnership-sec .proc-head{
margin-bottom:clamp(48px,6vw,76px);
}
body.process-page.is-cert .partnership-sec .proc-head h2{
font-family:var(--serif); font-size:clamp(22px,2.8vw,34px);
font-weight:600; letter-spacing:.04em; color:var(--ink); line-height:1.5;
}
/* Partnership 카드 — .ko +3pt, 본문 +2pt + 줄바꿈 */
body.process-page.is-cert .partnership-sec .mcard .ko{
font-size:clamp(17px,1.4vw,19px); font-weight:600; color:var(--ink); margin-top:6px;
}
body.process-page.is-cert .partnership-sec .mcard p:not(.ko){
font-size:clamp(15px,1.2vw,17px); line-height:1.85; margin-top:12px; color:var(--clay);
}
/* ============================================================
BRAND PAGE — 외부 브랜드 리스트 (히어로 없이 단일 섹션)
============================================================ */
body.brand-page .brand-sec{
background:var(--paper);
padding-top:calc(var(--nav-h) + clamp(60px,7vw,110px));
}
body.brand-page .brand-head{ text-align:center; margin-bottom:clamp(56px,6vw,88px); }
body.brand-page .brand-head .eyebrow-en{
font-family:var(--serif); font-size:clamp(22px,2.8vw,34px);
font-weight:600; color:var(--ink); letter-spacing:.04em;
}
body.brand-page .brand-head h2{
margin-top:14px;
font-family:var(--serif); font-weight:500;
font-size:clamp(20px,2vw,26px); color:var(--ink); letter-spacing:.01em;
}
body.brand-page .brand-head .lead{
margin-top:18px; font-family:var(--sans);
font-size:clamp(14px,1.05vw,15.5px); line-height:1.8; color:var(--clay);
}
body.brand-page .brand-list{
max-width:860px; margin:0 auto;
border-top:1px solid var(--line-soft);
}
body.brand-page .brand-row{
display:grid;
grid-template-columns:64px 1fr auto 28px;
align-items:center;
gap:clamp(16px,2vw,30px);
padding:clamp(28px,3vw,40px) clamp(8px,1.5vw,16px);
border-bottom:1px solid var(--line-soft);
color:var(--ink); text-decoration:none;
transition:background-color .35s var(--ease), color .35s var(--ease);
}
body.brand-page .brand-row:hover{ background:var(--sand); }
body.brand-page .brand-row__no{
font-family:var(--serif); font-size:clamp(15px,1.25vw,17px);
font-weight:600; color:var(--bronze); letter-spacing:.04em;
}
body.brand-page .brand-row__name{ display:flex; flex-direction:column; gap:6px; }
body.brand-page .brand-row__name .ko{
font-family:var(--sans); font-weight:600;
font-size:clamp(19px,1.7vw,23px); letter-spacing:-.005em; color:var(--ink);
}
body.brand-page .brand-row__name .en{
font-family:var(--serif); font-style:italic; font-weight:400;
font-size:clamp(13px,1vw,14.5px); color:var(--clay); letter-spacing:.04em;
}
body.brand-page .brand-row__url{
font-family:var(--sans); font-size:clamp(13px,1vw,14px);
color:var(--clay); letter-spacing:.02em;
}
body.brand-page .brand-row__arrow{
font-size:22px; line-height:1; color:var(--clay);
justify-self:end;
transition:transform .35s var(--ease), color .35s var(--ease);
}
body.brand-page .brand-row:hover .brand-row__arrow{
transform:translateX(6px); color:var(--ink);
}
@media (max-width:680px){
body.brand-page .brand-row{
grid-template-columns:44px 1fr 22px;
row-gap:6px;
padding:22px 8px;
}
body.brand-page .brand-row__url{
grid-column:2; grid-row:2;
}
body.brand-page .brand-row__no{ grid-row:1 / span 2; align-self:start; padding-top:4px; }
body.brand-page .brand-row__arrow{ grid-column:3; grid-row:1 / span 2; align-self:center; }
}
/* ============================================================
ADDRESS PAGE — 구글 지도 + 본사 정보
============================================================ */
body.address-page .address-sec{ background:var(--paper); }
body.address-page .address-grid{
display:grid; grid-template-columns:1.5fr 1fr;
gap:clamp(40px,4vw,72px);
align-items:stretch;
}
body.address-page .address-map{
position:relative; min-height:clamp(420px,52vh,560px);
border:1px solid var(--line-soft); overflow:hidden;
}
body.address-page .address-map iframe{
position:absolute; inset:0; width:100%; height:100%; border:0;
}
body.address-page .address-info{
display:flex; flex-direction:column; justify-content:center;
gap:clamp(22px,2.4vw,32px);
padding:clamp(20px,3vw,40px) 0;
}
body.address-page .address-info__item{
display:grid; grid-template-columns:96px 1fr; gap:clamp(14px,1.6vw,24px);
padding-bottom:clamp(18px,2vw,26px);
border-bottom:1px solid var(--line-soft);
}
body.address-page .address-info__item:last-child{ border-bottom:none; }
body.address-page .address-info .label{
font-family:var(--serif); font-weight:600;
font-size:clamp(14px,1.15vw,16px); color:var(--ink);
letter-spacing:.06em; padding-top:2px;
}
body.address-page .address-info p{
font-family:var(--sans); font-size:clamp(14.5px,1.1vw,16px);
line-height:1.7; color:var(--ink); margin:0;
}
body.address-page .address-info a{ color:var(--ink); border-bottom:1px solid var(--line); }
body.address-page .address-info a:hover{ color:var(--bronze); border-color:var(--bronze); }
@media (max-width:860px){
body.address-page .address-grid{ grid-template-columns:1fr; }
body.address-page .address-info__item{ grid-template-columns:80px 1fr; }
}
/* ============================================================
HISTORY PAGE — 히어로 제거, 섹션 배경 #F0EEDD, 타이포 위계
============================================================ */
body.history-page .history-sec{
background:#F0EEDD;
padding-top:calc(var(--nav-h) + clamp(60px,8vw,120px));
}
body.history-page .history-head .eyebrow{
display:block; font-family:var(--serif); font-style:normal; font-weight:600;
font-size:clamp(36px,5.2vw,63px); letter-spacing:.02em; color:var(--ink);
line-height:1.1; margin-bottom:18px;
}
body.history-page .history-head h1{
font-family:var(--serif); font-weight:500;
font-size:clamp(21px,2.6vw,35px); color:var(--ink); letter-spacing:.01em;
}
body.history-page .history-head .sub{
display:block; margin-top:10px; font-family:var(--serif); font-weight:500;
font-size:clamp(19px,1.75vw,21px); color:var(--clay); letter-spacing:.04em;
}
/* ============================================================
CERTIFIED PAGE — .ai 확정안
히어로 ~33vw · 배경 #F5F5E9 · 헤더 솔리드 #E8E4DB
============================================================ */
body.certified-page{ background:#F5F5E9; }
body.certified-page .cert-sec{ background:#F5F5E9; }
body.certified-page .header,
body.certified-page .header.is-solid{ background:#E8E4DB; }
/* 히어로 — 풀블리드, .ai 비율(1025/2522 ≈ 40vw)·텍스트 중앙 */
body.certified-page .page-hero{
min-height:0;
height:clamp(360px,33vw,620px);
align-items:center; text-align:center;
}
body.certified-page .page-hero::before{
background:linear-gradient(180deg, rgba(20,17,13,.38) 0%, rgba(20,17,13,.22) 100%);
}
body.certified-page .page-hero__inner{
padding-top:0; padding-bottom:0; text-align:left;
}
body.certified-page .page-hero h1,
body.certified-page .page-hero p{ margin-inline:0; }
body.certified-page .page-hero p{ max-width:680px; }
/* ============================================================
PORTFOLIO PAGE — 히어로/서브탭바 OEM/ODM(=is-oem) 디자인 미러
============================================================ */
body.portfolio-page .page-hero{
min-height:clamp(684px,97vh,972px);
align-items:center; text-align:center;
}
body.portfolio-page .page-hero__inner{
padding-top:calc(var(--nav-h) + clamp(24px,4vw,60px));
padding-bottom:clamp(40px,5vw,72px);
}
body.portfolio-page .page-hero__eyebrow{
display:block; font-family:var(--serif); font-weight:600;
font-size:clamp(30px,4.4vw,52px); letter-spacing:.02em;
color:#fff; opacity:1;
text-shadow:0 2px 24px rgba(0,0,0,.25);
}
body.portfolio-page .page-hero h1{
margin-top:10px; text-transform:none;
font-family:var(--serif); font-weight:600;
font-size:clamp(14px,2.1vw,25px); letter-spacing:.02em; line-height:1.3;
color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.25);
}
body.portfolio-page .page-hero p{
margin-top:14px; font-family:var(--serif); font-weight:400;
font-size:clamp(15px,1.45vw,19px); line-height:1.7;
text-shadow:0 1px 16px rgba(0,0,0,.3);
}
/* 제품 리스트 섹션 — 배경 #F0EEDD + 섹션 타이틀 고딕 */
body.portfolio-page main > .section{
background:#F0EEDD;
}
body.portfolio-page .pf-head h2{
font-family:var(--sans); font-weight:700; letter-spacing:-.005em;
}
/* 포트폴리오 서브탭 — proc-tabs 톤 */
body.portfolio-page .pf-tabs{
background:#302C2A; border-bottom:none; justify-content:center;
}
body.portfolio-page .pf-tab{
font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.04em;
color:#fff; opacity:.85;
padding:22px clamp(20px,4vw,56px);
transition:background-color .35s var(--ease), opacity .35s var(--ease);
}
body.portfolio-page .pf-tab:hover{ opacity:1; }
body.portfolio-page .pf-tab.is-active{
background:#745A45; color:#fff; opacity:1;
}
body.portfolio-page .pf-tab::after{ display:none; }
/* Certification Process flow — 4+1 레이아웃 (Approval 가운데 + 세로 화살표) */
body.process-page.is-cert .proc-panel > .section:nth-of-type(2) .flow{
grid-template-columns:repeat(4,1fr);
row-gap:clamp(54px,5.5vw,86px);
}
/* 기본 5n 화살표 비활성화 */
body.process-page.is-cert .proc-panel > .section:nth-of-type(2) .flow__step::after{
display:none;
}
/* 1·2·3번 아이콘 우측 가로 화살표 재추가 */
body.process-page.is-cert .proc-panel > .section:nth-of-type(2) .flow__step:nth-child(-n+3)::after{
content:""; display:block; position:absolute; top:26px; right:-6px;
width:12px; height:12px;
border-top:1px solid var(--clay); border-right:1px solid var(--clay);
transform:rotate(45deg); opacity:.6;
}
/* 5번(Approval) 행 가운데 정렬 + 위쪽 여백 */
body.process-page.is-cert .proc-panel > .section:nth-of-type(2) .flow__step:nth-child(5){
grid-column:1 / -1; justify-self:center;
padding-top:clamp(38px,4vw,64px);
}
/* 5번 위쪽 세로 화살표(아래 방향) */
body.process-page.is-cert .proc-panel > .section:nth-of-type(2) .flow__step:nth-child(5)::before{
content:""; position:absolute; top:6px; left:50%;
width:12px; height:12px;
border-right:1px solid var(--clay); border-bottom:1px solid var(--clay);
transform:translateX(-50%) rotate(45deg); opacity:.6;
}
body.process-page .page-hero p{
margin-top:22px; font-size:clamp(17px,1.6vw,22px);
font-weight:400; line-height:1.85;
}
/* TAB BAR — 배경 RGB(48,44,42), 폰트 흰색·고딕 +1pt +1weight, active RGB(116,90,69) */
body.process-page .proc-tabs{
background:#302C2A; border-bottom:none; justify-content:center;
}
body.process-page .proc-tab{
font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.04em;
color:#fff; opacity:.85;
padding:22px clamp(20px,4vw,56px);
transition:background-color .35s var(--ease), opacity .35s var(--ease);
}
body.process-page .proc-tab:hover{ opacity:1; }
body.process-page .proc-tab.is-active{
background:#745A45; color:#fff; opacity:1;
}
body.process-page .proc-tab::after{ display:none; }
/* OEM PROCESS 섹션 — 배경 RGB(240,238,221) (ODM은 기존 paper 유지) */
body.process-page .proc-panel[data-panel="oem"] > .section:first-of-type{
background:#F0EEDD;
}
/* 아이콘 타이틀(h4) + 서브타이틀(.d) +3pt */
body.process-page .flow__step h4{
font-size:clamp(17px,1.55vw,19px);
}
body.process-page .flow__step .d{
font-size:clamp(14px,1.15vw,15.5px); line-height:1.65; margin-top:9px;
}
/* OEM/ODM 섹션 헤더 — 가독성 */
body.process-page .proc-panel[data-panel="oem"] .proc-head h2{
color:var(--ink);
}
/* FINAL CTA — 높이 1.5x, eyebrow 추가, h2 -2pt, 연한 오버레이, btn +2pt 붉은갈색 */
body.process-page .cta{
min-height:clamp(450px,60vh,630px);
}
body.process-page .cta::before{
background:linear-gradient(180deg, rgba(28,24,19,.42), rgba(28,24,19,.32));
}
body.process-page .cta .cta__eyebrow{
display:block; font-family:var(--sans); font-weight:500;
font-size:clamp(15px,1.3vw,18px); letter-spacing:.005em;
color:#fff; opacity:.95; margin-bottom:18px;
text-shadow:0 2px 18px rgba(0,0,0,.55);
}
body.process-page .cta h2{
font-size:clamp(20px,2.85vw,36px); line-height:1.55;
text-shadow:0 2px 22px rgba(0,0,0,.45);
}
body.process-page .cta .btn-pill{
font-size:15.5px; padding:16px 34px;
background:#8B5E45; color:#fff;
}
body.process-page .cta .btn-pill:hover{
background:#7A4F3A;
}
/* ============================================================
REFERENCE (협력회사) — index 하단 카루셀
============================================================ */
.reference{ background:#F5F5E9; padding-block:clamp(60px,7vw,110px); overflow:hidden; }
.reference__head{ text-align:center; margin-bottom:clamp(36px,4.5vw,64px); }
.reference__title{
font-family:var(--sans); font-weight:700;
font-size:clamp(28px,3.2vw,44px); letter-spacing:.04em;
color:var(--ink);
}
.reference__sub{
margin-top:14px; font-family:var(--sans);
font-size:clamp(15.5px,1.3vw,18px); color:var(--clay);
letter-spacing:.01em;
}
.reference__marquee{
position:relative;
width:100%;
overflow:hidden;
mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.reference__track{
display:flex; align-items:center; gap:clamp(46px,5vw,84px);
width:max-content;
animation:ref-marquee 38s linear infinite;
}
.reference__item{
flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
height:clamp(56px,5vw,84px);
padding-inline:clamp(8px,1.2vw,18px);
}
.reference__item img{
max-height:100%; max-width:clamp(120px,12vw,180px);
width:auto; height:auto; object-fit:contain;
}
@keyframes ref-marquee{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.reference__track{ animation:none; }
}
@media (max-width:760px){
.reference__track{ animation-duration:28s; gap:36px; }
.reference__item{ height:54px; }
.reference__item img{ max-width:120px; }
}
/* ============================================================
INSIGHT — 공통 hero + tabs + 레퍼런스 라인
============================================================ */
body.insight-page{ background:#F5F5E9; }
body.insight-page .section,
body.insight-page main > section{ background:#F5F5E9; }
body.insight-page .header,
body.insight-page .header.is-solid{ background:#E8E4DB; }
/* hero — H1 "Insight" + 탭 3개 */
.insight-hero{
text-align:center;
padding:calc(var(--nav-h) + clamp(48px,6vw,84px)) var(--pad-x) clamp(24px,3vw,40px);
}
.insight-hero h1{
font-family:var(--serif); font-weight:600;
font-size:clamp(34px,4.4vw,56px); letter-spacing:.04em; color:var(--ink);
}
.insight-tabs{
display:flex; justify-content:center; gap:0;
margin-top:clamp(28px,3.4vw,48px);
border-bottom:1px solid var(--line-soft);
}
.insight-tab{
position:relative;
font-family:var(--sans); font-size:clamp(14px,1.1vw,16px);
font-weight:500; letter-spacing:.02em;
color:var(--clay);
padding:18px clamp(20px,3vw,46px);
transition:color .35s var(--ease);
}
.insight-tab::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
background:var(--ink); transform:scaleX(0);
transform-origin:center; transition:transform .35s var(--ease);
}
.insight-tab:hover{ color:var(--ink); }
.insight-tab.is-active{ color:var(--ink); font-weight:600; }
.insight-tab.is-active::after{ transform:scaleX(1); }
/* [탭1] 향기 마케팅 — 갤러리 카드(이미지 + 제목 + 해시태그) */
.insight-gallery{
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(28px,3.4vw,48px) clamp(20px,2.4vw,36px);
}
.gcard,
.gcard__h,
.gcard__eyebrow,
.gcard__tags .tag{
font-family:var(--sans);
}
.gcard{
position:relative; display:block;
background:transparent; border:0; overflow:visible;
color:var(--ink);
}
.gcard__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--mist); }
.gcard__media > img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gcard:hover .gcard__media > img{ transform:scale(1.02); }
.gcard__logo{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
background:rgba(20,17,14,.48);
opacity:0; transition:opacity .35s var(--ease);
pointer-events:none;
}
.gcard__logo img{
width:42%; max-width:160px; height:auto;
object-fit:contain;
filter:brightness(0) invert(1);
}
.gcard:hover .gcard__logo,
.gcard:focus-visible .gcard__logo{ opacity:1; }
.gcard__body{ padding:18px 2px 4px; }
.gcard__eyebrow{
display:block;
font-family:var(--sans); font-size:clamp(12.5px,1vw,14px);
color:var(--clay); letter-spacing:.02em;
margin-bottom:8px;
}
.gcard__h,
body.insight-page .gcard__h,
body.serif-page .gcard__h{
font-family:var(--sans); font-weight:700;
font-size:clamp(18px,1.55vw,22px);
color:var(--ink); letter-spacing:.005em; line-height:1.4;
margin:0;
}
.gcard__tags{
margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 12px;
}
.gcard__tags .tag{
font-family:var(--sans); font-size:clamp(12.5px,1vw,14px); font-weight:400;
color:var(--clay); letter-spacing:.01em;
}
/* 페이지네이션 (1~5) */
.pager{
display:flex; justify-content:center; gap:8px;
margin-top:clamp(40px,5vw,72px);
}
.pager__btn{
width:36px; height:36px;
display:inline-flex; align-items:center; justify-content:center;
font-family:var(--serif); font-size:14px;
color:var(--clay); border:1px solid transparent;
transition:color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.pager__btn:hover{ color:var(--ink); }
.pager__btn.is-active{
color:var(--ink); border-color:var(--ink); font-weight:600;
}
.pager__btn--arrow{ font-size:18px; line-height:1; }
/* [탭2] 향기 트렌드 — 매거진 카드 (기존 .mag-card 재사용, placeholder 강조 보조) */
.mag-card__placeholder{
width:100%; aspect-ratio:4/3;
background:linear-gradient(135deg, #EDE7DA 0%, #E0D8C6 100%);
display:flex; align-items:center; justify-content:center;
color:var(--clay); font-family:var(--serif);
font-size:clamp(13px,1vw,15px); letter-spacing:.18em;
}
.mag-card__media{ font-family:var(--sans); font-size:13px; color:var(--clay); margin-top:14px; letter-spacing:.04em; }
.mag-card__media b{ font-weight:600; color:var(--ink); }
/* [탭3] 향기 블로그 — Index 보드 (기존 .idx-row 재사용, 카테고리 강조) */
body.insight-page .idx-meta b{ color:var(--bronze); letter-spacing:.06em; }
/* ============================================================
INSIGHT 상세 — 케이스 상세 (v2, .ai p6 정합)
하우스 폰트: 세리프 헤딩 / 고딕 본문·UI·라벨
============================================================ */
.case-detail{ padding-block:clamp(40px,5vw,72px) clamp(60px,7vw,110px); background:#F5F5E9; }
.case-detail__wrap{
display:grid; grid-template-columns:1.6fr 1fr;
gap:clamp(32px,4vw,64px);
align-items:start;
}
/* ----- LEFT .case-article ----- */
.case-article{ min-width:0; }
.case-article__eyebrow{
display:block; font-family:var(--sans);
font-size:clamp(12.5px,1vw,14px); color:var(--clay);
letter-spacing:.02em; margin-bottom:10px;
}
.case-article__title{
font-family:var(--serif); font-weight:700;
font-size:clamp(24px,2.4vw,34px); color:var(--ink);
line-height:1.4; letter-spacing:-.005em;
margin:0 0 clamp(20px,2.4vw,32px);
}
.case-article__hero{
width:100%; aspect-ratio:16/10; overflow:hidden;
background:var(--mist);
}
.case-article__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
/* meta dl */
.case-meta{
display:flex; flex-direction:column;
border-top:1px solid rgba(43,38,32,.20);
margin:clamp(20px,2vw,28px) 0 clamp(40px,5vw,72px);
}
.case-meta__row{
display:grid; grid-template-columns:110px 1fr;
gap:18px; padding:14px 4px;
border-bottom:1px solid rgba(43,38,32,.10);
align-items:start;
}
.case-meta__row dt{
font-family:var(--sans); font-weight:600; font-size:14px;
color:var(--clay); letter-spacing:.01em;
}
.case-meta__row dd{
font-family:var(--sans); font-weight:400; font-size:14px;
color:var(--ink); line-height:1.65; margin:0;
}
/* body blocks (기본: 이미지 풀폭 → 캡션 → 본문 단락) */
.case-block{ margin-bottom:clamp(40px,4.5vw,72px); }
.case-block__img{ margin:0; }
.case-block__img img{
width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
background:var(--mist);
}
.case-block__img figcaption{
display:block; margin-top:8px;
font-family:var(--sans); font-size:12px; color:var(--clay); letter-spacing:.01em;
}
.case-block__p{
margin-top:18px;
font-family:var(--sans); font-weight:400;
font-size:clamp(14px,1.1vw,16px); color:var(--ink); line-height:1.7;
letter-spacing:-.003em;
}
/* 좌우 split 레이아웃 (img-left / img-right) */
.case-block--img-left,
.case-block--img-right{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(20px,2.4vw,36px);
align-items:start;
}
.case-block--img-left .case-block__img,
.case-block--img-right .case-block__img{ margin:0; }
.case-block--img-left .case-block__img img,
.case-block--img-right .case-block__img img{ aspect-ratio:4/3; }
.case-block--img-left .case-block__p,
.case-block--img-right .case-block__p{ margin-top:0; align-self:center; }
.case-block--img-right .case-block__img{ order:2; }
.case-block--img-right .case-block__p{ order:1; }
@media (max-width:700px){
.case-block--img-left,
.case-block--img-right{ grid-template-columns:1fr; }
.case-block--img-right .case-block__img{ order:0; }
.case-block--img-right .case-block__p{ order:0; margin-top:18px; }
}
/* ----- RIGHT .case-aside (sticky) ----- */
.case-aside{
position:sticky; top:100px;
align-self:start;
display:flex; flex-direction:column;
gap:clamp(20px,2vw,28px);
}
/* Process accordion (.faq 패턴 재사용) */
.proc-acc{
background:#F0EFEB; padding:clamp(16px,1.8vw,24px);
display:flex; flex-direction:column; gap:10px;
}
.proc-acc__item{
background:#F0EFEB; border:1px solid rgba(43,38,32,.06);
}
.proc-acc__q{
width:100%; padding:14px 18px;
display:flex; justify-content:space-between; align-items:center; gap:16px;
background:transparent; border:0; cursor:pointer;
}
.proc-acc__title{
font-family:var(--sans); font-weight:600; font-size:14.5px;
color:var(--ink); letter-spacing:-.005em; text-align:left;
}
.proc-acc__q .mark{
flex:0 0 auto; width:14px; height:14px; position:relative;
transition:transform .4s var(--ease);
}
.proc-acc__q .mark::before,
.proc-acc__q .mark::after{
content:""; position:absolute; background:var(--clay);
}
.proc-acc__q .mark::before{ left:0; top:6px; width:14px; height:1.5px; }
.proc-acc__q .mark::after{ left:6px; top:0; width:1.5px; height:14px; transition:transform .4s var(--ease); }
.proc-acc__item.is-open .proc-acc__q .mark::after{ transform:rotate(90deg); }
.proc-acc__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.proc-acc__item.is-open .proc-acc__a{ max-height:640px; }
.proc-steps{
list-style:none; margin:0; padding:4px 14px 16px;
display:flex; flex-direction:column; gap:8px;
}
.proc-step{
position:relative;
display:grid; grid-template-columns:62px 1fr; gap:14px;
padding:10px 12px;
background:#FFFFFF; border:1px solid rgba(43,38,32,.08);
}
.proc-step + .proc-step::before{
content:'↓'; position:absolute;
left:50%; top:-12px; transform:translateX(-50%);
font-size:11px; color:var(--clay); line-height:1;
}
.proc-step__no{
font-family:var(--sans); font-weight:700; font-size:12px;
color:var(--ink); letter-spacing:.04em;
}
.proc-step__text{
font-family:var(--sans); font-weight:400; font-size:13px;
color:var(--clay); line-height:1.45;
}
/* Related devices (.device-slider 패턴 재사용 / 사이드바 스케일) */
.related-devices{
background:#F0EFEB; padding:clamp(18px,2vw,26px);
color:var(--ink);
}
.related-devices__title{
font-family:var(--sans); font-weight:600; font-size:13.5px;
color:var(--ink); letter-spacing:.06em; margin-bottom:14px;
}
.related-devices__slider{
position:relative; display:flex; align-items:center; gap:6px;
}
.related-devices__grid{
flex:1; display:flex; gap:8px;
overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; margin:0;
}
.related-devices__grid::-webkit-scrollbar{ display:none; }
.related-devices__card{
flex:0 0 calc(33.333% - 6px);
display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
background:#FFFFFF; aspect-ratio:1/1; padding:10px;
scroll-snap-align:start;
border:1px solid rgba(43,38,32,.08);
transition:transform .3s var(--ease);
}
.related-devices__card:hover{ transform:translateY(-2px); box-shadow:none; }
.related-devices__img{
flex:1; display:flex; align-items:center; justify-content:center; width:100%;
}
.related-devices__img img{ max-width:100%; max-height:100%; object-fit:contain; }
.related-devices__name{
font-family:var(--sans); font-size:11px; color:var(--ink);
margin-top:4px; letter-spacing:.01em; line-height:1.3; text-align:center;
}
.related-devices .device-nav{
position:static; transform:none;
width:30px; height:30px; flex:none;
background:#FFFFFF; border:1px solid rgba(43,38,32,.18); border-radius:50%;
color:var(--ink);
font-size:18px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.related-devices .device-nav:hover{ background:#FFFFFF; transform:none; color:var(--ink); border-color:rgba(43,38,32,.4); }
.related-devices .device-nav[disabled]{ opacity:.35; cursor:default; }
/* back link area */
.case-detail__back-wrap{
margin-top:clamp(40px,5vw,72px); text-align:center;
}
@media (max-width:900px){
.insight-gallery{ grid-template-columns:repeat(2,1fr); }
.case-detail__wrap{ grid-template-columns:1fr; }
.case-aside{ position:static; top:auto; }
}
@media (max-width:600px){
.insight-gallery{ grid-template-columns:1fr; }
.insight-tab{ padding:14px 14px; font-size:13.5px; }
}
/* ============================================================
PARTNER PAGE (business/partner/) — 신규, 스코프 격리
============================================================ */
/* 이미지 플레이스홀더 (실제 빌드에선 
) */
.ph{position:relative;background:#dcd8d0;overflow:hidden}
.ph::after{content:attr(data-name);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:600 12px/1.4 var(--sans);color:#6b655c;letter-spacing:.02em;text-align:center;padding:8px}
.ph--dark{background:#1c1a17}.ph--dark::after{color:#9a948a}
.ph--pantone{background:#ED7119}.ph--pantone::after{color:#fff7f0}
/* --- HERO (다크 풀블리드, 위쪽 텍스트 = 세리프) --- */
.partner-hero{position:relative;min-height:148vh;display:flex;align-items:center;justify-content:center;
text-align:center;color:var(--on-dark);background:#0E0E0E;overflow:hidden}
.partner-hero .ph{position:absolute;inset:0}
.partner-hero__media{position:absolute;inset:0;z-index:0}
/* hero.webp 는 인물+타워 구간만 크롭한 landscape (≈1664x1058). 이미지 컨텐츠를 위쪽으로 더 끌어올림 */
.partner-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transform:translateY(-16%)}
.partner-hero__in{position:relative;z-index:2;padding:0 24px;transform:translateY(8%)}
.partner-hero__h1{font-family:var(--serif);color:#fff;margin:0;line-height:1}
/* 피그마 1440px 기준 — ko 41.31px / en 49.22px / weight 500 / line-height 100% / letter-spacing 0 */
.partner-hero__h1 .ko{display:block;font-size:clamp(28px,2.87vw,44px);font-weight:800;line-height:1;letter-spacing:0}
.partner-hero__h1 .en{display:block;font-size:clamp(34px,3.42vw,52px);font-weight:500;line-height:1;letter-spacing:0;margin-top:.5em;font-style:normal}
/* sub — 피그마 기준 +2pt 추가 상향 */
.partner-hero__sub{font-family:var(--serif);font-size:clamp(17px,1.42vw,22px);line-height:1.5;
color:#cfc7ba;margin:1.6em 0 0;font-weight:400}
/* --- HERO 하단 다크밴드 (고딕) --- */
.partner-band{background:#0E0E0E;color:var(--on-dark);text-align:center;padding:clamp(70px,10vw,130px) 24px clamp(140px,20vw,260px)}
.partner-band__h{font-family:var(--sans);font-weight:700;color:#fff;font-size:clamp(31px,3.45vw,45px);margin:0;line-height:1.3}
.partner-band__en{font-family:var(--sans);font-weight:500;color:#fff;font-size:clamp(23px,2.05vw,29px);margin:1.4em 0 .6em}
.partner-band__p{font-family:var(--sans);font-weight:300;color:#fff;font-size:clamp(22px,1.75vw,25px);line-height:1.9;margin:0}
/* --- 공통: 섹션 헤더(센터) --- */
.partner-sec{padding:clamp(80px,9vw,130px) 0}
.partner-sec--grey{background:var(--partner-grey)}
.partner-sec--white{background:#fff}
.partner-head{text-align:center;margin-bottom:clamp(48px,6vw,80px)}
.partner-head__t{font-family:var(--sans);font-weight:700;font-size:clamp(33px,3.85vw,51px);color:var(--ink);margin:0;line-height:1.25;letter-spacing:-.01em}
.partner-head__t .accent{color:var(--accent)}
.partner-head__sub{font-family:var(--sans);font-weight:400;font-size:clamp(18px,1.45vw,22px);color:var(--ink);line-height:1.85;margin:1.2em 0 0}
/* --- "이유" 캐러셀 --- */
.partner-reel{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
padding:0 var(--pad-x) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.partner-reel::-webkit-scrollbar{display:none}
.partner-reel__card{position:relative;flex:0 0 clamp(280px,32vw,440px);
display:flex;flex-direction:column;background:transparent;scroll-snap-align:center}
.partner-reel__card .ph{position:relative;aspect-ratio:16/11;border-radius:2px;overflow:hidden}
.partner-reel__card .ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.partner-reel__cap{display:block;margin-top:14px;text-align:center;
font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.5vw,21px);color:var(--ink);letter-spacing:.02em}
/* --- Premium Scent Market : 5칸 --- */
.partner-spaces{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,26px)}
.partner-space__img{position:relative;aspect-ratio:9/16;border-radius:2px;overflow:hidden;background:#ED7119}
.partner-space__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.partner-space__cap{text-align:center;font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.5vw,21px);
color:var(--ink);margin-top:14px;letter-spacing:.02em}
/* --- Built for Your Success : 6스텝 교차 --- */
.partner-steps{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,32px)}
/* ★시안 측정: 이미지 ~30% / 텍스트카드 ~66% / 갭 ~4% — 분리된 두 박스(사이 회색 갭) */
/* 이미지 박스는 세로로 살짝 길게(4:5 portrait), 카드 body는 stretch 로 동일 높이 매칭 */
.partner-step{display:grid;grid-template-columns:30% minmax(0,1fr);gap:clamp(18px,2.4vw,52px);
align-items:stretch}
.partner-step__img{position:relative;background:#dcd8d0;border-radius:2px;overflow:hidden;aspect-ratio:14/15}
.partner-step__img .ph{position:absolute;inset:0}
.partner-step__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.partner-step__body{background:#fff;border-radius:2px;padding:clamp(28px,3.6vw,60px);
display:flex;flex-direction:column;justify-content:center;text-align:left}
.partner-step__num{font-family:var(--sans);font-weight:600;font-size:clamp(80px,8.4vw,144px);line-height:1;color:var(--accent)}
.partner-step__t{font-family:var(--sans);font-weight:700;font-size:clamp(24px,2.3vw,34px);color:var(--ink);margin:.45em 0 .35em}
.partner-step__lead{font-family:var(--sans);font-weight:700;font-size:clamp(18px,1.55vw,23px);color:var(--ink);margin:0 0 .9em}
.partner-step__p{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.2vw,18px);line-height:1.85;color:#8E8E8E;margin:0}
/* 짝수(--r): 이미지 우측 30% / 텍스트카드 좌측, 텍스트 우정렬(이미지 쪽으로 hug) */
.partner-step--r{grid-template-columns:minmax(0,1fr) 30%}
.partner-step--r .partner-step__img{grid-column:2;grid-row:1}
.partner-step--r .partner-step__body{grid-column:1;grid-row:1;text-align:right;align-items:flex-end}
/* --- 하단 CTA (★시안에 없음 — 결정#4로 추가. 불필요시 삭제) --- */
.partner-cta{background:var(--espresso);color:var(--on-dark);text-align:center;padding:clamp(80px,9vw,120px) 24px}
.partner-cta__t{font-family:var(--sans);font-weight:700;font-size:clamp(22px,2.6vw,36px);line-height:1.4;margin:0 0 1.6em;color:#fff}
.partner-cta .btn-pill{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
font-family:var(--sans);font-weight:600;font-size:15px;padding:16px 38px;border-radius:999px;transition:opacity .25s var(--ease)}
.partner-cta .btn-pill:hover{opacity:.88}
/* --- 반응형 --- */
@media(max-width:900px){
.partner-spaces{grid-template-columns:repeat(2,1fr)}
.partner-step,.partner-step--r{grid-template-columns:1fr;min-height:0}
.partner-step__img,.partner-step--r .partner-step__img{grid-column:1;grid-row:1;aspect-ratio:4/3;min-height:0}
.partner-step__body,.partner-step--r .partner-step__body{grid-column:1;grid-row:2;text-align:left;align-items:flex-start}
.partner-reel__card{flex-basis:78vw}
}
@media(max-width:520px){.partner-spaces{grid-template-columns:1fr 1fr}}
/* ============================================================
PARTNER — Customer Journey (3컬럼 그리드, 위아래 컬럼 정렬)
윗줄: [1] [2] [3]
아랫줄:( ) [5] [4]
============================================================ */
.partner-journey__flow{
margin-top:clamp(40px,4vw,64px);
display:grid;
/* 6컬럼 그리드 — 아랫줄 4·5 를 윗줄 컬럼 사이(2칸) 가운데에 정렬 */
grid-template-columns:repeat(6,1fr);
column-gap:clamp(24px,3vw,52px);
row-gap:clamp(48px,6vw,84px);
}
.pj-step{
position:relative;
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:.4em;min-width:0;
}
/* DOM 순서 1,2,3,4,5 → 명시적 그리드 좌표 (각 2칸씩 span) */
.pj-step:nth-child(1){grid-column:1 / span 2;grid-row:1}
.pj-step:nth-child(2){grid-column:3 / span 2;grid-row:1}
.pj-step:nth-child(3){grid-column:5 / span 2;grid-row:1}
.pj-step:nth-child(4){grid-column:4 / span 2;grid-row:2} /* 2와 3 사이 아래 */
.pj-step:nth-child(5){grid-column:2 / span 2;grid-row:2} /* 1과 2 사이 아래 */
.pj-step__num{font-family:var(--sans);font-weight:700;font-size:clamp(28px,2.8vw,40px);
color:var(--accent);line-height:1}
.pj-step__ko{font-family:var(--sans);font-weight:700;font-size:clamp(18px,1.55vw,23px);
color:var(--ink);line-height:1.4}
.pj-step__en{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.25vw,18px);
color:#8E8E8E;letter-spacing:.02em;line-height:1.4}
/* 화살표 커넥터 — ::after 로 갭에 띄움 (한글 제목 줄 높이에 세로 정렬) */
.pj-step::after{
content:'';display:none;position:absolute;
font-family:var(--sans);font-weight:400;color:#C9C4BA;
font-size:clamp(28px,3vw,42px);line-height:1;
pointer-events:none;
/* 숫자 라인을 지나 한글 제목 줄 부근 */
top:calc(clamp(28px,2.8vw,40px) + .9em);
}
/* 윗줄 1→2, 2→3 : 오른쪽 갭에 › */
.pj-step:nth-child(1)::after,
.pj-step:nth-child(2)::after{
content:'›';display:block;
right:0;transform:translateX(calc(50% + clamp(24px,3vw,52px) / 2));
}
/* 아랫줄 4→5 (4 col3 → 5 col2) : 왼쪽 갭에 ‹ */
.pj-step:nth-child(4)::after{
content:'‹';display:block;
left:0;transform:translateX(calc(-50% - clamp(24px,3vw,52px) / 2));
}
@media(max-width:900px){
.partner-journey__flow{
grid-template-columns:1fr;
row-gap:clamp(24px,3vw,36px);
}
/* DOM 논리순(1→2→3→4→5) 그대로 세로 스택 */
.pj-step:nth-child(1),
.pj-step:nth-child(2),
.pj-step:nth-child(3),
.pj-step:nth-child(4),
.pj-step:nth-child(5){grid-column:1 / -1;grid-row:auto}
.pj-step::after{display:none}
}
/* ============================================================
PARTNER — 점포 확장 (3개 일러스트)
============================================================ */
.partner-expand__head{text-align:center;font-family:var(--sans);font-weight:700;
font-size:clamp(20px,2.05vw,28px);color:var(--ink);line-height:1.65;
margin:0 0 clamp(40px,5vw,72px)}
.partner-expand__head .accent{color:var(--accent)}
/* 3개 이미지가 각자 원본 비율로 표시되므로, 균등 분배를 위해 flex space-evenly 사용 */
/* 좌·우 패딩 + 사이 갭 모두 절반으로 축소, 절대 줄바꿈 금지(한 줄 강제) */
.partner-stores{
display:flex;justify-content:space-evenly;align-items:flex-end;
flex-wrap:nowrap;gap:clamp(6px,0.8vw,14px);
}
.partner-store{
display:flex;flex-direction:column;align-items:center;
flex:0 0 auto;
}
/* 3개 셀 동일 세로 높이 + 이미지가 자기 비율 그대로 자리잡음 (가로 잘림 없음) */
/* 한 줄 nowrap 유지하면서 이미지 추가로 키움 */
.partner-store__img{
position:relative;
height:clamp(220px,24vw,400px);
border-radius:0;background:transparent;overflow:visible;
display:block;
}
.partner-store__img .ph{position:absolute;inset:0}
.partner-store__img > img{
display:block;height:100%;width:auto;max-width:none;
}
.partner-store__cap{text-align:center;font-family:var(--sans);font-weight:400;
font-size:clamp(13px,1.1vw,16px);color:#8E8E8E;margin-top:14px;letter-spacing:.02em}
@media(max-width:900px){
.partner-stores{flex-direction:column;align-items:center;max-width:340px;margin-inline:auto;gap:clamp(28px,4vw,40px)}
}
/* ============================================================
PARTNER — 점포 화살표 (CSS only · grow → float-up & fade loop)
============================================================ */
.store-arrow{
/* QA 미세조정용 변수 — 모디파이어에서 override 가능 */
--arrow-right:8%;
--float:-16%;
position:absolute;bottom:0;right:var(--arrow-right);
width:6px;height:0;background:#E5341E;border-radius:1px;
opacity:0;pointer-events:none;
transform-origin:bottom;
animation:pwStoreArrowGrow 3s ease-in-out infinite;
}
.store-arrow::after{
content:'';position:absolute;bottom:100%;left:50%;
width:0;height:0;margin-left:-7px;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:10px solid #E5341E;
}
/* 점포별 최종 높이 + 이미지 우측 끝과 화살표 사이 시각적 간격을 1번 기준으로 통일 */
/* 이미지별 가로 폭이 다르므로(0.75 : 1.25 : 1.50) %도 그에 반비례하게 보정 → 시각 갭 동일 */
.store-arrow--s{--h:22%;--arrow-right:14%} /* 1개 (portrait 0.75) */
.store-arrow--m{--h:32%;--arrow-right:8.4%} /* 2개 (1.25) — 0.75/1.25 × 14% */
.store-arrow--l{--h:42%;--arrow-right:7%} /* 3개 (1.50) — 0.75/1.50 × 14% */
@keyframes pwStoreArrowGrow{
/* 0~80%: height 0→--h 와 translateY 0→--float 동시 진행 (성장과 부상 오버랩)
80~100%: 정점에서 가만히 페이드 아웃 */
0% {height:0; transform:translateY(0); opacity:0}
15% { opacity:1}
80% {height:var(--h); transform:translateY(var(--float)); opacity:1}
100% {height:var(--h); transform:translateY(var(--float)); opacity:0}
}
@media (prefers-reduced-motion: reduce){
.store-arrow{animation:none;height:var(--h);opacity:1;transform:none}
}
/* ============================================================
PARTNER S1 — 수익 파이프라인 (2열 플로우 + 클로징 블록)
============================================================ */
.pipeline{
display:grid;grid-template-columns:1fr 1fr;
gap:clamp(28px,4vw,72px);
align-items:start;
}
.pipeline__col{
display:flex;flex-direction:column;align-items:center;
text-align:center;gap:14px;
}
.pipeline__badge{
display:inline-block;background:var(--accent);color:#fff;
font-family:var(--sans);font-weight:700;font-size:clamp(13px,1.05vw,15px);
padding:8px 22px;border-radius:999px;letter-spacing:.02em;
}
.pipeline__lab{
font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.25vw,18px);
color:var(--ink);margin-bottom:6px;letter-spacing:-.005em;
}
.pipeline__box{
width:100%;max-width:340px;background:#DDDDDD;border-radius:8px;
padding:clamp(14px,1.4vw,20px) 18px;
font-family:var(--sans);font-weight:700;font-size:clamp(14px,1.15vw,17px);
color:var(--ink);line-height:1.4;letter-spacing:-.005em;
}
.pipeline__arrow{
display:block;color:var(--ink);font-size:clamp(14px,1.2vw,17px);line-height:1;
font-family:var(--sans);
}
.pipeline__arrow--center{margin-inline:auto}
.pipeline__arrows{display:flex;justify-content:space-between;width:100%;max-width:340px;padding-inline:14%}
.pipeline__row3{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:380px;
}
.pipeline__row3 .pipeline__box{font-size:clamp(13px,1vw,15px);padding:12px 8px;max-width:none}
.pipeline__close{
margin-top:clamp(56px,6vw,84px);text-align:center;
}
.pipeline__close-t{
font-family:var(--sans);font-weight:700;font-size:clamp(20px,1.9vw,27px);
color:var(--ink);line-height:1.4;margin:0 0 .9em;
}
.pipeline__close-p{
font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.2vw,18px);
color:#8E8E8E;line-height:1.85;margin:0;
}
@media(max-width:900px){
.pipeline{grid-template-columns:1fr;gap:clamp(40px,6vw,72px)}
}
/* ============================================================
PARTNER S2 — 고객 사례 (검정 배경 + 흰 카드)
============================================================ */
.partner-cases{background:#F5F5F5;padding-block:clamp(80px,9vw,130px)}
.partner-cases .partner-head__t,
.partner-cases__t{color:var(--ink)}
.partner-cases__eyebrow{
display:block;font-family:var(--sans);font-weight:700;color:var(--ink);
/* "바로 이런 공간입니다." (.partner-head__t) 보다 2pt 작게 */
font-size:clamp(31px,3.6vw,49px);letter-spacing:-.005em;
line-height:1.25;margin-bottom:.25em;
}
.partner-cases__sub{color:var(--ink)}
.cases{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);margin-top:clamp(40px,4vw,64px)}
.case-card{
display:grid;grid-template-columns:1fr 1fr; /* [1] 1:1 비율 */
background:#fff;border-radius:6px;overflow:hidden;
min-height:clamp(330px,33vw,450px);
}
.case-card__img{position:relative;background:#dcd8d0;overflow:hidden}
.case-card__img .ph{position:absolute;inset:0}
.case-card__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 에버랜드 카드(4번째)만 — 좌측 이미지 1.5배 줌, 우상단 기준 정렬, 위로 살짝 끌어올림 */
.cases .case-card:nth-child(4) .case-card__img > img{
transform:scale(1.5) translateY(-6%);
transform-origin:top right;
object-position:right top;
}
/* 이미지 하단 라벨 — 이미지 폭만큼 풀폭의 작은 검정 반투명 박스, 텍스트 가운데 정렬 */
.case-card__img-label{
position:absolute;left:0;right:0;bottom:0;z-index:2;
display:block;text-align:center;
background:rgba(0,0,0,.45);
padding:8px 12px;
font-family:var(--sans);font-weight:700;color:#fff;
font-size:clamp(15px,1.3vw,19px);letter-spacing:.02em;
}
.case-card__body{
position:relative;padding:clamp(22px,2.4vw,36px);
/* 로고(위) / 텍스트 블록(아래)로 분배 — 가운데 정렬 아님 */
display:flex;flex-direction:column;gap:0;
}
/* 로고 — 그룹 최상단 가운데 정렬. 위쪽 여백을 body padding 과 동일하게 추가해 위·아래 패딩 균형.
margin-bottom:auto 로 나머지(텍스트)를 카드 하단으로 밀어내림. 사이즈는 이전의 2배. */
.case-card__logo{
position:static;
align-self:center;
width:clamp(220px,22vw,340px);
height:clamp(80px,8.4vw,128px);
margin:clamp(22px,2.4vw,36px) 0 auto;
display:block;
}
.case-card__logo .ph{position:absolute;inset:0;background:transparent;border:1px dashed rgba(43,38,32,.2)}
.case-card__logo .ph::after{font-size:9px}
.case-card__logo > img{
position:static;width:100%;height:100%;
object-fit:contain;object-position:center;display:block;
}
/* [3] 그룹핑 더 촘촘하게 — 제목 ↓.3em / 서브헤드 ↓.6em / 본문 line-height 1.8 */
.case-card__t{font-family:var(--sans);font-weight:700;font-size:clamp(20px,1.8vw,26px);color:var(--ink);line-height:1.3;margin:0 0 .3em}
.case-card__sub{font-family:var(--sans);font-weight:700;font-size:clamp(14px,1.15vw,17px);color:var(--ink);line-height:1.35;margin:0 0 .6em}
.case-card__p{font-family:var(--sans);font-weight:400;font-size:clamp(13px,1.1vw,16px);color:#8E8E8E;line-height:1.8;margin:0}
@media(max-width:900px){
.case-card{grid-template-columns:1fr;min-height:0}
.case-card__img{aspect-ratio:16/10}
.case-card__logo{position:static;width:auto;height:auto;margin-bottom:10px}
.case-card__logo .ph{position:relative;inset:auto;width:90px;height:32px;display:block}
}
/* ============================================================
PARTNER S3 — 가맹개설 절차 (.flow 컴포넌트 재사용 + 번호 뱃지)
============================================================ */
.partner-onboard{background:#FBFAF8}
/* [1] eyebrow — Title Case 정상 자간 (.biz-eyebrow 기본 uppercase 무력화) */
.partner-onboard__eyebrow{
display:block;font-family:var(--sans);font-weight:600;
font-size:clamp(13px,1.1vw,15px);color:var(--clay);
text-transform:none;letter-spacing:normal;margin-bottom:.8em;
}
.partner-onboard__flow{margin-top:clamp(56px,5vw,80px);padding-top:22px}
/* [2] 아이콘 둘레 원형 링 — .flow__ico 자체를 링으로 */
.partner-onboard__flow .flow__ico{
position:relative;
width:clamp(128px,12.5vw,160px);
height:clamp(128px,12.5vw,160px);
border:1px solid #D8D2C8;border-radius:50%;
background:transparent;color:var(--ink);
margin:0 auto clamp(20px,2.2vw,30px);
display:flex;align-items:center;justify-content:center;overflow:visible;
}
.partner-onboard__flow .flow__ico svg{width:50%;height:50%;display:block}
.partner-onboard__flow .flow__ico img{width:62%;height:62%;object-fit:contain;display:block}
/* [3] 번호 뱃지 — 네이비 #11253D, 링 상단에 절반 걸침 */
.partner-onboard__flow .flow__no{
position:absolute;top:0;left:50%;
transform:translate(-50%,-50%);
width:38px;height:38px;border-radius:50%;
background:#11253D;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.04em;
margin:0;z-index:2;
}
/* [4] 제목 — 2줄 가능, 5스텝 높이 통일 (구분선 라인 정렬용) */
.partner-onboard__flow .flow__step h4{
font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.3vw,18px);
color:var(--ink);letter-spacing:-.005em;line-height:1.4;margin-top:6px;
min-height:2.8em;
display:flex;align-items:flex-end;justify-content:center;
}
/* [5] 제목과 설명 사이 가는 가로선 + 중앙 점 (타임라인 노드) */
.partner-onboard__flow .step-divider{
position:relative;display:block;
height:1px;background:#D8D2C8;
margin:14px 0 18px;
}
.partner-onboard__flow .step-divider::before{
content:'';position:absolute;
left:50%;top:50%;width:7px;height:7px;border-radius:50%;
background:#11253D;
transform:translate(-50%,-50%);
}
/* 설명 본문 */
.partner-onboard__flow .flow__step .d{
font-family:var(--sans);font-weight:400;font-size:clamp(13px,1.1vw,16px);
color:#8E8E8E;line-height:1.7;margin-top:0;
}
/* [6] 화살표(›) — 아이콘 링 중앙 높이로 내림 (.flow 기본 top:26px 오버라이드) */
.partner-onboard__flow .flow__step:not(:nth-child(5n)):not(:last-child)::after{
top:calc(22px + clamp(112px,11vw,140px) / 2);
width:14px;height:14px;
border-top-color:#C9C4BA;border-right-color:#C9C4BA;opacity:1;
transform:translateY(-50%) rotate(45deg);
}
@media(max-width:900px){
.partner-onboard__flow .flow__step::after{display:none}
.partner-onboard__flow .flow__step h4{min-height:0}
}
/* ============================================================
PARTNER S4 — 최종 CTA (크림 배경 + 좌 텍스트 / 우 비주얼 + 하단 4피처)
============================================================ */
.partner-finale{
position:relative;background:#F7F2EE;overflow:hidden;
/* finale-bg.webp (1536×1024 = 3:2) 와 동일 비율 → cover 시 좌우/상하 어느 쪽도 잘리지 않음 */
aspect-ratio:3/2;
padding-top:clamp(100px,11vw,180px);padding-bottom:clamp(40px,5vw,80px);
}
/* 풀폭 배경 — 섹션과 동일 비율이므로 cover 가 자연 풀필(잘림 없음) */
.partner-finale__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.partner-finale__bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#F7F2EE}
.partner-finale > .wrap{position:relative;z-index:1}
.partner-finale__top{
display:block;
margin-bottom:clamp(72px,8vw,120px);
}
.partner-finale__copy{display:flex;flex-direction:column;gap:0;max-width:540px}
.partner-finale__h{
font-family:var(--sans);font-weight:700;
font-size:clamp(31px,3.15vw,45px);color:var(--ink);
line-height:1.35;letter-spacing:-.01em;margin:0 0 1em;
}
.partner-finale__h .accent{color:var(--accent);font-weight:800}
.partner-finale__rule{
width:clamp(60px,6vw,90px);height:1px;background:rgba(43,38,32,.25);
border:0;margin:0 0 1.6em;
}
.partner-finale__lead{
font-family:var(--sans);font-weight:700;font-size:clamp(21px,1.75vw,26px);
color:var(--ink);margin:0 0 .9em;letter-spacing:-.005em;
}
.partner-finale__p{
font-family:var(--sans);font-weight:400;font-size:clamp(18px,1.4vw,21px);
color:#8E8E8E;line-height:1.85;margin:0;
}
/* (이전 우측 비주얼 블록 제거 — 풀폭 배경으로 통합됨) */
/* 하단 4피처 — 네이비 원형 아이콘 */
.partner-finale__feats{
display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(12px,1.5vw,24px);
}
/* 피처 아이템 — 아이콘 좌 / 텍스트 우 가로 배치 (grid-area 로 HTML 변경 없이 재배치) */
.finale-feat{
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:
"icon title"
"icon desc";
column-gap:16px;
row-gap:4px;
text-align:left;
align-items:start;
}
.finale-feat__ico{
grid-area:icon;align-self:center;
width:83px;height:83px;flex:none;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.finale-feat__ico svg{width:55%;height:55%}
/* 자체 다크 원형 + 컬러 라인이 포함된 아이콘 — filter·컨테이너 배경 없이 원본 그대로 */
.finale-feat__ico img{width:100%;height:100%;object-fit:contain;display:block}
.finale-feat__t{
grid-area:title;align-self:end;
font-family:var(--sans);font-weight:700;font-size:clamp(17px,1.4vw,20px);
color:var(--ink);letter-spacing:-.005em;line-height:1.3;margin:0;
}
.finale-feat__p{
grid-area:desc;align-self:start;
font-family:var(--sans);font-weight:400;font-size:clamp(13px,1.1vw,16px);
color:#8E8E8E;line-height:1.55;margin:0;
}
@media(max-width:900px){
.partner-finale__feats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.partner-finale__feats{grid-template-columns:1fr}
}
/* ============================================================
GLOBAL PAGE (business/global/ — 유통 & 글로벌 확장)
★ 페이지 토큰은 .global-page 스코프에 정의 — 공용 :root 미오염
★ 모든 신규 규칙은 .global-* 스코프, 공용 컴포넌트 미수정
============================================================ */
.global-page{
--g-brown:#7B533D;
--g-ink:#2B2620;
--g-gray:#8E8E8E;
--g-bg:#EFEFEF;
--g-cream:#F6F2EF;
--g-dark:#0E0E0E;
--g-maxw:1320px;
background:#fff;
}
/* 글로벌 페이지 한정: 좌우 거터를 패딩만으로 제어 (max-width 캡 해제).
값은 공용 --pad-x 그대로. */
.global-page main .wrap{max-width:none;margin-inline:auto;padding-inline:var(--pad-x)}
/* 플레이스홀더 (자산 수령시 ![]()
로 교체) */
.global-ph{
position:relative;background:#dcd8d0;overflow:hidden;
width:100%;height:100%;min-height:140px;
}
.global-ph::after{
content:attr(data-ph);position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font:600 12px/1.4 var(--sans);color:#6b655c;
letter-spacing:.02em;text-align:center;padding:8px;
}
.global-ph--dark{background:#1c1a17}
.global-ph--dark::after{color:#9a948a}
.global-ph--mark{background:transparent;min-height:0}
.global-ph--mark::after{color:#fff;font-weight:500}
.global-ph--logo{background:rgba(255,255,255,.06);min-height:38px;border:1px dashed rgba(255,255,255,.2)}
.global-ph--logo::after{color:#fff;font-weight:600;letter-spacing:.04em;font-size:11px}
/* 공통 H2 — 한글 헤딩 (l1=상단 brown / l2=하단 ink) */
.global-page .global-h2{
text-align:center;font-family:var(--serif);
font-size:clamp(28px,3.4vw,46px);line-height:1.3;font-weight:600;
margin:0 0 .55em;letter-spacing:-.005em;
}
.global-page .global-h2 .global-h2__l1{color:var(--g-brown);font-size:.78em;font-weight:500;display:inline-block}
.global-page .global-h2 .global-h2__l2{color:var(--g-ink);display:inline-block}
.global-page .global-h2__sub{
text-align:center;font-family:var(--sans);font-weight:400;
font-size:clamp(14px,1.2vw,17px);color:var(--g-gray);
line-height:1.85;margin:0 0 clamp(40px,5vw,72px);
}
/* ====== S1. HERO (다크 풀블리드) ====== */
.global-hero{
position:relative;background:var(--g-dark);color:#fff;
/* 1440×810 = 16:9 비율 강제 (세로가 비율 맞춰 늘어남) */
aspect-ratio:16/9;
overflow:hidden;
display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;
}
.global-hero__media{position:absolute;inset:0;z-index:0}
.global-hero__media .global-ph{background:#0e0e0e}
/* 이미지 살짝 아래로 — object-position 으로 상단 영역을 더 보여줌(컨텐츠 아래쪽으로 이동) */
.global-hero__media > img{width:100%;height:100%;object-fit:cover;object-position:center 70%;display:block}
/* 배경 다크 오버레이 제거 — hero.webp 자체 톤만 사용 */
.global-hero__inner{
position:relative;z-index:2;
max-width:760px;padding:0 var(--pad-x);margin:0 auto;
}
.global-hero__mark{
height:clamp(42px,4.4vw,64px);width:auto;
object-fit:contain;display:block;margin:0 auto;
filter:brightness(0) invert(1);
}
.global-hero__eyebrow{
font-family:var(--sans);font-weight:400;
font-size:clamp(13px,1.05vw,15px);line-height:1.55;letter-spacing:.01em;
color:rgba(255,255,255,.82);margin:14px 0 0;
}
.global-hero__title{
font-family:var(--sans);font-weight:500;color:#fff;
font-size:clamp(30px,3.6vw,56px);line-height:1.2;letter-spacing:.005em;
white-space:nowrap;
margin:clamp(40px,5vh,64px) 0 0;
}
.global-hero__sub{
font-family:var(--sans);font-weight:400;
font-size:clamp(16px,1.35vw,19px);line-height:1.65;
color:rgba(255,255,255,.85);
margin:clamp(20px,2.4vh,28px) 0 0;
}
.global-hero__corner{
position:absolute;z-index:2;
font-family:var(--sans);font-weight:400;
font-size:clamp(13px,1.05vw,16px);line-height:1.5;letter-spacing:.04em;
color:#fff;text-align:center;
bottom:clamp(48px,9vh,96px);
}
.global-hero__corner--l{left:clamp(40px,12vw,200px)}
.global-hero__corner--r{right:clamp(40px,12vw,200px)}
@media(max-width:768px){
/* 모바일: 16:9 비율 해제, 콘텐츠 기준 + 안전한 min-height */
.global-hero{aspect-ratio:auto;min-height:78vh}
.global-hero__title{white-space:normal;font-size:clamp(26px,7vw,36px)}
.global-hero__corner{position:static;display:inline-block;margin:24px 16px 0;bottom:auto}
.global-hero__corner--l,.global-hero__corner--r{left:auto;right:auto}
}
/* ====== S2. INTRO ====== */
.global-intro{background:#fff;padding-block:clamp(32px,3.2vw,56px)}
.global-intro__grid{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);
align-items:stretch;
min-height:clamp(560px,58vw,760px);
}
.global-intro__col--text{position:relative}
.global-intro__col--text::after{
content:"";position:absolute;top:0;bottom:0;right:calc(clamp(40px,5vw,80px) / -2);
width:1px;background:rgba(43,38,32,.16);
}
.global-intro__en{
font-family:var(--sans);font-weight:600;color:var(--g-brown);
font-size:clamp(20px,2vw,30px);line-height:1.5;letter-spacing:-.005em;
margin:0 0 .4em;
}
.global-intro__cap{
font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.25vw,17px);
color:var(--g-gray);margin:0;line-height:1.75;
}
.global-intro__col--media{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(20px,2.4vw,32px)}
.global-intro__col--media .global-ph,
.global-intro__col--media > img{aspect-ratio:16/10;width:100%;height:auto;display:block;object-fit:cover}
.global-intro__body{
font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.15vw,17px);
color:var(--g-gray);line-height:1.85;margin:0;letter-spacing:-.003em;
}
/* ====== S3. NETWORK 4카드 ====== */
.global-net{background:var(--g-bg);padding-block:clamp(72px,8vw,120px)}
.global-net__cards{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
margin-top:clamp(56px,6vw,96px);
/* 카드 내부 가로 패딩만큼 행을 바깥으로 당겨 wrap 가장자리와 콘텐츠 정렬 (S2 와 동일선) */
margin-inline:calc(clamp(14px,1.6vw,28px) * -1);
}
.global-card{
position:relative;text-align:center;
padding:clamp(20px,2.4vw,36px) clamp(14px,1.6vw,28px);
display:flex;flex-direction:column;align-items:center;gap:.8em;
}
.global-card + .global-card::before{
content:"";position:absolute;left:0;top:14%;bottom:14%;
width:1px;background:#DAD4C8;
}
.global-card .global-ico{
width:clamp(84px,8.25vw,114px);height:clamp(84px,8.25vw,114px);
color:var(--g-ink);display:flex;align-items:center;justify-content:center;
margin-bottom:.4em;
}
.global-card .global-ico svg{width:100%;height:100%;display:block}
.global-card .global-ico img{width:100%;height:100%;object-fit:contain;display:block}
.global-card h3{
font-family:var(--sans);font-weight:700;color:#7D5539;
font-size:clamp(23px,2.15vw,30px);line-height:1.32;letter-spacing:-.005em;
margin:0 0 14px;
/* 4개 카드 h3 상단 라인 정렬 — 2줄짜리 카드와 1줄짜리 카드의 시작점·하단을 통일 */
min-height:calc(1.32em * 2);
display:flex;align-items:flex-start;justify-content:center;text-align:center;
}
.global-card p{
font-family:var(--sans);font-weight:400;color:#8E8E8E;
font-size:clamp(14px,1.05vw,16px);line-height:1.7;margin:0;
}
/* S3 한정 헤딩 — 공용 .global-h2 토큰을 .global-net 스코프에서만 오버라이드 (다른 섹션 영향 없음).
공용 룰이 .global-page .global-h2 .global-h2__l1 (0,0,3,0) 이므로 동일 specificity 로 후순위 승. */
.global-net .global-h2 .global-h2__l1{
font-family:var(--serif);font-weight:500;
font-size:clamp(21px,2.8vw,43px);line-height:1.25;
color:#7D5539;letter-spacing:.01em;
}
.global-net .global-h2 .global-h2__l2{
font-family:var(--serif);font-weight:600;
font-size:clamp(26px,3.35vw,53px);line-height:1.22;
color:#7D5539;letter-spacing:.01em;
margin-top:4px;
}
.global-net .global-h2__sub{
font-family:var(--serif);font-weight:400;
font-size:clamp(20px,1.6vw,23px);line-height:1.85;
color:#4A4A4A;margin-top:clamp(20px,2.2vw,30px);
}
@media(max-width:768px){
.global-net__cards{margin-top:48px}
.global-card h3{font-size:clamp(21px,5.5vw,25px)}
}
/* ====== S4. 브릿지 (단일 풀블리드 이미지) ====== */
.global-logoband{background:var(--g-cream);padding:0}
.global-logoband > img{width:100%;height:auto;display:block;object-fit:cover}
/* ====== S5. 리테일 채널 3열 ====== */
.global-retail{background:#fff;padding-block:clamp(72px,8vw,120px)}
/* S5 한정 .wrap 좌우 패딩 1/2 (공용 .global-page main .wrap 0,0,2,1 보다 높은 specificity 로 오버라이드) */
.global-page main .global-retail .wrap{padding-inline:calc(var(--pad-x) / 2)}
/* S5 한정 헤딩 오버라이드 — 공용 .global-h2 토큰을 .global-retail 스코프에서만 변경 */
.global-retail .global-h2 .global-h2__l1{
font-size:clamp(26px,3.15vw,44px);font-weight:700;color:#7D5539;
}
.global-retail .global-h2 .global-h2__l2{
color:#7D5539;
}
.global-retail .global-h2__sub{
font-family:var(--serif);font-weight:400;
font-size:clamp(21px,1.75vw,24px);line-height:1.85;
color:#4A4A4A;
}
.global-retail__row{
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px);
margin-top:clamp(24px,3vw,40px);
}
.global-rcol{display:flex;flex-direction:column;gap:14px}
.global-rcol__cap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.global-rcol__cap b{
font-family:var(--sans);font-weight:700;color:var(--g-ink);
font-size:clamp(23px,1.95vw,26px);letter-spacing:.01em;
}
.global-rcol__cap span{
font-family:var(--sans);font-weight:400;color:var(--g-gray);
font-size:clamp(20px,1.55vw,22px);letter-spacing:.01em;
}
.global-rcol__card{
position:relative;aspect-ratio:3/4;overflow:hidden;background:#1c1a17;
}
.global-rcol__card .global-ph{position:absolute;inset:0}
.global-rcol__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
/* 다크 그라데이션 오버레이 제거 — 배경 이미지 원본 그대로 노출 */
.global-rcol__logos{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(36px,4vw,64px);padding:clamp(20px,2vw,36px);
}
.global-rcol__logos .global-ph--logo{width:60%;height:clamp(28px,3vw,42px)}
/* 원본 컬러 로고 그대로 — filter 없이 표시 */
.global-rcol__logos > img{
max-width:72%;max-height:clamp(28px,3vw,44px);width:auto;height:auto;
object-fit:contain;display:block;
}
/* 단독 배치 로고(Gift 컬럼의 카카오 선물하기 등) — 세로형 로고가 max-height 에 묶이지 않도록 충분히 키움 */
.global-rcol__logos > img:only-child{
max-width:82%;max-height:clamp(140px,14vw,200px);
}
/* ====== S6. 유통 전략 4스텝 ====== */
.global-strategy{background:#EFEFEF;padding-block:clamp(72px,8vw,120px)}
/* S6 한정 .wrap 좌우 패딩 1/2 (공용 .global-page main .wrap 0,0,2,1 보다 높은 specificity) */
.global-page main .global-strategy .wrap{padding-inline:calc(var(--pad-x) / 2)}
/* S6 한정 헤딩 — S5 와 동일 톤 (l1 = clamp(26-44)·700·#7D5539, l2 = #7D5539, sub = serif 21-24 / #4A4A4A) */
.global-strategy .global-h2 .global-h2__l1{
font-size:clamp(26px,3.15vw,44px);font-weight:700;color:#7D5539;
}
.global-strategy .global-h2 .global-h2__l2{
color:#7D5539;
}
.global-strategy .global-h2__sub{
font-family:var(--serif);font-weight:400;
font-size:clamp(21px,1.75vw,24px);line-height:1.85;
color:#4A4A4A;
}
.global-flow{
display:flex;align-items:center;justify-content:space-between;
gap:clamp(14px,1.8vw,28px);margin-top:clamp(24px,3vw,40px);
}
.global-step{
flex:1;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:.4em;
padding-inline:clamp(8px,1vw,16px);
}
.global-step__num{
font-family:var(--sans);font-weight:300;color:var(--g-brown);
font-size:clamp(40px,4.5vw,68px);line-height:1;letter-spacing:.02em;
margin-bottom:.2em;
}
.global-step h3{
font-family:var(--sans);font-weight:700;color:var(--g-ink);
font-size:clamp(23px,2vw,29px);line-height:1.3;letter-spacing:-.005em;
margin:0;
}
.global-step p{
font-family:var(--sans);font-weight:400;color:var(--g-gray);
font-size:clamp(15px,1.25vw,18px);line-height:1.6;margin:0;
}
.global-chev{
flex:0 0 auto;color:#000;
font-family:var(--sans);font-weight:100;
font-size:clamp(84px,10.2vw,138px);line-height:1;
opacity:1;
}
/* ====== S7. 글로벌 진출 2열 ====== */
.global-expand{background:#fff;padding-block:clamp(36px,4vw,60px)}
.global-expand__grid{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);
align-items:stretch;
}
.global-expand__en{
font-family:var(--sans);font-weight:600;color:var(--g-brown);
font-size:clamp(22px,2.4vw,34px);line-height:1.4;letter-spacing:-.005em;
margin:0 0 .35em;
}
.global-expand__cap{
font-family:var(--sans);font-weight:400;color:var(--g-gray);
font-size:clamp(15px,1.25vw,17px);margin:0 0 clamp(24px,2.6vw,40px);
}
.global-expand__sub{
font-family:var(--sans);font-weight:700;color:var(--g-ink);
font-size:clamp(18px,1.7vw,24px);line-height:1.4;letter-spacing:-.005em;
margin:0 0 1em;
}
.global-expand__body{
font-family:var(--sans);font-weight:400;color:var(--g-gray);
font-size:clamp(14px,1.15vw,17px);line-height:1.85;margin:0 0 1.2em;
}
.global-expand__left{
/* 우측 컬럼의 padding-left 와 동일 폭 미러링 → 좌우 콘텐츠 박스 시각적 50:50 */
padding-right:clamp(28px,3vw,52px);
}
.global-expand__left > .global-ph,
.global-expand__left > img{aspect-ratio:16/9;width:100%;height:auto;display:block;object-fit:cover;margin-top:clamp(20px,2.4vw,32px)}
.global-expand__right{
position:relative;
display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px);
padding-left:clamp(28px,3vw,52px);
}
.global-expand__right::before{
/* 그리드 gap 중앙에 위치 (right 컬럼의 left:0 에서 gap 절반만큼 왼쪽으로) → 시각적 정중앙 */
content:"";position:absolute;left:calc(clamp(40px,5vw,80px) / -2);top:0;bottom:0;
width:1px;background:rgba(43,38,32,.16);
}
.global-box{
background:#EFEFEF;padding:clamp(20px,2.4vw,32px);
display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,28px);
align-content:center;
/* 우측 컬럼 flex 자식이므로 3개 박스가 균등 분할 → 마지막 박스 하단 = 좌측 이미지 하단과 정렬 */
flex:1;min-height:0;
}
.global-box__head h4{
font-family:var(--sans);font-weight:700;color:var(--g-ink);
font-size:clamp(23px,2.1vw,29px);line-height:1.25;letter-spacing:-.005em;
margin:0 0 .4em;
}
.global-box__head span{
font-family:var(--sans);font-weight:400;color:var(--g-gray);
font-size:clamp(17px,1.4vw,19px);letter-spacing:.01em;
}
.global-box ul{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:.4em;
}
.global-box ul li{
font-family:var(--sans);font-weight:400;color:var(--g-ink);
font-size:clamp(18px,1.45vw,21px);line-height:1.5;letter-spacing:-.005em;
position:relative;padding-left:14px;
}
.global-box ul li::before{
content:"·";position:absolute;left:4px;top:-2px;color:var(--g-ink);
}
/* ====== S8. 4 아이콘 행 ====== */
.global-pillars{background:#EFEFEF;padding-block:clamp(28px,3vw,48px)}
/* S8 한정 .wrap 좌우 패딩 1/2 (공용 .global-page main .wrap 0,0,2,1 보다 높은 specificity) */
.global-page main .global-pillars .wrap{padding-inline:calc(var(--pad-x) / 2)}
.global-pillars__grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.global-pillar{
position:relative;text-align:center;
padding:clamp(20px,2.4vw,36px) clamp(14px,1.6vw,28px);
display:flex;flex-direction:column;align-items:center;gap:.7em;
}
.global-pillar + .global-pillar::before{
content:"";position:absolute;left:0;top:14%;bottom:14%;
width:1px;background:rgba(43,38,32,.14);
}
.global-pillar .global-ico{
width:clamp(151px,14.85vw,205px);height:clamp(151px,14.85vw,205px);
color:var(--g-ink);display:flex;align-items:center;justify-content:center;
margin-bottom:.3em;
}
.global-pillar .global-ico svg{width:100%;height:100%;display:block}
.global-pillar .global-ico img{width:100%;height:100%;object-fit:contain;display:block}
.global-pillar h3{
font-family:var(--sans);font-weight:600;color:var(--g-brown);
font-size:clamp(23px,2vw,27px);line-height:1.3;letter-spacing:-.005em;
margin:0;
}
.global-pillar p{
font-family:var(--sans);font-weight:400;color:var(--g-gray);
font-size:clamp(20px,1.6vw,23px);line-height:1.6;margin:0;
}
/* ====== S9. 다크 CTA ====== */
.global-cta{
position:relative;background:var(--g-dark);color:#fff;overflow:hidden;
padding-block:clamp(120px,13.5vw,210px);text-align:center;
}
.global-cta__media{position:absolute;inset:0;z-index:0}
.global-cta__media .global-ph{background:#0e0e0e}
.global-cta__media > img{width:100%;height:100%;object-fit:cover;display:block}
/* 다크 그라데이션 오버레이 제거 — 배경 이미지 원본 그대로 노출 */
.global-cta__inner{position:relative;z-index:2}
.global-cta__title{
font-family:var(--sans);font-weight:600;color:#fff;
font-size:clamp(28px,3.4vw,46px);line-height:1.35;letter-spacing:-.005em;
margin:0 0 .6em;
}
.global-cta__sub{
font-family:var(--sans);font-weight:400;color:rgba(255,255,255,.82);
font-size:clamp(17px,1.4vw,21px);line-height:1.85;margin:0 0 clamp(28px,3.4vw,48px);
}
.global-cta__btn{
display:inline-block;text-decoration:none;
font-family:var(--sans);font-weight:600;font-size:clamp(16px,1.3vw,19px);
color:#fff;border:1px solid rgba(255,255,255,.6);
padding:14px 36px;letter-spacing:.04em;
transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.global-cta__btn:hover{background:rgba(255,255,255,.08);border-color:#fff}
/* ====== 반응형 ====== */
@media(max-width:1024px){
.global-net__cards,.global-pillars__grid{grid-template-columns:repeat(2,1fr)}
.global-card + .global-card::before,
.global-pillar + .global-pillar::before{display:none}
.global-retail__row{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
.global-flow{flex-direction:column;gap:clamp(28px,4vw,40px)}
.global-chev{transform:rotate(90deg);font-size:clamp(84px,10vw,120px)}
.global-intro__grid,.global-expand__grid,.global-logoband__grid{grid-template-columns:1fr}
.global-intro__col--text::after{display:none}
.global-expand__right{padding-left:0}
.global-expand__right::before{display:none}
.global-box{grid-template-columns:1fr}
}
@media(max-width:600px){
.global-net__cards,.global-pillars__grid{grid-template-columns:1fr}
.global-hero__corner--l{left:14px;bottom:14px}
.global-hero__corner--r{right:14px;bottom:14px}
}
/* ====================================================================
Portfolio 카드 재구성 — 85제품(이미지 + 제품명 + 회사명) 메타 노출
.pf-* 접두사로 스코프 격리, 기존 카드 룰을 source-order 우선으로 오버라이드
==================================================================== */
.pf-grid{grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.pf-item{
aspect-ratio:auto;border:none;background:transparent;overflow:visible;
display:flex;flex-direction:column;gap:10px;
}
.pf-item > img{
width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
background:#f3f1ed;border:1px solid var(--line-soft);display:block;
transition:transform .8s var(--ease);
}
.pf-item:hover > img{transform:scale(1.03)}
.pf-item h3{
font-family:var(--sans);font-weight:600;color:var(--ink);
font-size:clamp(14px,1.05vw,16px);line-height:1.35;letter-spacing:-.005em;
margin:6px 0 0;
}
.pf-item p{
font-family:var(--sans);font-weight:400;color:var(--clay);
font-size:clamp(12px,.95vw,14px);line-height:1.4;margin:0;
}
@media(max-width:960px){.pf-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
/* 포트폴리오 탭 — 크기·간격은 현재(균등 한 줄) 유지, 컬러·폰트는 기존(다크 바 + 갈색 활성 박스) 으로 복원 */
body.portfolio-page .pf-tabs{
background:#302C2A;border-bottom:none;
display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
gap:clamp(14px,2vw,36px);
max-width:none;margin:0 auto;
padding:0 var(--pad-x);
}
body.portfolio-page .pf-tab{
flex:0 0 auto;
font-family:var(--sans);font-weight:600;
font-size:clamp(12px,1.05vw,15px);letter-spacing:.04em;
color:#fff;opacity:.85;
padding:14px 14px;
border:none;background:transparent;
white-space:nowrap;
transition:background-color .25s var(--ease),opacity .25s var(--ease);
}
body.portfolio-page .pf-tab:hover{opacity:1}
body.portfolio-page .pf-tab.is-active{
background:#745A45;color:#fff;opacity:1;
}
body.portfolio-page .pf-tab::after{display:none}
@media(max-width:768px){
body.portfolio-page .pf-tabs{
justify-content:flex-start;overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
body.portfolio-page .pf-tabs::-webkit-scrollbar{display:none}
}
/* ===== Contact 중앙 팝업 토스트 ===== */
.contact-toast-overlay{
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(14,14,14,.45);
opacity: 0; pointer-events: none;
transition: opacity .3s ease;
z-index: 9999;
}
.contact-toast-overlay.is-show{ opacity: 1; pointer-events: auto; }
.contact-toast{
background: #FFFFFF; color: #1A1A1A;
min-width: 280px; max-width: 90vw;
padding: 36px 32px 28px; border-radius: 4px;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
text-align: center;
transform: scale(.92); transition: transform .3s var(--ease, ease);
}
.contact-toast-overlay.is-show .contact-toast{ transform: scale(1); }
.contact-toast__msg{
margin: 0 0 24px; font-size: 15px; line-height: 1.7;
white-space: pre-line; letter-spacing: .01em;
}
.contact-toast__btn{
border: none; cursor: pointer;
background: #0E0E0E; color: #FFFFFF;
padding: 11px 36px; font-size: 14px; letter-spacing: .03em;
border-radius: 2px;
transition: background .2s ease;
}
.contact-toast__btn:hover{ background: #ED7119; }
.contact-toast[data-type="err"] .contact-toast__msg::before{
content: ""; display: block;
width: 32px; height: 2px; margin: 0 auto 16px;
background: #ED7119;
}