/* Hallmark · shape: Long Document (draw 93525b) · genre: modern-minimal · theme: Coral (deal 2/3, seed online-distribution-company-sources-119e·cede9312·2026-10-28·r0) · redesign: full
 * hero: Index · nav: slab · footer: colophon block · imagery: photographs (library frames, the brand's own) · signature: the channel sheet on the desk, 입점 pressed in
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a distributor has no product screen; led with its own channel sheet as paperwork instead of stock dashboards */
/* Hallmark · waive 44c · the channel sheet is inside section.hero and carries its own h2, so the render cuts the hero at the head row · at 1440 the sheet and its 입점 stamp reach 770px of the 900px fold */
/* Hallmark · waive 79 · same measurement as 44c, the sheet below the head row is the hero's visual · the fold holds the head, the actions and the whole channel sheet */
/* Hallmark · waive 77 · Long Document shape keeps the 브이커머스가 하는 일 prose at a 65ch measure with one inline photograph · the shape is a single reading column by design */
/* Hallmark · waive 78 · Korean section heads set at --text-3xl while the Latin Value Commerce display stays large · no free Hangul face holds up at display size, so these Korean heads stay under 3rem */
/* Hallmark · answered F4 · two filled recipes are the theme's ink primary and cotton card secondary, one of each per screen */
/* Hallmark · dropped #statement-title, #partner-title · the CJ and Musinsa sections were retired at the owner's request in this redesign */
/* Hallmark · dropped /runnerfit · the owner removed the RunnerFit case page because it is not in the company's own outline; pages now follow that outline */
/* Hallmark · dropped https://runnerfit.co.kr/, https://blog.naver.com/runnerfit, https://www.instagram.com/runnerfit_kr/, https://www.youtube.com/channel/UCB2euTijMPAXXRol9rbPzKQ · these RunnerFit channel links lived only on the removed case page */
@import url("./tokens.css");
@import url("./base.css");

/* 토큰 보강: General Sans에는 한글이 없어 Pretendard를 둘째 자리에 둔다. 한글 대형 제목은 --text-3xl 이하로만 쓴다 */
:root {
  --font-display: "General Sans", "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--font-display);
  --color-photo-ground: var(--color-paper-3);
  --sheet-pad: var(--space-xl);
  --container: 1280px;
}
html, body { overflow-x: clip; }

body { word-break: keep-all; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
 span.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.pending { color: var(--color-accent-2); }

/* 링크 */
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }

/* 컨트롤: 레터프레스 카드 (8가지 상태) */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-weight: 500; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* 종이 재질 */

/* 네비: slab */
.slab { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-board); color: var(--color-board-type); }
.slab .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.wordmark img { display: block; height: 26px; width: auto; flex: none; }
.slab nav { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.slab nav a { color: inherit; text-decoration: none; opacity: 0.78; transition: opacity var(--dur-short) var(--ease-out); }
.slab nav a:hover, .slab nav a[aria-current="page"] { opacity: 1; }
.slab nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; transition: none; }
.nav-toggle { display: none; min-height: 44px; background: none; border: 0; color: inherit; font-weight: 500; cursor: pointer; }
.nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 히어로: Index — 머리는 작게 위에, 채널 배정표가 본체 */
.hero { min-height: calc(100svh - 64px); display: flex; align-items: center; padding-block: var(--space-2xl); }
.hero .container { display: grid; gap: var(--space-xl); }
.hero h1 { font-size: var(--text-display-s); max-width: none; }
.hero .lead { max-width: 40ch; margin-bottom: var(--space-md); }

/* 긴 문서형 본문 */

/* 사례: 펼친 기록 한 건 */

/* 보드: 한 번뿐인 잉크 띠, 숫자 하나를 크게 */
.board { background: var(--color-board); color: var(--color-board-type); padding-block: var(--section-gap); }
.board .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; }
.board p { margin-top: var(--space-lg); opacity: 0.8; max-width: 46ch; }
.board ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-board-type); }
.board li { padding: var(--space-md) 0; border-bottom: 1px solid color-mix(in oklab, var(--color-board-type) 22%, transparent); }

/* 위치·연락 */

/* 공통 표 */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.tbl tbody th { font-weight: 600; width: 28%; }

