@charset "UTF-8";
/* ===========================================================================
   boksunga.net — 순천월등 복사골 영농조합
   2026-07-28 리뉴얼

   기존 css/styles.css(Bootstrap Agency 테마, 196KB)는 손대지 않고 남겨두었다.
   이 파일만 교체하면 되돌릴 수 있다.

   글꼴은 Pretendard 한 벌만 쓰고, 굵기·크기·자간 대비로 위계를 만든다.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. 토큰
   --------------------------------------------------------------------------- */
:root{
  /* 색 */
  --ink:        #17110F;   /* 앵커 — 헤더, 푸터, 본문 글자 */
  --ink-soft:   #2A211D;
  --bone:       #F8F4EF;   /* 기본 지면 */
  --bone-deep:  #EFE8DF;
  --peach:      #C9455C;   /* 강조 1 */
  --peach-deep: #A8354A;
  --green:      #3F5240;   /* 강조 2 */
  --muted:      #6F635B;
  --line:       #E0D6CB;
  --white:      #FFFFFF;

  /* 글꼴 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Segoe UI", "Malgun Gothic", sans-serif;

  /* 리듬 */
  --gut:      clamp(20px, 5vw, 40px);
  --sec-y:    clamp(80px, 11vw, 150px);
  --maxw:     1200px;
  --narrow:   760px;

  /* 모션 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------------
   2. 리셋
   --------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* 한글이 단어 중간에서 끊기지 않게 한다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.22;
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--peach);
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:var(--peach); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:600;
}
.skip:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------------------
   3. 레이아웃
   --------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(56px,8vw,96px); }
.section--ink{ background:var(--ink); color:var(--bone); }
.section--deep{ background:var(--bone-deep); }

/* ---------------------------------------------------------------------------
   4. 타이포그래피
   --------------------------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--peach);
  margin-bottom:18px;
}
.section--ink .eyebrow{ color:#E8879A; }

.h-display{
  font-size:clamp(38px, 7.4vw, 82px);
  letter-spacing:-.045em;
  line-height:1.08;
  font-weight:800;
}

.h-section{
  font-size:clamp(29px, 4.6vw, 50px);
  letter-spacing:-.038em;
  line-height:1.2;
}

.h-card{
  font-size:clamp(19px, 2.2vw, 23px);
  letter-spacing:-.028em;
  line-height:1.35;
  font-weight:700;
}

.lead{
  font-size:clamp(16px, 1.9vw, 19px);
  line-height:1.85;
  color:var(--muted);
  font-weight:400;
}
.section--ink .lead{ color:#BCAFA6; }

.body-sm{ font-size:15px; line-height:1.8; color:var(--muted); }

.rule{
  width:44px; height:2px; background:var(--peach);
  border:0; margin:0 0 26px;
}

/* 섹션 머리 */
.sec-head{ max-width:var(--narrow); margin-bottom:clamp(40px,5.5vw,68px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .rule{ margin-inline:auto; }
.sec-head .lead{ margin-top:20px; }

/* ---------------------------------------------------------------------------
   5. 버튼
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 30px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }

.btn--primary{ background:var(--peach); color:#fff; border-color:var(--peach); }
.btn--primary:hover{ background:var(--peach-deep); border-color:var(--peach-deep); }

.btn--ink{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn--ink:hover{ background:var(--peach); border-color:var(--peach); }

.btn--ghost{ background:transparent; color:currentColor; border-color:currentColor; }
.btn--ghost:hover{ background:currentColor; }
.btn--ghost:hover span{ color:var(--ink); }

.btn--lg{ padding:17px 38px; font-size:16px; }

.btn svg{ flex:none; }

/* ---------------------------------------------------------------------------
   6. 헤더
   --------------------------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease),
             padding .3s var(--ease);
  padding-block:20px;
}
.hdr.is-stuck{
  background:rgba(23,17,15,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  padding-block:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}

/* 최상단에서는 히어로 사진 위에 메뉴가 얹히므로 어두운 그라디언트를 깔아
   흰 글자의 대비를 확보한다. 스크롤해 배경이 채워지면 없앤다. */
.hdr::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(23,17,15,.8), rgba(23,17,15,.3) 55%, rgba(23,17,15,0));
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.hdr.is-stuck::before{ opacity:0; }

.hdr__bar{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

.brand{
  display:flex; align-items:baseline; gap:9px;
  text-decoration:none; color:var(--bone); flex:none;
}
.brand__mark{
  font-size:19px; font-weight:800; letter-spacing:-.03em;
}
.brand__sub{
  font-size:11px; font-weight:500; letter-spacing:.06em; opacity:.66;
}

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative;
  padding:9px 14px;
  font-size:14.5px; font-weight:500; letter-spacing:-.012em;
  color:rgba(248,244,239,.78);
  text-decoration:none; border-radius:6px;
  transition:color .2s var(--ease);
}
.nav a:hover,.nav a.is-active{ color:var(--bone); }
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px;
  background:var(--peach); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }

.nav__cta{
  margin-left:12px; padding:10px 20px !important;
  background:var(--peach); color:#fff !important; border-radius:999px;
  font-weight:600 !important;
}
.nav__cta::after{ display:none !important; }
.nav__cta:hover{ background:var(--peach-deep); }

.burger{
  display:none; width:42px; height:42px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--bone);
}
.burger span{
  display:block; width:21px; height:1.6px; margin:4.5px auto;
  background:currentColor; transition:transform .28s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.1px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.1px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   7. 히어로
   --------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--ink);
  color:var(--bone);
  overflow:hidden;
}

