/* ===== RESET & VARIABLES ===== */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --point:#A4D70E;
  --gray-bg:#F4F5F0;
  --gray-light:#F7F7F5;
  --text:#2a2a2a;
  --sub:#888;
  --line:#e5e5e5;
}

body { 
  font-family:'Noto Sans KR','Inter',sans-serif; 
  color:var(--text); 
  background:#fff; 
  line-height:1.6; 
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* HEADER */
.header {
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.3s;
}
.header-green {
  position:absolute;
  left:0; top:0;
  width:24%;
  height:100%;
  background:var(--point);
  z-index:0;
}
.header-inner {
  position:relative;
  z-index:1;
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 60px;
}
.logo {
  font-family:'Cormorant Garamond',serif;
  font-size:28px; font-weight:500; font-style:italic;
  letter-spacing:0.5px;
}
.logo img {
  height:32px;
  width:auto;
  display:block;
}
.gnb { display:flex; gap:48px; }
.gnb a {
  font-size:14px; font-weight:500; letter-spacing:1px;
  transition:color 0.2s;
}
.gnb a:hover { color:var(--point); }
.util { display:flex; gap:24px; align-items:center; font-size:13px; color:#555; }
.util .cart { display:flex; align-items:center; gap:6px; }
.util .cart .num {
  background:var(--text); color:#fff;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
}

/* HERO */

.hero {
  position:relative;
  width:100%;
  height:820px;
  background:#fafafa;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:0;
}
.hero-bg-green {
  position:absolute;
  left:0; top:0;
  width:24%;
  height:100%;
  background:var(--point);
  z-index:1;
}

.hero-text {
  position:absolute;
  left:14%;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
}

.hero-title {
  font-family:'Newsreader', serif;
  font-size:120px;
  font-weight:400;
  line-height:1;
  letter-spacing:-3px;
  color:var(--text);
  white-space:nowrap;
}
.hero-title .it { font-style:italic; font-weight:400; color:#888; }
.hero-title .dot { color:var(--point); }
.hero-star {
  font-size:20px;
  color:#fff;
  margin-bottom:30px;
  text-shadow:0 0 1px #999;
}
.hero-sub {
  margin-top:36px;
  font-size:17px;
  color:#2a2a2a;
  line-height:1.8;
  font-family:'Noto Sans KR', sans-serif;
}

.deco-circle-line {
  position:absolute;
  left:38%;
  top:18%;
  width:180px;
  height:180px;
  border:2px solid var(--point);
  border-radius:50%;
  z-index:6;
}

.slide-wrap {
  position:absolute;
  inset:0;
  z-index:3;
}
.slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.slide.active { opacity:1; }

.main-img {
  position:absolute;
  left:46%;
  top:10%;
  width:30%;
  height:80%;
  background-size:cover;
  background-position:center;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}
.sub-img {
  position:absolute;
  left:72%;
  top:38%;
  width:22%;
  height:56%;
  background-size:cover;
  background-position:center;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
  z-index:4;
}

.deco-circle-fill {
  position:absolute;
  right:6%;
  bottom:10%;
  width:90px;
  height:90px;
  background:var(--point);
  border-radius:50%;
  z-index:5;
}
.deco-half-circle {
  position:absolute;
  right:-80px;
  top:-80px;
  width:200px;
  height:200px;
  background:var(--point);
  border-radius:50%;
  z-index:2;
}

.slide, .slide-s {
  opacity:0;
  transition:opacity 1.2s ease;
}
.slide.active, .slide-s.active { opacity:1; }



/* ===== ROLLING BANNER ===== */
.rolling {
  background:#2a2a2a; color:#fff; overflow:hidden;
  padding:18px 0; border-top:1px solid #000;
}
.rolling-track {
  display:flex; gap:60px; width:max-content;
  animation:roll 40s linear infinite;
}
.rolling-item {
  display:flex; align-items:center; gap:60px;
  font-size:13px; letter-spacing:2px; white-space:nowrap;
  color:#eee;
}
.rolling-item .pt { color:var(--point); font-weight:600; }
.rolling-item::after {
  content:'✦'; color:var(--point); font-size:11px;
}
@keyframes roll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ===== SECTION COMMON ===== */
section { padding:140px 60px; max-width:1400px; margin:0 auto; }
.hero {
  max-width:none;
  margin:0;
  padding:0;
  background: linear-gradient(to right, #D4E89A 0%, #D4E89A 21.99%, #FFFFFF 22%);
}

.section-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:80px;
}
.section-title {
  font-family:'Cormorant Garamond',serif;
  font-size:100px; font-weight:500; line-height:1;
  letter-spacing:-4px;
}
.section-title .pt { color:var(--point); font-style:italic; }
.section-desc {
  text-align:right; font-size:14px; color:var(--sub);
  line-height:1.8; max-width:300px;
}

/* ===== BEST ===== */
.best {
  background:#fff;
  display:grid;
  grid-template-columns:140px 1fr;
  gap:60px;
  align-items:start;
  padding-bottom: 60px;
}

.best .section-head {
  flex-direction:column;
  margin-bottom:0;
}

.best .section-title {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:100px;
  line-height:1;
  white-space:nowrap;
}

.best .section-desc {
  display:none;
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:60px 32px;
}
.product { 
  position:relative;
  cursor:pointer;
  text-decoration:none; 
  color:inherit; 
  display:block; 
}
.product-img {
  aspect-ratio:3/4; background:var(--gray-bg);
  margin-bottom:20px; overflow:hidden; position:relative;
}
.product-img::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(190,253,2,0) 0%, rgba(190,253,2,0.15) 100%);
  opacity:0; transition:opacity 0.4s;
}
.product:hover .product-img::before { opacity:1; }
.product-num {
  font-family:'Cormorant Garamond',serif;
  font-size:13px; color:var(--sub); letter-spacing:2px;
}
.product-name {
  font-size:14px; font-weight:500; margin:6px 0 4px;
  letter-spacing:0.5px;
}
.product-price { font-size:13px; color:#555; }

/* product placeholder bg */
.pi1  { background: url('images/pi1.png')  center/cover no-repeat; }
.pi2  { background: url('images/pi2.png')  center/cover no-repeat; }
.pi3  { background: url('images/pi3.png')  center/cover no-repeat; }
.pi4  { background: url('images/pi4.png')  center/cover no-repeat; }
.pi5  { background: url('images/pi5.png')  center/cover no-repeat; }
.pi6  { background: url('images/pi6.png')  center/cover no-repeat; }
.pi7  { background: url('images/pi7.png')  center/cover no-repeat; }
.pi8  { background: url('images/pi8.png')  center/cover no-repeat; }
.pi9  { background: url('images/pi9.png')  center/cover no-repeat; }
.pi10 { background: url('images/pi10.png') center/cover no-repeat; }
.pi11 { background: url('images/pi11.png') center/cover no-repeat; }
.pi12 { background: url('images/pi12.png') center/cover no-repeat; }
.pi13 { background: url('images/pi13.png') center/cover no-repeat; }
.pi14 { background: url('images/pi14.png') center/cover no-repeat; }
.pi15 { background: url('images/pi15.png') center/cover no-repeat; }
.pi16 { background: url('images/pi16.png') center/cover no-repeat; }
.pi17 { background: url('images/pi17.png') center/cover no-repeat; }
.pi18 { background: url('images/pi18.png') center/cover no-repeat; }
.pi19 { background: url('images/pi19.png') center/cover no-repeat; }
.pi20 { background: url('images/pi20.png') center/cover no-repeat; }
.pi21 { background: url('images/pi21.png') center/cover no-repeat; }
.pi22 { background: url('images/pi22.png') center/cover no-repeat; }
.pi23 { background: url('images/pi23.png') center/cover no-repeat; }
.pi24 { background: url('images/pi24.png') center/cover no-repeat; }

/* ===== STYLE PROPOSAL ===== */
/* 모어브가 제안하는 나를 위한 스타일 → 자체제작 배너로 교체 */
.proposal {
  position: relative;
  width: 100%;
  max-width: none;
  height: 600px;
  padding: 0;
  background: url('images/style-banner.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0 60px;
  overflow: hidden;
}

/* 아래쪽으로 내린 연두 반투명 블러 - 애니메이션 효과 */
.proposal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  height: 240px;
  width: 0; /* 초기 너비 0 */
  background: rgba(164, 215, 14, 0.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
  transition: width 2.5s cubic-bezier(0.65, 0, 0.35, 1); /* 극도로 여유로운 속도로 펼쳐짐 */
}

.proposal.visible::before {
  width: 100%;
}

/* 텍스트 박스 - 띠가 다 그려진 후 등장 */
.proposal-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #2a2a2a;
  transform: translateY(48px);
  opacity: 0;
  transition: opacity 1.2s ease 2.5s; /* 띠가 완전히 다 그려진 후 서서히 등장 */
}

.proposal.visible .proposal-text {
  opacity: 1;
}

.proposal-title {
  font-family: 'Newsreader', serif;
  font-size: 88px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 24px;
}

.proposal-sub {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.7;
}

.proposal-line {
  width: 40px;
  height: 1px;
  background: #2a2a2a;
  margin: 28px auto 0;
}

/* ===== NEW ARRIVALS ===== */
.new { background:#fff; padding-top: 80px; }
.new-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:60px 32px;
}
.new .product-img { aspect-ratio:3/4; }
.new-tag {
  display:inline-block; font-size:11px; letter-spacing:2px;
  padding:4px 10px; background:var(--point); color:var(--text);
  margin-bottom:8px; font-weight:600;
}

/* ===== COLLECTION ===== */
.collection { background:var(--gray-light); padding:140px 60px; }
.collection-inner { max-width:1400px; margin:0 auto; }
.col-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,300px);
  gap:20px;
}
.col-item { background:var(--gray-bg); overflow:hidden; cursor:pointer; position:relative; }
.col-item.big { grid-row:span 2; }
.ci1{background:url('images/col1.png') center/cover no-repeat;}
.ci2{background:url('images/col2.png') center/cover no-repeat;}
.ci3{background:url('images/col3.png') center/cover no-repeat;}
.ci4{background:url('images/col4.png') center/cover no-repeat;}
.ci5{background:url('images/col5.png') center/cover no-repeat;}
.ci6{background:url('images/col6.png') center/cover no-repeat;}
.ci7{background:url('images/col7.png') center/cover no-repeat;}