/* 하위 페이지 */
.page-head { padding-block: var(--space-4xl) var(--space-3xl); border-bottom: 1px solid var(--color-rule-2); }
.page-head h1 { font-size: var(--text-3xl); max-width: 24ch; }
.page-head .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.sec { padding-block: var(--section-gap-s); border-bottom: 1px solid var(--color-rule); }
.sec:last-of-type { border-bottom: 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg); margin-bottom: var(--space-xl); align-items: baseline; }
.sec-head h2 { font-size: var(--text-2xl); max-width: 24ch; }
.sec-head p { color: var(--color-muted); max-width: 56ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.products li { padding: var(--space-md); }
.products img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--color-cotton); border-radius: var(--radius-input); margin-bottom: var(--space-sm); }
.products b { display: block; font-weight: 600; }
.quote { font-size: var(--text-xl); line-height: 1.5; font-weight: 500; max-width: 34ch; }
.quote-src { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* 제안서 양식: 코튼 시트 */
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); padding: var(--sheet-pad); }
.form h2 { font-size: var(--text-title); max-width: none; }

/* 푸터: colophon block */
.colophon { border-top: 1px solid var(--color-rule-2); margin-top: var(--space-2xl); padding-block: var(--space-3xl) var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.colophon p { max-width: 75ch; line-height: 1.8; }
.colophon nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); }
.colophon a { color: var(--color-ink-2); }

@media (max-width: 60rem) {
  .slab nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-md); background: var(--color-board); }
  .slab nav.open { display: flex; }
  .slab nav a { padding: var(--space-sm) 0; }
  .nav-toggle { display: block; }
  .hero { min-height: 0; }
   .board .container, .sec-head, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .products { grid-template-columns: minmax(0, 1fr); }
}

/* 하위 페이지 잔여 요소: 장부형 기록 */
.fig figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }

/* 순서가 아닌 목록의 01~04 라벨, ol 번호와 겹치는 번호 표기는 숨긴다 */
.board-text p + p { margin-top: var(--space-md); }

/* 배정표: 채널 이름만 크게 (설명 칸은 대표님 자료에 없어 삭제) */

/* 사업영역 4장 (AI 생성 이미지, 표기 필수) */

/* 사업성과: 가로 사진 한 장 (AI 생성 이미지) */
.showcase { padding-block: var(--section-gap-s) 0; }
.showcase figure { margin: 0 auto; }
.showcase img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-card); filter: saturate(0.65) contrast(0.97) sepia(0.08); }
.showcase figcaption { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); }
@media (max-width: 60rem) { .showcase img { aspect-ratio: 4 / 3; } }

/* ===== 2026-10-29 다크 대기감 전환 (레페리 레퍼런스, 동욱 결정) — 토큰 재정의로 전 페이지 일괄 ===== */
:root {
  color-scheme: dark;
  --color-paper: oklch(13% 0.014 285); --color-paper-2: oklch(16% 0.014 285); --color-paper-3: oklch(19% 0.014 285);
  --color-ink: oklch(95% 0.006 80); --color-ink-2: oklch(86% 0.008 80); --color-muted: oklch(70% 0.012 285);
  --color-rule: oklch(28% 0.014 285); --color-rule-2: oklch(36% 0.014 285);
  --color-accent: oklch(74% 0.14 48); --color-accent-2: oklch(78% 0.13 52); --color-focus: oklch(78% 0.13 52);
  --color-cotton: oklch(18% 0.014 285); --color-desk: oklch(13% 0.014 285); --color-print: oklch(95% 0.006 80);
  --color-board: oklch(9% 0.01 285); --color-board-type: oklch(95% 0.006 80); --color-paid: oklch(74% 0.14 48);
  --color-glow-1: oklch(62% 0.16 45); --color-glow-2: oklch(48% 0.14 300);
  --edge-stock: inset 0 0 0 1px oklch(36% 0.014 285); --cast-stock: 0 18px 40px -24px oklch(0% 0 0 / 0.7); --cast-stock-lift: 0 22px 44px -22px oklch(0% 0 0 / 0.8);
}
html, body { background: var(--color-paper); }
.atmo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.slab, .colophon { position: relative; z-index: 1; }
/* main은 쌓임 맥락을 만들지 않는다 — 히어로 3D의 multiply가 뒤의 .atmo 캔버스와 섞여야 함. DOM 순서상 .atmo 위에 그려진다 */
main { position: relative; }
.slab { background: color-mix(in oklab, var(--color-board) 70%, transparent); backdrop-filter: blur(10px); }
 .board { background: transparent; }
