/* =========================
   Fade Banner (FIX VERSION)
========================= */

.fadeBanner{
  width: 100%;
  margin: 24px 0 0;
}


.fadeBanner__viewport {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1200 / 522; /* ✅ 핵심 */
  margin: 0 auto;
  overflow: hidden;
}

/* ✅ 슬라이드는 겹쳐져야 함 */
.fadeBanner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

/* ✅ 활성 슬라이드만 보이게 */
.fadeBanner__slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* 이미지 꽉 차게 */
.fadeBanner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dots (인디케이터) - 무조건 보이게 */
.fadeBanner__dots{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 50;                 /* ✅ 슬라이드 위로 */
  display: flex;
  gap: 10px;
  padding: 8px 12px;           /* ✅ 배경 패드 */
  border-radius: 999px;
  background: rgba(0,0,0,0.25);/* ✅ 어디서든 보임 */
  backdrop-filter: blur(6px);
}

/* dot 버튼 */
.fadeBanner__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
}
.fadeBanner__dot.is-active{
  width: 26px;
  background: rgba(255,255,255,0.95);
}

/* =========================
   Fade Banner - Mobile Image Switch
========================= */
@media (max-width: 768px) {

  /* 첫 번째 슬라이드 */
  .fadeBanner__slide:nth-child(1) img {
    content: url("/img/adv-img/banner-1m.jpg");
  }

  /* 두 번째 슬라이드 */
  .fadeBanner__slide:nth-child(2) img {
    content: url("/img/adv-img/banner-2m.jpg");
  }
  /* 세 번째 슬라이드 */
  .fadeBanner__slide:nth-child(3) img {
    content: url("/img/adv-img/banner-3m.jpg");
  }
}

@media (max-width: 768px) {
  .fadeBanner__viewport {
    aspect-ratio: 4 / 5;
  }

  .fadeBanner__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 768px) {

  /* 슬라이드 배너를 화면 전체 폭으로 */
  .fadeBanner {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }

  /* 혹시 내부에서 여백 잡고 있으면 제거 */
  .fadeBanner__inner,
  .fadeBanner__viewport {
    padding-left: 0;
    padding-right: 0;
    aspect-ratio: 720 / 1000; 
    overflow: hidden;
  }

  /* 이미지가 좌우 꽉 차게 */
  .fadeBanner img {
    width: 100%;
    height: auto;
    display: block;
  }
}


:root{
  --point:#00A9C8;
  --line:#E6EAF0;
  --text:#111;
  --muted:#6B7280;
  --bg:#fff;
}