/* ===== FOOTER ===== */
footer {
  background: linear-gradient(to right, #A4D70E 0%, #A4D70E 23.99%, #FFFFFF 24%);
  color: #2a2a2a;
  padding: 40px 80px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  border-top: 1px solid var(--line);
}
.foot-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
}
.foot-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-style: italic;
  margin-bottom: 20px;
  color: #2a2a2a;
}
.foot-info {
  font-size: 12px;
  color: #666;
  line-height: 1.9;
}
.foot-col h5 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 15px;
  letter-spacing: 1px;
  color: #2a2a2a;
}
.foot-col ul {
  list-style: none;
}
.foot-col li {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.foot-col li:hover {
  color: #2a2a2a;
}
.foot-bottom {
  max-width: 1400px;
  width: 100%;
  margin: 60px auto 0;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .product-grid, .new-grid { grid-template-columns:repeat(2,1fr); }
  .col-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,200px); }
  .col-item.big { grid-row:span 1; }
  .section-title { font-size:72px; }
  .gnb { display:none; }
  .header-inner, section, .collection, .proposal, footer { padding-left:24px; padding-right:24px; }
  .proposal { height: 400px; }
  .proposal::before { height: 200px; }
  .proposal-title { font-size: 48px; }
  .proposal-sub { font-size: 14px; }
  .foot-inner { grid-template-columns:1fr 1fr; }
}