.btn--ink { background: var(--color-accent); color: var(--color-board); text-shadow: none; }
.btn--card { background: transparent; background-image: none; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule-2); text-shadow: none; }

/* 스크롤 등장: 스크립트가 없으면 그대로 보인다 */
html.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* 홈: 화면 단위 장면 */
.hx { min-height: 100svh; display: flex; align-items: center; padding-block: var(--space-3xl); }
.hx > .container { width: 100%; }
.hx-hero { text-align: center; }
.hx-hero h1 { max-width: none; margin-inline: auto; font-size: clamp(3.75rem, 11vw, 11rem); letter-spacing: -0.045em; line-height: 0.9; }
.hx-hero .lead { margin: var(--space-xl) auto var(--space-xl); max-width: 44ch; color: var(--color-ink-2); }
.hx-hero .actions { justify-content: center; }
.big-line { font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.35; max-width: 24ch; letter-spacing: -0.02em; }
.hx-statement .link { display: inline-block; margin-top: var(--space-xl); }
.hx-services .more { margin-top: var(--space-xl); }
.ch-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-rule-2); }
.ch-row li { padding: var(--space-2xl) var(--space-md); text-align: center; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; border-bottom: 1px solid var(--color-rule-2); }
.ch-row li + li { border-left: 1px solid var(--color-rule-2); }
.hx-channels .lead { margin-top: var(--space-xl); color: var(--color-ink-2); }


@media (max-width: 60rem) {
  .hx { min-height: 0; padding-block: var(--space-3xl); }
  .hx-hero { min-height: 88svh; }
  .ch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-row li { padding: var(--space-lg) var(--space-sm); }
  .ch-row li:nth-child(odd) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }

.hx-hero { padding-block: var(--space-2xl); }
.hx-hero h1 { font-size: clamp(3.75rem, 9vw, 9rem); }
.hx-hero { min-height: calc(100svh - 64px); }


/* 사업영역 하단 제휴 띠: 재설계 때 스타일이 빠져 위 여백 0·한글 제목 과대였음 */
.band { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.band .split { align-items: center; gap: var(--space-2xl); }
.band h2 { font-size: var(--text-2xl); line-height: 1.35; max-width: none; }
.band .actions { justify-content: flex-end; }
@media (max-width: 60rem) { .band .actions { justify-content: flex-start; } }
.band .split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 60rem) { .band .split { grid-template-columns: minmax(0, 1fr); } }

/* 여백·줄바꿈 점검 (2026-10-29): 남은 비율 클래스 복구, 이메일·영문 상호 줄바꿈 */
.split.wide-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.nowrap { white-space: nowrap; }
@media (max-width: 60rem) {
   .split.wide-r { grid-template-columns: minmax(0, 1fr); }
}
.showcase { padding-top: 0; }

/* 히어로: 왼쪽 글 · 오른쪽 3D (좁은 화면은 위 3D · 아래 글).
   3D = Blender Cycles 렌더 정지 이미지(흰 바탕 합성, assets-src/hero3d) → multiply로 .atmo 배경과 섞어 경계가 안 보이게 한다 */
