/* ============================================================
   main.css — 메인 페이지 전용. common.css 다음에 로드된다.
   동일 특이도 규칙은 로드 순서로 common.css를 덮어쓴다.
   ============================================================ */

/* ----- 섹션 공통 ----- */
.sec{padding:90px 0;}
.sec--soft{background:var(--bg-soft);}
/* 섹션 머리말은 가운데 정렬 대신 왼쪽 정렬 + 짧은 눈금선. sub.css 의 .blk__head 와 같은 규칙이다. */
.sec__head{text-align:left;margin-bottom:48px;}
.sec__head::before{content:'';display:block;width:44px;height:3px;
  margin-bottom:18px;background:var(--brand);}
.sec__eng{display:block;font-size:var(--fs-sm);letter-spacing:.2em;
  font-weight:600;color:var(--brand);margin-bottom:10px;}
.sec__title{font-size:var(--fs-h2);font-weight:800;line-height:1.25;}
.sec__desc{margin-top:14px;max-width:760px;color:var(--ink-sub);}
.sec__foot{text-align:center;}
.sec__more{display:inline-flex;align-items:center;gap:6px;margin-top:36px;
  padding:12px 28px;border:1px solid var(--brand);border-radius:999px;
  color:var(--brand);font-size:var(--fs-sm);font-weight:700;
  transition:background .3s var(--ease),color .3s var(--ease);}
.sec__more::after{content:'→';}
.sec__more:hover{background:var(--brand);color:var(--white);}
@media (max-width:767px){.sec{padding:60px 0;}.sec__head{margin-bottom:32px;}}

/* ----- 섹션1 히어로 ----- */
.hero .slider__slide{position:relative;overflow:hidden;height:clamp(420px,78vh,760px);}
.hero__media{display:block;width:100%;height:100%;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
/* 켄번스 — 사진을 아주 느리게 확대·이동시켜 정지컷이 살아 있는 것처럼 보이게 한다.
   영상과 달리 추가로 받는 바이트가 없어 로딩 속도(LCP)에 영향이 없다.
   28초 왕복이라 눈에 '움직인다'가 아니라 '멈춰 있지 않다' 정도로만 읽힌다.
   두 슬라이드가 서로 반대 방향으로 움직여 넘길 때 같은 동작이 반복되지 않는다. */
@keyframes hero-ken-a{
  from{transform:scale(1.04) translate3d(1.1%,0.6%,0);}
  to  {transform:scale(1.12) translate3d(-1.1%,-0.6%,0);}
}
@keyframes hero-ken-b{
  from{transform:scale(1.12) translate3d(-1.1%,-0.4%,0);}
  to  {transform:scale(1.04) translate3d(1.1%,0.4%,0);}
}
.hero__media img{will-change:transform;
  animation:hero-ken-a 28s ease-in-out infinite alternate;}
.hero .slider__slide:nth-child(even) .hero__media img{animation-name:hero-ken-b;}
/* 움직임을 줄여 달라고 설정한 사용자에게는 정지시킨다(멀미·전정기관 문제). */
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none;transform:none;}
}
.hero__blank{width:100%;height:100%;background:linear-gradient(135deg,var(--brand-dark),var(--brand));}
.hero__cap{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 var(--gut);color:var(--white);pointer-events:none;
  /* 히어로 사진이 밝은 흰 차량이라 얕은 스크림으로는 부제가 묻힌다. 가운데를 더 깔아준다. */
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.60) 100%);}
.hero__title{font-size:var(--fs-hero);font-weight:800;line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.45);}
.hero__sub{margin-top:14px;font-size:clamp(15px,1.6vw,20px);opacity:.92;}
.hero__play{pointer-events:auto;margin-top:26px;display:inline-flex;align-items:center;
  gap:10px;padding:13px 30px;border-radius:999px;background:var(--white);
  color:var(--brand);font-weight:700;font-size:var(--fs-sm);}