/* ===== CATEGORY BANNER ===== */
.cat-banner {
  position:relative;
  width:100%;
  height:560px;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:0;
}
.cat-banner-img {
  position:absolute;
  inset:0;
  background:url('images/outer-banner.png') center/cover no-repeat;
  z-index:1;
}
.cat-banner-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(164,215,14,0.55) 0%, rgba(164,215,14,0.15) 50%, rgba(164,215,14,0) 100%);
  z-index:2;
}
.cat-banner-text {
  position:absolute;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  color:var(--text);
}
.cat-sub {
  font-size:13px;
  letter-spacing:3px;
  font-weight:500;
  margin-bottom:24px;
}
.cat-title {
  font-family:'Newsreader', serif;
  font-size:140px;
  font-weight:400;
  line-height:1;
  letter-spacing:-3px;
  margin-bottom:24px;
}
.cat-title .pt { color:var(--point); font-style:italic; }
.cat-desc {
  font-size:16px;
  line-height:1.8;
  font-family:'Noto Sans KR', sans-serif;
}

/* ===== CATEGORY PRODUCTS ===== */
.cat-products {
  max-width:1400px;
  margin:0 auto;
  padding:80px 60px 140px;
}
.cat-products-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:60px;
}
.cat-count { font-size:14px; color:#555; }
.cat-count span { color:var(--text); font-weight:600; }
.cat-sort {
  border:none;
  background:transparent;
  font-size:13px;
  color:#555;
  cursor:pointer;
  font-family:inherit;
  outline:none;
}
.cat-products .product { display:block; }

.cat-banner-bottom .cat-banner-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right, rgba(164,215,14,0.55) 0%, rgba(164,215,14,0.15) 50%, rgba(164,215,14,0) 100%);
}
.cat-banner-bottom {
  background:url('images/bottom-banner.png') center/cover no-repeat;
}

