/* CANARY COLLECTIVE — 공통 스타일 (2026-10 리뉴얼)
   흰 바탕 · 검은 선으로 나누는 인덱스 구조 · 노란색은 점 하나만 */
:root {
  /* 글자 크기 단계 — 대제목 / 제목 / 소제목 / 본문 / 보조. 크기는 여기서만 바꾸세요 */
  --t1: clamp(22px, 2vw, 30px);
  --t2: clamp(18px, 1.4vw, 20px);
  --t3: clamp(16px, 1.2vw, 17px);
  --t-body: 15px;
  --t-small: 14px;
  --bg: #FFFFFF;
  --ink: #111111;
  --body: #333333;
  --muted: #6E6E6E;
  --line: #E3E3E3;
  --ph: #F1F0EE;
  --ph-ink: #9A968F;
  --stage: #FFFFFF;  /* 포트폴리오 무대 배경 (10/12 연회색 → 흰색: 흰 배경 제품 사진이 티 덜 나게) */
  --canary: #F2C200;
  --gutter: clamp(16px, 2.4vw, 40px);
  --sec: clamp(64px, 8vw, 120px);
  --sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --logo: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.label { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; background: var(--canary); }
.more { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.more:hover { border-bottom-width: 2px; padding-bottom: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 240px;
  padding: 16px 20px; border: 1px solid var(--ink); font-size: 15px; background: var(--bg); }
.btn:hover { background: var(--ink); color: #fff; }
.btn.fill { background: var(--ink); color: #fff; }
.btn.fill:hover { background: var(--bg); color: var(--ink); }

/* ── 사진 자리 ──
   사진 파일이 없으면 회색 칸으로 남고, 시안 모드(config.js draft: true)에서는
   어떤 사진이 들어갈 자리인지 글씨로 보여줌 */
.ph { position: relative; overflow: hidden; background: var(--ph); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; }
.is-draft .ph:not(.has-img)::after {
  content: attr(data-shot); position: absolute; left: 12px; right: 12px; bottom: 10px;
  font-size: 12px; line-height: 1.5; color: var(--ph-ink);
}
.cut { position: relative; background: #fff; }
.cut img { width: 100%; height: 100%; object-fit: contain; }
.cut:not(.has-img) { background: var(--ph); }
.is-draft .cut:not(.has-img)::after { content: '누끼 제품컷 · 흰 배경'; position: absolute; inset: auto 0 12px; text-align: center; font-size: 11px; color: var(--ph-ink); }

/* ── 머리말: 메뉴 왼쪽 / 로고 가운데 / 아이콘 오른쪽 (젠틀몬스터 구조 참고) ── */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--bg);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 24px;
  height: 69px; padding: 0 var(--gutter); border-bottom: 1px solid var(--ink);
}
.logo { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 9px; font-family: var(--logo); font-weight: 500;
  letter-spacing: .04em; font-size: 22px; line-height: 1.1; white-space: nowrap; }
.nav { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.nav a { padding: 2px 0; }
.nav a[aria-current="page"], .nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.head-icons { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 18px; }
.head-icons a { display: block; width: 22px; height: 22px; }
.head-icons svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.menu-btn { display: none; grid-column: 1; grid-row: 1; justify-self: start; align-items: center; gap: 10px;
  background: none; border: 0; padding: 8px 0; font-size: 14px; cursor: pointer; }
.menu-btn i, .menu-btn i::before { display: block; width: 18px; height: 1px; background: var(--ink); position: relative; transition: transform .2s; }
.menu-btn i { box-shadow: 0 -5px 0 var(--ink); top: 3px; }
.menu-btn i::before { content: ''; position: absolute; top: 5px; }
.is-open .menu-btn i { box-shadow: none; transform: rotate(45deg); top: 0; }
.is-open .menu-btn i::before { top: 0; transform: rotate(-90deg); }

/* ── 페이지 머리 (홈 외) ── */
.page-head { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 1px solid var(--ink); }
.page-head > div { padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(28px, 3vw, 44px); }
.page-head > div + div { border-left: 1px solid var(--ink); display: flex; align-items: flex-end; }
.page-head h1 { font-size: var(--t1); line-height: 1.5; letter-spacing: -0.01em; }
.page-head h1.as-t2 { font-size: var(--t2); line-height: 1.6; }
.page-head .lead { font-size: var(--t2); line-height: 1.7; color: var(--body); max-width: 34em; }

/* ── 섹션 머리: 라벨 왼쪽 / 링크 오른쪽, 아래 검은 선 ── */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: var(--sec) var(--gutter) 20px; border-bottom: 1px solid var(--ink); }
.sec-head.tight { padding-top: 20px; }

/* ── 홈 첫 화면: 샘플링 과정 사진 ── */
.hero { position: relative; height: calc(100vh - 69px); height: calc(100svh - 69px); min-height: 600px; }
.hero-shot { position: absolute; inset: 0; }
.hero-shot > .ph { position: absolute; inset: 0; }
.is-draft .hero-shot > .ph:not(.has-img)::after { left: auto; right: var(--gutter); top: 20px; bottom: auto; max-width: 320px; text-align: right; }
/* 문구는 사진 위에 바로 얹음 (칸·선 없음). 사진이 어두우면 .hero.on-dark 로 흰 글씨 */
.hero-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 7fr 5fr; align-items: end; }
.hero-cap > div { padding: 0 var(--gutter) clamp(24px, 3vw, 44px); }
.hero-cap > div + div { display: grid; justify-items: end; text-align: right; gap: 2px; font-size: 14px; }
.hero-cap h1 { font-size: var(--t2); line-height: 1.6; letter-spacing: -0.01em; }
.hero-def { position: absolute; z-index: 2; left: var(--gutter); top: clamp(28px, 4vw, 56px); display: grid; gap: 2px; text-align: left; font-size: 15px; }
.hero-def .ko { color: var(--muted); }
.m-br { display: none; }
.m-def { display: none; }
/* (10/16) 첫 화면 문구 = 소개 ABOUT 문구와 같은 글씨 (영문 Cormorant Garamond Italic + 한글 2줄)
   맥북: 사진 오른쪽 아래 흰 글씨 (현지 2안 확정) / 휴대폰: 사진 아래 흰 바탕 */
.hero-about { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(28px, 4vw, 56px); }
.hero-about .lead { font-size: var(--t2); line-height: 1.7; color: #fff; font-weight: 400; }
.hero-about .en-serif, .hero-about .ko, .hero-about .ko > span { display: block; }
.hero-about .en-serif, .hero-about .ko > span { width: max-content; white-space: nowrap; }
.hero-about .ko { font-size: .95em; line-height: 1.75; }   /* 실제 크기는 index.html 스크립트가 영문 길이에 맞춤 */
/* 맥북 사진: 원본 위쪽 150px를 잘라낸 hero-wide.jpg를 위에 붙여서 → 목 아래쪽만 보이게 */
/* (10/16 현지) 화면 높이에 맞춰 자르지 않고 사진 비율 그대로 늘림 → 병은 아래까지 다 보이고, 위는 목 절반만 */
@media (min-width: 761px) {
  .hero { height: auto; min-height: 0; aspect-ratio: 2000 / 1350; }
  .hero-shot img { object-position: 50% 0; }
}
/* 휴대폰: 사진 위 빈 벽이 좁아 글이 사진에 겹침 → 문구를 사진 바로 아래 흰 바탕으로 */
@media (max-width: 760px) {
  .hero { aspect-ratio: auto !important; }
  .hero-shot { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
  .hero-about { position: static; padding: 28px var(--gutter) 0; }
  .hero-about .lead { color: var(--body); }
}
.hero-link { font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hero.on-dark .hero-cap, .hero.on-dark .hero-def, .hero.on-dark .hero-def .ko { color: #fff; }
/* 사진이 있을 때: 아래쪽만 살짝 어둡게 해서 흰 글씨가 읽히게, 가운데 정의는 진한 글씨 */
.hero-shot > .ph.has-img::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); }
.hero:has(.ph.has-img) .hero-cap { color: #fff; }
.hero:has(.ph.has-img) .hero-def .ko { color: var(--ink); }

/* ── 대표작 2건 ── */
.feat { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink); }
.feat > * + * { border-left: 1px solid var(--ink); }
.feat .ph { aspect-ratio: 4 / 5; border-bottom: 1px solid var(--ink); }
.feat .info { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px var(--gutter) 26px; }
.feat .name { font-size: var(--t1); line-height: 1.4; }
.feat .what, .feat .scope { color: var(--muted); font-size: var(--t-small); }
.feat .scope { grid-column: 1 / -1; }
.feat a:hover .name { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }

/* ── 누끼 일렬 (옆으로 넘김) ── */
.strip-wrap { padding-top: 28px; }
.strip { --sgap: clamp(8px, 1vw, 16px); display: flex; gap: var(--sgap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip::before, .strip::after { content: ''; flex: 0 0 calc(var(--gutter) - var(--sgap)); }
.strip .item { flex: 0 0 clamp(200px, 19vw, 280px); scroll-snap-align: start; }
.item .cut { aspect-ratio: 3 / 4; }
.item .t { padding-top: 14px; display: grid; gap: 2px; }
.item .name { font-size: 15px; }
.item .what { font-size: 13px; color: var(--muted); }
a.item:hover .name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.strip-ctrl { display: flex; align-items: center; gap: 20px; padding: 28px var(--gutter) 0; }
.strip-ctrl button { font-size: 18px; background: none; border: 0; padding: 4px 8px; cursor: pointer; }
.strip-bar { flex: 1; height: 1px; background: var(--line); position: relative; }
.strip-bar i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); width: 20%; }

/* ── 쇼룸 (젠틀몬스터식): 위에 큰 누끼 · 아래 작은 누끼 ──
   누끼는 배경 없는 PNG(images/cut-번호.png) → 연회색 무대 위에 올라감 */
.show { background: var(--stage); }
.show-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; outline: none; }
.show-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 64%; scroll-snap-align: start; position: relative;
  height: clamp(360px, 42svh, 440px); }  /* 10/13 위 여백 줄임 */
.slide + .slide { border-left: 1px solid rgba(17,17,17,.06); }
.stage { position: absolute; inset: 0 8% clamp(24px, 3vw, 40px) 34%; background: none; }  /* 아래 끝 = 왼쪽 정보 글 아래 끝 */
.stage img { object-fit: contain; object-position: 50% 100%; transform: scale(.92); transform-origin: 50% 100%; }  /* 쇼룸 제품 크기 (보이는 크기는 예전 50%와 같게), 바닥을 정보 글 아래 끝에 맞춤 (10/13) */
.slide-info { position: absolute; left: var(--gutter); bottom: clamp(24px, 3vw, 40px); width: min(30%, 300px);
  display: grid; gap: 4px; font-size: 13px; transition: opacity .3s; }
.slide:not(.is-on) .slide-info { opacity: .35; }
.slide-info .name { font-size: var(--t2); line-height: 1.3; margin-top: 2px; }
.slide-info .what { color: var(--muted); }
.notes { display: grid; grid-template-columns: 52px 1fr; gap: 3px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(17,17,17,.15); }
.notes dt { color: var(--muted); font-size: 11px; padding-top: 1px; }
.scope { margin-top: 10px; line-height: 1.65; color: var(--body); }
.scope span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.slide-info .more { justify-self: start; margin-top: 14px; font-size: 13px; }
.show-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--ink); }
.show-thumbs { display: flex; align-items: flex-end; gap: 16px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.show-thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: none; width: auto; padding: 0 0 6px; background: none; border: 0; cursor: pointer; opacity: .45; transition: opacity .2s;
  border-bottom: 1px solid transparent; }
