@charset "utf-8";
/* main — 메인 페이지에서 닥터스랩에 맞게 다시 잡은 것들.

   읽는 순서: theme.css -> base-index.css -> skin-index.css -> product.css -> main.css (맨 마지막) */

/* ---------- 히어로 문구 ----------
   닥터스랩 배너는 흰색·연한 하늘색이라 흰 글씨가 아예 안 보인다. 진한 색으로 돌린다. */
#sec01 .main-slide .description .status{ color:var(--subColor); font-size:var(--fs-sm); font-weight:700; letter-spacing:.24em; }
#sec01 .main-slide .description .tit{ color:var(--btnBlack); font-size:var(--fs-hero); line-height:1.24; margin-top:2.2rem; }
#sec01 .main-slide .description .des{ color:#3C5A68; font-size:var(--fs-body); line-height:1.75; margin-top:2.4rem; }

/* ---------- 히어로 등장 ----------
   제목은 줄 단위로 아래에서 밀려 올라오고, 나머지는 시간차를 두고 따라 올라온다.
   가속 곡선은 처음에 빠르게 나갔다가 부드럽게 멈추는 값(expo out)을 쓴다. */
#sec01 .main-slide .description .tit .l,
#sec01 .main-slide .description .des .d{
  display:block; overflow:hidden;          /* 올라오기 전 글자를 잘라 둔다 */
  /* overflow 로 자르면 한글 받침이 아슬아슬하게 잘린다. 아래를 조금 늘리고 그만큼 당긴다. */
  padding-bottom:.12em; margin-bottom:-.12em;
}
#sec01 .main-slide .description .tit .l > span,
#sec01 .main-slide .description .des .d > span{
  display:block; transform:translateY(115%);
}
#sec01 .main-slide .description .status{ transform:translateY(1.6rem); }

/* 활성 슬라이드에만 .fadeInUp 이 붙는다(js/index.js 의 revealCaption). */
@keyframes dlRise{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }
@keyframes dlFade{ from{ opacity:0; transform:translateY(1.6rem); } to{ opacity:1; transform:translateY(0); } }

#sec01 .main-slide .description .status.fadeInUp{
  animation:dlFade .7s cubic-bezier(.16,1,.3,1) .05s forwards;
}
#sec01 .main-slide .description .tit.fadeInUp{ opacity:1; animation:none; }
#sec01 .main-slide .description .tit.fadeInUp .l:nth-child(1) > span{
  animation:dlRise .95s cubic-bezier(.16,1,.3,1) .18s forwards;
}
#sec01 .main-slide .description .tit.fadeInUp .l:nth-child(2) > span{
  animation:dlRise .95s cubic-bezier(.16,1,.3,1) .30s forwards;
}
#sec01 .main-slide .description .tit.fadeInUp .l:nth-child(3) > span{
  animation:dlRise .95s cubic-bezier(.16,1,.3,1) .42s forwards;
}
#sec01 .main-slide .description .des.fadeInUp{ opacity:1; animation:none; }
#sec01 .main-slide .description .des.fadeInUp .d:nth-child(1) > span{
  animation:dlRise .9s cubic-bezier(.16,1,.3,1) .52s forwards;
}
#sec01 .main-slide .description .des.fadeInUp .d:nth-child(2) > span{
  animation:dlRise .9s cubic-bezier(.16,1,.3,1) .60s forwards;
}

/* 배경 사진도 같이 천천히 들어온다. 글자만 움직이면 화면이 멈춰 보인다. */
#sec01 .main-slide .main-slide__item .image img{ transform:scale(1.06); }
#sec01 .main-slide .swiper-slide-active .image img{
  animation:dlZoom 7s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes dlZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

/* 문구가 놓이는 왼쪽 아래가 배경과 섞이지 않도록 아주 옅은 흰 그라데이션을 깐다. */
#sec01 .main-slide .main-slide__item .image::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 38%, rgba(255,255,255,0) 62%);
}
#sec01 .main-slide .main-slide__item .description{ z-index:2; }

/* 페이지네이션 막대도 흰색이라 안 보인다. */
#sec01 .main-slide .swiper-pagination .swiper-pagination-bullet{ background:rgba(11,43,58,.22); opacity:1; }
#sec01 .main-slide .swiper-pagination .swiper-pagination-bullet-active{ background:var(--subColor); }