.hero__text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(110px,14vh,150px) clamp(24px,4.5vw,72px) clamp(60px,9vh,90px);
  padding-left:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  position:relative; z-index:2;
}

.hero__place{
  font-size:12px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:#E8879A; margin-bottom:24px;
}

.hero h1{ margin-bottom:26px; }
.hero h1 em{
  font-style:normal; color:var(--peach);
  /* 복숭아색 글자가 어두운 배경에서 죽지 않게 살짝 밝힌다 */
  color:#E8657A;
}

.hero__lead{
  font-size:clamp(15.5px,1.8vw,18px); line-height:1.85;
  color:#BCAFA6; max-width:34ch; margin-bottom:38px;
}

.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__media{ position:relative; overflow:hidden; }
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  will-change:transform;
}
/* 사진이 텍스트 쪽으로 자연스럽게 녹아들도록 왼쪽에서 어둡게 덮는다.
   위쪽도 살짝 눌러 상단 메뉴의 대비를 확보한다. */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(23,17,15,.55) 0%, rgba(23,17,15,0) 22%),
    linear-gradient(95deg, var(--ink) 0%, rgba(23,17,15,.82) 12%, rgba(23,17,15,.34) 34%, rgba(23,17,15,0) 68%);
}

.hero__scroll{
  position:absolute; left:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  bottom:34px; z-index:3;
  display:flex; align-items:center; gap:11px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(248,244,239,.55); text-decoration:none;
}
.hero__scroll i{
  display:block; width:1px; height:32px; background:currentColor;
  transform-origin:top; animation:scrollLine 2.1s var(--ease) infinite;
}
@keyframes scrollLine{
  0%   { transform:scaleY(0); opacity:0; }
  40%  { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; transform-origin:bottom; }
}

/* ---------------------------------------------------------------------------
   8. 지표
   --------------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(248,244,239,.13);
}
.stat{
  padding:clamp(38px,5.5vw,64px) clamp(16px,2.6vw,36px);
  border-right:1px solid rgba(248,244,239,.13);
  text-align:center;
}
.stat:last-child{ border-right:0; }

.stat__num{
  display:block;
  font-size:clamp(42px,6.4vw,76px); font-weight:800;
  letter-spacing:-.05em; line-height:1;
  color:#E8657A;
  font-variant-numeric:tabular-nums;
}
.stat__num sup{
  font-size:.4em; font-weight:700; letter-spacing:0;
  vertical-align:super; margin-left:2px;
}
.stat__label{
  display:block; margin-top:14px;
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--bone);
}
.stat__note{
  display:block; margin-top:4px;
  font-size:12.5px; color:rgba(188,175,166,.85); font-weight:400;
}

/* ---------------------------------------------------------------------------
   9. 소개 — 비대칭 2컬럼
   --------------------------------------------------------------------------- */
.about{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(36px,6vw,88px);
  align-items:center;
}
.about__media{ position:relative; }
.about__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
}
.about__badge{
  position:absolute; right:-14px; bottom:-18px;
  background:var(--peach); color:#fff;
  padding:18px 22px; border-radius:12px;
  box-shadow:0 14px 36px rgba(201,69,92,.3);
  line-height:1.3;
}
.about__badge b{ display:block; font-size:26px; font-weight:800; letter-spacing:-.03em; }
.about__badge span{ display:block; font-size:12px; font-weight:500; opacity:.9; margin-top:2px; }

.about .lead{ margin-top:20px; }
.about__list{ margin-top:32px; display:grid; gap:2px; }
.about__list li{
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 0; border-top:1px solid var(--line);
}
.about__list li:last-child{ border-bottom:1px solid var(--line); }
.about__list dt{
  flex:none; width:88px; font-size:13px; font-weight:700;
  color:var(--peach); letter-spacing:-.01em; padding-top:1px;
}
.about__list dd{ margin:0; font-size:15px; line-height:1.7; color:var(--muted); }

