/* ============================================================================
   mp-pages.css — MAMAPOUND 서브 페이지 공용 스타일 (ABOUT · ORDER · SAMPLE · COFFEE)
   mamapound.css(토큰·헤더·푸터·버튼) 다음에 로드한다. `.mp-site` 스코프 안에서
   --mp-color-* / --mp-gutter / --mp-font-display 토큰을 재사용한다.
   페이지는 아래 클래스만 조합해 사용한다. 페이지 전용 스타일(§9b)도 이 파일에 두어 페이지 <style> 없이 이식본에 실린다.

   [클래스 목록]
   루트/공통
     .mp-page                     서브 페이지 루트(.mp-site 와 함께). 공용 여백/타이포 기본값
     .mp-page-head / .mp-page-tail 쇼핑 페이지의 두 루트(헤더+히어로 / CTA+푸터). tail 은 상단 패딩 0
     .mp-eyebrow                  (mamapound.css) 12px 700 아이브로우 — 서브 페이지에서 brand 색 점 장식 추가
     .mp-display                  (mamapound.css) Montserrat 800 대문자 디스플레이, em = brand
     .mp-handwritten-inline       손글씨 이탤릭 캡션(absolute 아님; 인라인 블록, 회전)
     .mp-pill                     작은 알약 칩(brand-light 배경). .mp-pill-dark / .mp-pill-outline 변형
     .mp-pill-row                 칩을 가로로 나열(wrap)
     .mp-photo-card               둥근 사진 카드(border-radius 24px, 약한 그림자). --mp-tilt 로 기울임
       .mp-tilt-l / .mp-tilt-r    -5deg / 5deg 기울임 프리셋, .mp-tilt-l2 / .mp-tilt-r2 는 -3deg / 3deg
       .mp-ratio-45 / .mp-ratio-34 / .mp-ratio-1 / .mp-ratio-43  카드 비율 4:5 / 3:4 / 1:1 / 4:3
     .mp-section-head             섹션 상단(아이브로우+디스플레이+설명) 2열 헤더
   서브 히어로
     .mp-subhero                  크림 배경 히어로(헤더 높이 포함 패딩, 하단 42px 라운드, min-height 560px)
       .mp-subhero-light          brand-light 배경 변형
       .mp-subhero-grid           카피 | 사진 2열 그리드
       .mp-subhero-copy           아이브로우 + h1.mp-display(.mp-subhero-title) + .mp-subhero-sub + 버튼/칩
       .mp-subhero-title          clamp(56px,8vw,120px)
       .mp-subhero-sub            한국어 서브카피(Pretendard 500 18~20px)
       .mp-subhero-actions        버튼/칩 행
       .mp-subhero-figure         우측 사진 컬럼(.mp-photo-card 를 감쌈) + .mp-subhero-caption 손글씨 캡션
       .mp-subhero-figure-portrait  세로 사진용(최대 폭 420px)
   스토리
     .mp-story-section            크림 배경 스토리 섹션
       .mp-story-grid             카피 | 사진 2열
       .mp-story-copy             큰 행간 본문 컬럼(Pretendard 500 22~26px)
       .mp-story-block            연(stanza) 블록 — <p> 안 <br> 로 줄바꿈 보존
       .mp-story-photos           기울인 사진 카드 1~2장을 겹쳐 배치하는 컬럼
   다크 인용 패널
     .mp-quote                    잉크 배경 섹션(크림 글자)
       .mp-quote-panel            2열(디스플레이 | 인용문+버튼)
       .mp-quote-lead             작은따옴표 리드 문장(brand-light)
       .mp-quote-text             인용 본문(blockquote, 좌측 헤어라인)
   사실 카드
     .mp-facts                    brand-light 배경 섹션
       .mp-facts-grid             3열 그리드
       .mp-fact                   헤어라인 카드(번호 + h3 + p)
       .mp-fact-number            Montserrat 800 42px 번호
   프로세스
     .mp-steps                    3단계 프로세스(헤어라인 행). .mp-steps-dark 는 다크 배경용 색
       .mp-step                   행(번호 | 제목 | 항목 목록)
       .mp-step-number            "STEP 1" 라벨
       .mp-step-list              불릿 없는 항목 목록(· 구분)
   사진 모자이크
     .mp-mosaic                   크림 배경 섹션
       .mp-mosaic-grid            6열 그리드(카드가 span 으로 크기 변화), 모바일 2열
       .mp-mosaic-wide / .mp-mosaic-tall  카드 span 변형
   밴드
     .mp-band                     안내 밴드(기본 brand-light). .mp-band-dark 는 잉크 배경
       .mp-band-inner             디스플레이 | (설명 + 버튼) 2열
       .mp-band-text              설명 p
       .mp-band-actions           버튼 행
   CTA 밴드(메인 contact 축약)
     .mp-cta-band                 크림 배경 CTA 섹션
       .mp-cta-band-top           디스플레이(SWEET THINGS START HERE.) + .mp-cta-circle
       .mp-cta-circle             215px 원형 brand CTA, rotate(8deg)
       .mp-cta-details            헤어라인 위 전화/메일 + 주소 3열
   페이지 전용(위젯 바로 위 안내 — 각 쇼핑 페이지 head 루트에서 사용)
     .mp-order-guide              ORDER: 카테고리 칩 행 + '판매가 비공개' 안내 한 줄 스트립(.mp-order-guide-note, .mp-pill-label)
     .mp-sample-lineup            SAMPLE: 섹션 헤더 + 하단 메타 행(.mp-sample-meta: 칩 + 카운트). .mp-sample-chips 는 히어로 신뢰 칩 행
     .mp-coffee-list-head         COFFEE: 섹션 헤더(설명 + 칩 행). .mp-coffee-pairs 는 tail 페어링 밴드의 디저트 칩 행
   상품 위젯(아임웹 .shop-content.widget — .mp-site 밖, 스코프 없음)
     .shop-content.widget         크림 배경 컨테이너
     .thumb-row                   3열 그리드(800px 이하 2열). 상품이 정확히 2개면(:has) 데스크톱 2열 가운데 정렬
     .shop-item / .shop-item-thumb / .item-detail / h2.shop-title / p.pay  카드 재스타일
     .paging-block .btn           "View More" 알약 버튼
   ============================================================================ */

