/* ============================================================
   포시즌아이스 랜딩페이지
   ------------------------------------------------------------
   스타일 레퍼런스 : references-style.md (Tesla)
     · 무채색 팔레트 + 단일 액센트 1색
     · 이미지가 주인공, UI는 최소한의 명판 역할
     · 4px 베이스 유닛 / 라디우스 최대 8px / 섀도우 없음
     · 중립적·기술적 타이포 (장식 배제)
   콘텐츠·문구   : FourSeasonIce-StyleGuide.md
   ------------------------------------------------------------
   1.  토큰
   2.  리셋 / 베이스
   3.  공용 컴포넌트
   4.  상단바
   5.  섹션1 히어로 (이미지 마퀴)
   6.  섹션2 문제제기
   7.  섹션3 라인업 (한 장씩 넘기는 슬라이드)
   8.  섹션4 특장점
   9.  섹션5 배송 레퍼런스 슬라이더
   10. 섹션6 FAQ + 클로징
   11. 푸터
   12. 하단 고정 CTA
   13. 반응형
   14. 접근성
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root{
  /* 색 — 무채색 베이스. 채도가 있는 건 --accent 하나뿐이다. */
  --white:#ffffff;
  --off:#eeeeee;          /* 카드·보조 섹션 배경 */
  --line:#d6d6d6;         /* 헤어라인 보더 */
  --line-soft:#e6e6e6;
  --steel:#5c5e62;        /* 보조 텍스트 */
  --charcoal:#393c41;     /* 본문 */
  --onyx:#171a20;         /* 헤드라인 */

  /* 액센트 — CTA와 링크에만. 본문/헤드라인에 쓰지 않는다. */
  --accent:#1F8FE0;
  --accent-press:#1877bd;

  /* 예외 1색 — 당일배송 마감 1시간 미만일 때만 */
  --amber:#FFC629;


  /* 타이포 — 굵기는 레퍼런스 기준(400~600)으로 낮추고,
     크기는 한국어 가독성 기준으로 유지한다. */
  --t-display:clamp(30px,5.2vw,52px);
  --t-h2:clamp(24px,3.4vw,38px);
  --t-h3:clamp(18px,1.9vw,21px);
  --t-lead:clamp(15px,1.8vw,18px);
  --t-body:16px;
  --t-sm:14px;
  --t-xs:12px;
  --w-reg:400;
  --w-med:500;
  --w-semi:600;
  --ls-head:-.02em;

  /* 간격 — 4px 베이스 */
  --s-4:4px;  --s-8:8px;  --s-12:12px; --s-16:16px;
  --s-24:24px;--s-32:32px;--s-40:40px; --s-48:48px;
  --sec-y:clamp(64px,8vw,112px);

  /* 형태 */
  --r-btn:4px;
  --r-card:8px;

  --wrap:1100px;
  --top-h:64px;
  --dock-h:60px;
  --strip-h:32px;
}

/* ---------- 2. 리셋 / 베이스 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',system-ui,sans-serif;
  background:var(--white);
  color:var(--charcoal);
  font-size:var(--t-body);
  font-weight:var(--w-reg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 한국어 — 어절 중간에서 줄이 끊기지 않게 */
  word-break:keep-all;
  overflow-wrap:break-word;
  padding-bottom:calc(var(--dock-h) + var(--strip-h));
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{
  color:var(--onyx);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-head);
  line-height:1.3;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-24)}
.section{padding:var(--sec-y) 0}
/* 푸터에서 섹션으로 점프할 때 고정 상단바에 제목이 가리지 않도록 */
:target,[id]{scroll-margin-top:calc(var(--top-h) + var(--s-16))}
.section--off{background:var(--off)}
.section--hair{border-top:1px solid var(--line-soft)}

/* 섹션 헤드 — 가이드 정렬 원칙에 따라 항상 가운데 정렬 */
.sec-head{max-width:720px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-head h2{font-size:var(--t-h2)}
.sec-head p{margin-top:var(--s-12);color:var(--steel);font-size:var(--t-lead);line-height:1.6}

/* ---------- 3. 공용 컴포넌트 ---------- */

/* 버튼 — filled primary + ghost secondary 쌍이 기본 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);
  min-height:48px;padding:12px var(--s-24);
  border-radius:var(--r-btn);
  font-size:var(--t-body);font-weight:var(--w-med);letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn svg{width:18px;height:18px;flex:none}

.btn--primary{background:var(--accent);color:var(--white)}
.btn--primary:hover{background:var(--accent-press)}

.btn--ghost{background:transparent;border-color:var(--onyx);color:var(--onyx)}
.btn--ghost:hover{background:var(--onyx);color:var(--white)}

.btn-row{display:flex;gap:var(--s-16);flex-wrap:wrap;justify-content:center}

/* 텍스트 링크 */
.link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);font-size:var(--t-sm);font-weight:var(--w-med);
}
.link svg{width:14px;height:14px}
.link:hover{color:var(--accent-press)}

