/* ==========================================
   CW TOPCLASS
   XE XEDITION - PINK DESIGN v4.0
   전체 교체용 CSS
   ========================================== */

/* 01. 전체 공통 배경 */

html,
body {
    background: #FFF0F6 !important;
}

.container {
    background: #FFF0F6 !important;
    color: #49313F;
    font-family:
        "Malgun Gothic",
        "Apple SD Gothic Neo",
        sans-serif;
    min-height: 100vh;
}

/* 02. 공통 헤더 */

.container .header_wrap {
    background: #F1C4D6 !important;
    border-bottom: 1px solid #E6AFC5 !important;
    box-shadow: 0 3px 12px rgba(160,80,115,0.07);
}

.container .header,
.container .header.main,
.container .header.sub {
    background: transparent !important;
}

/* 03. 상단 메뉴 */

.container .header .gnb > ul > li > a {
    color: #49313F !important;
    font-weight: 600;
    letter-spacing: -0.3px;
    transition: color 0.2s ease;
}

.container .header .gnb > ul > li > a:hover,
.container .header .gnb > ul > li.on > a,
.container .header .gnb > ul > li.active > a {
    color: #9F436B !important;
}

/* 04. 검색 및 회원 아이콘 */

.container .header .side a {
    color: #49313F !important;
}

.container .header .side a:hover {
    color: #9F436B !important;
}

/* 05. 드롭다운 메뉴 */

.container .gnb .depth2,
.container .gnb .depth3 {
    background: #FFF7FA !important;
    border-color: #E6B9CB !important;
}

.container .gnb .depth2 a,
.container .gnb .depth3 a {
    color: #49313F !important;
}

.container .gnb .depth2 a:hover,
.container .gnb .depth3 a:hover {
    color: #9F436B !important;
    background: #FFE6EF !important;
}

/* 06. 메인 및 서브페이지 */

.container .body,
.container .body.main,
.container .body.sub {
    background: #FFF0F6 !important;
}

.container .body .content {
    background: transparent !important;
}

.container .body.sub .content {
    background: #FFF0F6 !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    box-sizing: border-box;
    padding: 28px 24px;
}

/* 07. 서브페이지 상단 */

.container .visual.sub {
    background: #FFF0F6 !important;
}

.container .visual.sub .bg_img {
    background-image: none !important;
}

.container .visual.sub .mask {
    background: transparent !important;
    opacity: 0 !important;
}

.container .visual.sub .sub_title h1 {
    color: #654453 !important;
    font-weight: 700;
}

/* ==========================================
   08. 공통 푸터
   PC 확대 + 심플 중앙 정렬
   ========================================== */

.container .footer {
    background: #F1C4D6 !important;
    color: #49313F !important;
    border-top: 2px solid #DE9FB9 !important;
    border-bottom-color: #DE9FB9 !important;
    text-align: center !important;
}

/* 푸터 전체 레이아웃 */