/* ---------- 0. 루트/공통 ---------- */
.mp-site.mp-page{font-family:mp-Montserrat,mp-Pretendard,sans-serif}
/* 서브 페이지 헤더: 크림 히어로 위에서는 스크롤 전에도 다크 로고(logo.svg 는 흰색 단색 → brightness(0)) */
.mp-site.mp-page .mp-header:not(.mp-scrolled) .mp-logo-light{display:none}
.mp-site.mp-page .mp-header:not(.mp-scrolled) .mp-logo-dark{display:block}
.mp-site.mp-page-tail{padding-top:0}
/* 현재 페이지 내비 항목: 호버 밑줄을 고정 표시 */
.mp-site.mp-page .mp-nav a[aria-current="page"]::after{width:100%}
.mp-site.mp-page .mp-section{padding:110px var(--mp-gutter)}
.mp-site.mp-page .mp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:0;margin-bottom:28px}
.mp-site.mp-page .mp-eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mp-color-brand);flex-shrink:0}
.mp-site.mp-page .mp-display{font-family:var(--mp-font-display);font-weight:800;letter-spacing:0;line-height:.98;text-transform:uppercase}
.mp-site .mp-handwritten-inline{display:inline-block;font:italic 26px/1.3 mp-Montserrat,mp-Pretendard,sans-serif;color:var(--mp-color-muted);transform:rotate(-8deg);transform-origin:left center}
.mp-site .mp-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 16px;border-radius:99px;background:var(--mp-color-brand-light);color:var(--mp-color-ink);font-size:12px;font-weight:700;letter-spacing:0;line-height:1.4;white-space:nowrap}
.mp-site .mp-pill-dark{background:var(--mp-color-ink);color:var(--mp-color-cream)}
.mp-site .mp-pill-outline{background:transparent;border:1px solid #30221f50}
.mp-site .mp-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.mp-site .mp-photo-card{--mp-tilt:0deg;position:relative;display:block;margin:0;border-radius:24px;overflow:hidden;background:var(--mp-color-white);box-shadow:0 18px 40px -22px rgba(48,34,31,.35);transform:rotate(var(--mp-tilt));will-change:transform;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mp-site .mp-photo-card img{width:100%;height:100%;object-fit:cover;display:block}
.mp-site .mp-photo-card figcaption{position:absolute;left:16px;bottom:14px;padding:6px 14px;border-radius:99px;background:rgba(255,249,242,.92);color:var(--mp-color-ink);font-size:11px;font-weight:700;letter-spacing:0}
.mp-site .mp-tilt-l{--mp-tilt:-5deg}.mp-site .mp-tilt-r{--mp-tilt:5deg}.mp-site .mp-tilt-l2{--mp-tilt:-3deg}.mp-site .mp-tilt-r2{--mp-tilt:3deg}
.mp-site .mp-ratio-45{aspect-ratio:4/5}.mp-site .mp-ratio-34{aspect-ratio:3/4}.mp-site .mp-ratio-1{aspect-ratio:1/1}.mp-site .mp-ratio-43{aspect-ratio:4/3}
.mp-site .mp-section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:60px}
.mp-site .mp-section-head h2{font-size:clamp(44px,5.6vw,88px)}
.mp-site .mp-section-head p{font-size:15px;line-height:1.9;color:var(--mp-color-muted);padding-bottom:6px}
.mp-site .mp-section-head .mp-eyebrow{margin-bottom:24px}

/* ---------- 1. 서브 히어로 ---------- */
.mp-site .mp-subhero{position:relative;background:var(--mp-color-cream);padding:168px var(--mp-gutter) 80px;min-height:600px;border-radius:0 0 42px 42px;overflow:hidden;z-index:1}
.mp-site .mp-subhero-light{background:var(--mp-color-brand-light)}
.mp-site .mp-subhero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.mp-site .mp-subhero-copy{position:relative;z-index:2;min-width:0}
.mp-site .mp-subhero-copy .mp-eyebrow{margin-bottom:34px}
.mp-site .mp-subhero-title{font-size:clamp(56px,8vw,120px);line-height:.98;letter-spacing:0;overflow-wrap:anywhere}
.mp-site .mp-subhero-sub{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.75;letter-spacing:-.02em;margin-top:34px;max-width:520px}
.mp-site .mp-subhero-sub small{display:block;margin-top:14px;font-size:14px;font-weight:400;color:var(--mp-color-muted);line-height:1.9}
.mp-site .mp-subhero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:38px}
.mp-site .mp-subhero-figure{position:relative;justify-self:end;width:100%;max-width:520px}
.mp-site .mp-subhero-figure-portrait{max-width:420px}
.mp-site .mp-subhero-figure .mp-photo-card{width:100%}
.mp-site .mp-subhero-caption{position:absolute;left:-8%;bottom:-18px;z-index:3;font:italic 26px/1.3 mp-Montserrat,mp-Pretendard,sans-serif;color:var(--mp-color-brand);transform:rotate(-9deg);white-space:nowrap;text-shadow:0 1px 0 var(--mp-color-cream)}
.mp-site .mp-subhero-light .mp-subhero-caption{text-shadow:0 1px 0 var(--mp-color-brand-light)}