/* 이미지 홀더 — 로드 실패해도 레이아웃이 무너지지 않는다.
   그라디언트 대신 무채색 + 라벨로 처리한다. */
.ph{position:relative;overflow:hidden;background:var(--off)}
.ph::before{
  content:attr(data-label);position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-16);text-align:center;
  color:var(--steel);font-size:var(--t-xs);font-weight:var(--w-med);letter-spacing:.02em;
}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.ph img.failed{display:none}


/* 스크롤 등장 — 은은하게만 */
.rv{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1);
}
.rv.on{opacity:1;transform:none}

/* 작은 라벨(아이브로우) */
.eyebrow{
  font-size:var(--t-xs);font-weight:var(--w-med);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);
}

/* ---------- 4. 상단바 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:var(--top-h);display:flex;align-items:center;
  transition:background-color .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;gap:var(--s-12)}
.nav-logo img{height:38px;width:auto}
.nav-logo span{
  font-size:var(--t-xs);font-weight:var(--w-reg);color:var(--steel);
  padding-left:var(--s-12);border-left:1px solid var(--line);
}
.nav-right{display:flex;align-items:center;gap:var(--s-24)}
.nav-note{color:var(--steel);font-size:var(--t-sm);font-weight:var(--w-reg)}
.nav-call{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px var(--s-16);border-radius:var(--r-btn);
  background:var(--accent);color:var(--white);
  font-size:var(--t-sm);font-weight:var(--w-med);
  transition:background-color .18s;
}
.nav-call svg{width:15px;height:15px}
.nav-call:hover{background:var(--accent-press)}

/* 히어로가 흰 배경이라 상단바도 처음부터 밝게 간다.
   스크롤하면 헤어라인만 생겨 본문과 분리된다. */
.nav{background:rgba(255,255,255,.86);backdrop-filter:blur(10px)}
.nav.solid{background:var(--white);border-bottom-color:var(--line-soft)}

/* ---------- 5. 섹션1 히어로 (이미지 마퀴) ---------- */
/* 배경 사진 한 장으로 화면을 덮는 대신, 취급 품목 실물 컷이
   하단에서 끊김 없이 흘러가게 한다. 배경은 흰색(레퍼런스 theme: light). */
.hero{
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding-top:calc(var(--top-h) + var(--s-24));
  padding-bottom:calc(var(--dock-h) + var(--strip-h));
  background:var(--white);
  overflow:hidden;
}
.hero-inner{
  align-self:center;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:var(--s-24);padding-bottom:var(--s-32);
}

.hero-badge{
  display:inline-flex;align-items:center;gap:var(--s-8);
  margin-bottom:var(--s-24);
  color:var(--steel);font-size:var(--t-sm);font-weight:var(--w-med);
}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.hero h1{
  font-size:var(--t-display);
  font-weight:var(--w-semi);
  line-height:1.24;
  margin-bottom:var(--s-16);
}
/* "오전 10시 이전" — 액센트는 텍스트가 아니라 밑줄로만 쓴다.
   (레퍼런스: 액센트를 헤드라인 색으로 쓰지 말 것 /
    가이드: 마감시간은 강조할 것 — 두 요구의 절충) */
.hero h1 em{
  font-style:normal;
  padding-bottom:3px;
  background:linear-gradient(var(--accent),var(--accent)) 0 100% / 100% 3px no-repeat;
}