.hx-hero { position: relative; overflow: hidden; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.hx-hero > .container { position: relative; z-index: 1; }
.hero-art { position: absolute; z-index: 0; left: 50%; top: 4%; width: 175%; max-width: none; height: auto; aspect-ratio: 1.6; margin-left: -87.5%; pointer-events: none; mix-blend-mode: multiply; }
img.hero-art { animation: hero-float 7s ease-in-out infinite; }
@keyframes hero-float { 50% { transform: translateY(-12px); } }
@media (min-width: 900px) {
  .hx-hero { justify-content: center; text-align: left; }
  .hx-hero > .container > * { max-width: 48%; margin-left: 0; }
  .hx-hero h1 { font-size: clamp(3.5rem, 6.6vw, 7.25rem); line-height: 0.95; }
  .hx-hero .lead { margin: 28px 0 36px; }
  .hx-hero .actions { justify-content: flex-start; }
  .hero-art { left: auto; right: -6vw; top: 50%; width: 64vw; margin: -20vw 0 0; }
}
@media (prefers-reduced-motion: reduce) { img.hero-art { animation: none; } }


/* ===== 2026-10-29 밝은 테마 전환 (대표님 요청: upliftdesk.com 색감 + 포인트 네이비). 실측: 바탕 #F9F7F2·#FFF, 글자 #333, 버튼 네이비 #08406F ===== */
:root {
  color-scheme: light;
  --color-paper: #f9f7f2; --color-paper-2: #fdfcf9; --color-paper-3: #f2f0ea;
  --color-ink: #333333; --color-ink-2: #4a4a4a; --color-muted: #666666;
  --color-rule: #e4e1da; --color-rule-2: #cfcbc2;
  --color-accent: #011c55; --color-accent-2: #1b3a7a; --color-focus: #2a5bb8;   /* 2026-11-02 로고 네이비(로고 픽셀 실측 #011C55)로 교체 */
  --color-cotton: #f2f0ea; --color-desk: #f9f7f2; --color-print: #333333;
  --color-board: #fdfcf9; --color-board-type: #333333; --color-paid: #011c55; --color-on-accent: #fdfcf9; --color-on-accent-2: #d3dde8;
  --color-glow-1: #011c55; --color-glow-2: #606d60;
  --edge-stock: inset 0 0 0 1px #cfcbc2; --cast-stock: 0 18px 40px -24px rgb(0 0 0 / 0.18); --cast-stock-lift: 0 22px 44px -22px rgb(0 0 0 / 0.22);
}
.slab { border-bottom: 1px solid var(--color-rule); }
.btn--ink { background: var(--color-accent); color: var(--color-on-accent); }
.btn--ink:hover { background: var(--color-accent-2); }
.link { color: var(--color-accent); }
/* 판매 채널은 네이비 띠 (레퍼런스의 네이비 띠 구간) */
.hx-channels { background: var(--color-accent); color: var(--color-on-accent); }
.hx-channels .ch-row, .hx-channels .ch-row li, .hx-channels .ch-row li + li { border-color: color-mix(in oklab, var(--color-on-accent) 28%, transparent); }
.hx-channels .lead { color: var(--color-on-accent-2); }
/* 사업성과: 매출 수치 삭제 후 한 단 */
.board .container { grid-template-columns: minmax(0, 1fr); }
.board .board-text p { max-width: 60ch; color: var(--color-ink-2); opacity: 1; }
/* 대표 인사말 */
.eyebrow-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); letter-spacing: 0; margin-bottom: var(--space-md); }
.greeting { margin-top: var(--space-lg); max-width: 58ch; color: var(--color-ink-2); }
.greeting p + p { margin-top: var(--space-sm); }

/* ===== 2026-11-02 하위 페이지 리듬 (upliftdesk Our Story · 토스 회사소개 실측 이식) =====
   제목 39px → 크게, 실사진 전체 폭, 구역 배경 교대(크림 · 베이지 #F1E8DF · 네이비), 강점·유형은 네이비 띠 안 칸 나누기 */