/* ---------- 2. 스토리 ---------- */
.mp-site .mp-story-section{position:relative;background:var(--mp-color-cream);padding:120px var(--mp-gutter) 130px;overflow:hidden}
.mp-site .mp-story-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.mp-site .mp-story-copy{min-width:0}
.mp-site .mp-story-copy .mp-eyebrow{margin-bottom:40px}
.mp-site .mp-story-block{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-weight:500;font-size:clamp(19px,1.9vw,25px);line-height:1.85;letter-spacing:-.02em;color:var(--mp-color-ink)}
.mp-site .mp-story-block+.mp-story-block{margin-top:44px}
.mp-site .mp-story-block em{font-style:normal;color:var(--mp-color-brand)}
.mp-site .mp-story-copy .mp-text-link{margin-top:48px}
.mp-site .mp-story-photos{position:relative;min-height:560px}
.mp-site .mp-story-photos .mp-photo-card{position:absolute}
.mp-site .mp-story-photos .mp-photo-card:nth-child(1){width:72%;left:0;top:0;z-index:1}
.mp-site .mp-story-photos .mp-photo-card:nth-child(2){width:52%;right:0;bottom:0;z-index:2}
.mp-site .mp-story-photos .mp-handwritten-inline{position:absolute;left:4%;bottom:-6px;z-index:3;color:var(--mp-color-brand)}