/* ---------- sec03 브랜드 영상 ---------- */
#sec03 .video-content video{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--white);
}
#sec03 .video__text a{ color:var(--btnBlack); }
#sec03 .video__text:hover a{ color:var(--subColor); }
/* 화살표 아이콘은 흰색(arrow_next_w.svg)이라 밝은 영상 위에서 사라진다. */
#sec03 .video__text .arrow{ background-image:url("../img/common/arrow_next_o.svg"); }

/* 영상 위 문구. 영상 속 용기에 로고가 없어 화면이 비어 보이던 자리를 채운다.
   영상이 밝은 하늘색이라 글자는 진한 색으로 두고, 뒤에 옅은 흰 판을 깐다. */
#sec03 .inner{ position:relative; }
#sec03 .video__copy{
  position:absolute; top:50%; left:8%; transform:translateY(-50%);
  z-index:10; text-align:left; max-width:52rem;
}
#sec03 .video__copy::before{
  content:''; position:absolute; inset:-6rem -8rem; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.72), rgba(255,255,255,0) 100%);
}
#sec03 .video__copy .eyebrow{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.34em; color:var(--subColor);
  margin-bottom:2.2rem;
}
#sec03 .video__copy .line{
  font-size:var(--fs-hero); font-weight:700; line-height:1.18; letter-spacing:-0.1rem;
  color:var(--btnBlack);
}
#sec03 .video__copy .sub{
  margin-top:2.6rem; font-size:var(--fs-body); line-height:1.75; color:#2E4B58;
}

/* ---------- sec04 · sec05 배너 글상자 ----------
   닥터스랩 배너는 한쪽이 비어 있는 밝은 사진이라, 아래 가운데에 두면
   위쪽 절반이 통째로 비어 보인다. 비어 있는 오른쪽으로 옮긴다. */
#sec04 .inner, #sec05 .inner{ position:relative; }
#sec04 .text-box, #sec05 .text-box{
  top:50%; bottom:auto; left:auto; right:7%;
  transform:translateY(-50%);
  text-align:left; align-items:flex-start; max-width:46rem; z-index:2;
}

/* 사진 오른쪽이 완전히 희지는 않아 글자가 묻힌다. 그쪽만 옅게 덮는다. */
#sec04 .inner::after, #sec05 .inner::after{
  content:''; position:absolute; inset:0 0 0 auto; width:58%; pointer-events:none;
  background:linear-gradient(to left, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,0) 100%);
}

#sec04 .text-box h2{ text-align:left; }
#sec04 .text-box h2{ font-size:var(--fs-sec); line-height:1.15; }
#sec04 .text-box p{ margin-top:2rem; font-size:var(--fs-body); line-height:1.75; color:#3C5A68; }
/* 더보기 버튼을 <button onclick> 에서 <a> 로 바꿨더니(Cmd·중클릭으로 새 탭이 열리게)
   게다가 <a> 는 인라인이라 위 여백도, padding 도 옆 글을 밀어내지 못해 본문과 겹쳤다.
   태그가 아니라 클래스로 잡고, 블록처럼 서게 한다. */
.button-type--1{ display:inline-flex; align-items:center; justify-content:center; }
#sec04 .text-box .button-type--1{ margin-top:3.2rem; }
/* sec05 는 글상자가 flex 라 gap 으로 이미 띄운다. margin 을 더하면 두 배가 된다. */
#sec05 .text-box .button-type--1{ margin-top:0; }
#sec04 .text-box .button-type--1 img,
#sec05 .text-box .button-type--1 img{ margin-left:2.3rem; }

/* ---------- sec05 슬로건 ----------
   못 받아 와 한글이 기기 기본 글꼴로 제각각 나온다. 그래서 실제 글자로 둔다. */
#sec05 .slogan{ text-align:left; }
#sec05 .slogan .en{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.34em;
  color:var(--subColor); margin-bottom:1.6rem;
}
#sec05 .slogan .ko{
  font-size:var(--fs-sec); font-weight:700; letter-spacing:-0.1rem; line-height:1.35;
  color:var(--btnBlack);
}

/* ---------- 버튼 ---------- */
.button-hover--orange:hover{ background-color:var(--subColor); color:var(--white); }

/* 히어로 알약은 휴대폰에서만 쓴다. PC 히어로는 원래 단추가 없는 구성이다. */
#sec01 .main-slide .description .hero-cta{ display:none; }

/* ---------- 좌하단 회전 배지 ---------- */
.round-text img{ width:11rem; height:11rem; display:block; }

/* ==================== 휴대폰 ====================
   좁은 화면에서는 사진이 납작해지고 글이 그 위에 겹친다.
   사진과 글을 위아래로 나눈다. */