.hero__play::before{content:'▶';font-size:11px;}
.hero__play:hover{background:var(--brand-light);}
/* 1200px 이상에서는 우측 세로 플로팅 버튼(.float, right:22px + 폭 78px)이
   기본 위치(right:16px)의 다음 화살표를 통째로 덮는다. 그만큼 안쪽으로 밀고
   좌우가 어긋나 보이지 않게 이전 화살표도 같은 값으로 맞춘다. */
@media (min-width:1200px){
  .hero .slider__prev{left:116px;}
  .hero .slider__next{right:116px;}
}

/* ----- 섹션2 서비스 2카드 ----- */
.svc__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.svc__card{border-radius:var(--radius);padding:48px 40px 40px;overflow:hidden;
  background:var(--brand-light);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.svc__card--drive{background:#eef1f5;}
.svc__card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
/* 이미지 슬롯: 카드 상단 전폭. 카드 패딩만큼 음수 마진으로 끌어낸다 */
.svc__media{margin:-48px -40px 28px;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);}
.svc__media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);}
.svc__card:hover .svc__media img{transform:scale(1.04);}
.svc__label{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--brand);}
.svc__name{margin-top:8px;font-size:var(--fs-h3);font-weight:700;}
.svc__text{margin-top:14px;color:var(--ink-sub);}
.svc__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.svc__tag{padding:6px 13px;border-radius:999px;background:var(--white);
  color:var(--brand-dark);font-size:13px;font-weight:600;}
.svc__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;}
.svc__btn{padding:13px 28px;border-radius:999px;background:var(--brand);
  color:var(--white);font-weight:700;font-size:var(--fs-sm);}
.svc__btn:hover{background:var(--brand-dark);}
.svc__btn--ghost{background:var(--white);color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);}
.svc__btn--ghost:hover{background:var(--brand);color:var(--white);}
@media (max-width:767px){
  .svc__grid{grid-template-columns:1fr;gap:20px;}
  .svc__card{padding:34px 24px 30px;}
}

/* ----- 섹션3 WHAT WE DO -----
   5종이라 균등 그리드가 맞지 않는다. 3열 중 첫 항목만 2열을 차지하는 비대칭 배치. */
.what__track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  overflow:visible;scroll-snap-type:none;}
.what__track .slider__slide{flex:1 1 auto;}
.what__lead{grid-column:span 2;}
.what .slider__prev,.what .slider__next{display:none;}
/* 같은 줄의 카드는 높이가 같아진다. 남는 높이를 그냥 두면 글 아래가 통째로 빈다.
   사진이 있는 카드는 사진이 남는 높이를 먹고, 사진이 없는 카드는 글을 세로 가운데로 모은다. */
.what__item{display:flex;flex-direction:column;justify-content:center;
  height:100%;padding:32px 24px;text-align:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.what__item:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:var(--shadow);}
/* 이미지 슬롯: 카드 상단 전폭 4:3 (남는 높이가 있으면 그만큼 더 늘어난다) */
.what__media{flex:1 0 auto;margin:-32px -24px 20px;aspect-ratio:4/3;
  overflow:hidden;background:var(--bg-soft);}
.what__media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);}
.what__item:hover .what__media img{transform:scale(1.05);}
.what__no{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);}
.what__name{margin-top:10px;font-size:18px;font-weight:700;}
.what__desc{margin-top:12px;font-size:var(--fs-sm);color:var(--ink-sub);}
/* 큰 카드는 가로가 두 배라 미디어 비율과 글자 크기를 따로 잡는다 */
.what__lead .what__media{aspect-ratio:16/9;}
.what__lead .what__name{font-size:22px;}
.what__lead .what__desc{font-size:var(--fs-body);}
@media (max-width:1199px){
  .what__track{grid-template-columns:repeat(2,1fr);}
  .what__lead{grid-column:span 2;}
}
@media (max-width:767px){
  .what__track{display:flex;grid-template-columns:none;gap:0;
    overflow-x:auto;scroll-snap-type:x mandatory;}
  .what__track .slider__slide{flex:0 0 80%;scroll-snap-align:start;padding-right:14px;}
  .what__lead .what__media{aspect-ratio:4/3;}
  .what__lead .what__name{font-size:18px;}
  .what__lead .what__desc{font-size:var(--fs-sm);}
  .what .slider__prev,.what .slider__next{display:block;}
}

