/* Global Styles */
      :root {
        --color-black: #000000;
        --color-white: #ffffff;
        --color-gray-dark: #353535;
        --color-gray-mid: #333333;
        --color-gray-light: #f5f5f5;
        --color-accent: #c9a050; /* Gold-ish accent for high-end feel */
      }


/* 기본(PC): 줄바꿈 안 함 */
.mo-br{ display:none; }

/* 모바일에서만 줄바꿈 강제 */
@media (max-width:768px){
  .mo-br{
    display:block;    height:0;            /* 여백 생기지 않도록 */    line-height:0;    margin:0;
	}
}

/* 기본(모바일 등): 줄바꿈 안 함 */
.pc-br{ display:none; }

/* PC에서만 줄바꿈 강제 */
@media (min-width:769px){
  .pc-br{ display:block;  height:0; line-height:0; margin:0;   /* 여백 없이 깔끔하게 */
  }
}

/* YouTube Video Responsive Wrapper */
.video-wrapper {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto; /* 중앙 정렬 */
    aspect-ratio: 16 / 9; /* 16:9 화면 비율 유지 (최신 반응형 기법) */
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* 기존 사이트 이미지들과 동일한 모서리 둥글기 */
    background-color: var(--block-bg); /* 영상 로딩 전 임시 배경색 */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
        color: var(--color-gray-dark);
        line-height: 1.6;
        overflow-x: hidden;
        background-color: var(--color-white);
		
        word-break: keep-all;       /* 한글 단어가 중간에 쪼개지는 것을 방지 */
        overflow-wrap: break-word;  /* 영역을 벗어나는 긴 영어/숫자/URL은 강제로 줄바꿈 */
		
      }
		
/* 가로 스크롤 방지 (AOS fade-left/right 이슈 해결) */
      html, body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .landing-page {
        width: 100%;
        overflow-x: hidden; /* 화면 밖으로 나간 AOS 요소를 숨김 */
        position: relative;
      }

      /* Typography Helpers */
      .font-thin { font-weight: 100; }
      .font-light { font-weight: 300; }
      .font-regular { font-weight: 400; }
      .font-medium { font-weight: 500; }
      .font-bold { font-weight: 700; }
      .font-black { font-weight: 900; }

      h1, h2, h3 {
        line-height: 1.2;
      }

      .text-center { text-align: center; }
      .container {
        width:100%;
		max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
		
      }

      /* Sections */
      section {
        padding: 150px 0;
      }

      /* Hero Section */
/* (수정됨) Hero Section */
.hero {
        min-height: 100vh;
        display: flex;
        align-items: stretch; /* center에서 stretch로 변경 */
        position: relative;
        background: url('./img/hero_bg.jpg') no-repeat center center;
        background-size: cover;
        color: var(--color-black);
        overflow: hidden;
        padding-top: 80px;
      }
	  
	  .hero > .container {
        display: flex;
        width: 100%;
      }
	  
.grid-hero {
        width: 100%;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 60px;
        align-items: stretch; /* center에서 stretch로 변경 */
      }

      /* 왼쪽 콘텐츠 컬럼 */
.hero-content-col {
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 텍스트는 수직 중앙 정렬 유지 */
        gap: 30px;
      }

      /* TREAT YOUR SKIN 스타일 (이미지와 유사하게 세리프체 느낌을 주기 위해 폰트 조정 가능) */
      .hero-content-col h1 {
        font-size: 3.8rem;
        letter-spacing: -2px;
        line-height: 1.2;
        margin-bottom: 0; /* flex gap 사용 */
        color: var(--color-gray-dark);
        /* 세리프 폰트가 더 고급스러워 보이므로, Pretendard를 유지하되 스타일 조정 */
      }

      .hero-content-col h1 span {
        display: block; /* 줄 바꿈 강제 */
      }

      .hero-content-col p {
        font-size: 1.2rem;
        color: var(--color-gray-mid);
        margin-bottom: 0; /* flex gap 사용 */
        opacity: 0.9;
        line-height: 1.7;
      }

      /* 버튼 스타일 조정 (고급스러운 느낌을 위해) */
      .btn-hero {
        display: inline-block;
        padding: 16px 36px;
        background-color: var(--color-gray-dark);
        color: var(--color-white);
        text-decoration: none;
        font-weight: 700;
        border-radius: 0;
        transition: all 0.3s ease;
        border: 1px solid var(--color-gray-dark);
        align-self: flex-start; /* 왼쪽 정렬 유지 */
      }

      .btn-hero:hover {
        background-color: transparent;
        color: var(--color-gray-dark);
      }

      /* (새로 추가) 왼쪽 하단 제품 이미지 블록 */
      .product-item {
        margin-top: 40px; /* 버튼과의 여백 */
        display: flex;
        align-items: flex-end; /* 하단 정렬 */
        gap: 20px;
      }

      .product-item img {
        width: 100px; /* 제품 이미지 크기 조정 */
        height: auto;
      }

      .product-caption {
        font-size: 0.9rem;
        color: #888;
        line-height: 1.5;
      }

      /* 오른쪽 모델 컬럼 */
	.hero-model-col {
        position: relative;
        display: flex;
        align-items: flex-end; /* 모델 이미지를 바닥으로 내림 */
        justify-content: flex-end; /* 오른쪽 정렬 */
        line-height: 0; /* 이미지 하단의 미세한 공백 제거 */
      }
      /* 모델 PNG 이미지 스타일 */