.thumb:hover { opacity: .8; }
.thumb[aria-current="true"] { opacity: 1; border-bottom-color: var(--ink); }
/* 썸네일: 높이만 같게, 폭은 제품 모양대로 → 제품 사이 간격이 일정 (10/13) */
.tcut { display: block; height: 64px; background: var(--stage); }
.tcut.has-img { width: auto; }
.tcut img { height: 100%; width: auto; max-width: none; object-fit: contain; }
.tcut:not(.has-img) { width: 44px; }
.show-arrow { flex: none; background: none; border: 0; font-size: 16px; padding: 6px 10px; cursor: pointer; }

/* 시안 모드: 누끼가 없으면 병 모양 자리 표시 */
.stage:not(.has-img) { background: none; }
.is-draft .stage:not(.has-img), .is-draft .tcut:not(.has-img) { background: var(--stage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' fill='none' stroke='%23BDB9B1' stroke-width='1'%3E%3Crect x='22' y='2' width='16' height='16' fill='%23D6D3CC' stroke='none'/%3E%3Crect x='26' y='18' width='8' height='6'/%3E%3Crect x='4' y='24' width='52' height='74' rx='4' fill='%23FAFAF8'/%3E%3C/svg%3E") center / auto 46% no-repeat; }
.is-draft .stage:not(.has-img)::after, .is-draft .tcut:not(.has-img)::after { content: none; }

/* ── 제공 자료 (서비스 BRAND 탭) ── */
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 48px) clamp(10px, 1.2vw, 18px); padding: 28px var(--gutter) 0; }
.docs .ph { aspect-ratio: 3 / 4; }
@media (max-width: 1024px) { .docs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .docs { grid-template-columns: repeat(2, 1fr); } }