.cat-banner-top {
  background:url('images/top-banner.png') center/cover no-repeat;
}
.cat-banner-dress {
  background:url('images/dress-banner.png') center/cover no-repeat;
}


/* ===== PRODUCT DETAIL ===== */
.pd-wrap {
  max-width:1400px;
  margin:0 auto;
  padding:80px 60px 140px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
}

.pd-main-img {
  width:100%;
  aspect-ratio:3/4;
  margin-bottom:20px;
}
.pd-thumbs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.pd-thumb {
  aspect-ratio:1/1;
  cursor:pointer;
  opacity:0.5;
  transition:opacity 0.3s;
}
.pd-thumb.active, .pd-thumb:hover { opacity:1; }

.pd-info { padding-top:20px; }
.pd-cat {
  font-size:13px;
  letter-spacing:3px;
  color:var(--sub);
  margin-bottom:16px;
}
.pd-name {
  font-family:'Newsreader', serif;
  font-size:42px;
  font-weight:400;
  margin-bottom:24px;
}
.pd-price {
  font-size:28px;
  font-weight:500;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.pd-price span { font-size:16px; margin-left:4px; }

.pd-row {
  display:flex;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid #f0f0f0;
}
.pd-label {
  width:100px;
  font-size:12px;
  letter-spacing:2px;
  color:#555;
  font-weight:600;
}

.pd-colors { display:flex; gap:10px; }
.pd-color {
  width:28px; height:28px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid #fff;
  box-shadow:0 0 0 1px #ddd;
  transition:box-shadow 0.2s;
}
.pd-color.active, .pd-color:hover {
  box-shadow:0 0 0 2px var(--text);
}

.pd-sizes { display:flex; gap:8px; }
.pd-size {
  width:42px; height:42px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-family:inherit;
  transition:all 0.2s;
}
.pd-size:hover, .pd-size.active {
  border-color:var(--text);
  background:var(--text);
  color:#fff;
}

.pd-qty {
  display:flex;
  align-items:center;
  border:1px solid #ddd;
  width:fit-content;
}
.pd-qty button {
  width:36px; height:36px;
  border:none;
  background:#fff;
  cursor:pointer;
  font-size:16px;
}
.pd-qty span {
  width:50px;
  text-align:center;
  font-size:14px;
}

.pd-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  margin-top:16px;
  border-top:1px solid var(--line);
}
.pd-total span:first-child {
  font-size:13px; letter-spacing:2px; font-weight:600;
}
.pd-total-price {
  font-size:24px; font-weight:600;
}
.pd-total-price span { font-size:24px; }