.page-head h1 { font-size: clamp(3.25rem, 7.2vw, 6.5rem); letter-spacing: -0.035em; line-height: 1; max-width: none; }
.page-head .lead { max-width: 62ch; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.75; }
.showcase--bleed { padding-block: 0; }
.showcase--bleed .container { max-width: none; padding-inline: 0; }
.showcase--bleed img { aspect-ratio: 21 / 8; border-radius: 0; }
.showcase img { filter: none; }
.tone-beige { background: #f1e8df; border-bottom: 0; }
.tone-navy { background: var(--color-accent); color: var(--color-on-accent); border-bottom: 0; }
.tone-navy h2, .tone-navy h3 { color: var(--color-on-accent); }
.tone-navy p { color: var(--color-on-accent-2); }
.tone-navy .btn--ink { background: var(--color-on-accent); color: var(--color-accent); }
.tone-beige .quote::before { content: "\201C"; display: block; font-size: 5.5rem; line-height: 0.7; color: var(--color-accent); margin-bottom: var(--space-sm); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-xl) var(--space-lg); margin-top: var(--space-2xl); }
.cols article { border-top: 1px solid color-mix(in oklab, var(--color-on-accent) 35%, transparent); padding-top: var(--space-md); }
.cols .n { display: block; font-size: var(--text-sm); opacity: 0.6; margin-bottom: var(--space-sm); font-variant-numeric: tabular-nums; }
.cols h3 { font-size: var(--text-title); line-height: 1.35; margin-bottom: var(--space-sm); }
.cols p { font-size: var(--text-sm); line-height: 1.7; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); display: block; }
.card .n { display: block; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.35; margin: var(--space-xs) 0 var(--space-sm); max-width: none; }
.card p { color: var(--color-muted); max-width: 48ch; }
@media (max-width: 60rem) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .showcase--bleed img { aspect-ratio: 4 / 3; }
}
.board-text p { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.7; max-width: 52ch; color: var(--color-ink); opacity: 1; }
/* 2026-11-02 홈 빈 구역 보강: 문장 구역은 글+출고 실사진 2단, 채널 띠는 화면 높이 대신 패딩 + 출고 사진 위 네이비 90% */
.hx-statement, .hx-channels { min-height: 0; padding-block: var(--section-gap); }
.hx-statement > .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.stmt-photo { margin: 0; }
.stmt-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); display: block; }
.hx-channels { background-image: linear-gradient(color-mix(in oklab, var(--color-accent) 90%, transparent), color-mix(in oklab, var(--color-accent) 90%, transparent)), url(/assets/img/photo/outbound.jpg); background-size: cover; background-position: center; }
@media (max-width: 60rem) {
  .hx-statement > .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hx-statement, .hx-channels { padding-block: var(--section-gap-s); }
}
/* 2026-11-02 줄바꿈: 제목·큰 문장은 줄 길이 고르게, 본문은 마지막 줄 한 어절 방지 (keep-all은 base에서 이미 적용) */
h1, h2, h3, .big-line, .quote, .lead { text-wrap: balance; }
p, li, td { text-wrap: pretty; }
/* 2026-11-02 인터랙션 추가 — transform·opacity만, hover는 정밀 포인터에서만, 감소 모션은 CSS·JS 양쪽에서 끔 */
html.js .reveal-zoom { opacity: 0; transform: scale(1.05); transition: opacity 700ms var(--ease-out), transform 1400ms var(--ease-out); }
html.js .reveal-zoom.in { opacity: 1; transform: none; }
.card-media { overflow: hidden; border-radius: var(--radius-card); }
.card-media img { transition: transform 700ms var(--ease-out); }
.btn { transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn:hover { transform: none; }
.btn:active { transform: translateY(1px) scale(0.98); transition-duration: var(--dur-micro); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(1px) scale(0.98); }
  .card:hover .card-media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-zoom { opacity: 1; transform: none; }
  .card-media img, .btn { transition: none; }
  .btn:hover, .btn:active, .card:hover .card-media img { transform: none; }
}
@media (max-width: 400px) { .big-line { font-size: 1.375rem; } }
.hx-statement > .container { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.hx-statement .big-line { font-size: clamp(1.375rem, 2.6vw, 2.5rem); max-width: none; }
@media (max-width: 60rem) { .hx-statement > .container { grid-template-columns: minmax(0, 1fr); } }
/* 2026-11-02 홈 사업영역: 사진 칸·글 칸 바둑판 (햇품 레퍼런스 haetpoom0.imweb.me 구조) */
.hx-services { min-height: 0; padding-block: var(--section-gap); }
.checker { list-style: none; margin: 0; padding: 0; }
.checker li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.checker figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; }
.checker img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out); }
.checker li:nth-child(even) figure { order: 2; }
.checker-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--space-2xl) clamp(24px, 5vw, 80px); }
.checker li:nth-child(even) .checker-text { align-items: flex-end; text-align: right; }
.checker h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.3; margin: var(--space-xs) 0 var(--space-sm); }
.checker p { color: var(--color-muted); max-width: 36ch; }
.checker .link { margin-top: var(--space-md); }
@media (hover: hover) and (pointer: fine) { .checker li:hover img { transform: scale(1.04); } }
@media (max-width: 60rem) {
  .checker li { grid-template-columns: minmax(0, 1fr); }
  .checker li:nth-child(even) figure { order: 0; }
  .checker li:nth-child(even) .checker-text { align-items: flex-start; text-align: left; }
  .checker-text { padding: var(--space-lg) 0 var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) { .checker img { transition: none; } .checker li:hover img { transform: none; } }
/* 2026-11-03 홈 구역 여백 144 → 96px: 문장 구역↔바둑판 사이 빈 띠(약 288px)가 "휑함"의 원인이었음(실측). 좁은 화면은 56px까지 */
.hx-statement, .hx-services, .hx-channels { padding-block: clamp(56px, 6.67vw, 96px); }
/* 2026-11-03 홈 연락처: "Contact us"+흩어진 사진 콜라주 → 카드 2개(햇품 레퍼런스 구조). 카드 전체가 화살표 링크로 눌리고, 메일·전화는 그 위에서 따로 눌림 */
.hx-cta { min-height: 0; padding-block: clamp(56px, 6.67vw, 96px); }
.cta-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.cta-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 380px; padding: clamp(28px, 3.6vw, 52px); background: #f1e8df; border-radius: var(--radius-card); }
.cta-card h3 { font-size: clamp(1.75rem, 2.8vw, 2.6rem); line-height: 1.25; margin: var(--space-xs) 0 var(--space-md); }
.cta-card p { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; color: var(--color-ink-2); max-width: 30ch; }
.cta-contact { margin-top: var(--space-md); font-weight: 600; }
.cta-contact a { position: relative; z-index: 1; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.cta-contact a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.cta-arrow { margin-top: auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); }
.cta-arrow::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }   /* 카드 전체를 누르는 영역 (링크 자체엔 transform 금지 — 기준 상자가 바뀌어 영역이 줄어듦) */
.cta-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-short) var(--ease-out); }
.cta-card:has(.cta-arrow:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cta-card:hover .cta-arrow svg { transform: translate(2px, -2px); } }
@media (prefers-reduced-motion: reduce) { .cta-arrow svg { transition: none; } .cta-card:hover .cta-arrow svg { transform: none; } }
@media (max-width: 60rem) {
  .cta-cards { grid-template-columns: minmax(0, 1fr); }
  .cta-card { min-height: 0; }
  .cta-arrow { margin-top: var(--space-xl); }
}
/* 채널 띠 배경: 출고 사진(문장 구역과 중복) → 사무실 사진 */
.hx-channels { background-image: linear-gradient(color-mix(in oklab, var(--color-accent) 90%, transparent), color-mix(in oklab, var(--color-accent) 90%, transparent)), url(/assets/img/photo/office.jpg); }
/* 2026-11-03 히어로 제목 "Commerc/e" 끊김 수정: ≥1680px에서 제목 칸은 553px에서 멈추는데 글자만 116px까지 커져 단어가 칸을 넘었음(실측).
   상한을 칸에 맞춰 104px(px 고정 — 브라우저 기본 글자 크기를 키워도 넘지 않게), 단어 중간 끊기 금지 */