/* ---------- 3. 다크 인용 패널 ---------- */
.mp-site .mp-quote{background:var(--mp-color-ink);color:var(--mp-color-cream);padding:120px var(--mp-gutter) 130px;position:relative;overflow:hidden}
.mp-site .mp-quote .mp-eyebrow{color:var(--mp-color-brand-light)}
.mp-site .mp-quote-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start}
.mp-site .mp-quote-panel h2{font-size:clamp(50px,6.4vw,104px);position:sticky;top:130px}
.mp-site .mp-quote-lead{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:clamp(20px,2vw,26px);font-weight:600;line-height:1.6;letter-spacing:-.02em;color:var(--mp-color-brand-light);margin-bottom:34px}
.mp-site .mp-quote-text{margin:0;padding:6px 0 6px 28px;border-left:1px solid #fff9f233;font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:16px;line-height:2;color:#e2cfc6;font-weight:400}
.mp-site .mp-quote-text p+p{margin-top:0}
.mp-site .mp-quote-actions{margin-top:44px;display:flex;flex-wrap:wrap;gap:12px}
.mp-site .mp-quote .mp-button-cream:hover{background:var(--mp-color-brand-light)}
.mp-site .mp-quote .mp-button-dark{border:1px solid #fff9f240}
.mp-site .mp-quote-mark{position:absolute;right:0;bottom:-.5em;font-family:var(--mp-font-display);font-weight:800;font-size:clamp(160px,22vw,340px);line-height:1;color:#fff9f20d;pointer-events:none;user-select:none}

/* ---------- 4. 사실 카드 ---------- */
.mp-site .mp-facts{background:var(--mp-color-brand-light);padding:120px var(--mp-gutter) 110px;position:relative;overflow:hidden}
.mp-site .mp-facts .mp-display em{color:#9b414d}
.mp-site .mp-facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.mp-site .mp-fact{border-top:1px solid #30221f70;padding-top:22px;min-width:0}
.mp-site .mp-fact-number{font-family:var(--mp-font-display);font-weight:800;font-size:42px;letter-spacing:0;line-height:1;display:block}
.mp-site .mp-fact h3{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:22px;font-weight:700;line-height:1.55;letter-spacing:-.03em;margin:22px 0 16px}
.mp-site .mp-fact p{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:14px;line-height:1.95;color:var(--mp-color-muted)}
.mp-site .mp-fact .mp-pill{margin-top:18px}

/* ---------- 5. 프로세스 ---------- */
.mp-site .mp-steps{margin-top:70px;border-top:1px solid #30221f70}
.mp-site .mp-step{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:start;padding:34px 0;border-bottom:1px solid #30221f30}
.mp-site .mp-step-number{font-family:var(--mp-font-display);font-weight:800;font-size:15px;letter-spacing:0;line-height:1.2;padding-top:6px}
.mp-site .mp-step-number b{display:block;font-size:42px;line-height:1;margin-top:6px;color:var(--mp-color-brand)}
.mp-site .mp-step h3{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.5}
.mp-site .mp-step-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:15px;line-height:1.8;color:var(--mp-color-muted)}
.mp-site .mp-step-list li{display:inline-flex;align-items:center}
.mp-site .mp-step-list li:not(:last-child)::after{content:'·';margin:0 12px;color:var(--mp-color-brand);font-weight:700}
.mp-site .mp-steps-dark{border-top-color:#fff9f233}
.mp-site .mp-steps-dark .mp-step{border-bottom-color:#fff9f233}
.mp-site .mp-steps-dark .mp-step-list{color:#e2cfc6}

/* ---------- 6. 사진 모자이크 ---------- */
.mp-site .mp-mosaic{background:var(--mp-color-cream);padding:120px var(--mp-gutter) 110px;overflow:hidden}
.mp-site .mp-mosaic-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(160px,auto);gap:22px}
.mp-site .mp-mosaic-grid .mp-photo-card{grid-column:span 2;aspect-ratio:1/1;margin:0}
.mp-site .mp-mosaic-grid .mp-mosaic-wide{grid-column:span 3;aspect-ratio:4/3}
.mp-site .mp-mosaic-grid .mp-mosaic-tall{grid-column:span 2;aspect-ratio:3/4}
.mp-site .mp-mosaic-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:50px;font-size:13px;color:var(--mp-color-muted)}

/* ---------- 7. 밴드 ---------- */
.mp-site .mp-band{background:var(--mp-color-brand-light);padding:110px var(--mp-gutter);position:relative;overflow:hidden}
.mp-site .mp-band .mp-display em{color:#9b414d}
.mp-site .mp-band-dark{background:var(--mp-color-ink);color:var(--mp-color-cream)}
.mp-site .mp-band-dark .mp-display em{color:var(--mp-color-brand)}
.mp-site .mp-band-dark .mp-eyebrow{color:var(--mp-color-brand-light)}
.mp-site .mp-band-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:end}
.mp-site .mp-band-inner h2{font-size:clamp(50px,6.4vw,104px)}
.mp-site .mp-band-text{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:15px;line-height:1.95;color:var(--mp-color-muted);max-width:460px}
.mp-site .mp-band-dark .mp-band-text{color:#e2cfc6}
.mp-site .mp-band-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.mp-site .mp-band-dark .mp-button-cream:hover{background:var(--mp-color-brand-light)}
.mp-site .mp-band-dark .mp-button-dark{border:1px solid #fff9f240}

/* ---------- 8. CTA 밴드 ---------- */
.mp-site .mp-cta-band{background:var(--mp-color-cream);padding:120px var(--mp-gutter) 95px}
.mp-site .mp-cta-band-top{display:flex;justify-content:space-between;gap:50px;align-items:center}
.mp-site .mp-cta-band-top h2{font-size:clamp(55px,6.1vw,94px)}
.mp-site .mp-cta-band-top>div>p{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:15px;line-height:1.9;margin-top:35px;color:var(--mp-color-muted)}
.mp-site .mp-cta-circle{width:215px;height:215px;border-radius:50%;background:var(--mp-color-brand);color:var(--mp-color-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;text-align:center;transform:rotate(8deg);transition:transform .25s;font-weight:700}
.mp-site .mp-cta-circle>span:first-child{font-size:12px}
.mp-site .mp-cta-circle strong{font-size:21px;line-height:1.4}
.mp-site .mp-cta-circle>span:last-child{font-size:45px;line-height:1.3}
.mp-site .mp-cta-details{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:40px;margin-top:80px;border-top:1px solid #30221f70;padding-top:40px}
.mp-site .mp-cta-details .mp-phone{font-size:clamp(22px,2.3vw,36px);font-weight:700;letter-spacing:0;display:block;min-height:48px}
.mp-site .mp-cta-details h3{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:18px;font-weight:700;margin-bottom:8px}
.mp-site .mp-cta-details p{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:14px;color:var(--mp-color-muted);line-height:1.9}
.mp-site .mp-cta-details small{font-size:11px;display:block;margin-top:10px;color:var(--mp-color-muted)}

/* ---------- 9. 상품 위젯 재스타일 (아임웹 .shop-content.widget — .mp-site 밖) ---------- */
.shop-content.widget,body.doz_sys .shop-content.widget{background:#FFF9F2;color:#30221F;padding:40px clamp(24px,4.45vw,80px) 90px;margin:0;font-family:mp-Pretendard,mp-Montserrat,sans-serif;word-break:keep-all;box-sizing:border-box}
.shop-content.widget *,.shop-content.widget *::before,.shop-content.widget *::after{box-sizing:border-box}
.shop-content.widget .shop-grid,body.doz_sys .shop-content.widget .shop-grid{max-width:none;margin:0;padding:0}
.shop-content.widget .thumb-fluid,body.doz_sys .shop-content.widget .thumb-fluid{margin:0;padding:0}
.shop-content.widget .shop-tools{display:none!important}
.shop-content.widget .thumb-row,body.doz_sys .shop-content.widget .thumb-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:56px 32px!important;max-width:1232px;margin:0 auto!important;padding:0!important;width:auto!important;float:none!important;flex-wrap:wrap}
.shop-content.widget .thumb-row::before,.shop-content.widget .thumb-row::after{display:none!important;content:none}
/* 상품이 정확히 2개인 목록(COFFEE 원두 1kg/200g)은 카드 폭을 유지한 채 2열 가운데 정렬 — 같은 페이지의 다른 상품 위젯(6개 스트립 등)에는 영향 없음 */
.shop-content.widget .thumb-row:has(>.shop-item:nth-child(2):last-child),body.doz_sys .shop-content.widget .thumb-row:has(>.shop-item:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:718px}
.shop-content.widget .thumb-row .shop-item,body.doz_sys .shop-content.widget .thumb-row .shop-item{width:auto!important;float:none!important;padding:0!important;margin:0!important;min-width:0;position:relative;background:transparent}
.shop-content.widget .shop-item .item-wrap,body.doz_sys .shop-content.widget .shop-item .item-wrap{position:relative;margin:0;padding:0}
.shop-content.widget .shop-item .shop-item-thumb,body.doz_sys .shop-content.widget .shop-item .shop-item-thumb{display:block;position:relative;overflow:hidden;border-radius:20px!important;background:#FFFFFF;aspect-ratio:1/1;isolation:isolate}
.shop-content.widget .shop-item .shop-item-thumb img,body.doz_sys .shop-content.widget .shop-item .shop-item-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .7s cubic-bezier(.22,1,.36,1);max-width:100%}
.shop-content.widget .shop-item .item-overlay,body.doz_sys .shop-content.widget .shop-item .item-overlay{display:none!important}
.shop-content.widget .shop-item .item-detail,body.doz_sys .shop-content.widget .shop-item .item-detail{display:block;position:relative;margin-top:20px;padding:18px 34px 0 0;border-top:1px solid #30221f20;text-align:left}
.shop-content.widget .shop-item .item-detail>a,body.doz_sys .shop-content.widget .shop-item .item-detail>a{display:block;color:#30221F;text-decoration:none}
.shop-content.widget .shop-item .item-detail>a::after,body.doz_sys .shop-content.widget .shop-item .item-detail>a::after{content:'↗';position:absolute;right:0;top:19px;font-family:mp-Montserrat,mp-Pretendard,sans-serif;font-size:24px;line-height:1;color:#30221F;transition:transform .3s}
.shop-content.widget .shop-item .item-pay,body.doz_sys .shop-content.widget .shop-item .item-pay{display:block;margin:0;padding:0}
.shop-content.widget .shop-item h2.shop-title,body.doz_sys .shop-content.widget .shop-item h2.shop-title{display:block;margin:0;padding:0;font-family:mp-Pretendard,mp-Montserrat,sans-serif!important;font-size:17px!important;font-weight:600!important;line-height:1.5!important;letter-spacing:-.02em;color:#30221F;text-align:left;white-space:normal;overflow:visible;text-overflow:clip}
.shop-content.widget .shop-item .item-pay-detail,body.doz_sys .shop-content.widget .shop-item .item-pay-detail{margin-top:10px;padding:0;text-align:left}
.shop-content.widget .shop-item .item-pay-detail p,body.doz_sys .shop-content.widget .shop-item .item-pay-detail p{margin:0;padding:0;display:inline}
.shop-content.widget .shop-item p.pay,body.doz_sys .shop-content.widget .shop-item p.pay{display:inline-flex!important;align-items:center;min-height:28px;padding:4px 12px!important;border-radius:99px;background:#F5E3E6!important;color:#6c534b!important;font-family:mp-Pretendard,mp-Montserrat,sans-serif!important;font-size:12px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:0;white-space:nowrap;text-decoration:none;margin:0}
.shop-content.widget .shop-item .item-icon,body.doz_sys .shop-content.widget .shop-item .item-icon{display:none!important}
.shop-content.widget .paging-block,body.doz_sys .shop-content.widget .paging-block{margin-top:70px;text-align:center}
.shop-content.widget .paging-block .btn,body.doz_sys .shop-content.widget .paging-block .btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:15px 28px;border-radius:40px;border:1px solid #30221f90;background:transparent;color:#30221F;font-family:mp-Montserrat,mp-Pretendard,sans-serif;font-size:13px;font-weight:700;letter-spacing:0;text-decoration:none;text-transform:uppercase;box-shadow:none}
.shop-content.widget .paging-block .btn::after{content:'↓';font-size:18px;line-height:1}
.shop-content.widget .paging-block .btn:hover,body.doz_sys .shop-content.widget .paging-block .btn:hover{background:#30221F;color:#FFF9F2}
.shop-content.widget .shop-item a:focus-visible{outline:3px solid #30221F;outline-offset:6px;border-radius:20px}

/* ---------- 9b. 페이지 전용 — 위젯 바로 위 안내 (ORDER · SAMPLE · COFFEE) ---------- */
/* ORDER: 카테고리 칩 + 판매가 안내 한 줄 스트립 */
.mp-site .mp-order-guide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:44px var(--mp-gutter) 12px;background:var(--mp-color-cream)}
.mp-site .mp-order-guide-note{font-family:mp-Pretendard,mp-Montserrat,sans-serif;font-size:14px;line-height:1.8;color:var(--mp-color-muted);margin:0}
.mp-site .mp-order-guide-note strong{color:var(--mp-color-ink);font-weight:700}
.mp-site .mp-order-guide .mp-pill-row{align-items:center}
.mp-site .mp-pill-label{font-size:12px;font-weight:700;margin-right:6px}
/* SAMPLE: 라인업 헤더(위젯 상단 40px 패딩과 이어지도록 하단 패딩 최소) + 메타 행 */
.mp-site .mp-sample-lineup{background:var(--mp-color-cream);padding:96px var(--mp-gutter) 8px}
.mp-site .mp-sample-lineup .mp-section-head{margin-bottom:0}
.mp-site .mp-sample-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:44px;padding-top:24px;border-top:1px solid #30221f70;font-size:13px;color:var(--mp-color-muted)}
.mp-site .mp-sample-chips{margin-top:30px}
/* COFFEE: 원두 목록 헤더 + 페어링 칩 행 */
.mp-site .mp-coffee-list-head{background:var(--mp-color-cream);padding:76px var(--mp-gutter) 0}
.mp-site .mp-coffee-list-head .mp-section-head{margin-bottom:0}
.mp-site .mp-coffee-list-head .mp-pill-row{margin-top:22px}
.mp-site .mp-coffee-pairs{margin-top:26px}

/* ---------- 10. 호버 ---------- */
@media(hover:hover){
  .mp-site .mp-photo-card:hover{transform:rotate(var(--mp-tilt)) translateY(-6px)}
  .mp-site .mp-cta-circle:hover{transform:rotate(0)}
  .mp-site .mp-quote .mp-text-link:hover{color:var(--mp-color-brand-light)}
  .shop-content.widget .shop-item:hover .shop-item-thumb img{transform:translateY(-6px) scale(1.03)}
  .shop-content.widget .shop-item:hover .item-detail>a::after{transform:translate(3px,-3px)}
  .shop-content.widget .shop-item .item-detail>a:hover h2.shop-title{color:#9b414d}
}

/* ---------- 11. 반응형 ---------- */
@media(max-width:1100px){
  .mp-site .mp-subhero{padding-top:150px;min-height:520px}
  .mp-site .mp-subhero-grid{grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr)}
  .mp-site .mp-subhero-title{font-size:clamp(50px,7.6vw,96px)}
  .mp-site .mp-story-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr)}
  .mp-site .mp-story-photos{min-height:460px}
  .mp-site .mp-facts-grid{gap:25px}
  .mp-site .mp-step{grid-template-columns:120px minmax(0,1fr) minmax(0,1.1fr);gap:24px}
  .mp-site .mp-cta-circle{width:175px;height:175px}
  .mp-site .mp-mosaic-grid{gap:16px}
}
@media(max-width:800px){
  .mp-site .mp-subhero{padding:118px 24px 60px;min-height:0;border-radius:0 0 32px 32px}
  .mp-site .mp-subhero-grid{grid-template-columns:1fr;gap:44px}
  .mp-site .mp-subhero-copy .mp-eyebrow{margin-bottom:28px}
  .mp-site .mp-subhero-title{font-size:12.5vw;line-height:1.02}
  .mp-site .mp-subhero-sub{font-size:16px;margin-top:26px}
  .mp-site .mp-subhero-actions{margin-top:28px}
  .mp-site .mp-subhero-figure{justify-self:start;max-width:480px}
  .mp-site .mp-subhero-figure-portrait{max-width:340px;margin-left:auto}
  .mp-site .mp-subhero-caption{font-size:22px;left:-4%;bottom:-14px}
  .mp-site .mp-section-head{grid-template-columns:1fr;gap:24px;margin-bottom:44px}
  .mp-site .mp-section-head h2{font-size:9vw}
  .mp-site .mp-story-section{padding:90px 24px 100px}
  .mp-site .mp-story-grid{grid-template-columns:1fr;gap:70px}
  .mp-site .mp-story-block{font-size:19px}
  .mp-site .mp-story-block+.mp-story-block{margin-top:34px}
  .mp-site .mp-story-photos{min-height:0;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;padding-bottom:30px}
  .mp-site .mp-story-photos .mp-photo-card{position:relative;width:100%!important;inset:auto!important}
  .mp-site .mp-story-photos .mp-photo-card:nth-child(2){margin-top:60px}
  .mp-site .mp-story-photos .mp-handwritten-inline{bottom:-4px;font-size:22px}
  .mp-site .mp-quote{padding:90px 24px 100px}
  .mp-site .mp-quote-panel{grid-template-columns:1fr;gap:40px}
  .mp-site .mp-quote-panel h2{font-size:10vw;position:static}
  .mp-site .mp-quote-text{font-size:15px}
  .mp-site .mp-quote-mark{display:none}
  .mp-site .mp-facts{padding:90px 24px}
  .mp-site .mp-facts-grid{grid-template-columns:1fr;gap:0}
  .mp-site .mp-fact{display:grid;grid-template-columns:60px 1fr;gap:6px 22px;padding:26px 0;border-top:1px solid #30221f50}
  .mp-site .mp-fact-number{grid-row:span 3;font-size:34px;line-height:1.2}
  .mp-site .mp-fact h3{margin:0;font-size:19px}
  .mp-site .mp-fact p{font-size:13px}
  .mp-site .mp-fact .mp-pill{margin-top:8px;justify-self:start}
  .mp-site .mp-steps{margin-top:50px}
  .mp-site .mp-step{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .mp-site .mp-step-number{display:flex;align-items:baseline;gap:12px;padding-top:0}
  .mp-site .mp-step-number b{margin-top:0;font-size:34px}
  .mp-site .mp-step h3{font-size:20px}
  .mp-site .mp-step-list{font-size:14px}
  .mp-site .mp-mosaic{padding:90px 24px}
  .mp-site .mp-mosaic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;grid-auto-rows:auto}
  .mp-site .mp-mosaic-grid .mp-photo-card,.mp-site .mp-mosaic-grid .mp-mosaic-wide,.mp-site .mp-mosaic-grid .mp-mosaic-tall{grid-column:span 1;aspect-ratio:1/1}
  .mp-site .mp-mosaic-grid .mp-mosaic-wide{grid-column:span 2;aspect-ratio:16/10}
  /* 2열에서 정사각 카드 3장이 남기는 빈 셀 방지: 세 번째 카드를 가로 카드로 */
  .mp-site .mp-mosaic-grid .mp-photo-card:nth-child(3){grid-column:span 2;aspect-ratio:16/10}
  .mp-site .mp-mosaic-foot{display:block;margin-top:36px}
  .mp-site .mp-mosaic-foot p{margin-bottom:14px}
  .mp-site .mp-band{padding:90px 24px}
  .mp-site .mp-band-inner{grid-template-columns:1fr;gap:34px}
  .mp-site .mp-band-inner h2{font-size:10vw}
  .mp-site .mp-cta-band{padding:90px 24px 80px}
  .mp-site .mp-cta-band-top{gap:25px}
  .mp-site .mp-cta-band-top h2{font-size:7.5vw}
  .mp-site .mp-cta-circle{width:145px;height:145px}
  .mp-site .mp-cta-circle strong{font-size:17px}
  .mp-site .mp-cta-details{grid-template-columns:1fr 1fr;gap:40px 25px;margin-top:60px}
  .mp-site .mp-cta-details>div:first-child{grid-column:1/-1}
  .mp-site .mp-cta-details .mp-phone{font-size:35px}
  .mp-site .mp-order-guide{padding:32px 24px 8px;gap:14px}
  .mp-site .mp-sample-lineup{padding:80px 24px 0}
  .mp-site .mp-sample-meta{margin-top:32px;padding-top:20px;font-size:12px}
  .mp-site .mp-coffee-list-head{padding:60px 24px 0}
  .shop-content.widget,body.doz_sys .shop-content.widget{padding:30px 24px 70px}
  .shop-content.widget .thumb-row,body.doz_sys .shop-content.widget .thumb-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 18px!important;max-width:none}
  .shop-content.widget .shop-item .item-detail,body.doz_sys .shop-content.widget .shop-item .item-detail{margin-top:14px;padding:14px 28px 0 0}
  .shop-content.widget .shop-item h2.shop-title,body.doz_sys .shop-content.widget .shop-item h2.shop-title{font-size:15px!important}
  .shop-content.widget .shop-item .item-detail>a::after,body.doz_sys .shop-content.widget .shop-item .item-detail>a::after{font-size:20px;top:15px}
  .shop-content.widget .paging-block,body.doz_sys .shop-content.widget .paging-block{margin-top:50px}
}
@media(max-width:540px){
  .mp-site.mp-page .mp-section{padding:80px 24px}
  .mp-site .mp-subhero{padding:112px 24px 56px;border-radius:0 0 26px 26px}
  .mp-site .mp-subhero-copy .mp-eyebrow{margin-bottom:24px}
  .mp-site .mp-subhero-title{font-size:15.4vw;line-height:1.04}
  .mp-site .mp-subhero-sub{font-size:15px;line-height:1.8;margin-top:24px}
  .mp-site .mp-subhero-figure-portrait{max-width:280px}
  .mp-site .mp-subhero-caption{font-size:19px}
  .mp-site .mp-pill{min-height:34px;padding:5px 13px;font-size:11px}
  .mp-site .mp-section-head h2{font-size:10.5vw;line-height:1.06}
  .mp-site .mp-section-head p{font-size:13px}
  .mp-site .mp-story-section{padding:80px 24px 90px}
  .mp-site .mp-story-block{font-size:17px;line-height:1.85}
  .mp-site .mp-story-copy .mp-eyebrow{margin-bottom:30px}
  .mp-site .mp-story-photos{gap:12px}
  .mp-site .mp-story-photos .mp-photo-card:nth-child(2){margin-top:40px}
  .mp-site .mp-story-photos .mp-handwritten-inline{font-size:18px}
  .mp-site .mp-photo-card{border-radius:20px}
  .mp-site .mp-quote{padding:80px 24px 90px}
  .mp-site .mp-quote-panel h2{font-size:11.5vw;line-height:1.06}
  .mp-site .mp-quote-lead{font-size:18px}
  .mp-site .mp-quote-text{font-size:14px;padding-left:20px}
  .mp-site .mp-facts{padding:80px 24px}
  .mp-site .mp-fact{grid-template-columns:48px 1fr;gap:6px 16px}
  .mp-site .mp-fact-number{font-size:30px}
  .mp-site .mp-mosaic{padding:80px 24px}
  .mp-site .mp-band{padding:80px 24px}
  .mp-site .mp-band-inner h2{font-size:11.5vw;line-height:1.06}
  .mp-site .mp-band-text{font-size:13px}
  .mp-site .mp-band-actions .mp-button{width:100%;gap:12px}
  .mp-site .mp-quote-actions .mp-button{width:100%;gap:12px}
  .mp-site .mp-cta-band{padding:80px 24px 70px}
  .mp-site .mp-cta-band-top{flex-direction:column;align-items:flex-start;gap:35px}
  .mp-site .mp-cta-band-top h2{font-size:10.8vw;line-height:1.08}
  .mp-site .mp-cta-band-top>div>p{font-size:13px;margin-top:25px}
  .mp-site .mp-cta-circle{width:132px;height:132px;margin-left:auto;margin-right:10px}
  .mp-site .mp-cta-circle strong{font-size:15px}
  .mp-site .mp-cta-circle>span:first-child{font-size:11px}
  .mp-site .mp-cta-details{margin-top:45px;grid-template-columns:1fr;padding-top:30px;gap:34px}
  .mp-site .mp-cta-details>div:first-child{grid-column:auto}
  .mp-site .mp-cta-details .mp-phone{font-size:31px}
  /* 좁은 폭에서는 STEP 항목을 세로 목록으로 (구분점 대신 brand 점 불릿) */
  .mp-site .mp-step-list{font-size:13px;display:block}
  .mp-site .mp-step-list li{display:flex;align-items:baseline;gap:10px}
  .mp-site .mp-step-list li:not(:last-child)::after{content:none}
  .mp-site .mp-step-list li::before{content:'·';color:var(--mp-color-brand);font-weight:700}
  .mp-site .mp-order-guide{padding:26px 24px 4px}
  .mp-site .mp-order-guide-note{font-size:13px}
  .mp-site .mp-sample-lineup{padding:70px 24px 0}
  .mp-site .mp-sample-chips{margin-top:24px}
  .mp-site .mp-coffee-list-head{padding:52px 24px 0}
  .shop-content.widget,body.doz_sys .shop-content.widget{padding:24px 24px 60px}
  .shop-content.widget .thumb-row,body.doz_sys .shop-content.widget .thumb-row{gap:30px 14px!important}
  .shop-content.widget .shop-item .shop-item-thumb,.shop-content.widget .shop-item .shop-item-thumb img,body.doz_sys .shop-content.widget .shop-item .shop-item-thumb,body.doz_sys .shop-content.widget .shop-item .shop-item-thumb img{border-radius:16px!important}
  .shop-content.widget .shop-item h2.shop-title,body.doz_sys .shop-content.widget .shop-item h2.shop-title{font-size:14px!important}
  .shop-content.widget .shop-item p.pay,body.doz_sys .shop-content.widget .shop-item p.pay{font-size:11px!important;min-height:26px;padding:3px 10px!important}
}

/* ---------- 12. reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  .mp-site .mp-photo-card,.mp-site .mp-cta-circle,.shop-content.widget .shop-item .shop-item-thumb img,.shop-content.widget .shop-item .item-detail>a::after{transition:none!important}
  .mp-site .mp-photo-card:hover{transform:rotate(var(--mp-tilt))}
  .shop-content.widget .shop-item:hover .shop-item-thumb img{transform:none}
}

/* ---------- 9c. 상품 목록 미러 컨테이너 (아임웹: data-mp-mirror) ---------- */
.mp-shop-mirror{background:#FFF9F2;min-height:120px}
.mp-shop-mirror-loading{min-height:520px;position:relative}
.mp-shop-mirror-loading::after{content:'';position:absolute;left:50%;top:200px;width:36px;height:36px;margin-left:-18px;border-radius:50%;border:3px solid #F5E3E6;border-top-color:#D56C77;animation:mp-mirror-spin 1s linear infinite}
@keyframes mp-mirror-spin{to{transform:rotate(360deg)}}
.mp-shop-mirror-fallback{max-width:1232px;margin:0 auto;padding:60px clamp(24px,4.45vw,80px) 90px;text-align:center;font-family:mp-Pretendard,mp-Montserrat,sans-serif;color:#30221F}
.mp-shop-mirror-fallback p{margin:0 0 24px;font-size:16px;line-height:1.8;color:#6c534b}
.mp-shop-mirror-fallback .mp-button{display:inline-flex;align-items:center;gap:28px;padding:15px 24px;border-radius:99px;background:#30221F;color:#FFF9F2;text-decoration:none;font-size:13px;font-weight:700;min-height:48px}
@media (prefers-reduced-motion:reduce){.mp-shop-mirror-loading::after{animation:none}}

/* ---------- 9d. 아임웹 상품 위젯 '더보기(View More)' 버튼 — 알약 버튼으로 ---------- */
.shop-content.widget .paging-block,body.doz_sys .shop-content.widget .paging-block{margin:48px 0 0;text-align:center}
.shop-content.widget .paging-block .btn,body.doz_sys .shop-content.widget .paging-block .btn{display:inline-flex!important;align-items:center;gap:26px;padding:15px 26px!important;border-radius:99px!important;background:#30221F!important;color:#FFF9F2!important;border:0!important;font:700 13px/1 mp-Pretendard,mp-Montserrat,sans-serif!important;letter-spacing:0;min-height:48px;box-shadow:none!important;text-transform:none}
.shop-content.widget .paging-block .btn::after{content:'↓';font-family:mp-Montserrat,mp-Pretendard,sans-serif;font-size:16px}
.shop-content.widget .paging-block .btn span,body.doz_sys .shop-content.widget .paging-block .btn span{color:#F5E3E6!important;font-size:11px}

/* 아임웹 페이지에서만: 사이트 코드 삽입으로 들어간 초록 커서 원(.pointer) 숨김, 리뉴얼 루트를 감싼 섹션의 상하 여백 제거 */
body.doz_sys .pointer{display:none!important}
body.doz_sys .section_wrap:has(> .inside .mp-site),body.doz_sys .section_wrap:has(.mp-site){padding-top:0!important;padding-bottom:0!important}

/* 리뉴얼 서브 페이지의 아임웹 섹션(폼·상품 목록 등)이 흰 배경을 갖지 않도록 — 샘플 신청 페이지 중간 흰 띠 제거 (2026-09-24) */
body.doz_sys .section_wrap,body.doz_sys .section_wrap .section_bg_color,body.doz_sys .section_wrap .inside{background:#FFF9F2!important}
body.doz_sys main{background:#FFF9F2!important}