/* ---------------------------------------------------------------------------
   10. 품종 · 수확 캘린더
   --------------------------------------------------------------------------- */
.variety{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.variety__item{
  background:var(--bone); padding:clamp(26px,3.4vw,38px);
  transition:background .25s var(--ease);
}
.variety__item:hover{ background:var(--white); }

.variety__when{
  display:inline-block; margin-bottom:14px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:var(--green); background:rgba(63,82,64,.09);
  padding:5px 11px; border-radius:999px;
}
.variety__item h3{ margin-bottom:9px; font-size:20px; letter-spacing:-.03em; }
.variety__item p{ font-size:14.5px; line-height:1.75; color:var(--muted); }

/* ---------------------------------------------------------------------------
   11. 효능 — 이미지/텍스트 교차
   --------------------------------------------------------------------------- */
.feature{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5.5vw,80px);
  align-items:center;
}
.feature + .feature{ margin-top:clamp(56px,8vw,110px); }
.feature--flip .feature__media{ order:2; }

.feature__media img{
  width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:14px;
}
.feature__body h3{ margin-bottom:18px; }
.feature__body p{ font-size:16px; line-height:1.85; color:var(--muted); }

.tips{ margin-top:26px; display:grid; gap:11px; }
.tips li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; line-height:1.7; color:var(--muted);
}
.tips li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:9px;
  border-radius:50%; background:var(--peach);
}

/* ---------------------------------------------------------------------------
   12. 지도
   --------------------------------------------------------------------------- */
.map-frame{
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--bone-deep);
  box-shadow:0 18px 50px rgba(23,17,15,.09);
}
.map-frame iframe{
  display:block; width:100%; height:clamp(420px,58vh,600px); border:0;
}
.map-note{
  margin-top:16px; font-size:13px; color:var(--muted); text-align:center;
}

/* ---------------------------------------------------------------------------
   13. 구매
   --------------------------------------------------------------------------- */
.shop{
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--ink); color:var(--bone);
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center;
  min-height:340px;
}
.shop__body{ padding:clamp(38px,5.5vw,72px); }
.shop__body h2{ margin-bottom:18px; }
.shop__body .lead{ margin-bottom:32px; max-width:38ch; }

.shop__media{ position:relative; align-self:stretch; min-height:240px; }
.shop__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shop__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(23,17,15,.35) 45%, rgba(23,17,15,0) 100%);
}

/* ---------------------------------------------------------------------------
   14. 조합업무 갤러리
   --------------------------------------------------------------------------- */
.work{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,2.8vw,32px);
}
.work__card{
  display:block; width:100%; padding:0; text-align:left;
  background:none; border:0; cursor:pointer;
  border-radius:14px; overflow:hidden;
}
.work__thumb{
  position:relative; border-radius:14px; overflow:hidden;
  background:var(--bone-deep); aspect-ratio:4/3;
}
.work__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
}
.work__card:hover .work__thumb img{ transform:scale(1.05); }
.work__thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(23,17,15,.62), rgba(23,17,15,0) 55%);
  opacity:0; transition:opacity .35s var(--ease);
}
.work__card:hover .work__thumb::after{ opacity:1; }

.work__more{
  position:absolute; left:20px; bottom:18px; z-index:2;
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.work__card:hover .work__more{ opacity:1; transform:none; }

.work__meta{ padding:20px 4px 0; }
.work__meta h3{ font-size:20px; letter-spacing:-.03em; margin-bottom:5px; }
.work__meta p{ font-size:14px; color:var(--muted); line-height:1.65; }

/* 라이트박스 */
.lb{
  border:0; padding:0; max-width:min(920px,94vw); max-height:92vh; width:100%;
  background:var(--bone); border-radius:16px; overflow:hidden;
  color:var(--ink);
}
.lb::backdrop{ background:rgba(23,17,15,.82); backdrop-filter:blur(3px); }
.lb__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:24px 26px 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bone); z-index:2;
}
.lb__head h3{ font-size:21px; letter-spacing:-.03em; margin-bottom:5px; }
.lb__head p{ font-size:14px; color:var(--muted); line-height:1.6; }
.lb__close{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:none; cursor:pointer;
  font-size:19px; line-height:1; color:var(--muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lb__close:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.lb__body{
  padding:20px 26px 28px; overflow-y:auto; max-height:calc(92vh - 110px);
  display:grid; gap:14px;
}
.lb__body img{ width:100%; border-radius:10px; }

/* ---------------------------------------------------------------------------
   15. 문의
   --------------------------------------------------------------------------- */
.contact{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px,6vw,80px);
}
.contact__info dl{ margin:0; display:grid; gap:22px; }
.contact__info dt{
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--peach); margin-bottom:5px;
}
.contact__info dd{ margin:0; font-size:16px; line-height:1.7; }
.contact__info a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contact__info a:hover{ border-color:var(--peach); color:var(--peach); }