body{margin:0;font-family:Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;background:#fff;color:var(--text);}
.equip-page{max-width:1200px;margin:0 auto;padding:40px 16px 60px;  padding-top: 100px;}
.equip-header{text-align:center;margin:0 0 40px;}
.equip-header__eyebrow{margin:0 0 6px;color:#6b7280; font-weight:500; font-size:25px;}
.equip-header__title{margin:0;font-size:50px;font-weight:700;letter-spacing:-.02em; margin-top: 16px;}

.equip-sec{padding:90px 30 0;}
.equip-sec__title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:25px;font-weight:900; margin-top: 80px;}
.equip-sec__bar{width:3px;height:18px;background:var(--point);border-radius:2px;}

.equip-grid{
  display:grid;
  align-items: start;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
@media (max-width: 1200px){ .equip-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (max-width: 768px){ .equip-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }

.equip-card{
  appearance:none;border:0;padding:0;background:var(--bg);
  text-align:inherit;cursor:pointer;
  height: auto !important;
  min-height: 0 !important;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 28px 24px 24px; /* ⬅ 상 / 좌우 / 하 */
}


.equip-thumb{
  position: relative;
  height: 300px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .equip-thumb{
    height: 220px;      /* ✅ 모바일에서 세로 확 줄어듦 */
    padding: 16px 12px;
  }
}

/* 장비 이미지 공통 */
.equip-thumb > img:not(.equip-logo){
  width: 100%;          /* ✅ 카드 가로폭 = 이미지 가로폭 */
  height: auto;         /* ✅ 세로는 비율에 맡김 */
  max-height: 100%;
  object-fit: unset;   /* ❌ contain / cover 제거 */
  display: block;
}


.equip-meta{
  margin-top: 18px;
}

.equip-hover{
  position:absolute;inset:0;
  background:rgba(114,201,217,.75);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}
.equip-card:hover .equip-hover{opacity:1;transform:translateY(0);}
.equip-hover__inner{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;letter-spacing:.08em;}
.equip-zoom svg{fill:#fff;}
.equip-more{font-size:22px;}

.equip-meta{padding:22px 10px 30px;text-align:center;}
.equip-meta__sub{margin:0 0 6px;font-size:16px;font-weight:400;color:var(--point); margin-bottom: 8px;}
.equip-meta__name{margin:0;font-size:22px;font-weight:500;}

@media (max-width: 768px) {
  .equip-meta_sub {
    font-size: 10px;   /* 기존보다 작게 */
    line-height: 1.3;  /* 줄 간격도 살짝 타이트 */
  }
  
}


/* 썸네일에서 넘치는 부분 숨겨야 줌이 깔끔함 */
.equip-thumb{
  overflow:hidden;
}

/* 부드러운 줌 */
.equip-thumb img{
  transform: scale(1);
  transition: transform .35s ease;
  will-change: transform;
}

/* 호버 시 이미지 확대 */
.equip-card:hover .equip-thumb img,
.equip-card:focus-visible .equip-thumb img{
  transform: scale(1.06);
}

.equip-thumb img{
  transition: transform .35s ease, filter .35s ease;
}

.equip-card:hover .equip-thumb img{
  filter: brightness(1.03);
}

/* 썸네일 영역 기준 */
.equip-thumb{
  position: relative;
  height: 400px;         /* 너가 쓰던 값 유지 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

/* 장비 사진만 크게(로고는 절대 여기 영향 받으면 안됨) */
.equip-photo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 공통 제조사 로고 */
.equip-logo{
  position: absolute;
  top: 10px;
  right: 10px;

  height: 30px;
  width: auto;
  max-width: 140px;

  z-index: 8;
  pointer-events: none;

  opacity: .95;

  /* ❌ 배경 제거 */
  background: none;
  padding: 0;
  border-radius: 0;

  object-fit: contain;
  display: block;
}


/* 제조사별 미세 보정 */
.equip-logo--zeiss{
  height: 43px;
}

.equip-logo--schwind{
  height: 30px;
}

.equip-logo--alcon{
  height: 26px;
}

.equip-logo--jj{
  height: 30px;
}
/* =========================
   모바일 보정
========================= */
@media (max-width: 768px){
  .equip-thumb .equip-logo.equip-logo--zeiss{
    height: 30px !important;
    transform: scale(1.35);
    transform-origin: top right;
    max-width: none !important;
  }
}


/* hover 레이어가 로고를 덮지 않게 */
.equip-hover{ z-index: 5; }





/* =========================
   Equip Modal (Animated + XD ratio)
   - blind backdrop down
   - panel scale-in
   - not too big on screen
========================= */

.equipModal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* display 토글 금지 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .2s ease, visibility 0s linear .9s;
}

.equipModal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity .2s ease;
}

/* ✅ blind 내려오는 backdrop */
.equipModal__backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* 내려오는 느낌 = translateY */
  transform: translateY(-100%);
  opacity: 0;

  transition:
    transform 1100ms cubic-bezier(.16,1,.3,1),
    opacity 900ms ease;
}

.equipModal.is-open .equipModal__backdrop{
  transform: translateY(0);
  opacity: 1;
}


/* ✅ panel : 처음 작게 -> 커짐 */
.equipModal__dialog{
  z-index: 1; 
  position: absolute;
  left: 50%;
  top: 50%;
  
  /* 화면에서 너무 꽉 차지 않게 "여유" 줌 */
  width: min(900px, calc(100vw - 120px));
  max-height: calc(100vh - 140px);
  aspect-ratio: 900 / 608;

  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  display: flex;
  flex-direction: column;

  /* 애니메이션 초기값 */
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 520ms ease;
  transition-delay: 180ms; /* backdrop 먼저 */
}

.equipModal.is-open .equipModal__dialog{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* header */
.equipModal__header{
  background: var(--point, #00A9C8);
  color:#fff;
  padding: 30px 40px 30px;
  position: relative;
  flex: 0 0 auto;
}

.equipModal__title{
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25; 
}

.equipModal__sub{
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  opacity: .95;
  display: none !important;
}

/* close */
.equipModal__close{
  position:absolute;
  right: 14px;
  top: 12px;
  width: 46px;
  height: 46px;
  border:0;
  background: transparent;
  color:#fff;
  font-size: 34px;
  line-height: 1;
  cursor:pointer;
  opacity:.9;
  border-radius: 12px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .2s ease, opacity .2s ease;
}
.equipModal__close:hover{
  transform: rotate(180deg);
  background: rgba(255,255,255,.14);
  opacity: 1;
}
.equipModal__close:active{
  transform: rotate(180deg) scale(.95);
}

/* ✅ body만 스크롤 */
.equipModal__body{
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px 28px 28px;
}

/* content */
.equipModal__visual{
  display: grid;
  place-items: center;
  margin: 8px 0 18px;
}
.equipModal__visual img{
  width: 100%;
  max-width: 720px;
  max-height: 360px;
  object-fit: contain;
  display:block;
}

.equipModal__headline{
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  color: var(--point, #00A9C8);
  letter-spacing: -0.02em;
}

.equipModal__bullets{
  margin: 0;
  padding-left: 18px;
}
.equipModal__bullets li{
  margin: 8px 0;
  font-size: 18px;
  line-height: 1.6;
  color:#222;
}

/* 모바일 */
@media (max-width: 768px){
  .equipModal__dialog{
    width: calc(100vw - 24px);
    max-height: calc(100vh - 48px);
    aspect-ratio: auto; /* 모바일은 높이 대응 우선 */
    border-radius: 18px;
  }
  .equipModal__header{ padding: 18px 18px 14px; }
  .equipModal__title{ font-size: 22px; }
  .equipModal__body{ padding: 16px 18px 20px; }
  .equipModal__visual img{ max-width: 100%; max-height: 240px; }
  .equipModal__headline{ font-size: 20px; }
  .equipModal__bullets li{ font-size: 16px; }
}


/* 블라인드 */
.modal-dim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .35s ease, visibility 0s linear .35s;
  z-index: 999;
}

.modal-dim.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity .35s ease;
}




/* 설명 문단 */
.equipModal__descText{
  margin: 0 0 18px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #585858;
}

/* 스펙 리스트 (1번 이미지 느낌) */
.equipModal__spec{
  list-style: none;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid #eaeaea; /* 숨 쉴 구분선 */
}
.equipModal__spec li{
  padding: 10px 0;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}
.equipModal__spec li:last-child{
  border-bottom: 0;
}

/* 스펙을 한 줄로 */
.equipModal__spec{
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* 모바일 대비 */
}


/* 팝업 설명 본문 텍스트 컬러 */
.equipModal__descText,
.equipModal__content > p {
  color: #707070;
}

.equipModal__spec li{
  border: 0;
  padding: 0;
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .equip-header {
    padding-top: 24px;   /* 상단 여백 필요하면 같이 */
    padding-bottom: 12px;
  }

  .equip-header__eyebrow{
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 10px;    /* eyebrow와 타이틀 간격 */
  }

  .equip-header__title{
    font-size: 34px;     /* 여기로 크기 조절 */
    font-weight: 600;    /* 두께 조절 */
    line-height: 1.12;   /* 줄바꿈될 때 답답함 방지 */
    letter-spacing: -0.02em;
    margin: 0;
    word-break: keep-all; /* 한글 단어 쪼개짐 방지 */
  }
}
@media (max-width: 768px) {
  .equipModal__headline{
    line-height: 1.35;   /* 행간 */
    margin: 14px 0 12px; /* 위아래 간격 */
    word-break: keep-all;
  }
}

/* 모바일에서만: 팝업 내부 스크롤 되게 */
@media (max-width: 768px) {

  /* 모달을 화면에 고정 */
  .equipModal{
    position: fixed;
    inset: 0;
  }

  /* 다이얼로그 높이 제한 (핵심) */
  .equipModal__dialog{
    max-height: calc(100vh - 20px);
    overflow: hidden; /* 스크롤은 body에서 */
  }

  /* 헤더는 고정, 내용만 스크롤 */
  .equipModal__body{
    max-height: calc(100vh - 120px); /* 헤더 높이에 따라 120~160 조절 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS */
  }

  /* 이미지가 너무 커서 스크롤을 막는 경우 방지 */
  .equipModal__visual img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* (선택) 모바일에서 팝업 상단 타이틀 과대 방지 */
  .equipModal__title{
    font-size: 20px;
    line-height: 1.2;
  }
}

/* ✅ 팝업 스크롤: PC/모바일 공통 */
.equipModal__body{
  max-height: calc(100vh - 140px); /* 헤더 높이 감안 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ✅ 모바일에서 조금 더 여유 */
@media (max-width: 768px){
  .equipModal__body{
    max-height: calc(100vh - 120px);
  }
}





/* ✅ 카드 세로 길이(회색 테두리 높이) 줄이는 최종 오버라이드 */
.equip-grid{ align-items: start !important; }

.equip-card{
  height:auto !important;
  min-height:0 !important;
}

/* ✅ 여기(thumb)가 카드 높이의 90%를 결정함 */
.equip-thumb{
  height: 300px !important;   /* 260~320 사이에서 취향대로 */
  padding: 18px 18px 0 !important; /* 상/좌우 여백 */
  box-sizing: border-box !important;
  overflow: hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 장비 이미지가 thumb 안에서만 맞춰지게 */
.equip-thumb > img:not(.equip-logo){
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  display:block !important;
}

/* 아래 텍스트 영역도 살짝 압축 */
.equip-meta{ padding: 14px 0 18px !important; }
.equip-meta__sub{ margin: 0 0 6px !important; }
.equip-meta__name{ margin: 0 !important; }

/* =========================
   MOBILE FIX (<=768px)
   ========================= */
@media (max-width: 768px){

  /* 카드 전체 여백/높이 압축 */
  .equip-card{
    padding: 0;                 /* 혹시 패딩이 있으면 줄여 */
  }

  /* 이미지 영역: 고정 높이 제거 + 더 낮게 */
  .equip-thumb{
    height: 240px !important;   /* ✅ 모바일에서만 낮게 (원하면 220~260 조절) */
    padding: 18px 14px 10px;    /* ✅ 상하좌우 여백 확보 */
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;            /* 로고/hover 포함 영역 정리 */
    position:relative;
  }

  /* 장비 이미지: 절대 cover 쓰지 말고 contain */
  .equip-thumb > img:not(.equip-logo){
    width: 100%;
    height: 100%;
    object-fit: contain;        /* ✅ 안 짤리게 */
    object-position: center;
    display:block;
  }

  /* 하단 텍스트 영역 압축 */
  .equip-meta{
    padding: 12px 10px 16px;
  }

  .equip-meta__sub{
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  /* VISUMAX 800/500이 줄바꿈으로 찢어지는거 방지 */
  .equip-meta__name{
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;        /* ✅ VISUMAX® 8 / 00 이런식으로 찢어지는거 막음 */
    letter-spacing: -0.2px;
  }
}
@media (max-width: 768px){
  .equip-logo{
    position:absolute;
    top:10px;
    right:10px;
    height:20px;          /* ✅ 모바일에선 살짝 더 크게 */
    width:auto;
    max-width: 90px;      /* 너무 긴 로고 대비 */
    background: none !important; /* ✅ 흰 바 생기면 이게 먹여 */
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1;
    pointer-events:none;
    z-index: 3;
  }
}
@media (max-width: 768px){
  .equip-hover{ display:none; }
}


.equip-thumb{ position:relative; overflow:hidden; }

/* 우측 상단 레이블 */
.equip-labels{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;

  margin:0;
  padding:0;
  list-style:none;

  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 글자: 작게 + 얇게 */
.equip-label{
  position:relative;
  padding-left:16px;      /* ● 자리 */
  font-size:13px;
  font-weight:500;
  line-height:1.1;
  color:#111;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* ● 점 자동 생성 */
.equip-label::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ccc;
}

/* 컬러(너가 지정한 값) */
.equip-label--vision::before{   background:#FF0088; } /* 시력교정 */
.equip-label--cataract::before{ background:#FFA200; } /* 백내장·망막 */
.equip-label--glaucoma::before{ background:#72D994; } /* 녹내장 */
.equip-label--dryeye::before{   background:#72C9D9; } /* 안구건조증 */
.equip-label--dream::before{    background:#843EFF; } /* 드림렌즈 */

@media (max-width:768px){
  .equip-labels{ top:10px; right:10px; gap:5px; }
  .equip-label{ font-size:12px; padding-left:14px; }
  .equip-label::before{ width:9px; height:9px; }
}