/* ----- 섹션5 DELIVERY 카드 ----- */
.gcard{display:block;height:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.gcard:hover{border-color:var(--brand);box-shadow:var(--shadow);}
.gcard__thumb{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden;}
.gcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gcard:hover .gcard__thumb img{transform:scale(1.06);}
.gcard__empty{display:flex;align-items:center;justify-content:center;height:100%;
  font-size:var(--fs-sm);color:var(--ink-sub);}
.gcard__body{padding:18px 20px 22px;}
.gcard__title{font-weight:700;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.gcard__date{margin-top:10px;font-size:13px;color:var(--ink-sub);}

/* ----- 섹션5 DELIVERY 갤러리 슬라이더 ----- */
.delivery__track .slider__slide{flex:0 0 25%;padding:0 12px;}
@media (max-width:1199px){.delivery__track .slider__slide{flex:0 0 50%;}}
@media (max-width:767px){.delivery__track .slider__slide{flex:0 0 82%;padding:0 7px;}}
.delivery .slider{margin:0 -12px;}
.delivery .slider__prev{left:-6px;} .delivery .slider__next{right:-6px;}

.empty-msg{padding:60px 0;text-align:center;color:var(--ink-sub);}

/* ----- 섹션6 RESERVATION ----- */
.rsv{position:relative;overflow:hidden;background:var(--brand-dark);color:var(--white);}
/* 배경 이미지 슬롯. 남색 위에 낮은 불투명도로 깔아 글자 대비를 지킨다 */
.rsv__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24;}
.rsv>.wrap{position:relative;z-index:1;}
.rsv .sec__title{color:var(--white);}
.rsv .sec__eng{color:var(--accent);}
.rsv .sec__head::before{background:var(--accent);}
.rsv .sec__desc{color:rgba(255,255,255,.78);}
.rsv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.rsv__card{display:block;padding:38px 26px;text-align:center;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  transition:background .3s var(--ease),transform .3s var(--ease);}
.rsv__card:hover{background:rgba(255,255,255,.15);transform:translateY(-4px);}
.rsv__name{font-size:var(--fs-h3);font-weight:700;}
.rsv__value{margin-top:12px;font-size:clamp(18px,2.2vw,24px);font-weight:700;color:var(--accent);
  word-break:break-all;}
.rsv__desc{margin-top:10px;font-size:var(--fs-sm);color:rgba(255,255,255,.72);}
.rsv__bank{margin-top:40px;padding:26px 30px;border-radius:var(--radius);
  background:rgba(0,0,0,.25);text-align:center;}
.rsv__bank dt{font-size:var(--fs-sm);color:rgba(255,255,255,.7);}
.rsv__bank dd{margin:8px 0 0;font-size:clamp(17px,2vw,22px);font-weight:700;}
.rsv__note{margin-top:14px;font-size:13px;color:rgba(255,255,255,.6);}
@media (max-width:767px){.rsv__grid{grid-template-columns:1fr;}}

/* ----- 영상 모달 (video-modal.js가 body에 주입) ----- */
.vmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;}
.vmodal[hidden]{display:none;}
.vmodal__dim{position:absolute;inset:0;background:rgba(0,0,0,.82);}
.vmodal__box{position:relative;width:min(1000px,92vw);}
.vmodal__frame{aspect-ratio:16/9;background:#000;}
.vmodal__frame iframe{display:block;width:100%;height:100%;border:0;}
.vmodal__close{position:absolute;top:-46px;right:0;width:40px;height:40px;
  color:var(--white);font-size:30px;line-height:1;}