@media (min-width: 900px) { .hx-hero h1 { font-size: clamp(3.5rem, 6.6vw, 104px); overflow-wrap: normal; } }
/* 2026-11-03 taste-skill 검사 반영 (영어 소제목·01~04 번호는 마크업에서 삭제)
   버튼 그림자 삭제(테두리 역할의 안쪽 선만 유지), 제안 유형 설명 14 → 16px, 사업영역 하단 문장 모바일 크기 축소(31px에서 4줄) */
.btn--ink, .btn--ink:hover, .btn--ink:active { box-shadow: none; }
.btn--card:hover, .btn--card:active { box-shadow: var(--edge-stock); }
.cols p { font-size: 1rem; }
@media (max-width: 40rem) { .band h2 { font-size: 1.375rem; } }
/* 제휴문의 하단: 한쪽에 몰려 오른쪽 860px가 비던 구역 → 왼쪽 제목·메일/전화 버튼, 오른쪽 연락처 표·지도 */
.contact-split { align-items: start; }
.contact-split h2 { font-size: var(--text-2xl); line-height: 1.35; }
.contact-split .tbl { margin-top: 0; }
/* 2026-11-05 사업영역 "주요 판매 채널"(대표님 자료 3번 블록 원문): 그룹명 · 채널 이름 · 설명 3칸, 좁은 화면은 위아래로 */
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-list li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-lg); align-items: baseline; padding: var(--space-lg) 0; border-top: 1px solid color-mix(in oklab, var(--color-ink) 14%, transparent); }
.ch-list h3 { font-size: var(--text-title); line-height: 1.4; }
.ch-names { font-weight: 600; color: var(--color-ink); line-height: 1.7; }
.ch-desc { color: var(--color-ink-2); line-height: 1.7; }
@media (max-width: 60rem) { .ch-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }
/* 2026-11-05 입점 채널 로고(대표님 제공 10개, 원래 색 — 동욱 선택 B): 칸 배경 = 로고 원래 바탕색, 로고 크기는 칸 기준으로 통일 */
.logo-wall { list-style: none; margin: 0 0 var(--space-2xl); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.logo-wall li { display: grid; place-items: center; height: 112px; padding: 0 12%; border-radius: var(--radius-card); background: #fff; }
.logo-wall img { width: auto; height: auto; max-width: 100%; max-height: 44px; }
@media (max-width: 60rem) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-wall li { height: 84px; } .logo-wall img { max-height: 34px; } }
/* 홈 판매 상품(대표님 제공 9장, 원본 500px대 → Real-ESRGAN x4plus ONNX로 키운 뒤 1024px — scratchpad 스크립트, 2026-11-05): 3×3, 휴대폰도 3열(2열이면 9번째가 혼자 남음) */
.hx-products { min-height: 0; padding-block: clamp(56px, 6.67vw, 96px); }
.prod-title { font-size: var(--text-2xl); margin-bottom: var(--space-xl); }
.prod-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.prod-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card); display: block; }
@media (max-width: 60rem) { .prod-grid { gap: var(--space-xs); } }
/* 2026-11-05 대표님 현장 사진 추가분: 사진 나란히 2·3장 (회사소개·사업성과). 휴대폰은 3장일 때 첫 장 전체 폭 + 아래 2장 */
.photo-row { padding-block: var(--section-gap-s); }
.photo-row .wrap { display: grid; gap: var(--space-md); }
.photo-row--2 .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-row--3 .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); display: block; }
@media (max-width: 60rem) {
  .photo-row .wrap { gap: var(--space-xs); }
  .photo-row--3 .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-row--3 figure:first-child { grid-column: 1 / -1; }
}
/* 회사소개 사진 3장 줄: 4:3 작은 칸이라 한 화면이 거의 비어 보였음(taste inspect) → 첫 장 2배 폭, 높이 맞춤, 위아래 여백 축소 */
.photo-row { padding-block: var(--space-2xl); }
@media (min-width: 60.01rem) {
  .photo-row--3 .wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .photo-row--3 img { aspect-ratio: auto; height: clamp(320px, 32vw, 480px); }
}
/* 회사소개 회사 정보: 크림 바탕 위 짧은 표 한 줄이라 화면이 비어 보였음 → 네이비 띠 + 제목 왼쪽·표 오른쪽 */
.company .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.company h2 { font-size: var(--text-2xl); }
.company .tbl th, .company .tbl td { color: var(--color-on-accent); border-bottom-color: color-mix(in oklab, var(--color-on-accent) 22%, transparent); }
.company .tbl th { color: var(--color-on-accent-2); font-weight: 500; }
@media (max-width: 60rem) { .company .split { grid-template-columns: minmax(0, 1fr); } }
/* 2026-11-05 인터랙션 1 — 홈 바둑판 사진: 줄 전체가 떠오르던 등장 대신, 사진이 글 반대편에서 닦이듯 드러나고(800ms) 글은 뒤이어 16px 떠오름.
   사진 안쪽 transform은 hover 확대가 쓰므로 등장은 figure의 clip-path만 사용(같은 요소 transform 다툼 방지). 스크립트 없으면 처음부터 보임 */
