/* 리프데이즈 공통 스타일
   페이지가 여러 개로 나뉘면서, 같은 CSS를 파일마다 넣지 않고 여기 한 곳에 모았습니다.
   색·글꼴·여백을 바꾸려면 이 파일만 고치면 모든 페이지에 반영됩니다.
   폰트 파일 경로는 사이트 최상위 기준(/assets/...)입니다. */

  /* ===== 서울한강체 (서울시 제공 무료 서체) =====
     원본 .otf(개당 5MB)를 웹용 woff2로 압축·변환한 파일입니다.
     한글 11,172자 전체가 들어 있어 어떤 글자를 써도 깨지지 않습니다. */
  @font-face{
    font-family:'SeoulHangang';
    src:url('/assets/fonts/SeoulHangang-Regular.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'SeoulHangang';
    src:url('/assets/fonts/SeoulHangang-Bold.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
  }

  :root{
    --ink:#142c3c; --sea:#142c3c; --sea-light:#eef2f5; --deep:#0b1a26;
    --sand:#f6f4ef; --star:#e8a33d; --muted:#5a6675; --leaf:#18320f;
    --font:'SeoulHangang','Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
    --prose:760px;   /* 본문 글줄 최대폭 — 섹션마다 제각각이면 오른쪽 끝이 들쭉날쭉해 보입니다 */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--font);color:var(--ink);line-height:1.7;background:var(--sand);
    /* 한글이 단어 중간에서 잘리지 않게 (예: "있습/니다") — 띄어쓰기 단위로만 줄바꿈 */
    word-break:keep-all;
    /* 괄호·따옴표 앞뒤에서 어색하게 끊기는 것 방지 */
    line-break:strict;
    /* 단, 띄어쓰기 없는 긴 영문·URL은 넘치지 않도록 예외 허용 */
    overflow-wrap:break-word;
  }
  a{color:var(--sea);text-decoration:none}
  .wrap{max-width:980px;margin:0 auto;padding:0 20px}
  header{background:#142c3c;position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.15)}
  header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  /* 로고 파일에 여백이 없어 예전(34px)보다 낮춰야 같은 크기로 보입니다 */
  .brand img{height:36px;display:block}
  nav a{margin-left:20px;font-size:15px;color:#cdd8df;padding-bottom:4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
  nav a:hover{color:#fff}
  nav a.active{color:#fff;font-weight:700;border-bottom-color:var(--star)}

  /* ===== 모바일 메뉴 버튼(≡) ===== */
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
  .nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
  .nav-toggle span+span{margin-top:5px}
  /* 열리면 X 모양으로 */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:860px){
    .nav-toggle{display:block}
    header nav{position:absolute;top:64px;left:0;right:0;background:var(--sea);
      flex-direction:column;padding:6px 20px 14px;box-shadow:0 10px 20px rgba(0,0,0,.22);display:none}
    header nav.open{display:flex}
    header nav a{margin:0;font-size:16px;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.09)}
    header nav a:last-child{border-bottom:0}
    header nav a.active{border-bottom-color:var(--star)}
  }
  .hero{background:linear-gradient(160deg,rgba(20,44,60,.88) 0%,rgba(11,26,38,.93) 100%),url(/assets/hero-freediver-pool.jpg);background-size:cover;background-position:center 30%;color:#fff;padding:80px 0}
  .hero h1{font-size:38px;line-height:1.25;letter-spacing:-1px;margin-bottom:16px}
  .hero p{font-size:18px;opacity:.92;max-width:var(--prose)}
  .badges{margin-top:18px;font-size:14px;opacity:.9}
  .badges span{display:inline-block;background:rgba(255,255,255,.15);padding:5px 12px;border-radius:999px;margin:4px 6px 0 0}
  .btn{display:inline-block;background:var(--star);color:#3a2600;font-weight:700;padding:13px 26px;border-radius:999px;margin-top:26px}
  .btn.sea{background:#fff;color:var(--sea);margin-left:10px}
  .btn.small{padding:9px 18px;font-size:14px;margin-top:14px}
  .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .btns .btn{margin-top:0;flex:1;text-align:center;min-width:110px}
  .btn.ghost{background:#fff;color:var(--sea);border:1.5px solid var(--sea)}
  .agency-label{font-size:12px;color:var(--muted);margin-top:12px;font-weight:700}
  .feature{background:linear-gradient(135deg,#142c3c,#0b1a26);color:#fff;border-radius:18px;padding:28px 30px;margin-bottom:24px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .feature h3{color:#fff;font-size:21px;margin:10px 0 8px}
  .feature p{color:#dfe7ec;font-size:15px;max-width:640px}
  .feature .note{color:var(--star);font-size:13.5px;margin-top:10px;font-weight:600}
  .feature .tag{display:inline-block;background:var(--star);color:#3a2600;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
  .freq{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
  .freq span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600}
  .feature .cta{flex-shrink:0;margin-top:0}
  html{scroll-behavior:smooth}
  section{padding:58px 0;scroll-margin-top:70px}
  section h2{font-size:26px;letter-spacing:-.5px;margin-bottom:8px}
  section .lead{color:var(--muted);margin-bottom:26px;max-width:var(--prose)}
  /* 교육 과정 — 번호가 이어지는 단계형 타임라인 */
  .steps{list-style:none;max-width:var(--prose);margin-top:28px}
  .step{position:relative;padding:0 0 30px 62px}
  .step:last-child{padding-bottom:0}
  /* 단계를 잇는 세로선 */
  .step::before{content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;background:#e0e6ea}
  .step:last-child::before{display:none}
  .step .num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
    background:var(--sea);color:#fff;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:17px;line-height:1}
  .step h3{font-size:19px;color:var(--sea);margin:6px 0 4px}
  .step p{color:var(--muted);font-size:15px}
  /* 핵심 정보 칩 — 훑어볼 때 눈에 걸리는 부분 */
  .step .key{display:inline-block;margin:8px 6px 0 0;padding:4px 11px;border-radius:999px;
    background:var(--sea-light);color:var(--sea);font-size:13px;font-weight:700}
  @media(max-width:600px){
    .step{padding-left:52px;padding-bottom:26px}
    .step .num{width:34px;height:34px;font-size:15px}
    .step::before{left:16px;top:36px}
  }

  /* ===== 접이식 섹션 (교육 장소 / 제휴 스토어) ===== */
  .fold{margin-top:4px}
  .fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
    background:#fff;border:1px solid #d5dde3;color:var(--sea);font-weight:700;font-size:15px;
    padding:11px 20px;border-radius:999px;transition:background .2s,color .2s}
  .fold>summary::-webkit-details-marker{display:none}
  .fold>summary:hover{background:var(--sea);color:#fff;border-color:var(--sea)}
  .fold>summary:focus-visible{outline:2px solid var(--star);outline-offset:2px}
  .fold>summary::after{content:"";width:8px;height:8px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
  .fold-body{padding-top:24px}

  /* 프리다이빙 코스는 5장이라 마지막 줄이 가운데 오도록 flex 사용 */
  #freedive .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
  #freedive .cards>.card{flex:1 1 236px;max-width:300px}
  /* 기존 다이버 대상 코스 */
  /* 기존 다이버 상담 카드 — 상품 카드와 같은 크기로 중급 옆에 놓입니다 */
  .card-consult{background:var(--sand);border-style:dashed}
  .card-consult .tag{background:#7b8794}
  .card-consult p strong{color:var(--sea)}

  /* 동반 등록 할인 배너 — 프리다이빙·스쿠버 공통이라 두 섹션 앞에 둡니다 */
  .discount-band{background:var(--sand);border:1px solid #e9e3d6;border-left:5px solid var(--star);
    border-radius:14px;padding:22px 26px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .discount-band h3{font-size:19px;color:var(--sea);margin:8px 0 6px}
  .discount-band p{color:var(--muted);font-size:14.5px;max-width:640px}
  .discount-band .tag{display:inline-block;background:var(--star);color:#3a2600;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
  .discount-band .cta{flex-shrink:0;margin-top:0}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
  .card{background:#fff;border:1px solid #e9e3d6;border-radius:16px;padding:22px;display:flex;flex-direction:column}
  .card h3{font-size:18px;margin-bottom:6px;color:var(--sea)}
  .card .tag{font-size:12px;font-weight:700;color:#fff;background:var(--leaf,#3f8f5b);align-self:flex-start;padding:3px 10px;border-radius:999px;margin-bottom:10px}
  .card p{color:var(--muted);font-size:14.5px;flex:1}
  .card .price{font-weight:700;margin-top:10px;color:var(--ink)}
  .card .price .old{font-weight:400;color:var(--muted);text-decoration:line-through;margin-right:8px;font-size:13px}
  #co-stores .card{align-items:center;text-align:center}
  #co-stores .card img{max-width:140px;max-height:48px;margin-bottom:12px;object-fit:contain}
  #pools .card img{width:100%;height:150px;object-fit:cover;border-radius:10px;margin-bottom:12px}
  .cert-logos{display:flex;gap:16px;align-items:center;margin-top:14px;flex-wrap:wrap}
  .cert-logos img{width:46%;height:auto;object-fit:contain}
  #about .cards:last-of-type .card img{width:100%;height:220px;object-fit:cover;border-radius:12px;margin-bottom:14px}
  #scuba{background:#fff}
  #freedive{background:var(--sea-light)}
  #reviews{background:#fff}
  .rating-summary{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  .rating-summary .big{font-size:40px;font-weight:800;color:var(--sea)}
  .stars{color:var(--star);letter-spacing:2px}
  .review{background:var(--sand);border-radius:14px;padding:18px 20px;margin-bottom:12px;border:1px solid #e6ded0}
  .review .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
  .review .name{font-weight:700}
  .review .date{color:#9aa;font-size:13px}
  .review .stars{font-size:15px}
  .cta-box{background:var(--sea-light);border:2px dashed var(--sea);border-radius:16px;padding:24px;text-align:center;margin-top:20px}
  /* ===== 푸터 — 위: 브랜드 / 문의, 아래: 사업자 정보 ===== */
  /* 아래 여백을 넉넉히 둔 이유: 우하단 카카오 플로팅 버튼이 저작권 문구를 가립니다 */
  footer{background:var(--ink);color:#cfe3e1;padding:48px 0 84px;font-size:14px}
  footer a{color:#8fd6d0}
  footer a:hover{color:#fff}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:28px}
  .foot-brand img{height:42px;display:block;margin-bottom:14px}
  .foot-brand p{margin-bottom:2px}
  .foot-brand .slogan{color:#8c9fa8;font-size:13px}
  .foot-sns{margin-top:14px;display:flex;gap:10px}
  .foot-sns a{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 14px;font-size:13px}
  .foot-sns a:hover{border-color:#8fd6d0}
  /* 문의: 라벨 / 내용 2열 */
  .foot-contact{min-width:300px}
  .foot-contact h2{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--star);margin-bottom:12px}
  .foot-contact dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px}
  .foot-contact dt{color:#8c9fa8;white-space:nowrap}
  .foot-contact dd{color:#e4eef1}
  .foot-contact .hours{color:#8c9fa8;font-size:13px}
  /* 아래 줄 */
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
    font-size:12.5px;color:#8c9fa8}
  .foot-bottom .sep{opacity:.45;margin:0 2px}
  @media(max-width:720px){
    .foot-top{gap:30px;padding-bottom:24px}
    .foot-contact{min-width:0}
    .foot-contact dl{grid-template-columns:1fr;gap:2px}
    .foot-contact dt{margin-top:9px;font-size:13px}
    .foot-bottom{flex-direction:column;gap:6px}
    .foot-bottom .sep{display:inline}
  }
  /* 자주 묻는 질문 — 질문을 누르면 답변이 열립니다(브라우저 기본 details 기능, JS 없음) */
  .faq-item{border-top:1px solid #e3e8ec}
  .faq-item:last-of-type{border-bottom:1px solid #e3e8ec}
  .faq-item summary{list-style:none;cursor:pointer;position:relative;padding:18px 38px 18px 0}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary h3{display:inline;font-size:17px;font-weight:700}
  .faq-item summary h3::before{content:"Q. ";color:var(--star)}
  .faq-item summary:hover h3,.faq-item[open] summary h3{color:var(--sea)}
  .faq-item summary:focus-visible{outline:2px solid var(--star);outline-offset:2px;border-radius:4px}
  /* 오른쪽 화살표 — 열리면 뒤집힘 */
  .faq-item summary::after{content:"";position:absolute;right:10px;top:50%;width:9px;height:9px;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s}
  .faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
  .faq-item p{color:var(--muted);padding:0 38px 20px 0;margin-top:-4px}
  @media(max-width:600px){.hero h1{font-size:28px}.hero{padding:54px 0}nav a{margin-left:12px;font-size:14px}}
  /* 카카오 채널 플로팅 문의 버튼 */
  .kakao-fab{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:8px;
    background:#FEE500;color:#3a2b00;font-weight:700;font-size:15px;padding:12px 18px;border-radius:999px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);text-decoration:none}
  .kakao-fab:hover{filter:brightness(.97)}
  .kakao-fab .dot{font-size:18px}

/* ===================================================================
   하위 페이지용 스타일
   상품·안내 페이지가 여러 개로 나뉘면서 추가한 것들입니다.
   홈(index.html)에는 쓰이지 않습니다.
   =================================================================== */

/* 현재 위치 표시 (홈 > 프리다이빙 > 입문) */
.crumb{font-size:14px;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--sea)}
.crumb .sep{margin:0 7px;color:#b8c2cb}

/* 페이지 머리말 */
.page-head{padding:26px 0 34px}
.page-head .kicker{display:inline-block;background:var(--star);color:#3a2600;
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:14px}
.page-head h1{font-size:34px;line-height:1.35;margin-bottom:14px}
.page-head .lead{font-size:17px;color:var(--muted);max-width:var(--prose);margin-bottom:20px}
.page-head .price{font-size:24px;font-weight:700;color:var(--ink)}
.page-head .price .old{font-weight:400;color:var(--muted);text-decoration:line-through;
  margin-right:10px;font-size:16px}
.page-head .price .per{font-size:14px;font-weight:400;color:var(--muted);margin-left:8px}

/* 한눈에 보는 배지 줄 */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.facts span{background:var(--sea-light);color:var(--sea);font-weight:700;font-size:14px;
  padding:7px 14px;border-radius:999px}

/* 교육 정보 표 */
.spec{width:100%;border-collapse:collapse;margin-bottom:34px;font-size:15.5px}
.spec th{width:30%;text-align:left;vertical-align:top;color:var(--muted);font-weight:400;
  padding:14px 12px 14px 0;border-bottom:1px solid #e9e3d6}
.spec td{padding:14px 0;border-bottom:1px solid #e9e3d6}
.spec .sub{display:block;color:var(--muted);font-size:14px;margin-top:3px}

/* 세션(이론/제한수역/개방수역) 블록 */
.sess{border:1px solid #e9e3d6;border-radius:14px;overflow:hidden;margin-bottom:14px;background:#fff}
.sess>h3{background:var(--sea);color:#fff;font-size:16px;padding:12px 20px;margin:0}
.sess>div{padding:18px 20px;font-size:15.5px;color:var(--muted)}
.sess>div p{margin-bottom:10px}
.sess>div p:last-child{margin-bottom:0}
.sess>div strong{color:var(--ink)}

/* 포함 / 불포함 */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:34px}
.incl>div{border-radius:14px;padding:20px 22px;font-size:15.5px;align-self:start}
.incl .yes{border:2px solid var(--sea);background:#fff}
.incl .no{border:1px solid #e9e3d6;background:#faf8f4;color:var(--muted)}
.incl h3{font-size:15px;margin-bottom:10px;color:var(--sea)}
.incl .no h3{color:var(--muted)}
.incl ul{list-style:none}
.incl li{padding:3px 0}

/* 신청 버튼 묶음 — 상품 페이지의 "신청" 블록 (후기 폼의 .cta-box 와 다릅니다) */
.apply-box{background:var(--sea);color:#fff;border-radius:18px;padding:30px 32px;margin:10px 0 40px;
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;text-align:left}
.apply-box h2{color:#fff;font-size:21px;margin-bottom:6px}
.apply-box p{color:#b9c8d2;font-size:15px;max-width:520px}
.apply-box .btns{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
/* 기본 .btns 규칙의 flex:1 이 버튼 폭을 균등하게 줄여 글자가 삐져나옵니다.
   여기서는 글자 길이에 맞게 늘어나도록 되돌립니다. */
.apply-box .btns .btn{white-space:nowrap;flex:0 0 auto}

/* 다른 과정 보기 */
.siblings{border-top:1px solid #e9e3d6;padding-top:28px;margin-top:10px}
.siblings h2{font-size:18px;margin-bottom:16px}
.sib-list{display:flex;flex-wrap:wrap;gap:10px}
.sib-list a{border:1px solid #e9e3d6;background:#fff;border-radius:999px;
  padding:9px 18px;font-size:14.5px;color:var(--sea)}
.sib-list a:hover{border-color:var(--sea)}
.sib-list a[aria-current="page"]{background:var(--sea);color:#fff;border-color:var(--sea);font-weight:700}

@media (max-width:640px){
  .page-head h1{font-size:27px}
  .spec th{width:34%;font-size:14.5px}
  .apply-box{padding:24px 22px}
  /* 버튼이 화면 밖으로 나가지 않게 한 줄에 하나씩 */
  .apply-box .btns{width:100%;flex-direction:column}
  .apply-box .btns .btn{width:100%;text-align:center}
}

/* 점 목록 — 하위 페이지의 '이런 분께 맞습니다', '참가 조건' 등 */
ul.dots{list-style:none;max-width:var(--prose)}
ul.dots li{position:relative;padding:6px 0 6px 18px;color:var(--muted);font-size:15.5px}
ul.dots li::before{content:'';position:absolute;left:0;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--star)}
ul.dots li strong{color:var(--ink)}

/* ===== 교육 일정 (/calendar) — 구글 캘린더를 사이트 스타일로 ===== */
.cal-month{font-size:16px;color:var(--muted);font-weight:700;margin:30px 0 12px;
  padding-bottom:8px;border-bottom:1px solid #e9e3d6}
.cal-month:first-child{margin-top:0}
.cal-list{display:grid;gap:10px}
.cal-item{display:flex;gap:16px;background:#fff;border:1px solid #e9e3d6;border-radius:14px;padding:16px 18px}
.cal-date{flex-shrink:0;width:52px;text-align:center;background:var(--sea-light);border-radius:10px;
  padding:8px 0;align-self:flex-start}
.cal-date b{display:block;font-size:20px;color:var(--sea);line-height:1.2}
.cal-date span{font-size:12px;color:var(--muted)}
.cal-body h4{font-size:16.5px;color:var(--ink);margin-bottom:4px}
.cal-meta{color:var(--muted);font-size:14px}
.cal-loc::before{content:'·';margin:0 7px;color:#b8c2cb}
.cal-desc{color:var(--muted);font-size:14.5px;margin-top:6px}
.cal-empty{background:#fff;border:1px dashed var(--sea);border-radius:14px;padding:26px;text-align:center}
.cal-empty p{color:var(--muted);margin-bottom:14px}
.cal-foot{margin-top:18px;font-size:14.5px}

/* ===================================================================
   등장·hover 애니메이션
   ⚠️ 이 블록은 반드시 스타일시트 **맨 끝**에 두세요.
      .rv 와 .card 는 선택자 무게가 같아서, .rv 가 hover 규칙보다 앞에 오면
      hover 의 짧은 transition 이 등장 애니메이션을 덮어씁니다.
   =================================================================== */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);   /* 끝에서 길게 미끄러지듯 멈추는 곡선 */
  --dur-base:.4s;                          /* hover 등 짧은 반응 */
  --dur-slow:.8s;                          /* 등장 */
}

/* ── 카드 hover ────────────────────────────────────────────────── */
.card{overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(20,44,60,.14);border-color:#d9d2c2}
/* 카드를 꽉 채우는 사진만 확대 (강사 사진·다이빙풀 사진).
   .cert-logos 처럼 카드 안쪽 div 에 들어 있는 로고는 대상이 아닙니다. */
.card > img{transition:transform .7s var(--ease-out)}
.card:hover > img{transform:scale(1.07)}

/* 일정 카드·세션 블록도 같은 반응 */
.cal-item,.sess{transition:transform var(--dur-base) var(--ease-out),
                            box-shadow var(--dur-base) var(--ease-out)}
.cal-item:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,44,60,.10)}

/* ── 등장 ──────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(28px);
    transition:opacity var(--dur-slow) var(--ease-out),
               transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
/* 덩어리진 요소는 떠오르는 대신 살짝 작게 시작합니다.
   떠오르기와 확대를 겹치면 움직임이 두 배로 보여 산만합니다. */
.rv.rv-zoom{transform:scale(.96)}
.rv.rv-zoom.in{transform:none}

/* ── 첫 화면은 스크롤을 기다리지 않고 로드 즉시 재생 ──────────────
   순수 CSS 라 JS 와 무관하게 동작합니다. */
.hero .wrap > *,
.page-head .wrap > *{animation:rvUp var(--dur-slow) var(--ease-out) both}
.hero .wrap > *:nth-child(2),.page-head .wrap > *:nth-child(2){animation-delay:.08s}
.hero .wrap > *:nth-child(3),.page-head .wrap > *:nth-child(3){animation-delay:.16s}
.hero .wrap > *:nth-child(4),.page-head .wrap > *:nth-child(4){animation-delay:.24s}
.hero .wrap > *:nth-child(5),.page-head .wrap > *:nth-child(5){animation-delay:.32s}
@keyframes rvUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ── 스크롤 진행바 ─────────────────────────────────────────────────
   transition 을 걸지 않습니다. 매 프레임 직접 갱신하므로 전환 효과를 주면
   오히려 손가락보다 늦게 따라옵니다. */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9999;
       transform:scaleX(0);transform-origin:0 50%;will-change:transform;
       background:linear-gradient(90deg,var(--star),#8fd6d0);pointer-events:none}

/* ── 움직임 최소화 설정 존중 ──────────────────────────────────────
   멀미·전정기관 문제로 실제로 이 설정을 쓰는 분들이 있습니다. */
@media(prefers-reduced-motion:reduce){
  .rv,.rv.in,.rv.rv-zoom,.rv.rv-zoom.in{opacity:1;transform:none;transition:none}
  .hero .wrap > *,.page-head .wrap > *{animation:none}
  .card,.card > img,.cal-item,.sess{transition:none}
  .card:hover,.card:hover > img,.cal-item:hover{transform:none}
  .sprog{display:none}
}

/* ===== 수영복 페이지 — 디자인별 갤러리 ===== */
.suit{margin-bottom:48px}
.suit-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.suit-head h3{font-size:22px;color:var(--sea)}
.suit-head .price{font-weight:700;color:var(--ink)}
/* 세 장을 한 줄에. 왼쪽 큰 사진이 넓고, 높이는 셋 다 같게 맞춥니다. */
.suit-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;margin-top:18px}
.suit-grid figure{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #e9e3d6;
  aspect-ratio:1/1}
.suit-grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-out)}
.suit-grid figure:hover img{transform:scale(1.05)}
.suit-grid figcaption{position:absolute;left:-9999px}   /* 화면에는 숨기고 검색엔진만 읽습니다 */
.suit-buy{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.suit-buy .sizes{color:var(--muted);font-size:14.5px}
@media(max-width:720px){
  /* 좁은 화면에서는 큰 사진을 위에 한 줄로, 색상별 사진을 아래 두 칸으로 */
  .suit-grid{grid-template-columns:1fr 1fr}
  .suit-grid .wide{grid-column:span 2;aspect-ratio:4/3}
}

/* 수영복 — 할인 표시와 색상별 구매 버튼 */
.suit-head .price .old{font-weight:400;color:var(--muted);text-decoration:line-through;
  margin-right:8px;font-size:15px}
.suit-head .price .sale{display:inline-block;background:#b4462f;color:#fff;font-size:12px;
  font-weight:700;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:2px}
.suit-head .sizes{color:var(--muted);font-size:14.5px}
.suit-grid figure a{display:block;height:100%}