/* ── 상세: 라인업 격자 · 캠페인 사진 ── */
.lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 48px) clamp(10px, 1.2vw, 18px); padding: 28px var(--gutter) 0; }
.lineup .cut { aspect-ratio: 3 / 4; background: #fff; }
.lineup .cut img { transform: scale(.8); }
.lineup .t { text-align: center; }
.campaign { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.2vw, 18px); padding: 28px var(--gutter) 0; }
.campaign .ph { aspect-ratio: 4 / 5; }
/* 공간 사진 (SPACE 작업, 입구 → 안쪽 순서로 가로 3칸) */
.spaceshots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 18px); padding: 28px var(--gutter) 0; }
.spaceshots .ph { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .spaceshots { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .lineup { grid-template-columns: repeat(2, 1fr); } .campaign { grid-template-columns: 1fr; } }

/* ── 인덱스 줄 (A식) ── */
.rows > * { display: grid; grid-template-columns: 56px 1.2fr 2fr auto; gap: 16px; align-items: baseline;
  padding: 22px var(--gutter); border-bottom: 1px solid var(--line); }
.rows > *:last-child { border-bottom: 1px solid var(--ink); }
.rows .no { font-size: 13px; color: var(--muted); }
.rows .name { font-size: var(--t3); }
.rows .desc { color: var(--body); line-height: 1.75; }
.rows .go { font-size: 14px; }
.rows .name small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.rows a:hover .name { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ── 두 칸 글 (왼쪽 큰 글 / 오른쪽 설명) ── */
.split { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 1px solid var(--ink); }
.split > * { padding: clamp(36px, 4vw, 64px) var(--gutter); margin: 0; }
.split > * + * { border-left: 1px solid var(--ink); }
.split .big { font-size: var(--t1); line-height: 1.55; letter-spacing: -0.01em; }
/* 소개: 위 "향을 기반으로 한…"(page-head .lead)과 같은 크기 */
.split .big.as-lead { font-size: var(--t2); line-height: 1.7; letter-spacing: 0; }
.points { display: grid; gap: 20px; }
.points > div { display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.points p { font-size: var(--t3); line-height: 1.75; }

/* ── 단계 (진행 과정) ── */
.steps { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); border-bottom: 1px solid var(--ink); }
.steps > div { padding: 24px var(--gutter) 32px; display: grid; align-content: start; gap: 10px; }
.steps > div + div { border-left: 1px solid var(--line); }
.steps .step { font-size: var(--t3); }
.steps p { font-size: var(--t-small); line-height: 1.75; color: var(--body); }

/* ── 받는 것 3칸 ── */
.three { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ink); }
.three > div { padding: 24px var(--gutter) 32px; display: grid; align-content: start; gap: 10px; }
.three > div + div { border-left: 1px solid var(--line); }
.three h3 { font-size: var(--t3); }
.three p { font-size: var(--t-small); line-height: 1.75; color: var(--body); }

/* ── 서비스 탭 ── */
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ink); position: sticky; top: 69px; z-index: 10; background: var(--bg); }
.tabs a { flex: 1; min-width: 120px; padding: 18px var(--gutter); font-size: 14px; border-right: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.tabs a:last-child { border-right: 0; }
.tabs a[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab-panel[hidden] { display: none; }
#svc { scroll-margin-top: 69px; }
.note-line { padding: 20px var(--gutter); font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); }

/* ── 필터 (포트폴리오) ── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px var(--gutter) 0; }
.filters button { background: none; border: 1px solid var(--line); padding: 7px 14px; font-size: 13px; cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ── 상세 페이지 ── */
.detail { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 1px solid var(--ink); }
.detail > .ph { aspect-ratio: 4 / 5; border-right: 1px solid var(--ink); }
.detail-idx { display: flex; flex-direction: column; }
.detail-idx > * { padding-left: var(--gutter); padding-right: var(--gutter); }
.detail-idx .top { padding-top: 22px; padding-bottom: 22px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.detail-idx .body { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 3vw, 44px); display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.detail-idx h1 { font-size: var(--t1); line-height: 1.4; letter-spacing: -0.01em; }
.detail-idx .intent { color: var(--body); line-height: 1.8; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.samp .h { display: block; padding-top: 18px; padding-bottom: 10px; font-size: 13px; color: var(--muted); }
.samp-step { display: grid; grid-template-columns: 64px 1fr 72px; gap: 16px; align-items: center; padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--line); }
.samp-step .r { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.samp-step.final .r::before { content: ''; width: 6px; height: 6px; background: var(--canary); }
.samp-step p { font-size: var(--t-small); line-height: 1.6; color: var(--body); }
.samp-step .ph { aspect-ratio: 1; }
.samp-step .ph::after { content: none !important; }
.private { padding-top: 22px; padding-bottom: 22px; font-size: 14px; color: var(--muted); }

/* ── 자주 묻는 질문 ── */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--ink); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 20px; gap: 16px; align-items: baseline; padding: 20px var(--gutter); font-size: var(--t3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .no { font-size: 13px; color: var(--muted); }
.faq-item summary i { justify-self: end; position: relative; width: 12px; height: 12px; }
.faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.faq-item summary i::after { transform: rotate(90deg); transition: transform .2s; }
.faq-item[open] summary i::after { transform: rotate(0); }
.faq-item p { padding: 0 var(--gutter) 24px calc(var(--gutter) + 72px); color: var(--body); line-height: 1.85; max-width: 760px; }

/* ── 문의 마무리 ── */
.cta { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 1px solid var(--ink); }
.cta > div { padding: clamp(48px, 6vw, 88px) var(--gutter); }
.cta > div + div { border-left: 1px solid var(--ink); display: grid; align-content: start; gap: 28px; }
.cta .big { font-size: var(--t2); line-height: 1.6; letter-spacing: -0.01em; }
.mail-big { font-size: var(--t1); letter-spacing: -0.01em; border-bottom: 1px solid var(--ink); justify-self: start; padding-bottom: 4px; word-break: break-all; }
.cta .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .sub { color: var(--muted); font-size: 14px; line-height: 1.8; }

/* ── 작은 문의 (포트폴리오 맨 아래 가운데) — 글씨는 라벨(01 · BRAND)과 같은 크기 ── */
.cta-mini { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(36px, 4vw, 56px) var(--gutter) clamp(28px, 3vw, 40px); }
.cta-mini p { font-size: 13px; line-height: 1.7; color: var(--ink); }
.cta-mini .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cta-mini .btn { min-width: 120px; gap: 16px; padding: 8px 12px; font-size: 13px; }

/* ── 소개 페이지 ── */
.note { padding: clamp(48px, 6vw, 96px) var(--gutter); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 5fr 7fr; }
.note .label { padding-top: 6px; }
/* (10/16) NOTE 사진: 편지 글과 같은 높이, 위아래 끝 맞춤. NOTE 라벨은 사진 위로 */
.note-side { position: relative; }
.note-side .label { position: absolute; left: 0; bottom: calc(100% + 12px); padding-top: 0; }
.note-photo { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 3 / 4; max-width: calc(100% - 32px); }
@media (max-width: 760px) {
  .note-side .label { position: static; }
  .note-photo { position: relative; height: auto; width: 100%; max-width: none; margin-top: 20px; }
}
.note-text { display: grid; gap: 1.6em; font-size: var(--t3); line-height: 1.9; color: var(--body); max-width: 36em; }
.note-text .first { font-size: var(--t1); line-height: 1.55; color: var(--ink); }
/* 소개 FOUNDER 큰 글: 아래 운영자의 글 첫 줄과 같은 크기 */
.split .big.as-note { font-size: var(--t1); line-height: 1.55; letter-spacing: 0; }
/* (10/16) 소개: ABOUT·FOUNDER 라벨을 옆 글 첫 줄과 같은 높이로, ABOUT↔FOUNDER 간격 조금 좁힘 */
.page-head.head-align { align-items: baseline; }
.page-head.head-align > div + div { align-items: flex-start; }
.founder-split { align-items: baseline; }
.founder-split > * { padding-top: clamp(48px, 5.5vw, 88px); }
@media (max-width: 760px) { .founder-split > :first-child, .page-head.head-align > :first-child { padding-bottom: 0; } .founder-split > * + *, .page-head.head-align > * + * { padding-top: 20px; } }
/* (10/16) FOUNDER 사진 6장: 2줄, 줄마다 높이 같게 · 사진 비율 그대로 (--r = 가로/세로) */
.founder-photos { display: grid; gap: clamp(8px, 1vw, 16px); padding: 0 var(--gutter); }
.founder-row { display: flex; gap: clamp(8px, 1vw, 16px); }
.founder-row .ph { flex: calc(var(--r)) 1 0; aspect-ratio: var(--r); min-width: 0; }

/* ── 오시는길 ── */
.place { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 1px solid var(--ink); }
.place > div { padding: clamp(36px, 4vw, 64px) var(--gutter); display: grid; gap: 24px; align-content: start; }
.place > .ph { aspect-ratio: 4 / 3; border-left: 1px solid var(--ink); }
.place > .map { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--ph); }
.place > .map .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.06); }
.place > .map .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); }
.place > .map .leaflet-control-zoom a { color: var(--ink); border-radius: 0; }
.map-tip { background: #fff; border: 1px solid var(--ink); border-radius: 0; box-shadow: none; color: var(--ink); font-size: 11px; letter-spacing: .04em; padding: 3px 6px; }
.map-tip::before { display: none; }
.place .addr { font-size: var(--t2); line-height: 1.55; }
.place .maps { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 문서 (개인정보 처리방침) ── */
.doc { padding: clamp(36px, 4vw, 64px) var(--gutter) var(--sec); max-width: 820px; color: var(--body); line-height: 1.85; }
.doc h2 { font-size: var(--t3); color: var(--ink); margin: 2.2em 0 .6em; }
.doc ul { list-style: disc; padding-left: 1.2em; }

/* ── 선 없는 페이지 (소개): 본문의 칸 나눔 선을 모두 없앰 ── */
.no-lines main, .no-lines main *:not(.btn):not(.more):not(.mail-big):not(.filters button):not(.thumb) { border: 0 !important; }  /* 버튼·거르기·썸네일 표시선은 남김 */
.no-lines .sec-head { padding-bottom: 0; }

/* ── 꼬리말 ── */
.site-footer { border-top: 1px solid var(--ink); margin-top: var(--sec); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ink); }
.footer-cols > div { padding: 28px var(--gutter) 36px; display: grid; align-content: start; gap: 8px; font-size: 14px; }
.footer-cols > div + div { border-left: 1px solid var(--line); }
.footer-cols span { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-biz { padding: 24px var(--gutter) 40px; font-size: 12px; line-height: 1.9; color: var(--muted); }

/* ── 태블릿 ── */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps > div { border-bottom: 1px solid var(--line); }
  .steps > div:nth-child(3n+1) { border-left: 0; }
}

/* ── 휴대폰 ── */
@media (max-width: 760px) {
  .site-header { height: 56px; grid-template-columns: 1fr auto 1fr; }
  .logo { font-size: 16px; gap: 7px; }
  .menu-btn { display: inline-flex; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .head-icons { gap: 14px; }
  .head-icons a { width: 20px; height: 20px; }
  .nav { display: none; position: absolute; grid-column: auto; grid-row: auto; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--ink);
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; font-size: 17px; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .is-open .nav { display: flex; }
  /* 휴대폰도 맥북과 같은 쇼룸 배치 (10/12): 정보는 왼쪽 아래, 제품은 오른쪽 */
  .slide { flex-basis: 88%; height: 330px; }  /* 10/13 위 여백 줄임 (가장 긴 글이 딱 들어가는 높이) */
  .stage { inset: 4% 2% 24px 50%; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }  /* 거르기 버튼 한 줄로, 넘치면 옆으로 */
  .filters::-webkit-scrollbar { display: none; }
  .filters { gap: 4px; }
  .filters button { flex: none; padding: 5px 8px; font-size: 11px; }  /* 다섯 개가 한 화면에 다 보이게 */
  #show { margin-top: 16px !important; }
  .stage img { transform: scale(.6); }
  .slide-info { left: var(--gutter); bottom: 24px; width: 54%; }
  .slide-info .name { font-size: var(--t3); }
  .show-arrow { display: none; }
  .show-bar { justify-content: flex-start; }
  .tabs { top: 0; position: relative; }
  .page-head, .split, .cta, .note, .place, .detail, .feat, .three { grid-template-columns: 1fr; }
  .page-head > div + div, .split > * + *, .cta > div + div, .feat > * + *, .three > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .place > .ph { border-left: 0; border-top: 1px solid var(--ink); }
  .detail > .ph { border-right: 0; border-bottom: 1px solid var(--ink); }
  .feat > * + * { border-top: 1px solid var(--ink); }
  .note { gap: 20px; }
  .hero { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .hero-cap { grid-template-columns: 1fr; }
  .hero-cap > div + div { justify-items: start; text-align: left; padding-top: 0; }
  .hero-def { font-size: 14px; }
  /* 휴대폰: 첫 화면 사진을 왼쪽(원액 병 쪽)으로 */
  /* 휴대폰 첫 화면: 정사각형. 원본(2000×1500)에서 가로 75~1200, 세로 165~1290만 보이게
     → 원액 병부터 목까지, 위는 목 절반, 아래 흰 종이는 안 보임. 사진을 바꾸면 이 숫자도 다시 맞춰야 함 */
  .hero { aspect-ratio: 1 / 1; }
  .hero-shot img { position: absolute; max-width: none; width: 177.78%; height: 133.33%; left: -6.67%; top: -14.67%; object-fit: fill; }
  .hero-cap > div:first-child { padding-bottom: 12px; }
  .strip .item { flex-basis: 62vw; }
  .rows > * { grid-template-columns: 32px 1fr; gap: 6px 12px; }
  .rows .desc, .rows .go { grid-column: 2; }
  .steps { grid-template-columns: 1fr; }
  .steps > div { border-left: 0 !important; grid-template-columns: 40px 1fr; column-gap: 12px; }
  .steps > div > * + * { grid-column: 2; }
  .steps > div > .label { grid-row: 1 / span 2; }
  .tabs a { min-width: 50%; flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .faq-item summary { grid-template-columns: 32px 1fr 16px; gap: 12px; }
  .faq-item p { padding-left: calc(var(--gutter) + 44px); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > div:nth-child(3) { border-left: 0; }
  .footer-cols > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .samp-step { grid-template-columns: 48px 1fr 56px; gap: 12px; }
}

/* ── 휴대폰 머리말 (10/12): ☰ 버튼 대신 메뉴 다섯 개를 로고 아래 한 줄로 늘 보이게 ── */
@media (max-width: 760px) {
  .site-header { height: auto; row-gap: 14px; padding: 14px var(--gutter) 12px; }
  .site-header .logo { grid-column: 2; grid-row: 1; }
  .site-header .head-icons { grid-column: 3; grid-row: 1; justify-self: end; }
  .menu-btn { display: none !important; }
  .nav, .is-open .nav { display: flex; position: static; grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: nowrap;
    justify-content: space-between; gap: 0; padding: 0; border: 0; background: none; font-size: 14px; }
  .nav a { padding: 2px 0; border: 0; }
}

/* ── 휴대폰 첫 화면 (10/12): 정의 두 줄은 숨기고, 그 자리(왼쪽 위 빈 벽)에 한 줄 문장(검정, 두 줄로)
      "브랜드 런칭 전 과정 보기"는 오른쪽 아래 ── */
@media (max-width: 760px) {
  .hero-def { display: none; }
  .m-br { display: inline; }
  .hero-cap { inset: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; }
  .hero-cap > div:first-child { padding: 28px var(--gutter) 0; align-self: start; }
  .hero:has(.ph.has-img) .hero-cap h1, .hero-cap h1 { color: var(--ink); }
  .hero-cap > div + div { align-self: end; justify-items: end; text-align: right; padding: 0 var(--gutter) 22px; }
  .m-def { display: block; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); white-space: nowrap; font-size: 10px; color: #fff; opacity: .5; }  /* 휴대폰: 영문 정의만 사진 가운데 살짝 위, 흰색 50% */
}

/* 작은 휴대폰(380px 이하): 글이 한 줄씩 더 길어져서 쇼룸 칸을 조금 높게 */
@media (max-width: 380px) { .slide { height: 356px; } }

/* 휴대폰 쇼룸 (10/13): 정보 글은 줄마다 한 줄로, 글씨 작게 · 누끼는 작게 오른쪽 */
@media (max-width: 760px) {
  .slide { flex-basis: 92%; height: 232px; }
  .stage { inset: 8% 2% 24px 74%; }
  .stage img { transform: scale(.62); }
  .slide-info { width: calc(74% - var(--gutter) - 6px); gap: 2px; font-size: 10px; }
  .slide-info .label { font-size: 10px; }
  .slide-info .name { font-size: 14px; }
  .slide-info .what, .slide-info .scope, .slide-info .notes dd { white-space: nowrap; overflow: hidden; font-size: 10px; letter-spacing: -0.01em; }  /* 넘치면 site.js가 글씨를 조금씩 줄여 한 줄에 맞춤 */
  .slide-info .scope { margin-top: 6px; }
  .slide-info .scope span, .slide-info .notes dt { font-size: 9px; }
  .slide-info .notes { margin-top: 8px; padding-top: 8px; grid-template-columns: 40px 1fr; }
  .slide-info .more { margin-top: 8px; font-size: 11px; }
}
@media (max-width: 340px) { .slide { height: 250px; } }

/* ══ 가로 선 정리 (10/13) ══════════════════════════════════════
   남기는 선: 머리말 아래 · 꼬리말 위 (페이지 뼈대) / 목록 안 항목 사이 연한 선(서비스 01~05, 진행 방법, 자주 묻는 질문)
   없애는 선: 섹션 제목 밑줄 · 칸 위아래 검은 선 · 목록 맨 위아래 선 · 썸네일 줄 · 꼬리말 안쪽 선
   선이 빠진 자리는 여백으로 구분 */
.sec-head { border-bottom: 0; padding-bottom: 14px; }
.page-head, .split, .steps, .three, .cta, .note, .place, .detail, .feat,
.show-bar, .tabs, .footer-cols, .hero-cap, .note-line { border-bottom: 0; }
.cta, .hero-cap { border-top: 0 !important; }
.rows > *:last-child, .faq-item:last-child { border-bottom: 0; }
.detail-idx .top, .detail-idx .body, .kv { border-bottom: 0; }
.steps > div { border-bottom: 0 !important; }
.place > .ph, .feat .ph, .detail > .ph { border-top: 0; border-bottom: 0; }
.tabs { margin-bottom: 8px; }
.tabs a { border-bottom: 0 !important; }
.footer-biz { padding-top: 0; }
@media (max-width: 760px) {
  .page-head > div + div, .split > * + *, .cta > div + div, .feat > * + *, .three > div + div { border-top: 0; }
  .place > .ph, .feat > * + * { border-top: 0; }
  .footer-cols > div:nth-child(n+3) { border-top: 0; }
}
/* 가로 선을 뺀 뒤 혼자 떠 보이는 검은 세로선도 정리 */
.page-head > div + div, .cta > div + div, .split > * + *, .hero-cap > div + div, .feat > * + *, .place > .ph, .detail > .ph { border-left: 0; border-right: 0; }
/* 서비스 01~05 설명: 자간은 그대로, 줄 끝이 서로 비슷한 자리(611~626px)에서 끝나도록 폭만 정함 (10/13) */
.rows.svc .desc { max-width: 626px; }  /* 자간·정렬은 그대로, 폭만 정해서 줄 끝이 비슷한 자리에서 끝나게 */

/* 원문 줄바꿈이 있는 문장(03): 첫 줄만 따로 양쪽 맞춤 */
.rows.svc .desc .jl { display: block; }

/* ── 공개 모드(draft: false): 사진이 아직 없는 칸은 숨김 (10/15) ── */
html:not(.is-draft) .ph.no-img { display: none; }
html:not(.is-draft) .founder-photos:not(:has(.ph:not(.no-img))) { display: none; }
html:not(.is-draft) .docs-box:not(:has(.ph:not(.no-img))) { display: none; }
html:not(.is-draft) .detail:has(> .ph.no-img) { grid-template-columns: 1fr; }
/* 대표 사진 대신 누끼를 쓸 때: 흰 무대 위 가운데 */
.ph:has(img.is-cut) { background: #fff; }
.ph img.is-cut { object-fit: contain; padding: 14% 18%; }
html:not(.is-draft) .lineup .item:has(.cut.no-img) { display: none; }

/* 소개 정의 영문 줄 (10/16 현지: Cormorant Garamond 이탤릭) */
.en-serif { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; font-size: 1.2em; letter-spacing: 0; }

/* (10/16 현지) 사진 보호: 사진을 직접 누를 수 없게(오른쪽 클릭 '이미지 저장' 메뉴가 안 뜸), 끌기 · 선택 · 휴대폰 길게 눌러 저장 막기
   클릭은 사진을 감싼 칸(썸네일 버튼 등)이 대신 받으므로 동작은 그대로. 스크린샷은 막을 수 없음 */
img, picture, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
.ph, .cut, .stage, .thumb, .hero-shot { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* (10/16) 공개 사이트: 라인업 사진이 한 장도 없으면 LINEUP 칸 전체를 숨김 */
html:not(.is-draft) .lineup-box:not(:has(.cut img)) { display: none; }