.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.field label{
  display:block; font-size:13px; font-weight:600;
  color:var(--muted); margin-bottom:7px;
}
.field input,.field textarea{
  width:100%; padding:14px 16px;
  font-family:inherit; font-size:15.5px; line-height:1.6; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:9px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:158px; resize:vertical; }
.field input:focus,.field textarea:focus{
  outline:0; border-color:var(--peach);
  box-shadow:0 0 0 3px rgba(201,69,92,.13);
}
.field input::placeholder,.field textarea::placeholder{ color:#B3A69C; }

/* honeypot — 사람에게 보이지 않는다 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.form__msg{ font-size:14px; line-height:1.6; }
.form__msg.is-ok{ color:var(--green); }
.form__msg.is-err{ color:var(--peach); }

/* ---------------------------------------------------------------------------
   16. 푸터
   --------------------------------------------------------------------------- */
.ftr{ background:var(--ink); color:#B3A69C; padding-block:clamp(54px,7vw,84px) 34px; }
.ftr__top{
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-bottom:38px; border-bottom:1px solid rgba(248,244,239,.12);
}
.ftr h2{
  font-size:19px; font-weight:800; letter-spacing:-.03em;
  color:var(--bone); margin-bottom:14px;
}
.ftr h3{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8A7C73; margin-bottom:15px;
}
.ftr p,.ftr li{ font-size:14px; line-height:1.85; }
.ftr a{ text-decoration:none; }
.ftr a:hover{ color:var(--bone); }
.ftr__villages{ font-size:13.5px; line-height:1.9; }
.ftr__villages b{ color:var(--bone); font-weight:600; }

.ftr__bot{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; padding-top:26px;
  font-size:12.5px; color:#7A6C63;
}

/* ---------------------------------------------------------------------------
   17. 스크롤 등장 애니메이션
   --------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }

/* ---------------------------------------------------------------------------
   18. 반응형
   --------------------------------------------------------------------------- */
@media (max-width:1000px){
  .about{ grid-template-columns:1fr; }
  .about__badge{ right:16px; }
  .contact{ grid-template-columns:1fr; }
  .shop{ grid-template-columns:1fr; }
  .shop__media{ order:-1; min-height:220px; }
  .shop__media::after{
    background:linear-gradient(to bottom, rgba(23,17,15,.15), var(--ink) 96%);
  }
}

@media (max-width:860px){
  html{ scroll-padding-top:66px; }

  .burger{ display:block; }

  .nav{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:82px 22px 26px;
    background:rgba(23,17,15,.985);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transform:translateY(-100%); transition:transform .38s var(--ease);
    max-height:100svh; overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav a{
    padding:15px 6px; font-size:16.5px;
    border-bottom:1px solid rgba(248,244,239,.09);
  }
  .nav a::after{ display:none; }
  .nav__cta{
    margin:20px 0 0; text-align:center; border-bottom:0 !important;
    padding:14px 20px !important;
  }

  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__media{ order:-1; height:52svh; min-height:280px; }
  .hero__media::after{
    background:linear-gradient(to bottom, rgba(23,17,15,.42) 0%, rgba(23,17,15,.1) 45%, var(--ink) 99%);
  }
  .hero__text{
    padding:38px var(--gut) 56px; padding-left:var(--gut);
  }
  .hero__scroll{ display:none; }

  .feature{ grid-template-columns:1fr; }
  .feature--flip .feature__media{ order:0; }

  .form__row{ grid-template-columns:1fr; }

  .ftr__top{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width:560px){
  body{ font-size:16px; }

  .stats{ grid-template-columns:1fr; }
  .stat{
    border-right:0; border-bottom:1px solid rgba(248,244,239,.13);
    display:flex; align-items:baseline; justify-content:space-between;
    text-align:left; padding:22px var(--gut); gap:16px;
  }
  .stat:last-child{ border-bottom:0; }
  .stat__num{ font-size:40px; }
  .stat__label{ margin-top:0; }
  .stat__note{ display:none; }

  .about__badge{ position:static; margin-top:16px; display:inline-block; }
  .hero__acts .btn{ width:100%; justify-content:center; }
}

/* ---------------------------------------------------------------------------
   19. 접근성 — 모션 최소화
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ transform:none !important; }
}

/* ---------------------------------------------------------------------------
   20. 인쇄
   --------------------------------------------------------------------------- */
@media print{
  .hdr,.hero__scroll,.map-frame,.form,.burger{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding-block:18pt; }
  .reveal{ opacity:1; transform:none; }
}