.hero-sub{
  color:var(--steel);
  font-size:var(--t-lead);line-height:1.65;
  max-width:46ch;margin:0 auto var(--s-32);
}
.hero-sub small{display:block;margin-top:var(--s-8);font-size:var(--t-xs);color:#8a8d91}

/* 마퀴 — 3벌을 이어붙이고 -33.333% 이동시켜 이음매 없이 순환.
   좌우 끝은 마스크로 흐려 화면 밖으로 자연스럽게 빠지게 한다. */
.hero-marquee{
  position:relative;overflow:hidden;
  padding:var(--s-16) 0 var(--s-8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* --marquee-set(한 벌의 폭)과 --marquee-dur 은 main-v3.js 가 실측해서 넣는다.
   벌 수를 고정하면 와이드 모니터에서 이음매가 벌어진다. */
.marquee-row{
  display:flex;gap:var(--s-16);width:max-content;
  animation:marquee var(--marquee-dur,36s) linear infinite;
  will-change:transform;
}
.hero-marquee:hover .marquee-row{animation-play-state:paused}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--marquee-set,100%)),0,0)}
}
/* 크기는 화면 '폭' 기준으로 잡는다. 높이 기준으로 두면 해상도마다
   한 화면에 보이는 장수가 들쭉날쭉해진다. 26.5vw ≈ 한 번에 4.5~5장.
   세로로 너무 커지지 않게 42vh 로 한 번 더 막는다. */
.marquee-item{
  flex:none;
  height:clamp(190px,min(26.5vw,42vh),460px);
  aspect-ratio:3/4;
}
.marquee-item .ph{
  width:100%;height:100%;
  border-radius:var(--r-card);
  border:1px solid var(--line-soft);
}
.marquee-item:nth-child(odd) .ph{transform:rotate(-2deg)}
.marquee-item:nth-child(even) .ph{transform:rotate(2deg)}
/* ---------- 6. 섹션2 문제제기 ---------- */
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16)}
.p-card{background:var(--off);border-radius:var(--r-card);overflow:hidden}
.p-card .ph{aspect-ratio:4/3;background:#e2e2e2}
.p-body{padding:var(--s-24)}
.p-body h3{font-size:var(--t-h3);line-height:1.4;margin-bottom:var(--s-8)}
.p-body p{color:var(--steel);font-size:var(--t-sm);line-height:1.65}

/* ---------- 7. 섹션3 라인업 (한 장씩 넘기는 슬라이드) ---------- */
/* 풀블리드 3블록(≈2,400px)을 슬라이드 한 덩어리로 압축했다.
   카드 3장이 나란히 반복되면 지루해지므로 한 번에 한 장만 크게 보여준다.
   제목 + 좌우 화살표를 한 줄에 두고, 인디케이터는 아래 가운데. */

.carousel-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-24);margin-bottom:var(--s-24);
}
.carousel-title h2{font-size:var(--t-h2)}
.carousel-title p{margin-top:var(--s-8);color:var(--steel);font-size:var(--t-lead);line-height:1.6}
.carousel-nav{display:flex;gap:var(--s-8);flex:none}

.carousel-track{
  display:flex;gap:var(--s-16);overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{display:none}

/* 스크롤할 것이 없으면 조작부를 숨긴다.
   비활성 화살표만 남겨두면 눌러도 반응이 없어 오히려 혼란스럽다. */
.carousel[data-static] .carousel-nav,
.carousel[data-static] .carousel-dots{display:none}

/* 슬라이드 한 장이 트랙 전체를 차지한다.
   테두리·배경 없이 이미지와 글만 나란히 둬서 '카드' 느낌을 지운다. */
.l-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid;grid-template-columns:1.1fr .9fr;
  align-items:center;gap:clamp(24px,4vw,56px);
}
.l-slide .ph{aspect-ratio:4/3;border-radius:var(--r-card);background:#e2e2e2}
.l-body{text-align:left}
.l-body .eyebrow{display:block;margin-bottom:var(--s-12)}
.l-body h3{font-size:clamp(20px,2.6vw,28px);margin-bottom:var(--s-12)}
.l-lead{color:var(--steel);font-size:var(--t-lead);line-height:1.65;margin-bottom:var(--s-24)}

/* 품목 — 헤어라인으로만 구분한 인라인 목록 */
.l-items{
  list-style:none;display:flex;flex-wrap:wrap;
  font-size:var(--t-sm);font-weight:var(--w-med);color:var(--onyx);
}
.l-items li{padding:0 var(--s-12);border-left:1px solid var(--line)}
.l-items li:first-child{padding-left:0;border-left:0}
/* ---------- 8. 섹션4 특장점 ---------- */
/* 대표 강점 3 — 카드 대신 헤어라인 분할 */
.s-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-40);
  margin-bottom:clamp(56px,7vw,88px);
}
.s-card .ph{aspect-ratio:16/10;border-radius:var(--r-card);margin-bottom:var(--s-24)}
.s-key{
  font-size:clamp(26px,3.4vw,34px);font-weight:var(--w-med);
  color:var(--onyx);letter-spacing:-.025em;line-height:1.1;
  margin-bottom:var(--s-12);
}
.s-card h3{font-size:var(--t-h3);margin-bottom:var(--s-8)}
.s-card p{color:var(--steel);font-size:var(--t-sm);line-height:1.7}
.s-card .fine{display:inline-block;color:#8a8d91;font-size:var(--t-xs)}

/* 실무 혜택 4 — 아이콘 + 한 줄, 헤어라인 그리드 */
.b-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-soft);
}
.b-card{padding:var(--s-32) var(--s-24);border-left:1px solid var(--line-soft)}
.b-card:first-child{border-left:0}
.b-card .icon{display:block;color:var(--onyx);margin-bottom:var(--s-16)}
.b-card .icon svg{width:22px;height:22px}
.b-card h4{font-size:var(--t-body);font-weight:var(--w-med);margin-bottom:var(--s-4)}
.b-card p{color:var(--steel);font-size:var(--t-sm);line-height:1.6}