.model-image {
        width: 100%;
        max-width: 600px;
        height: auto;
        display: block; /* inline-block에서 block으로 변경하여 하단 공백 완벽 제거 */
      }

      /* (수정됨) 반응형 처리 */
      @media (max-width: 992px) {
        .grid-hero {
          grid-template-columns: 1fr; /* 1열로 변경 */
          gap: 40px;
          text-align: center;
        }

        .hero-content-col {
          text-align: center; /* 텍스트 중앙 정렬 */
          align-items: center; /* 버튼, 제품 블록 중앙 정렬 */
          padding: 0 20px;
        }

        .hero h1 {
          font-size: 2.8rem;
        }

        .hero-model-col {
          order: 2; /* 모델 이미지가 아래로 오도록 */
          text-align: center;
        }

        .model-image {
          max-width: 100%; /* 화면 꽉 차게 */
        }
        
        .product-item {
            justify-content: center;
            margin-top: 20px;
        }
      }

      /* Fixed Banner */
	  /* 밝은 풀위드 배너 (Section 3용) */
      .light-banner {
        width: 100%;
        height: 500px; /* 원하는 높이로 조절해 주세요 */
        background-image: url('img/sec03_bg.jpg');
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 160px;
      }
	  
	  
	  
      .fixed-banner {
        height: 550px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        text-align: center;
      }

      .fixed-banner.dark {
        background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/hero_bg2.jpg');
		
      }

      .fixed-banner h2 {
        font-size: 2.5rem;
        max-width: 800px;
      }
	  
 .fixed-banner_d {
        height: 850px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        text-align: center;
      }

      .fixed-banner_d.dark {
        background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/hero_bg2.jpg');
		
      }

      .fixed-banner_d h2 {
        font-size: 2.5rem;
        max-width: 800px;
      }

      /* Content Sections */
      .section-title {
        margin-bottom: 60px;
      }

      .section-title h2 {
        font-size: 2.5rem;
        margin-bottom: 15px;
      }

      .section-title p {
        color: var(--color-gray-mid);
        font-size: 1.1rem;
      }

      /* Grid Layouts */
      .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }

      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
      }

      /* Problem Section */
      .problem {
        background-color: var(--color-white);
      }

      /* Ingredients */
      .ingredient-card {
        background: var(--color-white);
        padding: 20px;
        border: 1px solid #eee;
      }

      .ingredient-card h3 {
        margin-bottom: 15px;
        font-size: 1.5rem;
      }

      /* Mechanism */
