/* kijo 스타일 시안 공통.
   색·폰트 = @kijo_co 피드 / 크기·여백·버튼 = saffron-consultants.com 실측(1440px 기준, README 참고) */
/* 폰트 3종 (11/01 원호택): 버튼·본문·숫자·영문 = Satoshi / 국문 = Pretendard / 메인 카피·큰 제목 = Fraunces */
/* Fraunces(메인 카피·큰 제목)는 홈에서만 써서 index.html 머리에서 불러옴 (11/02) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap');   /* 가변 300~900: semibold 600을 정확히 쓰려고 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');   /* 11/02: 굵기마다 한글 전체를 받던 static → 쓰는 글자 묶음만 받음(같은 Pretendard) */

:root {
  --bg: #ebebec;      /* 제품 포스터 배경 */
  --paper: #fff;      /* 헤더·첫 카피 */
  --ink: #111;       /* 검정은 이거 하나 (11/02 통일): 글자·검정 바탕(저널·푸터)·버튼·로고. 누런 기 없는 중성 검정 */
  --mute: #8c8c8c;    /* "Even its place"의 회색 강조 */
  --line: rgba(0,0,0,.14);
  --red: #8b1525;     /* 루비레드 실물에서 잰 빨강(README 분해도 보정 기준값) */
  --point: #f5c20c;   /* 노랑 포인트: 망고옐로 실물 사진에서 잼. 푸터 와디즈 줄 배경 (11/01) · 메뉴 현재 페이지 밑줄 · 오브젝트 상세 구매 버튼 (11/02) */
  --sans: 'Satoshi', 'Pretendard', sans-serif;      /* 영문·숫자는 Satoshi, 한글은 Satoshi에 없어서 Pretendard로 */
  --lead: 'Fraunces', Georgia, serif;               /* 메인 카피·큰 제목. Mailchimp Means처럼 두툼하고 끝이 둥근 쫀득한 세리프 (무료 대안) */
  --body: var(--sans);                              /* 본문도 같은 묶음 */

  /* 글자 크기 7단계 (11/02 정리, Saffron 실측에서 시작): 데스크톱 90 / 64 / 38 / 20 / 16 / 14 / 12, 모바일 48 / 32 / 24 / 16 / 16 / 14 / 12
     굵기 4단계: 800 메뉴 / 600 작은 제목·링크 / 500 버튼·짧은 문단·큰 국문 제목 / 400 긴 본문·캡션·라벨 (Fraunces는 400 하나) */
  --t-display: clamp(48px, 6.25vw, 90px);
  --t-h1: clamp(32px, 4.45vw, 64px);
  --t-h2: clamp(24px, 2.64vw, 38px);
  --t-lg: clamp(16px, 1.39vw, 20px);
  --t-md: 16px;
  --t-sm: 14px;
  --t-xs: 12px;

  /* 여백: 헤더 60/80, 좌우 16/56, 섹션 72/160, 그리드 16/24 */
  --header: 60px;
  --gutter: 16px;
  --section: 72px;
  --gap: 16px;
  --radius: 4px;
  --logo-h: 26px;
  --logo-edge: 12px;
  --header-fit: 48px;
  --logo-h-fit: 22px;
}
@media (min-width: 900px) {
  :root { --header: 80px; --gutter: 56px; --section: 160px; --gap: 24px; --logo-h: 32px; --logo-edge: 24px; --header-fit: 60px; --logo-h-fit: 24px; }
}