/* ---------- 9. 섹션5 배송 레퍼런스 슬라이더 ---------- */
.slider{position:relative}
.track{
  display:flex;gap:var(--s-16);overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--s-24);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 calc((100% - var(--s-32)) / 3);
  scroll-snap-align:start;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  overflow:hidden;
}
.slide .ph{aspect-ratio:16/10;background:#e2e2e2}
.slide-body{padding:var(--s-24)}
.slide-body .badge{
  display:block;margin-bottom:var(--s-8);
  font-size:var(--t-xs);font-weight:var(--w-med);letter-spacing:.06em;
  color:var(--steel);
}
.slide-body h3{font-size:var(--t-h3);margin-bottom:var(--s-16)}
.slide-body ul{list-style:none;display:grid;gap:var(--s-8)}
.slide-body li{
  position:relative;padding-left:var(--s-24);
  color:var(--charcoal);font-size:var(--t-sm);line-height:1.55;
}
.slide-body li::before{
  content:'';position:absolute;left:0;top:7px;width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171a20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

.s-nav{display:flex;align-items:center;justify-content:center;gap:var(--s-16);margin-top:var(--s-8)}

/* 화살표 / 인디케이터 — 라인업 캐러셀과 레퍼런스 슬라이더가 같이 쓴다.
   원형 버튼과 큰 섀도우는 레퍼런스 규칙(라디우스 ≤8px, 섀도우 없음)에 맞춰
   4px 사각 + 헤어라인으로 대체했다. */
.s-arrow,
.c-arrow{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--white);color:var(--onyx);
  transition:background-color .18s,color .18s,border-color .18s,opacity .18s;
}
.s-arrow svg,
.c-arrow svg{width:16px;height:16px}
.s-arrow:hover,
.c-arrow:hover{background:var(--onyx);border-color:var(--onyx);color:var(--white)}
.s-arrow[disabled],
.c-arrow[disabled]{opacity:.32;pointer-events:none}

.dots,
.carousel-dots{display:flex;gap:var(--s-8);align-items:center;justify-content:center}
.carousel-dots{margin-top:var(--s-24)}
.dots i,
.carousel-dots i{
  width:6px;height:6px;border-radius:3px;
  background:var(--line);cursor:pointer;
  transition:background-color .2s,width .2s;
}
.dots i.on,
.carousel-dots i.on{background:var(--onyx);width:20px}

/* ---------- 10. 섹션6 FAQ + 클로징 ---------- */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:var(--s-24) var(--s-40) var(--s-24) 0;
  color:var(--onyx);font-size:var(--t-h3);font-weight:var(--w-med);letter-spacing:var(--ls-head);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:var(--s-8);top:50%;transform:translateY(-50%);
  width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5e62' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.faq details[open] summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5e62' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.faq .a{padding:0 var(--s-40) var(--s-24) 0;color:var(--steel);font-size:var(--t-body);line-height:1.75}

.closing-box{
  background:var(--off);border-radius:var(--r-card);
  padding:clamp(40px,6vw,72px) var(--s-24);
  text-align:center;
  margin-top:clamp(56px,7vw,88px);
}
.closing-info{
  display:flex;flex-wrap:wrap;justify-content:center;
  color:var(--steel);font-size:var(--t-sm);
  margin-bottom:var(--s-24);
}
.closing-info span{padding:0 var(--s-16);border-left:1px solid var(--line)}
.closing-info span:first-child{border-left:0}
.closing-box h2{font-size:var(--t-h2);margin-bottom:var(--s-12)}
/* 클래스로 직접 지정한다. `.closing-box > p` 로 쓰면
   형제인 .closing-info / .closing-fine 까지 같이 먹는다. */
.closing-lead{color:var(--steel);font-size:var(--t-lead);max-width:44ch;margin:0 auto var(--s-32)}
.closing-fine{margin-top:var(--s-24);color:#8a8d91;font-size:var(--t-xs)}

/* ---------- 11. 푸터 ---------- */
/* 로고 → 섹션 바로가기 → 사업자정보 를
   한 줄 가운데 정렬로 쌓는다. */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding:clamp(56px,7vw,80px) 0 clamp(48px,6vw,72px);
}
.site-footer .wrap{max-width:820px}
.footer-stack{display:flex;flex-direction:column;align-items:center;gap:var(--s-32)}

.footer-logo img{height:44px;width:auto}

/* 섹션 바로가기 */
.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-8) var(--s-24);
}
.footer-nav a{
  color:var(--steel);font-size:var(--t-sm);
  transition:color .18s;
}
.footer-nav a:hover{color:var(--onyx)}