/* Section 6: Staggered Mechanism */
      .mechanism-staggered {
        background-color: var(--color-white);
        /* 세 번째 이미지가 아래로 튀어나오므로 하단 패딩을 넉넉하게 줍니다 */
        padding: 120px 0 120px 0; 
      }

      .staggered-header {
        text-align: left;
        margin-bottom: 60px;
      }

      .staggered-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
      }

      .stagger-item {
        display: flex;
        flex-direction: column;
      }

      /* 핵심 포인트: 계단식 배치를 위한 위치 조정 */
      .stagger-step-1 { margin-top: 0; }
      .stagger-step-2 { margin-top: 150px; }
      .stagger-step-3 { margin-top: 300px; }

      .stagger-img-wrap {
        width: 100%;
        aspect-ratio: 3 / 4.5; /* 시안처럼 세로로 긴 직사각형 비율 */
        overflow: hidden;
        margin-bottom: 20px;
      }

      .stagger-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      
      .stagger-item:hover img {
        transform: scale(1.05); /* 마우스 올릴 때 살짝 확대되는 디테일 */
      }

      .stagger-text h3 {
        font-size: 2.2rem;
        margin-bottom: 5px;
        color: var(--color-black);
      }

      .stagger-text h3 span {
        font-size: 1.2rem;
        color: var(--color-gray-mid);
        margin-left: 5px;
        font-weight: 300;
      }

      .stagger-text p {
        font-size: 1.05rem;
        color: var(--color-gray-mid);
        line-height: 1.6;
        margin-top: 15px;
      }

      /* 모바일 반응형: 모바일에서는 계단식을 풀고 일렬로 배치합니다 */
      @media (max-width: 992px) {
        .mechanism-staggered { padding: 80px 0; }
        .staggered-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .stagger-step-3 { margin-top: 0; } /* 2열일 때 3번째 항목 위치 리셋 */
      }

      @media (max-width: 768px) {
        .staggered-grid {
          grid-template-columns: 1fr;
          gap: 60px;
        }
        .stagger-step-1, .stagger-step-2, .stagger-step-3 {
          margin-top: 0; /* 모바일에서는 모두 기본 위치로 */
        }
      }

      /* Social Proof */
      .review-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
      }

      .review-card {
        background: #f9f9f9;
        padding: 30px;
        border-radius: 8px;
      }

      /* CTA Section */
      .cta {
        background-color: var(--color-gray-dark);
        color: var(--color-white);
        padding: 120px 0;
      }

      .cta-form {
        max-width: 600px;
        margin: 40px auto 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .cta-form input, .cta-form textarea {
        padding: 15px;
        border: 1px solid #444;
        background: transparent;
        color: white;
      }

      .cta-form button {
        padding: 20px;
        background: var(--color-white);
        color: var(--color-black);
        border: none;
        font-weight: 700;
        cursor: pointer;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .grid-2, .grid-3 {
          grid-template-columns: 1fr;
        }
        .hero h1 {
          font-size: 2.5rem;
        }
        section {
          padding: 60px 0;
        }
      }
      
      /* Icon styling for plain HTML */
      .lucide {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }
	  /* Navigation Bar */
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        z-index: 1000;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .nav-logo {
        font-size: 1.5rem;
        color: var(--color-black);
        text-decoration: none;
        letter-spacing: -0.5px;
      }

      .nav-btn {
        padding: 10px 24px;
        background-color: var(--color-gray-dark);
        color: var(--color-white);
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        border: 1px solid var(--color-gray-dark);
      }

      .nav-btn:hover {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
      }
	  
	  /* Social Proof (Section 9 Updates) */
      .social {
        background-color: var(--color-white);
      }

      .real-feedback {
        color: #9b51e0; /* 보라색 포인트 컬러 */
        font-size: 0.9rem;
        letter-spacing: 2px;
        margin-bottom: 15px;
        display: block;
		text-transform: uppercase;

      }

      .review-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 50px;
      }

      .review-card {
        background: var(--color-white);
        padding: 40px 30px;
        border-radius: 24px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: transform 0.3s ease;
      }

      .review-card:hover {
        transform: translateY(-5px);
      }

      .review-quote-icon {
        width: 36px;
        height: 36px;
        fill: #1a1a1a;
        margin-bottom: 24px;
      }

      .review-text {
        font-size: 1.05rem;
        color: #333;
        flex-grow: 1;
        margin-bottom: 30px;
        line-height: 1.7;
      }

      .review-divider {
        height: 1px;
        background-color: #f0f0f0;
        border: none;
        margin-bottom: 20px;
      }

      .review-category {
        color: #9b51e0;
        font-size: 1.05rem;
        margin-bottom: 8px;
      }

      .review-author {
        color: #888;
        font-size: 0.85rem;
      }

      /* 반응형 처리: 태블릿에서는 2열, 모바일에서는 1열 */
      @media (max-width: 992px) {
        .review-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      @media (max-width: 768px) {
        .review-grid {
          grid-template-columns: 1fr;
        }
      }
	  
	  /* Section 4: Product Identity */
      .identity {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .identity-image-wrapper {
        position: relative;
        display: inline-block;
        border-radius: 12px; /* 이미지 모서리 둥글게 */
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* 이미지 주변 그림자 */
        width: 100%;
        max-width: 550px;
      }

      .identity-image {
        width: 100%;
        height: auto;
        display: block;
      }

      /* GMP 뱃지 (이미지 위 좌측 상단 고정) */
      .gmp-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: #000;
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 10;
      }

      .gmp-badge .badge-icon {
        width: 20px;
        height: 20px;
        color: #c9a050; /* 골드 색상 */
      }

      .gmp-badge span {
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.5px;
      }
	  
	  /* Section 5: Ingredients Updates */
      .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }

      .ingredient-card {
        background: var(--color-white);
        border: 1px solid #eee;
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .ingredient-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
      }

      .ingredient-img-wrap {
        width: 100%;
        height: 200px;
        overflow: hidden;
      }

      .ingredient-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
      }

      .ingredient-card:hover .ingredient-img {
        transform: scale(1.1); /* 마우스 호버 시 이미지 부드럽게 확대 */
      }

      .ingredient-content {
        padding: 25px 20px;
      }

      .ingredient-content h3 {
        font-size: 1.25rem;
        margin-bottom: 12px;
        color: var(--color-black);
      }

      .ingredient-content p {
        font-size: 0.95rem;
        color: var(--color-gray-mid);
        line-height: 1.6;
      }

      .ingredient-trust-badge {
        margin-top: 50px;
        background: #f9f9f9;
        border-radius: 12px;
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
      }

      /* 반응형 처리: 태블릿 2열, 모바일 1열 */
      @media (max-width: 992px) {
        .grid-4 {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 768px) {
        .grid-4 {
          grid-template-columns: 1fr;
        }
        .ingredient-trust-badge {
          flex-direction: column;
          text-align: center;
        }
      }
	  
	  /* 세로 라인 구분선 (공통) */
      .vertical-divider-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 40px 0; /* 라인 위아래 여백 조절 */
      }

      /* 1번: 깔끔한 단색 회색 라인 */
      .vertical-line-solid {
        width: 1px;
        height: 25px;
        background-color: #e5e5e5; /* 은은한 밝은 회색 */
      }

      /* 2번: 위아래가 흐려지는 고급스러운 그라데이션 라인 (포인트 컬러 적용) */
      .vertical-line-fade {
        width: 1px;
        height:250px;
        background: linear-gradient(to bottom, transparent, var(--color-gray-dark), transparent);
        opacity: 0.5; /* 너무 진하지 않게 투명도 조절 */
      }
	  
	  /* =========================================
   [NEW] 우측 하단 플로팅 퀵메뉴
   ========================================= */