* { box-sizing: border-box; margin: 0; }
body { font: var(--t-md)/1.7 var(--body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
section { padding: var(--section) 0; border-top: 1px solid var(--line); }
.label { font: 400 var(--t-xs)/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.serif { font-family: var(--lead); font-weight: 400; font-variation-settings: 'opsz' 24, 'SOFT' 100, 'WONK' 0; line-height: 1.1; letter-spacing: -.019em; }   /* 큰 제목 = 메인 카피와 같은 Fraunces (11/01, Sura 대신) */
.serif em { font-style: normal; color: var(--mute); }
.bw img { filter: grayscale(1) contrast(1.08); }
.ph, .cover, figure .ph { border-radius: var(--radius); overflow: hidden; }

/* 버튼: Saffron 알약형. 작은 것 40px / 큰 것 54px */
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 24px; border-radius: 100px; background: #fff; color: var(--ink); font: 500 var(--t-sm)/1 var(--sans); text-decoration: none; white-space: nowrap; }
.btn-lg { height: 54px; padding: 0 28px; background: var(--ink); color: #fff; }

/* 헤더: 화면 위에 고정. 스크롤하면 얇아짐(.fit), 모바일은 Menu 버튼으로 여닫음(.open) — kijo.js */
body { padding-top: var(--header); }
[id] { scroll-margin-top: var(--header-fit); }
header { display: flex; justify-content: space-between; align-items: center; height: var(--header); padding: 0 var(--gutter) 0 var(--logo-edge); position: fixed; top: 0; left: 0; right: 0; background: var(--paper); z-index: 3; transition: height .25s, box-shadow .25s; }
header.fit { height: var(--header-fit); box-shadow: 0 1px 0 var(--line); }
header .logo img { height: var(--logo-h); width: auto; display: block; transition: height .25s; }   /* 메뉴 글자와 구분되게 키우고, 왼쪽 끝에 붙여 편집물 느낌 (11/01) */
header.fit .logo img { height: var(--logo-h-fit); }
header nav { display: flex; gap: 32px; font: 800 var(--t-sm)/1.4 var(--sans); text-transform: uppercase; }
header nav a { text-decoration: none; transition: color .2s; }
header nav a:hover { color: var(--mute); }
/* 바깥 링크(인스타) 힌트: 오른쪽 위 화살표, 호버하면 그 방향으로 살짝 */
/* 바깥 링크 ↗ 공통 (11/02): 정사각 — 머리 두 변이 상자 끝까지. 마우스 올리면 꼬리(왼쪽 아래)는 그대로 두고 머리만 오른쪽 위로 가며 몸통이 길어짐.
   몸통은 머리가 갈 곳까지 그려 두고 점선 길이로 보이는 만큼만(8칸 → 10칸 대각선). 크기는 자리마다 */
.arrow { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; }
.arrow path { transition: transform .25s, stroke-dasharray .25s; }
.arrow path:first-child { stroke-dasharray: 11.31 20; }
a:hover .arrow path:first-child { stroke-dasharray: 14.15 20; }
a:hover .arrow path:last-child { transform: translate(2px, -2px); }
header nav a.out { display: inline-flex; align-items: center; gap: 4px; }
header nav .arrow { width: .72em; height: .72em; }
header nav a.on { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--point); text-underline-offset: 3px; }   /* 현재 페이지: 굵은 밑줄 — 빨강(11/01) → 노랑(11/02 원호택) */
.menu-btn { display: none; }

/* 모바일(767px 이하): 메뉴는 숨기고 Menu 버튼 → 누르면 흰 화면 전체에 큰 메뉴 */
@media (max-width: 767px) {
  .menu-btn { display: block; padding: 8px 0; border: 0; background: none; color: inherit; font: 800 var(--t-sm)/1 var(--sans); text-transform: uppercase; cursor: pointer; }   /* 11/02: nav와 같이 800·14px */
  header nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; gap: 0; padding: calc(var(--header) + 16px) var(--gutter) 40px; background: var(--paper); font-size: 32px; line-height: 1.2; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
  header nav a { padding: 16px 0; border-top: 1px solid var(--line); }
  header nav a.out { gap: 8px; }
  header.open nav { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { header, header .logo img, header nav, .arrow path { transition: none; } }

/* 왼쪽 1 : 오른쪽 2 */
.split { display: grid; gap: 20px; }
.side { align-self: start; }

/* 세로 사진 카드 (저널 목록·다른 글) */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }   /* 11/02: 홈 저널 카드와 같게(가로 12px) */
.cards a { text-decoration: none; }
.cards .ph { position: relative; aspect-ratio: 3 / 4; border-radius: 0; }
.cards .label { margin-top: 6px; }   /* 제목 아래 날짜 */
.cards .t { margin-top: 6px; font: 600 var(--t-lg)/1.35 var(--body); }   /* 11/02: 홈 저널 카드 제목과 같게(23.5·500 → 20·600) */
.cards .t span { display: block; }   /* 저널 카드 두 줄 제목 (11/02 원호택 "영어와 한글 2줄"): 영어는 굵게, 아래 한글은 보통 */
.cards .t [lang="ko"] { font-weight: 400; }

/* 와디즈 배너: Saffron 하단 알약 실측(유리 테두리 6px·흰 20%·blur 64px / 진회색 알약 52px / 썸네일 71×40 / 닫기 52px 원).
   Saffron은 늘 떠 있지만 kijo는 조금 내리면 떠오름 — kijo.js */
.promo { position: fixed; left: 50%; bottom: 20px; z-index: 2; display: flex; gap: 6px; max-width: calc(100% - 16px); padding: 6px; border-radius: 100px; background: rgba(245,245,245,.2); -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s, transform .3s; }
.promo.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.promo-link { display: flex; align-items: center; gap: 16px; min-width: 0; height: 52px; padding: 6px 20px 6px 6px; border-radius: 100px; background: var(--ink); color: #fff; font: 500 var(--t-sm)/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
.promo-link img { flex: none; width: 71px; height: 40px; border-radius: 100px; }
.promo-link svg, .promo-close svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.promo-link .arrow { width: 12px; height: 12px; }   /* 11/02 공통 ↗로 — 16px이면 선이 굵어져서 */
.promo-close { flex: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 100px; background: var(--ink); color: #fff; cursor: pointer; }
@media (max-width: 767px) {
  .promo { bottom: 12px; }
  .promo-link { gap: 12px; padding-right: 16px; }
  .promo-link img { width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .promo { transition: none; } }

footer { position: relative; background: var(--ink); color: #fff; padding: 64px 0 0; }
/* 푸터: Wolff Olins 배치 — 연도 · 이메일 · 메뉴(헤더 nav와 같게 + 와디즈 펀딩 중), 아래 로고 + 오른쪽 아래 맨 위로 (11/01). 바탕은 검정, 노랑은 와디즈 줄 배경에만 */
.foot { display: grid; grid-template-columns: 1fr; gap: 40px 16px; align-items: start; font: 500 var(--t-lg)/1.75 var(--sans); }
.foot ul { list-style: none; padding: 0; }
.foot a { text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--mute); }
.foot-talk { grid-column: 1 / -1; }
.mail-copy { margin-left: .8em; padding: 3px 4px; border: 1px solid currentColor; border-radius: 0; background: none; color: inherit; opacity: .5; font: 500 var(--t-xs)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; cursor: pointer; transition: color .15s; }   /* 이메일 복사: 아주 작은 아웃라인 사각(11/02 알약 → 라운드 없음 → 좌우 패딩 8 → 4px), 투명도 70 → 50%. 누르면 잠깐 Copied (kijo.js) */
.mail-copy:hover { color: var(--mute); }
.foot mark { background: var(--point); color: var(--ink); padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.foot li a::before { content: "→"; content: "→" / ""; margin-right: .5em; }   /* 화살표는 읽지 않게 */
.foot .arrow { width: .6em; height: .6em; margin-left: .3em; }   /* 바깥 링크 ↗ — 헤더 nav와 같은 아이콘 */
.foot-copy { order: 1; }   /* 모바일: 이메일 → 메뉴 → 연도 */
.foot-top { position: absolute; right: var(--gutter); bottom: var(--gutter); display: grid; justify-items: center; gap: 4px; }   /* 맨 아래 오른쪽, 로고와 같은 바닥선 (11/01) */
.foot-top svg { width: 28px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.5; }   /* 11/02: 3 → 1.5, 다른 화살표 아이콘과 같은 굵기 */
footer .mark { margin-top: clamp(120px, 22vw, 320px); padding-bottom: var(--gutter); }
footer .mark img { width: 50%; height: auto; filter: brightness(0) invert(1); }   /* 로고 SVG(#111)를 검정 바탕에선 흰색으로. 폭 70 → 60 → 50% (11/02) */

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 2fr; gap: var(--gap); }
  .side { position: sticky; top: calc(var(--header) + 24px); }
  .cards { grid-template-columns: repeat(4, 1fr); gap: 48px 12px; }
  footer { padding-top: 80px; }
  .foot { grid-template-columns: 5fr 4fr auto; column-gap: 64px; }   /* 메뉴 열은 "Now funding on Wadiz"가 한 줄에 들어가게 글자 폭만큼 */
  .foot-talk { grid-column: auto; }
  .foot-copy { order: 0; }
}

/* 글 상세 post_게시일.html (11/02 원호택: ilkwdesign.com/SNOWMAN50-70-P 배치 참고, 바탕은 저널처럼 흰색)
   가운데 아주 큰 제목 → 넓은 첫 사진(데스크톱 화면 82%·16:9, 모바일 4:5) → 가운데 좁은 글 단 700px, 소제목·크게 쓰는 한 줄은 그 사이에.
   사진 배치 5가지: one 글 단 폭 / wide 화면 82% / two 글 단 안에 두 장(높이 제각각·위 맞춤) / row 창 끝 12px까지 한 줄(높이 맞춤) / duo 왼쪽 큰 것 + 오른쪽 작은 것(아래 맞춤).
   모바일은 글 단 폭에 한 장씩 — row만 한 줄 그대로, duo 작은 쪽은 반 폭으로 오른쪽 */
body.post { background: var(--paper); }
.article { padding: 56px 0 var(--section); }
.article > * { width: min(700px, 100% - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.article > .post-head, .article > .post-hero, .article > .wide, .article > .row, .article > .duo, .article > .big, .article > .prevnext { width: calc(100% - 2 * var(--gutter)); }
.post-head { margin-bottom: 40px; text-align: center; }
.post-head h1 { margin-top: 16px; font: 500 var(--t-display)/1.2 var(--body); letter-spacing: -.02em; text-wrap: balance; }
.article img { height: auto; }
.post-hero { margin-bottom: 56px; }
.post-hero img { aspect-ratio: 4 / 5; object-position: 50% var(--ym, 50%); }
.article figcaption { margin-top: 8px; font: 400 var(--t-sm)/1.5 var(--body); color: var(--mute); }
.article > p { margin-bottom: 18px; font-size: var(--t-lg); line-height: 1.65; }   /* About 본문과 같은 행간·문단 간격 */
.article > h2 { margin-top: 56px; margin-bottom: 16px; font: 500 var(--t-h2)/1.35 var(--body); }
.article > .big { margin-top: 72px; margin-bottom: 72px; text-align: center; font: 500 var(--t-h1)/1.3 var(--body); text-wrap: balance; }
.article > .note { font-size: var(--t-sm); color: var(--mute); }
.article > .one, .article > .wide, .article > .two, .article > .row, .article > .duo { margin-top: 40px; margin-bottom: 40px; }
.article > .two { display: grid; gap: 32px; }
.article > .row { display: flex; gap: 8px; align-items: flex-start; }
.article > .row figure { flex-basis: 0; min-width: 0; }   /* figure마다 style="flex-grow:가로÷세로" → 너비가 사진 비율대로, 높이가 같아짐 */
.article > .duo figure:last-child { width: 50%; margin: 12px 0 0 auto; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 120px; padding-top: 24px; border-top: 1px solid var(--line); }
.prevnext a { text-decoration: none; }
.prevnext a:last-child { text-align: right; }
.prevnext .t { margin-top: 8px; font: 600 var(--t-lg)/1.35 var(--body); }   /* 카드 제목과 같게 */
@media (min-width: 900px) {
  .article { padding-top: 96px; }
  .post-head { margin-bottom: 64px; }
  .article > .post-hero, .article > .wide { width: 82%; }
  .post-hero { margin-bottom: 96px; }
  .post-hero img { aspect-ratio: 16 / 9; object-position: 50% var(--y, 50%); }
  .article > p { margin-bottom: 24px; }
  .article > h2 { margin-top: 96px; margin-bottom: 24px; }
  .article > .big { margin-top: 128px; margin-bottom: 128px; }
  .article > .one, .article > .wide, .article > .two, .article > .row, .article > .duo { margin-top: 80px; margin-bottom: 80px; }
  .article > .two { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .article > .row, .article > .duo { width: calc(100% - 24px); }   /* 글 단·첫 사진보다 바깥, 창 끝에서 12px */
  .article > .row { gap: 12px; }
  .article > .duo { display: flex; justify-content: space-between; align-items: flex-end; }
  .article > .duo figure:first-child { width: 50%; }
  .article > .duo figure:last-child { width: 25%; margin: 0; }
}

/* 펀딩 버튼 (11/02 원호택: "글 마지막에 와디즈 펀딩 링크 버튼과 펀딩 기간"): 펀딩 기간에 쓴 글 끝(<div class="fund">)·오브젝트 상세 위.
   기간 라벨 + 홈 제품 구역과 같은 검정 사각 버튼(새 창). 기간은 와디즈 '진행 기간' 2026.10.23~11.13 */
.fund .btn { margin-top: 12px; gap: 10px; border-radius: 0; }
.fund .arrow { width: .8em; height: .8em; }
.fund .buy { background: var(--ink); color: var(--point); }   /* 구매 버튼(오브젝트 상세·글 끝): 검정 바탕에 노랑 글자 (11/02 원호택, 노랑 바탕 → 반대로) */
.article > .fund { margin-top: 56px; }
.article > .fund .btn { display: flex; width: 100%; justify-content: center; }   /* 글 끝: 글 단 폭 꽉 찬 노랑 버튼, 위에 D-day만 (11/02 원호택) */
@media (min-width: 900px) { .article > .fund { margin-top: 80px; } }

/* 오브젝트 (11/02 원호택): 목록 objects.html = 색마다 제품 카드(인스타 캐러셀용으로 보정한 서 있는 컷 · 언박싱커터 · 색 이름 · 정가), 카드 모양은 저널 카드와 같게.
   상세 object_색.html = 위에 제품 컷과 이름·가격·펀딩 버튼 → 그 색이 나오는 사진 전부를 같은 3:4·같은 간격 격자로(흑백 제작 사진은 사이사이) → 네 가지 색.
   바탕 흰색 */
body.shop { background: var(--paper); }
.cards .c { font: 400 var(--t-lg)/1.35 var(--body); }
.cards .price { margin-top: 6px; font: 400 var(--t-sm)/1.4 var(--sans); }
.cards .num { position: absolute; top: 12px; left: 14px; font: 500 var(--t-lg)/1 var(--sans); color: var(--ink); }   /* 오브젝트 목록 카드 사진 왼쪽 위 1~4 (11/02 원호택, 상세 안에는 없음) */
.cards a[aria-current] { opacity: .4; }   /* 상세 아래 네 가지 색: 지금 보는 색은 흐리게 */
.obj-top { display: grid; gap: 28px; padding-top: 24px; }
.obj-shot img { height: auto; aspect-ratio: 3 / 4; }
.obj-info h1 { font: 500 var(--t-h2)/1.25 var(--body); }
.obj-color { margin-top: 4px; font-size: var(--t-lg); }
.obj-price { margin-top: 16px; font: 600 var(--t-lg)/1.4 var(--sans); }
.obj-desc { margin-top: 32px; max-width: 30em; font-size: var(--t-md); line-height: 1.65; }
.obj-info .fund { margin-top: 24px; }   /* 가격 바로 아래 — 모바일 첫 화면에 버튼이 보이게, 소개 글은 그 아래 */
.obj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 72px; }
.obj-grid img, .obj-grid .swatch, .obj-photos img, .obj-photos .swatch { height: auto; aspect-ratio: 3 / 4; }   /* .swatch = 사진 사이 색 네모 (11/02) — 목록 아래·색별 상세 */
.obj-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--ink); }   /* 목록: 상품 카드 아래 검은 선 하나, 그 아래 네 가지 색 사진 — 카드와 같은 칸(2열·4열)·같은 3:4 */
.obj-more { margin-top: var(--section); }
.obj-more .label { margin-bottom: 16px; }
@media (min-width: 900px) {
  .obj-top { grid-template-columns: 5fr 7fr; gap: 48px; padding-top: 40px; }   /* 제품 컷이 한 화면에 들어오게 왼쪽을 조금 좁게 */
  .obj-grid { grid-template-columns: repeat(3, 1fr); margin-top: 120px; }
  .obj-photos { grid-template-columns: repeat(4, 1fr); margin-top: 96px; padding-top: 96px; }
}