.footer-legal{
  text-align:center;color:var(--steel);
  font-size:var(--t-xs);line-height:1.9;
}
.footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-legal .copy{display:block;margin-top:var(--s-8);color:#8a8d91}

/* ---------- 12. 하단 고정 CTA ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--white);
  border-top:1px solid var(--line);
}
/* 마감 안내 스트립 */
.dock-strip{
  height:var(--strip-h);
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--off);
  color:var(--steel);font-size:var(--t-xs);font-weight:var(--w-med);
  border-bottom:1px solid var(--line-soft);
}
.dock-strip b{color:var(--onyx);font-weight:var(--w-med)}
/* 마감 1시간 미만 — 앰버는 여기서만 예외적으로 쓴다 */
.dock-strip.urgent{background:var(--amber);color:var(--onyx);border-bottom-color:var(--amber)}
.dock-strip.urgent b{color:var(--onyx)}

.dock-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);
  max-width:var(--wrap);margin:0 auto;padding:var(--s-8) var(--s-24);
}
.dock-actions .btn{min-height:44px;padding:8px var(--s-16);font-size:var(--t-sm)}

/* ---------- 13. 반응형 ---------- */
@media (max-width:1000px){
  .p-grid{grid-template-columns:repeat(2,1fr)}
  .s-row{grid-template-columns:1fr;gap:var(--s-48)}
  .s-card .ph{aspect-ratio:16/7}
  .b-grid{grid-template-columns:repeat(2,1fr)}
  .b-card:nth-child(3){border-left:0}
  .b-card:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .slide{flex:0 0 calc((100% - var(--s-16)) / 2)}

  /* 라인업 슬라이드 — 이미지 위, 글 아래로 */
  .l-slide{grid-template-columns:1fr;gap:var(--s-24)}
  .l-slide .ph{aspect-ratio:16/9}
  .l-body{text-align:center}
  .l-items{justify-content:center}
}
@media (max-width:640px){
  :root{--dock-h:56px}
  .nav-note{display:none}
  .wrap{padding:0 var(--s-16)}

  .hero{min-height:92svh}

  /* 제목 가운데 정렬 + 화살표를 그 아래로 (가이드의 섹션 제목 정렬 원칙) */
  .carousel-head{flex-direction:column;align-items:center;text-align:center;gap:var(--s-16)}

  .btn-row{width:100%}
  .btn-row .btn{flex:1 1 100%}

  .slide{flex:0 0 84%}
  .p-body,.slide-body{padding:var(--s-16)}

  /* 2단으로 두면 카드 폭이 164px까지 좁아져 제목이 3줄로 쪼개진다.
     1단 + 가로로 납작한 이미지로 바꿔 높이는 유지하면서 가독성을 살린다. */
  .p-grid{grid-template-columns:1fr}
  .p-card .ph{aspect-ratio:2/1}

  .b-card{padding:var(--s-24) var(--s-16)}
}

/* ---------- 14. 접근성 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--onyx);color:var(--white);padding:var(--s-12) var(--s-16);
}
.skip:focus{left:var(--s-16);top:var(--s-16)}