/* 상품 상세페이지 공통 스타일 — products/*.html 13장이 함께 쓴다.
토큰 정본은 assets/brand/tokens.css(디자인시스템 v0.3 사본)다. 값을 여기서 새로 만들지 않는다.
index.html 의 내비·푸터와 같은 모양을 내야 하므로 그 두 블록은 같은 값으로 옮겨 적었다 —
한쪽을 고치면 다른 쪽도 고친다. */
@font-face{font-family:"MaruBuri";font-weight:600;font-style:normal;font-display:swap;
src:url("/assets/brand/fonts/MaruBuri-SemiBold.subset.woff2") format("woff2")}
*{margin:0;padding:0;box-sizing:border-box}
:root{ --sans:var(--font-sans); --serif:var(--font-serif); }
html{background:var(--surface)}
body{font-family:var(--sans);color:var(--ink);background:var(--surface);
-webkit-font-smoothing:antialiased;word-break:keep-all;line-height:1.7}
/* width/height 속성이 presentational hint 로 높이를 고정하면 aspect-ratio 가 무시된다 —
1200px 짜리 제품컷이 그대로 1200px 높이로 펼쳐졌다(260821 실측). 기본을 auto 로 돌린다. */
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.yh-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.yh-gable{width:16px;height:9px;flex:none}
/* ── 내비 (index.html 의 is-solid 상태와 같은 값) ─────────── */
.yh-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:28px;
padding:14px 32px;background:rgba(246,241,232,.985);backdrop-filter:blur(12px);
color:var(--ink);border-bottom:1px solid var(--hairline)}
.yh-nav-logo{height:26px;width:auto}
.yh-nav-menu{display:flex;gap:24px;font-size:14.5px;font-weight:600;margin-left:8px}
.yh-nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.yh-contact{display:flex;align-items:center;justify-content:center;min-height:44px;
font-size:14px;font-weight:700;border:1.5px solid currentColor;
border-radius:var(--r-structure);padding:8px 16px}
/* ── 경로 ──────────────────────────────────────────────── */
.yh-crumb{display:flex;align-items:center;gap:9px;padding:18px 0 0;
font-size:13px;font-weight:600;color:#5C5C57}
.yh-crumb a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.yh-crumb a:hover{color:var(--ink)}
.yh-crumb i{font-style:normal;opacity:.5}
.yh-crumb b{font-weight:600;color:var(--ink)}
/* ── 히어로 ────────────────────────────────────────────── */
.yh-pd{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,60px);
align-items:start;padding:clamp(26px,3vw,40px) 0 clamp(56px,7vw,88px)}
.yh-pd-fig{position:relative;background:var(--surface-dp);border:1px solid var(--hairline)}
.yh-pd-im{width:100%;aspect-ratio:1;object-fit:cover}
.yh-pd-kind{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.13em;
font-weight:800;color:var(--wood)}
.yh-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;
border-radius:var(--r-control);font-size:11.5px;font-weight:800;letter-spacing:.02em;
white-space:nowrap}
.yh-badge.is-reserve{background:var(--wood-walnut);color:#fff}
.yh-badge.is-onsite{background:var(--surface-dp);color:var(--wood-walnut);
border:1px solid var(--hairline)}
.yh-pd-name{margin-top:12px;font:600 clamp(28px,3.4vw,42px)/1.3 var(--serif);letter-spacing:-.018em}
.yh-pd-lede{margin-top:14px;font-size:17px;line-height:1.7;color:#4A4A46;max-width:36ch}
.yh-pd-price{display:flex;align-items:baseline;gap:8px;margin-top:26px;
padding-top:22px;border-top:2px solid var(--ink)}
.yh-pd-num{font-size:clamp(30px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1.1}
.yh-pd-won{font-size:17px;font-weight:700}
.yh-pd-vat{margin-left:auto;font-size:12.5px;font-weight:600;color:#5C5C57}
.yh-pd-rows{margin-top:4px}
.yh-pd-row{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:13px 0;
border-bottom:1px solid var(--hairline);font-size:14.5px;align-items:baseline}
.yh-pd-row dt{font-weight:750;color:#5C5C57;font-size:13px;letter-spacing:.02em}
.yh-pd-row dd{line-height:1.65}
.yh-pd-row dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
font-weight:700}
.yh-pd-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.yh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
padding:13px 24px;border-radius:var(--r-structure);font-size:15px;font-weight:800}
.yh-btn.is-primary{background:var(--ink);color:#fff}
.yh-btn.is-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.yh-pd-note{margin-top:16px;font-size:13.5px;color:#5C5C57;line-height:1.7}
/* ── 설명 + 쇼룸 자리 ──────────────────────────────────── */
.yh-sec{padding:clamp(56px,6.5vw,92px) 0}
.yh-sec.is-tight{padding-top:0}
.yh-eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:var(--wood)}
.yh-h2{margin-top:12px;font:600 clamp(22px,2.4vw,30px)/1.38 var(--serif);letter-spacing:-.015em}
/* 글 두세 줄 옆에 정사각 카드를 세우면 왼쪽에 700px 짜리 빈 칸이 남는다(260821 실측).
카드는 4:3 으로 낮추고 두 열을 가운데로 맞춰 빈 칸을 위아래로 나눈다. */
.yh-about{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4vw,60px);align-items:center}
.yh-about-p{margin-top:18px;font-size:16.5px;line-height:1.85;color:#3E3E3A;max-width:44ch}
.yh-about-p + .yh-about-p{margin-top:14px}
.yh-place{border:1px solid var(--hairline);background:#fff}
.yh-place-im{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-dp)}
.yh-place-b{padding:16px 18px 18px}
.yh-place-k{font-size:11.5px;letter-spacing:.12em;font-weight:800;color:var(--wood)}
.yh-place-t{margin-top:6px;font-size:15.5px;font-weight:750;line-height:1.5}
.yh-place-l{display:inline-flex;align-items:center;gap:7px;margin-top:12px;min-height:44px;
font-size:13.5px;font-weight:800;color:var(--cobalt);
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* 쇼룸에 없는 상품 — 사진 자리를 빈 액자로 채우지 않고 상태 문장으로 바꾼다 */
.yh-place.is-absent{background:var(--surface-dp);border-style:dashed}
.yh-place.is-absent .yh-place-b{padding:26px 22px}
/* ── 구매·수령 안내 (index.html 의 판매 안내와 같은 사실) ── */
.yh-guide{background:var(--bg-inverse);color:var(--text-on-inverse);padding:clamp(28px,4vw,46px)}
.yh-guide-t{margin-top:0;font:600 clamp(22px,2.5vw,30px)/1.35 var(--serif);letter-spacing:-.015em}
.yh-guide-lead{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.88);max-width:46ch}
.yh-guide-rows{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;
column-gap:clamp(24px,3.4vw,52px)}
.yh-guide-row{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:16px 0;
border-top:1px solid rgba(255,255,255,.22)}
.yh-guide-row strong{font-size:13.5px;color:var(--link-on-inverse)}
.yh-guide-row span{font-size:14.5px;color:rgba(255,255,255,.84);line-height:1.7}
.yh-guide-row span b{color:var(--link-on-inverse);font-weight:700}
/* ── 목록 페이지 (/products) ───────────────────────────── */
.yh-list-h{padding:26px 0 4px;max-width:62ch}
.yh-list-t{margin-top:12px;font:600 clamp(26px,3.2vw,40px)/1.35 var(--serif);letter-spacing:-.015em}
.yh-list-d{margin-top:16px;font-size:16.5px;color:#4A4A46;line-height:1.75}
.yh-list-d a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
font-weight:700}
.yh-guide-note{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.7}
.yh-guide-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
margin-top:22px;padding:12px 22px;border-radius:var(--r-structure);
background:#fff;color:var(--ink);font-size:14.5px;font-weight:800}
/* 상품 목록 — 묶음은 카테고리(가격표 첫 열: 마그넷·키링·엽서·책갈피·연필·모빌·코스터·오브제)다.
여덟 묶음 중 다섯이 1종이라 행을 2열로 흘리면 오른쪽이 계속 빈다 —
'묶음'을 2단 컬럼에 흘리고 묶음 안은 한 줄씩 쌓아 빈 칸을 없앤다. */
.yh-catalog{margin-top:28px;border:1px solid var(--hairline);background:#fff;
padding:26px clamp(18px,2.2vw,30px) 12px;
column-count:2;column-gap:clamp(22px,3vw,44px)}
.yh-catgroup{break-inside:avoid;margin-bottom:26px}
.yh-catalog-h{display:flex;align-items:baseline;gap:10px;
padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.yh-catalog-title{font:600 18px/1.4 var(--serif);letter-spacing:-.01em}
.yh-catalog-count{flex:none;margin-left:auto;font-size:12.5px;font-weight:750;color:#5C5C57;
font-variant-numeric:tabular-nums}
.yh-catrows{display:grid;grid-template-columns:1fr}
.yh-product-row{display:grid;grid-template-columns:56px 1fr auto auto;gap:14px;align-items:center;
min-height:44px;padding:13px 0;border-bottom:1px solid var(--hairline)}
.yh-product-row:hover .yh-product-name,.yh-product-row:focus-visible .yh-product-name{text-decoration:underline;text-underline-offset:4px}
.yh-product-im{width:56px;height:56px;object-fit:cover;background:#EDE4D6}
.yh-product-txt{min-width:0}
.yh-product-name{display:block;font-size:15px;font-weight:750;line-height:1.45}
.yh-product-kind{display:block;margin-top:3px;font-size:12.5px;color:#5C5C57}
/* 야행 현장에 실물이 없는 3종만 표시한다 — 나머지 10종에 '현장 판매'를 붙이면 잡음이 된다 */
/* 좁은 열에서 '예약 / 접수'로 어절이 갈라졌다 — 이 라벨은 통째로만 줄을 넘긴다 */
.yh-product-mode{display:inline-block;margin-left:7px;padding-left:7px;
border-left:1px solid var(--hairline);white-space:nowrap;
font-weight:700;color:var(--wood)}
.yh-product-price{font-size:15px;font-weight:750;white-space:nowrap;
font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.yh-product-price i{margin-left:1px;font-style:normal;font-size:12.5px;font-weight:600;color:#5C5C57}
.yh-product-action{font-size:12.5px;font-weight:800;color:var(--wood);white-space:nowrap}
/* ── 다른 상품 ─────────────────────────────────────────── */
.yh-more-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
padding-bottom:16px;border-bottom:2px solid var(--ink)}
.yh-more-link{flex:none;font-size:13.5px;font-weight:800;min-height:44px;
display:inline-flex;align-items:center;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.yh-more{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:24px}
.yh-more-it{display:block}
.yh-more-im{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface-dp);
border:1px solid var(--hairline)}
.yh-more-n{margin-top:10px;font-size:14.5px;font-weight:750;line-height:1.45}
.yh-more-it:hover .yh-more-n{text-decoration:underline;text-underline-offset:4px}
.yh-more-p{margin-top:3px;font-size:13px;color:#5C5C57;font-variant-numeric:tabular-nums}
/* ── 푸터 (index.html 과 같은 값) ───────────────────────── */
.yh-foot{background:var(--ink);color:#EDE8DF;padding:64px 0 46px;margin-top:clamp(56px,6vw,88px)}
.yh-foot-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.yh-foot-in > :nth-child(2){grid-column:span 2}
.yh-foot-logo{height:20px;width:auto;filter:invert(1);margin-bottom:20px}
.yh-foot-l{font-size:14px;line-height:2;opacity:.78}
.yh-foot-h{font-size:13px;letter-spacing:.1em;font-weight:700;opacity:.68;margin-bottom:12px}
.yh-foot-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.yh-foot-note{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
font-size:13px;opacity:.68;line-height:1.8}
/* ── 모바일 ────────────────────────────────────────────── */
@media (max-width:900px){
.yh-wrap{padding:0 20px}
.yh-nav{gap:12px;padding:11px 20px;flex-wrap:wrap;row-gap:2px}
.yh-nav-menu{order:3;width:100%;gap:18px;overflow-x:auto;padding:7px 0 3px;
font-size:13.5px;-webkit-overflow-scrolling:touch}
.yh-nav-menu a{flex:none;padding:12px 2px;margin:-12px 0}
.yh-nav-right{margin-left:auto}
.yh-pd{grid-template-columns:1fr;gap:26px}
.yh-about{grid-template-columns:1fr;gap:28px}
.yh-about-p{max-width:none}
.yh-place-im{aspect-ratio:4/3}
.yh-guide-rows{grid-template-columns:1fr}
.yh-more{grid-template-columns:1fr 1fr;gap:16px}
.yh-foot-in{grid-template-columns:1fr;gap:28px}
.yh-pd-row{grid-template-columns:88px 1fr;gap:12px}
.yh-catalog{padding:22px 18px 4px;column-count:1}
.yh-product-row{grid-template-columns:52px 1fr auto auto;gap:11px}
.yh-product-im{width:52px;height:52px}
.yh-product-action{font-size:0;color:transparent}
.yh-product-action::after{content:"→";font-size:14px;font-weight:800;color:var(--wood)}
}