/* templates/brand_shop/theme.css — 2026-10-15 snj · 브랜드 쇼핑몰형: brand_story 바탕 + 고급 화장품 톤(아이보리 바탕·먹색 글자·올리브 강조 1색)·명조 제목·잡지 머리(mz-mast)
   글꼴: 제목 Noto Serif KR 600 하나(jsDelivr @fontsource — lib/hb.php CSP style-src·font-src 에 https://cdn.jsdelivr.net 허용), 본문 Pretendard(layout 이 이미 싣는다).
   2026-10-15 검토 반영: 400 은 홈 태그라인(.mz-tag) 한 곳뿐이라 그 줄을 본문 글꼴로 바꾸고 @import 를 600 하나로 줄였다(첫 화면 CSS 받기 1번 감소).
   변수는 :root(관리자가 고른 색 <style>:root{…} 가 뒤에서 덮는다), 전용 규칙은 .tpl-brand_shop 접두. 폰 375px 먼저, 가로 넘침 0.
   가정: 블록 = .hb-blk-<type>(_engine/block_*.php), 홈 머리 = home.php 의 .mz-mast(.mz-name/.mz-dash/.mz-tag), 장바구니·주문·/product 목록 = 엔진 조각 그대로(상품 상세·FAQ 는 문구만 바꾼 사본). */