.container .footer .f_info_area {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 42px 24px 28px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.container .footer .f_info {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 불필요한 푸터 사이트맵 숨김 */

.container .footer .f_info2,
.container .footer .site_map {
    display: none !important;
}

/* TOP CLASS 로고 확대 */

.container .footer .f_logo {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
    font-size: 38px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: #884262 !important;
}

.container .footer .f_logo a {
    color: #884262 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

/* 서비스 설명 텍스트 */

.container .footer .sub_desc {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 1050px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    color: #604452 !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
}

/* 푸터 HTML 내부 설명 */

.container .footer .f_info
div[style*="text-align:center"] > p {
    line-height: 1.85 !important;
}

/* 상담 버튼 정렬 */

.container .footer .f_info
div[style*="display:flex"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 22px auto !important;
}

/* 전화/카카오톡/텔레그램 버튼 확대 */

.container .footer .f_info
a[href^="tel:"],

.container .footer .f_info
a[href*="t.me/"],

.container .footer .f_info
span[style*="display:inline-block"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    min-width: 185px !important;
    min-height: 56px !important;
    padding: 14px 22px !important;

    background: #FFFFFF !important;
    border: 1px solid #EAB1C6 !important;
    border-radius: 14px !important;

    color: #49313F !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;

    box-sizing: border-box !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

/* 상담 아이콘 확대 */

.container .footer .f_info
a[href^="tel:"] i,

.container .footer .f_info
a[href*="t.me/"] i,

.container .footer .f_info
span[style*="display:inline-block"] i {
    font-size: 20px !important;
    color: #A8557C !important;
}

/* 상담 버튼 마우스 효과 */

.container .footer .f_info
a[href^="tel:"]:hover,

.container .footer .f_info
a[href*="t.me/"]:hover {
    background: #FFF8FB !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px
        rgba(150,75,110,0.14);
}

/* 카카오톡 ID 설명 */

.container .footer .f_info
div[style*="text-align:center"] > p:last-child {
    color: #705463 !important;
    font-size: 14px !important;
}

/* 카피라이트 영역 */

.container .footer .f_cr_area {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 20px 25px !important;

    background: transparent !important;
    border-top: 1px solid
        rgba(170,90,125,0.18) !important;

    text-align: center !important;
    box-sizing: border-box !important;
}

.container .footer .copyright {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #604452 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* 기타 푸터 링크 */

.container .footer a {
    color: #604452;
}

.container .footer a:hover {
    color: #943C65;
}

/* 09. 맨 위로 이동 버튼 */

.btn_top {
    background: #B96B8D !important;
    color: #FFFFFF !important;
    border-radius: 50%;
}

.btn_top:hover {
    background: #9F436B !important;
}

/* ==========================================
   10. 모바일 반응형
   ========================================== */

@media screen and (max-width: 767px) {

    html,
    body,
    .container {
        background: #FFF0F6 !important;
    }

    .container .header_wrap {
        background: #F1C4D6 !important;
        border-bottom: 1px solid
            #E6AFC5 !important;
    }

    .container .header .menu_bar > div {
        background: #49313F !important;
    }

    .container .header .gnb > ul {
        background: #F1C4D6 !important;
    }

    .container .body,
    .container .body .content,
    .container .body.sub .content {
        background: #FFF0F6 !important;
    }

    .container .body.sub .content {
        border: 0 !important;
        padding: 18px 14px;
        box-shadow: none !important;
    }

    .container .visual.sub {
        background: #FFF0F6 !important;
    }

    /* 모바일 푸터 */

    .container .footer {
        background: #F1C4D6 !important;
        text-align: center !important;
    }

    .container .footer .f_info_area {
        padding: 32px 15px 20px !important;
    }

    .container .footer .f_info {
        width: 100% !important;
        padding: 0 !important;
    }

    .container .footer .f_info2 {
        display: none !important;
    }

    .container .footer .f_logo {
        font-size: 30px !important;
        margin-bottom: 16px !important;
    }

    .container .footer .sub_desc {
        font-size: 15px !important;
        line-height: 1.8 !important;
        overflow-wrap: anywhere;
    }

    .container .footer .f_info
    div[style*="display:flex"] {
        gap: 10px !important;
        margin: 18px auto !important;
    }

    .container .footer .f_info
    a[href^="tel:"],

    .container .footer .f_info
    a[href*="t.me/"],

    .container .footer .f_info
    span[style*="display:inline-block"] {
        width: 100% !important;
        max-width: 340px !important;
        min-width: 0 !important;
        min-height: 52px !important;
        font-size: 15px !important;
        padding: 12px 16px !important;
    }

    .container .footer .f_cr_area {
        padding: 16px 12px 22px !important;
    }
}

/* ==========================================
   END - CW TOPCLASS PINK v4.0
   ========================================== */


/* =========================================
   CW TOPCLASS MOBILE RESPONSIVE PATCH v1
   PC 디자인 변경 없음
   모바일 767px 이하에서만 적용
========================================= */

@media screen and (max-width:767px) {

  /* 1. XE 본문 영역 너비 보정 */
  body:has(.cwmain) #content {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* 2. 전체 본문 크기와 좌우 여백 */
  .cwmain {
    width:calc(100% - 28px) !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:18px 0 45px !important;
    font-size:15px !important;
    line-height:1.75 !important;
    box-sizing:border-box !important;
  }

  .cwmain *,
  .cwmain *::before,
  .cwmain *::after {
    box-sizing:border-box;
    min-width:0;
  }

  /* 3. 문단 및 설명 글씨 */
  .cwmain p,
  .cwmain .cw-hero-desc {
    font-size:15px !important;
    line-height:1.8 !important;
  }

  .cwmain p {
    margin-bottom:14px !important;
  }

  /* 4. 메인 제목 */
  .cwmain .cw-hero h1 {
    font-size:clamp(26px,7vw,31px) !important;
    line-height:1.4 !important;
    letter-spacing:-0.7px;
  }

  .cwmain .cw-hero-lead {
    font-size:18px !important;
    line-height:1.5 !important;
  }

  /* 5. 섹션 제목 */
  .cwmain .cw-title h2,
  .cwmain .jh-heading h2 {
    font-size:24px !important;
    line-height:1.45 !important;
  }

  .cwmain .cw-section,
  .cwmain .jh-section {
    padding:36px 0 !important;
  }

  /* 6. 메인 상단 연핑크 박스 */
  .cwmain .cw-hero,
  .cwmain .jh-hero {
    grid-template-columns:minmax(0,1fr) !important;
    gap:20px !important;
    padding:24px 20px !important;
    border-radius:22px !important;
  }

  /* 7. PC 2~3열 카드를 모바일 1열로 */
  .cwmain .cw-grid2,
  .cwmain .cw-grid3,
  .cwmain .jh-grid2,
  .cwmain .jh-grid3 {
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }

  /* 8. 카드 내부 여백 */
  .cwmain .cw-card,
  .cwmain .jh-card,
  .cwmain .jh-region-card {
    padding:20px !important;
  }

  .cwmain .cw-card h3,
  .cwmain .jh-card h3 {
    font-size:19px !important;
  }

  /* 9. 이미지 자동 크기 조절 */
  .cwmain img {
    max-width:100% !important;
    height:auto !important;
  }

  .cwmain .cw-hero-image {
    width:100% !important;
    max-width:320px !important;
    margin:0 auto !important;
  }

  /* 10. 설명·결제·하단 박스 */
  .cwmain .cw-editorial,
  .cwmain .cw-payment,
  .cwmain .cw-bottom,
  .cwmain .jh-east-panel,
  .cwmain .jh-address-box,
  .cwmain .jh-related,
  .cwmain .jh-contact {
    padding:22px 19px !important;
    border-radius:20px !important;
  }

  /* 11. 상담 버튼 */
  .cwmain .cw-buttons,
  .cwmain .jh-actions {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .cwmain .cw-btn,
  .cwmain .jh-button {
    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;
    font-size:14px !important;
    padding:11px 15px !important;
  }

  /* 12. 결제 흐름 */
  .cwmain .cw-payment-flow {
    flex-direction:column !important;
    gap:8px !important;
  }

  .cwmain .cw-payment-flow span {
    width:100% !important;
    text-align:center !important;
  }

  /* 13. 모바일 헤더의 기존 작은 로고 교체 */
  .container .header .logo-item a {
    font-size:0 !important;
    text-decoration:none !important;
    white-space:nowrap;
  }

  .container .header .logo-item img {
    display:none !important;
  }

  .container .header .logo-item a::after {
    content:"TOPCLASS" !important;
    display:inline-block !important;
    font-family:Arial,sans-serif !important;
    font-size:22px !important;
    font-weight:900 !important;
    line-height:1.3 !important;
    letter-spacing:-0.8px !important;
    color:#944469 !important;
  }

}