/* ===== S02 히어로 (R06: 크로스페이드 + 텍스트 스태거) ===== */
.hero{position:relative;height:100vh;min-height:700px;overflow:hidden;color:#fff}
.hero__swiper,.hero__swiper .swiper-wrapper,.hero__slide{height:100%}
.hero__swiper{position:absolute;inset:0}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.hero__inner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  text-align:center;width:90%;max-width:700px;z-index:1}
.hero__label{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--accent);margin-bottom:var(--sp-6)}
.hero__title{font:700 var(--fs-hero)/1.3 var(--font-sans);text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero__desc{margin-top:var(--sp-6);font-size:var(--fs-body);line-height:1.6;color:#EEE}

/* 텍스트는 개별 요소마다 트랜지션 — .hero__inner 전체에 걸면 스태거가 안 생김 */
.hero__label,.hero__title,.hero__desc{
  opacity:0;transform:translateY(28px);
  transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.swiper-slide-active .hero__label{opacity:1;transform:translateY(0);transition-delay:.10s}
.swiper-slide-active .hero__title{opacity:1;transform:translateY(0);transition-delay:.25s}
.swiper-slide-active .hero__desc{opacity:1;transform:translateY(0);transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .hero__label,.hero__title,.hero__desc{opacity:1;transform:none;transition:none}
}
.hero__quick{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);
  display:flex;gap:25px;z-index:1;width:auto}
.hero__quick li a{width:198px;height:119px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);color:#fff;
  font-size:var(--fs-body);font-weight:var(--fw-bold);text-align:center;
  transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.hero__quick li a:hover,.hero__quick li a:focus-visible{border-color:var(--accent);color:var(--accent)}
@media (hover:none){ .hero__quick li a:hover{border-color:rgba(255,255,255,.35);color:#fff} }
.hero__pager{position:absolute;right:44px;top:50%;
  transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:12px}
/* Swiper 기본 CSS(.swiper-pagination-bullets.swiper-pagination-horizontal
   { bottom:10px;left:0;width:100% })가 2클래스 명시도라 .hero__pager(1클래스)로는
   left/width/bottom을 못 이긴다 — 같은 명시도로 맞춰 캐스케이드 순서(이 파일이 나중 로드)로 이긴다 */
.hero__pager.swiper-pagination{left:auto;width:auto;bottom:auto;top:50%}
.hero__pager .swiper-pagination-bullet{width:12px;height:12px;background:#111;opacity:1;margin:0}
.hero__pager .swiper-pagination-bullet-active{background:var(--accent)}
.hero__pager.swiper-pagination-lock{display:flex}

@media (max-width:767px){
  .hero__title{font-size:32px}
  .hero__quick{flex-wrap:wrap;gap:12px;width:calc(100% - 48px);bottom:80px}
  .hero__quick li a{width:calc(50vw - 30px);height:88px}
}

/* ===== S03 이벤트 캐러셀 (R07: 다크 배경 + 중앙 강조(양옆 디밍) + fraction 페이저) ===== */
.m-event{position:relative;background:var(--surface-hero);padding:100px 0 96px}

.m-event__head{text-align:center}
.m-event__label{font:400 14px/1 var(--font-sans);color:var(--accent)}
.m-event__title{margin-top:20px;font:700 32px/1.2 var(--font-sans);color:var(--on-dark)}
.m-event__desc{margin-top:38px;font:400 14px/1.4 var(--font-sans);color:var(--on-dark-3)}

.m-event__more{display:inline-grid;place-items:center;margin-top:26px;
  width:125px;height:40px;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:0;
  font:400 14px/1 var(--font-sans);color:var(--on-dark);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.m-event__more:hover{background:var(--accent);color:#000;border-color:var(--accent)}

/* 슬라이더: position:relative 필수 — 화살표의 위치 기준점 */
.m-event__swiper{position:relative;margin-top:52px;overflow:hidden}
.m-event__swiper .swiper-slide{width:min(1016px,52vw);aspect-ratio:2/1;height:auto;
  /* 양옆 슬라이드는 어둡게 + 살짝 축소, 중앙만 원본 크기·밝기 */
  opacity:.32;transform:scale(.9);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.m-event__swiper .swiper-slide-active{opacity:1;transform:scale(1)}
.m-event__swiper .swiper-slide .ph,
.m-event__swiper .swiper-slide a{display:block;width:100%;height:100%;margin:0}
.m-event__swiper .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;margin:0}

/* 화살표: 슬라이더 박스 기준 좌우 끝 — 슬라이드 폭이 바뀌어도 재계산 불필요 */
.m-event__swiper .sw-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:var(--on-dark-2);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.m-event__swiper .sw-arrow:hover{background:rgba(255,255,255,.2);color:#fff}
.m-event-prev{left:32px}
.m-event-next{right:32px}

/* fraction 페이저 (현재/전체) */
.m-event__pager{margin-top:34px;text-align:center;
  font:500 14px/1 var(--font-sans);color:var(--on-dark-3)}
.m-event__pager .swiper-pagination-current{color:var(--accent);font-weight:700}

@media (max-width:1439px){
  .m-event__swiper .swiper-slide{width:60vw}
}
@media (max-width:1023px){
  .m-event{padding:72px 0 72px}
  .m-event__title{font-size:24px}
  .m-event__swiper{margin-top:40px}
  .m-event__swiper .swiper-slide{width:84vw}
  .m-event__swiper .sw-arrow.m-event-prev,
  .m-event__swiper .sw-arrow.m-event-next{display:none}
}
@media (max-width:767px){
  .m-event__swiper .swiper-slide{width:88vw}
}

/* ===== S04 제품/기술 — 지그재그 2단 + 중앙 온도계 레일 =====
   구 버전의 카드 겹침(margin-left:-80px)은 제거했다. 중앙에 레일이
   지나가려면 두 컬럼 사이에 실제 여백이 있어야 하기 때문이다. */
.m-intro{position:relative;background:#F1F5F5;color:var(--ink);padding:120px 0;
  /* 온도계 전용 색. 냉각 제품이라 --accent(#00FE00 형광 초록) 대신 하늘색 계열.
     밝은 배경으로 바뀌면서 기존 #38BDF8 은 대비가 모자라 한 단계 진하게 내렸다.
     glow 는 rgba() 에 넣어야 해서 RGB 성분을 따로 둔다 */
  --cool:#0EA5E9; --cool-ice:#7DD3FC; --cool-rgb:14,165,233}

/* 오로라 배경 — 우상단 블루, 좌하단 민트가 배경 밖으로 흘러나가는 형태.
   이미지 대신 radial-gradient 4겹으로 만든다(요청 페이지는 PNG 2장을 쓴다). */
.m-intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 34% at 100% 6%,  rgba(124,150,255,.40) 0%, rgba(124,150,255,0) 62%),
    radial-gradient(36% 26% at 90% 24%,  rgba(120,215,255,.36) 0%, rgba(120,215,255,0) 66%),
    radial-gradient(44% 32% at 0% 90%,   rgba(110,240,200,.30) 0%, rgba(110,240,200,0) 66%),
    radial-gradient(32% 24% at 16% 72%,  rgba(150,245,215,.22) 0%, rgba(150,245,215,0) 68%)}
/* 내용은 블롭 위로 */
.m-intro > .container{position:relative;z-index:1}

.m-intro__flow{position:relative;margin-top:var(--sp-20)}
.m-intro__list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:40px}

/* --- 온도계 레일 --- */
.m-intro__rail{position:absolute;left:50%;top:0;bottom:0;width:6px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.08);border-radius:3px;pointer-events:none}
/* 눈금 — 레일 오른쪽에 온도계 스케일 */
.m-intro__rail::after{content:"";position:absolute;left:calc(100% + 12px);top:0;bottom:0;width:12px;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.16) 0 1px, transparent 1px 28px)}

/* 채워지는 수은주 — 높이는 JS가 넣는 --intro-progress(0~1)로 결정 */
.m-intro__rail-fill{position:absolute;left:0;right:0;top:0;
  height:calc(var(--intro-progress,0) * 100%);
  border-radius:3px;
  background:linear-gradient(180deg,var(--cool-ice) 0%,var(--cool) 45%,var(--cool) 100%);
  box-shadow:0 0 14px rgba(var(--cool-rgb),.55)}

/* 수은주 끝점 --- 발광 도트 */
.m-intro__dot{position:absolute;left:50%;top:calc(var(--intro-progress,0) * 100%);
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--cool);
  box-shadow:0 0 0 4px rgba(var(--cool-rgb),.16),0 0 18px rgba(var(--cool-rgb),.8)}
.m-intro__ping{position:absolute;left:50%;top:50%;width:100%;height:100%;
  border-radius:50%;border:2px solid var(--cool);opacity:0;
  animation:introPing 2.4s var(--ease-out) infinite}
.m-intro__ping:nth-child(2){animation-delay:1.2s}
@keyframes introPing{
  from{opacity:.6;transform:translate(-50%,-50%) scale(1)}
  to  {opacity:0; transform:translate(-50%,-50%) scale(3.4)}
}

/* 구근 — 끝까지 내려오면 점등된다 */
.m-intro__bulb{position:absolute;left:50%;bottom:-16px;width:32px;height:32px;
  transform:translateX(-50%);border-radius:50%;
  background:rgba(0,0,0,.08);
  transition:background var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out)}
.m-intro__flow.is-full .m-intro__bulb{background:var(--cool);
  box-shadow:0 0 24px rgba(var(--cool-rgb),.8)}

/* --- 지그재그 항목 --- */
/* --p(0~1) 는 initIntroRail() 이 스크롤할 때마다 넣는다.
   0 = 100px 위에서 투명, 1 = 제자리에서 불투명. 즉 내려오면서 나타난다. */
.m-intro__item{display:grid;grid-template-columns:1fr 1fr;gap:160px;
  align-items:center;
  opacity:var(--p,1);
  transform:translateY(calc((var(--p,1) - 1) * 100px))}

.m-intro__img{border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid #E3E3E3;background:#fff}
.m-intro__img img{width:100%;height:100%;object-fit:cover;display:block}

.m-intro__item:nth-of-type(even) .m-intro__img{order:2}
.m-intro__item:nth-of-type(even) .m-intro__card{order:1;text-align:right}

.m-intro__num{display:block;margin-bottom:.2em;
  font-size:var(--fs-lead);font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--accent-dark)}
.m-intro__card h3{margin-bottom:.5em;font-size:42px;line-height:1.3}
.m-intro__card p{font-size:18px;line-height:1.8;color:var(--text-2)}
.m-intro__card .more{display:inline-flex;gap:8px;margin-top:var(--sp-6);
  border-bottom:1px solid var(--accent-dark);color:var(--accent-dark);font-weight:var(--fw-bold)}

@media (max-width:1023px){
  .m-intro__list{gap:60px}
  .m-intro__item{gap:80px}
  .m-intro__card h3{font-size:28px;margin-bottom:.1em}
  .m-intro__card p{font-size:16px}
  .m-intro__rail::after{display:none}
}
@media (max-width:767px){
  .m-intro{padding:80px 0}
  .m-intro__list{gap:40px}
  .m-intro__item{gap:30px}
  .m-intro__img{border-radius:12px}
  .m-intro__num{font-size:var(--fs-body)}
  .m-intro__card h3{font-size:var(--fs-h3)}
  .m-intro__card p{font-size:var(--fs-cap);line-height:1.5}
  .m-intro__rail{width:4px}
  .m-intro__dot{width:14px;height:14px;margin:-7px 0 0 -7px}
  .m-intro__bulb{width:24px;height:24px;bottom:-12px}
}

/* 무한 반복 파동은 reduced-motion 에서 꺼야 한다.
   전역 규칙(common.css)은 duration 을 .01ms 로 줄일 뿐이라 깜빡임이 된다. */
@media (prefers-reduced-motion:reduce){
  .m-intro__ping{display:none}
  .m-intro__item{opacity:1;transform:none}   /* 스크롤 연동은 transition 이 아니라 전역 규칙이 못 막는다 */
}

/* ===== S05 대표자 티저 =====
   인물 사진이라 박스 비율이 바뀌면 얼굴이 잘린다. 데스크톱 렌더 크기가
   280x510 이므로 모든 폭에서 aspect-ratio:28/51 을 유지하고, 크기만
   컨테이너 폭에 비례해 줄인다. 좌우 2단 구성도 모바일까지 그대로 간다. */
.m-ceo{position:relative;height:600px;overflow:hidden;background:#fff}
.m-ceo::before{content:"EUREKA IEUM";position:absolute;left:0;right:0;bottom:15%;
  text-align:center;font-size:clamp(30px,9vw,130px);font-weight:700;line-height:1;
  letter-spacing:.18em;color:#F2F2F2;z-index:0;white-space:nowrap;overflow:hidden}
.m-ceo__wrap{position:relative;height:100%;max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
.m-ceo__txt{position:relative;z-index:1;padding-top:100px;max-width:460px}
.m-ceo__txt .label{color:var(--accent-dark)}
.m-ceo__txt h2{margin-top:var(--sp-4);font-size:var(--fs-h2)}
.m-ceo__txt p{margin-top:var(--sp-5);font-size:var(--fs-body);line-height:1.8;color:var(--text-2)}
.m-ceo__img{position:absolute;right:4%;bottom:0;width:20%;max-width:280px;
  aspect-ratio:28/51;z-index:1}
.m-ceo__img img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* 태블릿 — 구성 그대로, 섹션 높이와 이미지만 폭에 비례해 축소 */
@media (max-width:1023px){
  .m-ceo{height:clamp(460px,54vw,600px)}
  .m-ceo__txt{padding-top:60px;max-width:56%}
  .m-ceo__img{width:24%;max-width:none}
}

/* 모바일 — 절대배치로는 이미지가 섹션 높이에 안 잡혀 잘린다.
   2단 그리드로 바꿔 두 칼럼이 함께 높이를 만들고 아래를 맞춘다. */
@media (max-width:767px){
  .m-ceo{height:auto;padding-top:56px}
  .m-ceo__wrap{display:grid;grid-template-columns:1fr 38%;gap:var(--sp-5);align-items:end;height:auto}
  .m-ceo__txt{padding-top:0;max-width:none}
  .m-ceo__txt p{font-size:var(--fs-cap);line-height:1.7}
  .m-ceo__img{position:relative;right:auto;bottom:auto;width:100%;max-width:none}
  .m-ceo__btn{margin-bottom:var(--sp-5)}
}

/* ===== S06 CTA 배너 (R05: 신규 전용 클래스 — page-product.css의 .cta-mid를
   재사용하지 않는다. index.html은 page-product.css를 로드하지 않으므로
   0부터 새로 작성. 다크 배경이라 --accent(#00FE00) 사용, --accent-dark 아님) ===== */
.m-cta{padding:120px 0;background:#1A1A1A;text-align:center}
.m-cta .container{display:flex;flex-direction:column;align-items:center}
.m-cta__title{font:700 20px/1.4 var(--font-sans);color:#FFFFFF}
.m-cta__desc{margin-top:40px;font:400 14px/1.8 var(--font-sans);color:#AAAAAA}
.m-cta__btn{display:inline-grid;place-items:center;margin-top:44px;
  width:140px;height:46px;background:transparent;border:1px solid var(--accent);border-radius:0;
  font:700 13px/1 var(--font-sans);color:var(--accent);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.m-cta__btn:hover{background:var(--accent);color:#000}
@media (hover:none){ .m-cta__btn:hover{background:transparent;color:var(--accent)} }
@media (max-width:1023px){
  .m-cta{padding:88px 0}
  .m-cta__desc{margin-top:32px}
  .m-cta__btn{margin-top:36px}
}
@media (max-width:767px){
  .m-cta{padding:64px 20px}
  .m-cta__title{font-size:17px;line-height:1.6}
  .m-cta__desc{margin-top:24px;font-size:13px}
  .m-cta__btn{margin-top:32px;width:128px;height:42px}
}

/* ===== S05 CEO 버튼 간격 ===== */
.m-ceo__btn{margin-top:var(--sp-8)}

/* ===== S07 리뷰 ===== */
.m-review{background:var(--gray-50);padding:100px 0 78px}
.m-review__head{margin-bottom:40px}
.m-review__head span{display:inline-block}
.m-review__head h2{margin-top:var(--sp-2);font-size:var(--fs-h2)}
.m-review__head p{margin-top:var(--sp-2);font-size:var(--fs-body);color:var(--text-2)}
.m-review__swiper .swiper-slide{width:418px;height:320px;background:#fff;padding:26px;
  display:flex;flex-direction:column}
.m-review__swiper .stars{color:var(--accent-dark);font-size:14px;letter-spacing:2px}
.m-review__swiper .review-body{margin-top:16px;font-size:14px;line-height:1.7;color:var(--text-2);
  flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.m-review__swiper footer{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:#888}
.m-review__swiper .avatar{width:24px;height:24px;border-radius:50%;background:#ddd;flex:none}
.m-review__pager{position:static;margin-top:78px;display:flex;justify-content:center;gap:20px}
.m-review__pager .swiper-pagination-bullet{width:12px;height:5px;border-radius:0;margin:0!important;
  background:var(--gray-200,#CFCFCF);opacity:1;transition:background .3s;cursor:pointer}
.m-review__pager .swiper-pagination-bullet-active{background:#777}
@media (max-width:767px){ .m-review__swiper .swiper-slide{width:84vw} }

/* ===== S08 공간 슬라이더 (40/60) ===== */
.m-space{display:grid;grid-template-columns:40% 60%;min-height:100vh}
.m-space__panel{background:var(--surface-dark);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:60px 8%}
.m-space__panel .label{color:var(--accent)}
.m-space__panel h2{margin-top:var(--sp-2);font-size:var(--fs-h2)}
.m-space__panel p{margin-top:var(--sp-4);font-size:var(--fs-body);color:#AAA}
.m-space__nav{display:flex;margin-top:var(--sp-20)}
.m-space__nav button{width:48px;height:48px;border:1px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;display:grid;place-items:center}
.m-space__nav button+button{border-left:0}
.m-space__media{position:relative;overflow:hidden}
.m-space__swiper,.m-space__swiper .swiper-slide{width:100%;height:100%}
.m-space__swiper .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;background:#EEE}
.m-space__swiper{position:absolute;inset:0}
@media (max-width:767px){ .m-space{grid-template-columns:1fr} .m-space__media{height:60vh} }

/* ===== S09 SNS 그리드 (실제 게시물 5개 + 빈 자리 3개 + 더 보기 1칸, 3×3=9칸) =====
   그리드 gap·컨테이너 폭(743px/92vw)·3열·호버줌(scale 1.05, .4s ease)·위치는 그대로 유지.
   타일 비율만 4:3(가로형) → 4:5(세로가 가로보다 조금 긴 형태)로 변경. 가로 폭은 그대로,
   세로만 aspect-ratio 로 늘어난다 */
.m-sns{padding:100px var(--sp-5);text-align:center;background:#fff}
.m-sns__id{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:30px;font-weight:700}
.m-sns__grid{margin:85px auto 0;width:743px;max-width:92vw;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.m-sns__item{aspect-ratio:4/5;overflow:hidden;position:relative}
.m-sns__item a{display:block;width:100%;height:100%}
.m-sns__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.m-sns__item:hover img{transform:scale(1.05)}
@media (hover:none){ .m-sns__item:hover img{transform:none} }

/* ---- 인스타그램 그라데이션 로고 (헤더 계정줄 · 더 보기 타일 공용) ---- */
.m-sns__ig-logo{width:32px;height:32px;flex:none;display:inline-block}
.m-sns__ig-logo svg{width:100%;height:100%;display:block}

/* ---- 더 보기 타일 (사진 아님 — 호버 줌 대신 배경 반전) ---- */
.m-sns__item--more{background:#F1F0EE;transition:background .2s var(--ease-out)}
.m-sns__item--more a{display:flex;flex-direction:column;align-items:center;justify-content:center}
.m-sns__more-text{margin-top:16px;font:600 15px/1.5 var(--font-sans);color:#1A1A1A;text-align:center;
  transition:color .2s var(--ease-out)}
.m-sns__item--more:hover{background:#1A1A1A}
.m-sns__item--more:hover .m-sns__more-text{color:#FFFFFF}

@media (max-width:767px){
  .m-sns__grid{grid-template-columns:repeat(2,1fr)}
  .m-sns__more-text{font-size:13px}
}