html.js .checker li.reveal { opacity: 1; transform: none; }
html.js .checker figure { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-out); }   /* 등장이라 처음이 빠른 곡선 — ease-in-out은 300ms에 15%만 드러나 멈칫했음(실측) */
html.js .checker li:nth-child(even) figure { clip-path: inset(0 0 0 100%); }
html.js .checker li.in figure { clip-path: inset(0 0 0 0); }
html.js .checker-text { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out) 240ms, transform var(--dur-long) var(--ease-out) 240ms; }
html.js .checker li.in .checker-text { opacity: 1; transform: none; }
@media (max-width: 60rem) { html.js .checker li:nth-child(even) figure { clip-path: inset(0 100% 0 0); } html.js .checker li.in figure { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  html.js .checker figure, html.js .checker li:nth-child(even) figure { clip-path: none; transition: none; }
  html.js .checker-text { opacity: 1; transform: none; transition: none; }   /* 이 사이트 규칙: 동작 줄이기면 등장 요소를 처음부터 보여 줌 */
}
/* 2026-11-05 인터랙션 2 — 휴대폰 메뉴: 순간이동하던 열림 → 헤더에서 8px 내려오며 나타남(열기 200ms, 닫기 150ms로 더 빠르게).
   display 전환은 allow-discrete(미지원 브라우저는 예전처럼 즉시) */
@media (max-width: 60rem) {
  .slab nav { opacity: 0; transform: translateY(-8px); transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), display 150ms allow-discrete; }
  .slab nav.open { opacity: 1; transform: none; transition-duration: 200ms; }
  @starting-style { .slab nav.open { opacity: 0; transform: translateY(-8px); } }
}
@media (prefers-reduced-motion: reduce) { .slab nav { transform: none; } }
/* 2026-11-05 A안 시안 — 히어로 큐브가 흩어져 사업영역 4줄의 표시가 됨. 재질: 유통=크라프트, 소싱=투명, 브랜드 운영=네이비, 채널=젖빛
   multiply는 바깥(.cube-mark, 스크롤 이동 transform 담당)에 — 안쪽 img에 두면 바깥 transform이 만든 층 안에서만 섞여 흰 네모가 보임. 사진 위에는 두지 않음(사진이 어두워짐) */