@media (max-width:1023px){

  /* ---- 히어로 ----
     PC 는 가로로 긴 사진 위 왼쪽 빈 곳에 글을 얹는 구성이다.
     세로 화면에서는 그 사진이 어떻게 잘려도 제품이 화면 밖으로 밀려서,
     글은 사진 아래에 흰 카드로 띄워 사진 끝을 조금 덮는다.
     그냥 위아래로 붙여 놓으면 네모 두 개를 쌓아 둔 것처럼 밋밋하다. */
  #sec01{ aspect-ratio:auto; height:auto; padding-bottom:0; }
  #sec01 .main-slide,
  #sec01 .main-slide .swiper-slide{ height:auto; }
  #sec01 .main-slide .swiper-slide > a{ display:block; height:100%; }

  #sec01 .main-slide .main-slide__item .image{
    position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--gray1);
  }
  #sec01 .main-slide .main-slide__item picture{ display:block; width:100%; height:100%; }
  #sec01 .main-slide .main-slide__item .image img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 50%;
  }
  /* 사진 위에 깔던 흰 그라데이션은 글이 밖으로 나오면 필요 없다. */
  #sec01 .main-slide .main-slide__item .image::after{ content:none; }

  /* 글 카드 */
  #sec01 .main-slide .main-slide__item .description{
    position:relative; z-index:2; transform:none; left:auto; bottom:auto;
    /* 사진 끝을 3.2rem 만 덮는다. 더 올리면 제품 밑동이 가린다. */
    margin:-3.2rem var(--page-pad) 0;
    padding:2.8rem 2.2rem 3rem;
    background:var(--white); border-radius:1.6rem;
    box-shadow:0 1.2rem 3.2rem rgba(11,43,58,.10);
  }
  #sec01 .main-slide .description .status{ font-size:var(--fs-eyebrow); }
  #sec01 .main-slide .description .tit{ margin-top:1.2rem; }
  #sec01 .main-slide .description .des{ margin-top:1.4rem; }

  /* 어디로 가는 슬라이드인지 알려 주는 알약.
     슬라이드 전체가 <a> 라서 안에 버튼을 또 넣을 수 없다. 모양만 단추처럼 둔다. */
  #sec01 .main-slide .description .hero-cta{
    display:inline-flex; align-items:center; gap:.9rem;
    margin-top:2.4rem; padding:1.2rem 2.2rem;
    border-radius:3rem; background:var(--subColor); color:var(--white);
    font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; line-height:1;
  }
  #sec01 .main-slide .description .hero-cta .arr{
    width:1.6rem; height:1.1rem; background:currentColor; flex:none;
    -webkit-mask:url("../img/common/arrow_right.svg") no-repeat center / contain;
    mask:url("../img/common/arrow_right.svg") no-repeat center / contain;
  }

  /* 막대는 카드 아래로 내려 가운데에 둔다. 사진 위에 얹으면 제품과 겹친다. */
  #sec01 .main-slide .swiper-pagination{
    position:static; margin-top:2.6rem; width:auto;
    left:auto; right:auto; bottom:auto; transform:none; text-align:center;
  }

  /* ---- Best Item ----
     칸 수는 js/index.js 의 breakpoints 에서 정한다. 여기서는 글자만 줄인다. */
  #sec02{ padding:var(--sp-section) 0; }
  #sec02 .sec02-inner{ padding:0 var(--page-pad); }
  /* 좌우 화살표는 폭을 107% 로 잡아 화면 밖으로 나간다. 손가락으로 밀면 되므로 감춘다. */
  #sec02 .swiper-navigation{ display:none; }
  .prd-type--1 .product__item .thumbnail{ height:auto; aspect-ratio:1/1; }
  .prd-type--1 .product__item .thumbnail .product__image--item{
    position:absolute; inset:0; top:0; left:0; width:100%; height:100%;
    transform:none; object-fit:cover;
  }
  .prd-type--1 .product__item .description{ padding:1.6rem 1.4rem 2rem; }
  .prd-type--1 .product__item .product-info .name span,
  .product__item .description .name{ font-size:1.5rem !important; }
  .product__item .description .desc{ font-size:var(--fs-xs); }
  /* 메인 Best Item 카드만 글자를 가운데로 모아 두는데, 목록 페이지 카드는 왼쪽이다.
     같은 제품 카드가 화면마다 다르게 정렬돼 어긋나 보인다. 왼쪽으로 통일한다.
     좁은 카드에서 두세 줄짜리 한글이 가운데 정렬되면 줄 시작점이 매번 달라 읽기도 나쁘다. */
  .prd-type--1 .product__item .description,
  .prd-type--1 .product__item .description .name,
  .prd-type--1 .product__item .description .name span,
  .prd-type--1 .product__item .description .desc{ text-align:left; }
  .prd-type--1 .product__item .product-price{
    margin-top:1.2rem; flex-wrap:nowrap; justify-content:flex-start; white-space:nowrap;
  }

  /* 그 고정 높이를 풀었으니 여백을 직접 준다. */
  #sec02 .best-item{ margin-top:2.8rem; }

  /* 이름 칸을 두 줄로 잡아 두는 것은 목록 페이지에서 카드가 나란히 설 때 이야기다.
     메인은 옆으로 미는 슬라이드라 맞출 이웃이 없다. 빈 줄만 남아 카드가 헐거워진다. */
  .prd-type--1 .product__item .description .name{ min-height:0; }

  /* ---- 브랜드 영상 ---- */
  #sec03{ height:auto; }
  /* PC 규칙의 min-width:1920px 를 풀어야 한다. 안 풀면 폭이 1920 으로 남아
     3:4 비율 때문에 높이가 2560px 이 된다. */
  #sec03 .video-content{ min-width:0; padding-bottom:0; aspect-ratio:3/4; transform:none; left:0; }
  /* 세로 화면에서는 영상이 확대돼 용기에 찍힌 DOCTORS LAB 글자가 화면 한복판에 온다.
     그 자리에 같은 색 문구를 얹으면 두 글자가 겹쳐 읽히지 않는다.
     흰 막을 진하게 깔아 지우는 대신, 배경이 흐릿하게 비어 있는 위쪽으로 문구를 올린다. */
  #sec03 .video__copy{
    position:absolute; top:3.2rem; bottom:auto; left:var(--page-pad); right:var(--page-pad);
    transform:none; max-width:none;
  }
  /* 문구가 놓이는 위쪽만 옅게 덮는다.
     높이를 %로 주면 0 이 된다. 부모 .inner 의 height 가 100% 인데 #sec03 은
     휴대폰에서 height:auto 라 기준이 없기 때문이다. 위아래를 직접 물려 높이를 만든다. */
  #sec03 .inner::after{
    content:''; position:absolute; left:0; right:0; top:0; bottom:52%; z-index:5;
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,0) 100%);
  }
  #sec03 .video__copy::before{ content:none; }
  #sec03 .video__copy .sub{ margin-top:1.4rem; }
  #sec03 .video__text{ z-index:10; }
  /* 문구는 왼쪽 정렬인데 이 링크만 화면 한가운데라 기준선이 둘로 보인다. */
  #sec03 .video__text a{
    bottom:2.6rem; left:var(--page-pad); transform:none; font-size:1.6rem;
  }
  #sec03 .video-content__control{ height:100%; }

  /* ---- Mask · Brand Story ----
     글상자를 사진 위에서 떼어 내 아래로 내린다. */
  #sec04 .text-box, #sec05 .text-box{
    position:static; transform:none; max-width:none;
    padding:3rem var(--page-pad) 4rem; text-align:left;
  }
  #sec04 .inner::after, #sec05 .inner::after{ content:none; }
  #sec04 .inner > img, #sec05 .inner > img{ aspect-ratio:4/3; object-fit:cover; }
  #sec05 .text-box{ gap:2rem; align-items:flex-start; }
  #sec04 .text-box .button-type--1{ margin-top:2.4rem; }

  /* ---- 좌하단 회전 배지 ----
     화면이 좁아 본문과 겹친다. */
  .round-text{ display:none; }
}

/* ==================== 물방울 (js/motion-drops.js) ====================
   화면에 고정된 한 겹. 본문 위, 헤더(z-index:100) 아래에 뜬다.
   눌리지 않는다 — 아래 링크와 단추는 그대로 쓸 수 있다. */
.dl-drops{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:90;
}
/* WebGL 을 못 쓸 때의 대체: 같은 그림을 입힌 동그라미 */
.dl-drops--dom i{
  position:absolute; top:0; left:0; display:block; border-radius:50%;
  background-size:cover; opacity:0; will-change:transform;
  -webkit-backdrop-filter:blur(3px) brightness(1.06); backdrop-filter:blur(3px) brightness(1.06);
  filter:drop-shadow(.6rem 1rem 1.4rem rgba(15,30,40,.14));
}
@media (prefers-reduced-motion: reduce){ .dl-drops{ display:none; } }
@media print{ .dl-drops{ display:none; } }