@import url("https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-kr@5.2.9/600.css");
:root{
  --hb-primary:#1f1b16;--hb-accent:#686642;--hb-bg:#f7f3ec;--hb-fg:#1f1b16;--hb-muted:#6b6358;--hb-line:#e3dbce;
  --hb-radius:2px;--hb-card-radius:0px;--hb-btn-radius:999px;
  --hb-font-head:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",Georgia,serif;
  --hb-font-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.tpl-brand_shop{--tx:var(--hb-fg);--tx2:#4f483f;--tx3:var(--hb-muted);--line:var(--hb-line);--line2:#ebe4d8;--bg:var(--hb-bg);--bg2:#efe8dc;--paper:#fffdf9;--sec:clamp(56px,11vw,128px);
  background:var(--hb-bg);color:var(--hb-fg);font-family:var(--hb-font-body)}
.tpl-brand_shop :focus-visible{outline-color:var(--hb-fg)}
.tpl-brand_shop ::selection{background:var(--hb-accent);color:#fff}

/* 명조 제목 — 600 까지만 싣으므로 굵기는 600(가짜 굵게 0) */
.tpl-brand_shop .page-title,.tpl-brand_shop .hero-title,.tpl-brand_shop .story-title,.tpl-brand_shop .about-title,.tpl-brand_shop .cta-title,
.tpl-brand_shop .pd-name,.tpl-brand_shop .article-title,.tpl-brand_shop .sec-desc,.tpl-brand_shop h2.sec-en,.tpl-brand_shop .feat h3,
.tpl-brand_shop .prose h2,.tpl-brand_shop .prose h3,.tpl-brand_shop .slogan-title{font-family:var(--hb-font-head);font-weight:600;letter-spacing:-.01em}

/* 머리·띠·서랍·하단 바 — 아이보리 한 장 */
.tpl-brand_shop .hd,.tpl-brand_shop .hd-search,.tpl-brand_shop .tabbar,.tpl-brand_shop .drawer-panel,.tpl-brand_shop .buybar,.tpl-brand_shop .hb-rv-tabs{background:var(--hb-bg)}
.tpl-brand_shop .hd{border-bottom-color:var(--hb-line)}
.tpl-brand_shop .topbar{border-bottom-color:var(--hb-line)}
.tpl-brand_shop .topbar .lbl{color:var(--tx2)}
.tpl-brand_shop .logo{font-family:var(--hb-font-head);font-weight:600;text-transform:none;letter-spacing:.04em;color:var(--hb-fg);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tpl-brand_shop .hd-tools{flex:none}
.tpl-brand_shop .hd-ico{color:var(--hb-fg)}
.tpl-brand_shop .gnb a{letter-spacing:.06em}
.tpl-brand_shop .gnb a:hover,.tpl-brand_shop .gnb a[aria-current]{border-bottom-color:var(--hb-accent)}
.tpl-brand_shop .drawer-list a,.tpl-brand_shop .drawer-hd{border-bottom-color:var(--line2)}
.tpl-brand_shop .tab[aria-current]{color:var(--hb-fg)}

/* 라벨(영문 장식) = 강조색 1개 */
.tpl-brand_shop .lbl{color:var(--hb-accent);letter-spacing:.22em}
.tpl-brand_shop .hero-txt .lbl{color:#fff}
.tpl-brand_shop .hero-noimg .lbl{color:var(--hb-accent)}

/* 버튼 — 알약, 먹색 1색 */
.tpl-brand_shop .btn{border-radius:var(--hb-btn-radius);border-color:var(--hb-primary);color:var(--hb-primary);background:transparent;padding:0 26px;letter-spacing:.02em}
.tpl-brand_shop .btn-primary{background:var(--hb-primary);color:var(--hb-bg)}
.tpl-brand_shop .btn-primary:hover,.tpl-brand_shop .btn-line:hover{background:var(--hb-primary);border-color:var(--hb-primary);color:var(--hb-bg);opacity:.88}
.tpl-brand_shop .btn-white{background:var(--hb-bg);color:var(--hb-fg);border-color:var(--hb-bg)}
.tpl-brand_shop .btn-kakao{background:#fee500;border-color:#fee500;color:#191600}
.tpl-brand_shop .btn-sm{padding:0 16px}
.tpl-brand_shop .btn-xs{padding:0 10px}
.tpl-brand_shop .chip{background:transparent;border-color:var(--hb-line)}
.tpl-brand_shop .chip.on,.tpl-brand_shop .chip:hover{background:var(--hb-fg);border-color:var(--hb-fg);color:var(--hb-bg)}

/* 홈 잡지 머리 = 페이지 h1(이름 크게 + 한 줄 작게, 사이 「 — 」는 글로만 남기고 숨김) */
.tpl-brand_shop .mz-mast{padding:clamp(28px,7vw,64px) 0 clamp(20px,5vw,40px);text-align:center;border-bottom:1px solid var(--hb-fg)}
.tpl-brand_shop .mz-mast .lbl{display:block}
.tpl-brand_shop .mz-title{margin:12px 0 0;font-family:var(--hb-font-head);font-weight:600;line-height:1.2}
.tpl-brand_shop .mz-name{display:block;font-size:clamp(40px,12vw,96px);font-weight:600;letter-spacing:.03em;line-height:1.08}
/* 2026-10-15 영문 필기체 이름(사이트 설정 brand_script 가 있을 때만 .mz-script) — 글꼴 = 그 사이트 사진 폴더 /img/fonts/brand-script.woff2(사이트마다 직접 둠, 없으면 기기 필기체). 쓰일 때만 받는다 */
@font-face{font-family:'Brand Script';src:url('/img/fonts/brand-script.woff2') format('woff2'),url('/img/fonts/brand-script.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
.tpl-brand_shop .mz-name.mz-script{font-family:'Brand Script',cursive;font-weight:400;letter-spacing:0;font-size:clamp(56px,16vw,124px);line-height:1.12;padding:.04em 0}
.tpl-brand_shop .bs-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tpl-brand_shop .mz-dash{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tpl-brand_shop .mz-tag{display:block;max-width:640px;margin:14px auto 0;font-family:var(--hb-font-body);font-weight:400;font-size:clamp(16px,4.4vw,21px);letter-spacing:.01em;color:var(--tx2);line-height:1.6}
.tpl-brand_shop .mz-sub{max-width:640px;margin:12px auto 0;color:var(--tx2);font-size:15px}
.tpl-brand_shop #bs-story,.tpl-brand_shop #bs-sample{scroll-margin-top:72px}

/* 섹션 머리 — 가운데, 작은 영문 라벨 + 큰 명조 한국어 제목(h2) */
.tpl-brand_shop .sec-hd{text-align:center;margin-bottom:clamp(28px,6vw,52px)}
.tpl-brand_shop .sec-en{font-family:var(--hb-font-body);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--hb-accent);line-height:1.6}
.tpl-brand_shop h2.sec-en{font-family:var(--hb-font-head);font-size:clamp(26px,7vw,42px);letter-spacing:-.01em;text-transform:none;color:var(--hb-fg);line-height:1.3}
.tpl-brand_shop .sec-desc{margin-top:10px;font-size:clamp(26px,7vw,42px);color:var(--hb-fg);line-height:1.3}
.tpl-brand_shop .sec-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;border-bottom:0;text-decoration:underline;text-underline-offset:6px;color:var(--tx2);letter-spacing:.18em}

/* hero — 사진 위 글은 아래쪽 그늘(:has 모르는 브라우저는 그늘 없이 글자 그림자만) */
.tpl-brand_shop .hero{background:var(--bg2);max-width:1440px;margin:0 auto}
.tpl-brand_shop .hero-title{font-size:clamp(28px,7.6vw,52px);line-height:1.28}
.tpl-brand_shop .hero-sub{font-size:clamp(15px,3.9vw,17px);line-height:1.7}
.tpl-brand_shop .hero:has(.hero-txt):not(.hero-noimg) .hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,20,16,0) 38%,rgba(24,20,16,.58));pointer-events:none}
.tpl-brand_shop .hero-noimg{padding:clamp(64px,14vw,140px) 0;text-align:center}
.tpl-brand_shop .hero-noimg .hero-title,.tpl-brand_shop .hero-noimg .hero-sub{margin-left:auto;margin-right:auto}
.tpl-brand_shop .hero-noimg .hero-sub{color:var(--tx2)}

/* story — 사진 4:5 크게, 번호(01·02…)는 장식, PC 는 좌우 교대 */
.tpl-brand_shop .story-list{gap:clamp(56px,11vw,128px);counter-reset:bs-story}
.tpl-brand_shop .story-row{gap:22px;counter-increment:bs-story}
.tpl-brand_shop .story-row .story-img{aspect-ratio:4/5;background:var(--bg2)}
.tpl-brand_shop .story-txt::before{content:counter(bs-story,decimal-leading-zero);display:block;margin-bottom:14px;font-family:var(--hb-font-body);font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--hb-accent)}
.tpl-brand_shop .story-row .story-title{font-size:clamp(24px,6.4vw,36px);line-height:1.35;margin:0 0 14px}
.tpl-brand_shop .story-row p{font-size:clamp(15px,3.9vw,17px);line-height:1.95;color:var(--tx2);max-width:520px}
.tpl-brand_shop .story-row:not(:has(.story-img)){text-align:center}
.tpl-brand_shop .story-row:not(:has(.story-img)) p{margin-left:auto;margin-right:auto}

/* 제품 카드(홈 THE COLLECTION · /product · 관련 상품) */
.tpl-brand_shop .card-img{background:var(--bg2)}
.tpl-brand_shop .card-name{font-size:15px;margin-top:14px}
.tpl-brand_shop .price-now{font-weight:600}
.tpl-brand_shop .tag{background:var(--hb-bg);color:var(--hb-fg);border-color:var(--hb-fg)}
.tpl-brand_shop .tag-best,.tpl-brand_shop .tag-quote{background:var(--hb-fg);color:var(--hb-bg)}
.tpl-brand_shop .price-disc{background:var(--hb-accent);color:#fff}
.tpl-brand_shop .soldout{background:rgba(247,243,236,.72)}

/* features — 줄 목록(폰) → 3칸(PC), 아이콘은 강조색 테두리 원 */
.tpl-brand_shop .feat-grid{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--hb-fg)}
.tpl-brand_shop .feat{position:relative;border:0;border-bottom:1px solid var(--hb-line);border-radius:0;padding:24px 4px 24px 64px;background:transparent}
.tpl-brand_shop .feat:not(:has(.feat-ic)){padding-left:4px}
.tpl-brand_shop .feat-ic{position:absolute;left:4px;top:22px;width:44px;height:44px;margin:0;background:transparent;border:1px solid var(--hb-accent);color:var(--hb-accent)}
.tpl-brand_shop .feat h3{font-size:19px;margin:0 0 6px;line-height:1.4}
.tpl-brand_shop .feat p{font-size:15px;line-height:1.8;color:var(--tx2)}

/* gallery — 잡지 화보: 첫 장 크게, 빈칸이 안 남는 장수일 때만(2칸 = 홀수 장이면 첫 장 한 줄 가득 4:3 · 3칸 = 3의 배수면 첫 장 2×2) */
.tpl-brand_shop .gal{gap:6px}
.tpl-brand_shop .gal a{background:var(--bg2)}
.tpl-brand_shop .gal li:first-child:nth-last-child(odd){grid-column:span 2}
.tpl-brand_shop .gal li:first-child:nth-last-child(odd) a{aspect-ratio:4/3}
@media (min-width:640px){
  .tpl-brand_shop .gal:not(.gal-c2) li:first-child:nth-last-child(odd){grid-column:auto}
  .tpl-brand_shop .gal:not(.gal-c2) li:first-child:nth-last-child(odd) a{aspect-ratio:1/1}
  .tpl-brand_shop .gal.gal-c3 li:first-child:nth-last-child(3n){grid-column:span 2;grid-row:span 2}
  .tpl-brand_shop .gal.gal-c3 li:first-child:nth-last-child(3n) a{aspect-ratio:auto;height:100%}
}

/* FAQ — Q 표시 강조색, 펼침 + / − */
.tpl-brand_shop .faq{border-top-color:var(--hb-fg)}
.tpl-brand_shop .faq details{border-bottom-color:var(--hb-line)}
.tpl-brand_shop .faq summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 4px;font-size:16px}
.tpl-brand_shop .faq summary::-webkit-details-marker{display:none}
.tpl-brand_shop .faq summary::before{margin:0;font-family:var(--hb-font-head);font-weight:600;color:var(--hb-accent)}
.tpl-brand_shop .faq summary::after{content:"+";margin-left:auto;flex:none;font-size:20px;line-height:1;color:var(--tx3)}
.tpl-brand_shop .faq details[open] summary::after{content:"\2212"}
.tpl-brand_shop .faq-a{line-height:1.85;color:var(--tx2)}

/* cta — 먹색 띠, 가운데 */
.tpl-brand_shop .cta-in{flex-direction:column;align-items:center;text-align:center;gap:22px;padding:clamp(44px,10vw,88px) 24px;background:var(--hb-fg);color:var(--hb-bg)}
.tpl-brand_shop .cta-title{font-size:clamp(26px,7vw,42px);line-height:1.3;color:var(--hb-bg)}
.tpl-brand_shop .cta-sub{max-width:520px;margin:12px auto 0;color:rgba(247,243,236,.8);line-height:1.8}

/* contact(홈 샘플 신청 폼)·오시는 길 */
.tpl-brand_shop .hb-blk-contact{margin-top:var(--sec);padding-bottom:var(--sec);background:var(--bg2)}
.tpl-brand_shop .hb-blk-contact .sec-hd{margin-bottom:24px}
.tpl-brand_shop .ct-btns{justify-content:center}
.tpl-brand_shop .ct-hours{justify-content:center}
.tpl-brand_shop .ev-h{margin:32px 0 14px;font-size:clamp(20px,5.4vw,26px);text-align:left}
.tpl-brand_shop .bs-ct-sample{margin-top:24px;padding:14px 16px;background:var(--bg2);font-size:15px;text-align:center}
.tpl-brand_shop .bs-ct-sample a{font-weight:600;text-underline-offset:4px}
.tpl-brand_shop .bs-stockists{margin-top:8px}
.tpl-brand_shop .map-info,.tpl-brand_shop .map-hours{border-top:1px solid var(--hb-fg)}

/* 폼·상자 — 따뜻한 흰 종이 */
.tpl-brand_shop .sum,.tpl-brand_shop .box{background:var(--paper);border-color:var(--hb-line)}
.tpl-brand_shop .done-box{border-color:var(--hb-fg)}
.tpl-brand_shop .field input,.tpl-brand_shop .field textarea,.tpl-brand_shop .pd-opt select{background-color:#fff;border-color:var(--hb-line)}
.tpl-brand_shop .field input:focus,.tpl-brand_shop .field textarea:focus{border-color:var(--hb-fg)}
.tpl-brand_shop .check input{accent-color:var(--hb-fg)}
.tpl-brand_shop .field .hint{margin:-2px 0 8px}
/* 폰·탭: 오른쪽 가운데 떠 있는 버튼(.fab-mid, 엔진 layout — 전화 등)이 입력칸 오른쪽 끝을 가린다 → 적은 글자가 버튼 밑에 숨지 않게 오른쪽 여백 */
@media (max-width:767px){
  .tpl-brand_shop .form .field input,.tpl-brand_shop .form .field textarea{padding-right:56px}
}

/* 페이지 머리·글(회사 소개·약관) */
.tpl-brand_shop .page-hd .lbl{display:block}
.tpl-brand_shop .page-title{font-size:clamp(26px,7vw,40px);line-height:1.3}
.tpl-brand_shop .page-sub{color:var(--tx2);font-size:15px;line-height:1.7}
.tpl-brand_shop .page-sub a{font-weight:600;text-underline-offset:4px}
.tpl-brand_shop .prose p,.tpl-brand_shop .prose ul{color:var(--tx2)}
.tpl-brand_shop .bs-about h2{font-size:clamp(22px,6vw,30px);margin:8px 0 14px;line-height:1.35}
.tpl-brand_shop .bs-about p{font-size:16px;line-height:1.95}
.tpl-brand_shop .bs-about img{display:block;margin:20px auto}
.tpl-brand_shop .bs-about-btns{margin-top:36px}
.tpl-brand_shop .steps .on{color:var(--hb-fg)}

/* /product 목록·상품 상세·장바구니·주문 — 엔진 #111 줄을 먹색으로 */
.tpl-brand_shop .list-bar{border-top-color:var(--hb-fg);border-bottom-color:var(--hb-line)}
.tpl-brand_shop .sorts a.on{color:var(--hb-fg)}
.tpl-brand_shop .pager .on{border-color:var(--hb-fg)}
.tpl-brand_shop .crumb{color:var(--tx3)}
.tpl-brand_shop .pd-main,.tpl-brand_shop .pd-thumb{background:var(--bg2)}
.tpl-brand_shop .pd-thumb.on{border-color:var(--hb-fg)}
.tpl-brand_shop .pd-name{font-size:clamp(22px,6vw,30px);line-height:1.35}
.tpl-brand_shop .pd-price{border-top-color:var(--hb-fg)}
.tpl-brand_shop .pd-meta{border-top-color:var(--hb-line)}
.tpl-brand_shop .pd-qty-row{background:var(--bg2)}
.tpl-brand_shop .pd-tab{border-top-color:var(--hb-fg);border-bottom-color:var(--hb-line)}
.tpl-brand_shop .pd-body{line-height:1.85}
.tpl-brand_shop .buybar{border-top-color:var(--hb-line)}
.tpl-brand_shop .cart-list,.tpl-brand_shop .hb-rv-list,.tpl-brand_shop .hb-my-olist,.tpl-brand_shop .notice-mini,.tpl-brand_shop .board-list{border-top-color:var(--hb-fg)}
.tpl-brand_shop .cart-line{border-bottom-color:var(--hb-line)}
.tpl-brand_shop .sum-total{border-top-color:var(--hb-fg)}
.tpl-brand_shop .qty{background:#fff;border-color:var(--hb-line)}
.tpl-brand_shop .article-hd{border-bottom-color:var(--hb-fg)}

/* 푸터 */
.tpl-brand_shop .ft{background:var(--bg2);border-top-color:var(--hb-line)}
.tpl-brand_shop .ft-phone{color:var(--hb-fg)}

@media (min-width:768px){
  .tpl-brand_shop .story-row{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px}
  .tpl-brand_shop .story-row[data-align="right"]{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .tpl-brand_shop .story-row:not(:has(.story-img)){grid-template-columns:minmax(0,1fr)}
  .tpl-brand_shop .feat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-bottom:1px solid var(--hb-line)}
  .tpl-brand_shop .feat{border-bottom:0;padding:28px 0 32px}
  .tpl-brand_shop .feat-ic{position:static;display:inline-flex;margin-bottom:14px}
}
@media (min-width:960px){
  .tpl-brand_shop .grid{gap:52px 24px}
}