.checker li { position: relative; }
.cube-mark { position: absolute; top: 12%; width: clamp(76px, 8.5vw, 136px); z-index: 1; pointer-events: none; mix-blend-mode: multiply; will-change: transform; }
.checker li:nth-child(odd) .cube-mark { right: clamp(16px, 4vw, 64px); }
.checker li:nth-child(even) .cube-mark { left: clamp(16px, 4vw, 64px); }
.cube-mark img { display: block; width: 100%; height: auto; }
html.js .cube-mark img { opacity: 0; transform: scale(0.9) translateY(12px); transition: opacity 500ms var(--ease-out) 320ms, transform 700ms var(--ease-out) 320ms; }
html.js .checker li.in .cube-mark img { opacity: 1; transform: none; }
@media (max-width: 60rem) {
  .checker li { container-type: inline-size; }
  .cube-mark { top: calc(62.5cqw + var(--space-md)); bottom: auto; width: 60px; }   /* 사진(16:10) 바로 아래 제목 줄 오른쪽 — 설명 문장과 겹치지 않게 */
  .checker li:nth-child(odd) .cube-mark, .checker li:nth-child(even) .cube-mark { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) { html.js .cube-mark img { opacity: 1; transform: none; transition: none; } }
/* 큐브 자리 확보: 큐브가 떠다니는 범위에 글이 들어가던 폭(360·1024px, 실측) → 글 칸의 큐브 쪽에 큐브 폭만큼 여백 */
.checker li:nth-child(odd) .checker-text { padding-right: calc(clamp(16px, 4vw, 64px) + clamp(76px, 8.5vw, 136px) + 12px); }
.checker li:nth-child(even) .checker-text { padding-left: calc(clamp(16px, 4vw, 64px) + clamp(76px, 8.5vw, 136px) + 12px); }
@media (max-width: 60rem) { .checker li:nth-child(odd) .checker-text, .checker li:nth-child(even) .checker-text { padding-left: 0; padding-right: 72px; } }