.pd-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:40px;
}
.btn-cart, .btn-buy {
  height:56px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
  font-family:inherit;
  transition:all 0.2s;
}
.btn-cart {
  background:#fff;
  color:var(--text);
  border:1px solid var(--text);
}
.btn-cart:hover { background:var(--text); color:#fff; }
.btn-buy {
  background:var(--point);
  color:var(--text);
}
.btn-buy:hover { background:var(--text); color:var(--point); }

.pd-desc {
  font-size:13px;
  color:#555;
  line-height:1.9;
}
.pd-desc p { margin-bottom:8px; }
.pd-desc ul {
  list-style:none;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid #f0f0f0;
}
.pd-desc li {
  padding:4px 0;
  font-size:12px;
  color:#888;
}


/* ===== INTRO VIDEO ===== */
.intro-video {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
}

.intro-video.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ENTER 버튼 - 오른쪽 바닥 고정형 */
.intro-enter {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;

  width: 360px;
  height: 96px;

  border: none;
  border-left: 1px solid rgba(255,255,255,0.45);
  border-top: 1px solid rgba(255,255,255,0.45);

  background: rgba(0,0,0,0.62);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 5px;
  line-height: 1;

  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition: all 0.35s ease;
}

.intro-enter .enter-word {
  font-family: 'Newsreader', serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.intro-enter .moreve-word {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 5px;
}

.intro-enter:hover {
  background: #A4D70E;
  color: #111;
}

/* 인트로 중에는 스크롤 막기 */
body.intro-active {
  overflow: hidden;
}

/* 히어로 슬라이드 이미지 연결 */
.slide:nth-child(1) .main-img {
  background: url('images/model1.png') center/cover no-repeat;
}
.slide:nth-child(1) .sub-img {
  background: url('images/model1-sub.png') center/cover no-repeat;
}
.slide:nth-child(2) .main-img {
  background: url('images/model2.png') center/cover no-repeat;
}
.slide:nth-child(2) .sub-img {
  background: url('images/model2-sub.png') center/cover no-repeat;
}

.main-img,
.sub-img {
  box-shadow: none;
}

/* ===== 애니메이션: 글자별 페이드인 (Line 기반) ===== */
.hero-title .line {
  display: block;  /* 한 줄씩 */
}
.hero-title .italic {
  font-style: italic;
  color: #999;  /* 회색 (시안 기준) */
}
.hero-title .dot {
  color: #A4D70E;  /* 연두 점 */
}

.hero-title > .line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: letterFade 0.9s forwards;  /* 0.5s → 0.9s (더 천천히) */
}

/* Line 1: Love */
.hero-title > .line:nth-child(1) > span:nth-child(1) { animation-delay: 0.2s; }
.hero-title > .line:nth-child(1) > span:nth-child(2) { animation-delay: 0.3s; }
.hero-title > .line:nth-child(1) > span:nth-child(3) { animation-delay: 0.4s; }
.hero-title > .line:nth-child(1) > span:nth-child(4) { animation-delay: 0.5s; }

/* Line 2: yourself, */
.hero-title > .line:nth-child(2) > span:nth-child(1) { animation-delay: 0.7s; }
.hero-title > .line:nth-child(2) > span:nth-child(2) { animation-delay: 0.8s; }
.hero-title > .line:nth-child(2) > span:nth-child(3) { animation-delay: 0.9s; }
.hero-title > .line:nth-child(2) > span:nth-child(4) { animation-delay: 1.0s; }
.hero-title > .line:nth-child(2) > span:nth-child(5) { animation-delay: 1.1s; }
.hero-title > .line:nth-child(2) > span:nth-child(6) { animation-delay: 1.2s; }
.hero-title > .line:nth-child(2) > span:nth-child(7) { animation-delay: 1.3s; }
.hero-title > .line:nth-child(2) > span:nth-child(8) { animation-delay: 1.4s; }
.hero-title > .line:nth-child(2) > span:nth-child(9) { animation-delay: 1.5s; }

/* Line 3: more. */
.hero-title > .line:nth-child(3) > span:nth-child(1) { animation-delay: 1.7s; }
.hero-title > .line:nth-child(3) > span:nth-child(2) { animation-delay: 1.8s; }
.hero-title > .line:nth-child(3) > span:nth-child(3) { animation-delay: 1.9s; }
.hero-title > .line:nth-child(3) > span:nth-child(4) { animation-delay: 2.0s; }
.hero-title > .line:nth-child(3) > span:nth-child(5) { animation-delay: 2.1s; }

@keyframes letterFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 상품 카드 호버 효과 (VIEW MORE 오버레이) ===== */
.product .product-img {
  position: relative;
  overflow: hidden;
}

/* 어두워지는 오버레이 */
.product .product-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* VIEW MORE 텍스트 */
.product .product-img::after {
  content: 'VIEW MORE';
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, 100%);
  color: white;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 2;
  white-space: nowrap;
}