.quick-menu-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 버튼 사이 간격 */
  z-index: 999; /* 다른 요소들보다 무조건 위에 오도록 설정 */
}

/* 모바일 화면에서는 약간 작게, 여백도 좁게 조절 */
@media (max-width: 768px) {
  .quick-menu-container {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

.quick-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.quick-btn:hover {
  transform: translateY(-5px); /* 마우스 올리면 살짝 위로 떠오름 */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* 카톡 버튼 색상 & 아이콘 크기 */
.quick-btn-kakao {
  background-color: #FEE500;
  color: #3a1d1d; /* 카카오톡 특유의 진한 고동색 */
  font-size: 1.75rem; /* 아이콘 크기 */
  text-decoration: none;
}

/* 탑 버튼 색상 & 아이콘 크기 */
.quick-btn-top {
  background-color: #ffffff;
  border: 1px solid #f1f5f9;
  color: #334155;
  font-size: 1.5rem; /* 화살표 아이콘 크기 */
  text-decoration: none;
}

/* Final CTA & Clinic Info */
      .final-cta {
        background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/tail_bg2.jpg');
        color: var(--color-white);
        padding: 120px 0;
      }

      .clinic-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 80px;
        align-items: center;
      }

      .cta-buttons {
        display: flex;
        gap: 15px;
        margin-top: 40px;
      }

      .btn-gold {
        padding: 18px 36px;
        background-color: var(--color-accent);
        color: var(--color-white);
        text-decoration: none;
        font-weight: 700;
        transition: all 0.3s ease;
        text-align: center;
        border: 1px solid var(--color-accent);
      }

      .btn-gold:hover {
        background-color: transparent;
        color: var(--color-accent);
      }

      .btn-outline {
        padding: 18px 36px;
        border: 1px solid var(--color-white);
        color: var(--color-white);
        text-decoration: none;
        font-weight: 700;
        transition: all 0.3s ease;
        text-align: center;
      }

      .btn-outline:hover {
        background-color: var(--color-white);
        color: var(--color-black);
      }

      .hours-wrapper {
        background: rgba(0, 0, 0, 0.5);
        padding: 50px 40px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .hours-list {
        list-style: none;
        margin-bottom: 30px;
      }

      .hours-list li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 0;
        font-size: 1.1rem;
      }

      .notice-box {
        margin-top: 30px;
        padding: 25px;
        background: rgba(0, 0, 0, 0.4);
        font-size: 0.9rem;
        color: #bbb;
        line-height: 1.6;
      }

      /* Footer */
      .site-footer {
        background-color: var(--color-gray-light);
        padding: 80px 0 50px;
      }

      .contact-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 60px;
      }

      .contact-card {
        background: var(--color-white);
        padding: 35px 30px;
        text-decoration: none;
        color: var(--color-gray-dark);
        border: 1px solid #e5e5e5;
        transition: transform 0.3s ease, border-color 0.3s ease;
        display: flex;
        flex-direction: column;
      }

      .contact-card:hover {
        transform: translateY(-5px);
        border-color: var(--color-accent);
      }

      .contact-card h3 {
        font-size: 1.3rem;
        margin-bottom: 10px;
      }

      .contact-card p {
        font-size: 0.95rem;
        color: #777;
        margin-bottom: 25px;
        flex-grow: 1;
      }

      .contact-link-text {
        color: var(--color-accent);
        font-weight: 700;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .footer-info {
        border-top: 1px solid #ddd;
        padding-top: 40px;
        font-size: 0.9rem;
        color: #666;
        line-height: 1.8;
      }

      /* 모바일 반응형 */
      @media (max-width: 992px) {
        .clinic-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .contact-cards {
          grid-template-columns: 1fr;
        }
        .cta-buttons {
          flex-direction: column;
        }
      }
	  
	  
	  @media (max-width: 768px) {
        /* 1. 전체 글자 비율 일괄 축소 (기본 16px -> 14px 또는 13px로 조절) */
        html {
          font-size: 13px; 
        }

        /* 2. 섹션 위아래 여백도 모바일에 맞게 축소 */
        section {
          padding: 100px 0 !important; 
        }
        
        /* 3. 상단 여백이 너무 크다면 줄이기 */
        .mechanism-staggered {
          padding: 60px 0;
        }
      }
	  
	  
	  /* 1. PC 기본 배경 이미지 (가로형) */
      .light-banner3 {
        background-image: url('img/tail_bg.jpg');
        
        /* 아래는 기존에 설정하셨을 배경 속성들 (유지) */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
		background-attachment: fixed;
        /* 높이도 기기에 맞게 조절 가능합니다 */
        height: 650px; 
      }

      /* 2. 모바일 배경 이미지 교체 (세로형) */
      @media (max-width: 768px) {
        .light-banner3 {
          /* 모바일용 세로 이미지 경로로 변경해 주세요 */
          background-image: url('img/tail_bg_m.jpg'); 
          
          /* 모바일에서는 높이를 조금 줄이려면 여기서 조절 */
          height: 500px; 
        }
      }
	  
	  /* 가격 정보 영역 (Pricing Wrap) */
      .pricing-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        margin-top: 40px;
        padding-top: 30px;
        border-top: 1px solid #f0f0f0;
      }

      .price-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .price-title {
        font-size: 1.05rem;
        color: var(--color-gray-dark);
        font-weight: 700;
        margin-bottom: 5px;
      }

      .price-numbers {
        display: flex;
        align-items: baseline;
        gap: 8px;
      }

      .price-discounted {
        font-size: 1.5rem;
        font-weight: 800;
        color: #ff66a3; /* 핑크색 강조 컬러 */
      }

      .price-original {
        font-size: 0.95rem;
        color: #b3b3b3;
        text-decoration: line-through; /* 취소선 */
        font-weight: 400;
      }

      .price-badges {
        display: flex;
        gap: 6px;
        margin-top: 6px;
      }

      .price-badge {
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 4px;
        color: #fff;
        line-height: 1.2;
      }

      .badge-sale {
        background-color: #000;
      }

      .badge-best {
        background-color: #9b51e0; /* 보라색 베스트 뱃지 */
      }

      /* 모바일 환경에서는 간격을 줄입니다 */
      @media (max-width: 768px) {
        .pricing-wrap {
          gap: 30px;
        }
      }