.product:hover .product-img::before {
  opacity: 1;
}

.product:hover .product-img::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 이미지 확대 효과 */
.product .product-img {
  transition: transform 0.6s ease;
}
.product:hover .product-img {
  transform: scale(1.05);
}

/* 텍스트는 절대 안 움직임 */
.product .product-name,
.product .product-price,
.product .new-tag {
  transform: none !important;
}

/* ===== 메뉴/내비게이션 호버 언더라인 ===== */
.menu a,
nav a {
  position: relative;
  text-decoration: none;
}
.menu a::after,
nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #A4D70E;
  transition: width 0.3s ease;
}
.menu a:hover::after,
nav a:hover::after {
  width: 100%;
}

/* ===== 스크롤 페이드인 효과 ===== */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 컬렉션 아이템 호버 (테두리 애니메이션) ===== */
.collection .col-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 위쪽 선 */
.collection .col-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #A4D70E;
  transition: width 0.4s ease;
  z-index: 3;
}
/* 아래쪽 선 */
.collection .col-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: #A4D70E;
  transition: width 0.4s ease;
  z-index: 3;
}
.collection .col-item:hover::before,
.collection .col-item:hover::after {
  width: 100%;
}

/* 좌/우 선을 위해 inner wrapper 스타일링 */
.collection .col-item .col-img {
  position: relative;
  width: 100%;
  height: 100%;
}
.collection .col-item .col-img::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 0;
  background: #A4D70E;
  transition: height 0.4s ease;
  z-index: 3;
}
.collection .col-item .col-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: #A4D70E;
  transition: height 0.4s ease;
  z-index: 3;
}
.collection .col-item:hover .col-img::before,
.collection .col-item:hover .col-img::after {
  height: 100%;
}

/* 이미지 살짝 줌인 */
.collection .col-item .col-img {
  overflow: hidden;
  transition: transform 0.6s ease;
}
.collection .col-item:hover .col-img {
  transform: scale(1.03);
}