/* BASIC css start */
/* ==========================================================================
   스위티스푼 ABOUT US 페이지 PC 버전 스타일시트
   ========================================================================== */
   
body {
    overflow-x: hidden;
}

.detailbrand_warp { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;  padding: 0; }
.about_us_main_title { font-family: 'Josefin Sans', sans-serif; font-size: 23px; letter-spacing: 0.5em; text-align: center; margin: 70px 0px 70px 0px; }
.brand_intro_content_wrap { max-width: 1480px; margin: 0 auto; padding: 100px 0px 0px 0px; }
.brand_section_bg { max-width: 1480px; margin: 0 auto; }

.hero_full_banner_box { position: relative; width: 100%; overflow: hidden; }
.hero_full_banner_box img { width: 100%; display: block; border: none !important; }
.hero_full_banner_content { 
    position: absolute; 
    top: 60%; 
    left: 30%; 
    transform: translate(-50%, -50%); 
    text-align: left; 
    color: #fff; 
    width: 90%; 
    max-width: 500px; 
    box-sizing: border-box;
}
.hero_full_banner_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.2em; font-size: 2.0rem; font-weight: 500; }
.hero_sub {font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.2em; font-size: 0.9rem; font-weight: 400; }
.hero_full_banner_subtitle { font-size: 1rem; text-align: left; line-height: 1.8rem; letter-spacing: initial; padding: 30px 0px 50px 0px; }

.logo_story { display: flex; margin: 50px 0px 50px 0px; text-decoration: none !important; border: none !important; }
.logo_imgbox { flex-basis: 15%; max-width: 20%; margin: 0 auto; text-decoration: none !important; border: none !important; }
.logo_imgbox img { width: 100%; display: block; border: none !important; text-decoration: none !important; box-shadow: none !important; }
.logo_imgbox section { background: transparent !important; border: none !important; text-decoration: none !important; box-shadow: none !important; }
.logo_contbox { position: relative; flex-basis: 80%; max-width: 80%; display: flex; align-items: center; text-decoration: none !important; border: none !important; }
.logo_content { text-align: justify; font-size: 1.0rem; line-height: 1.8rem; letter-spacing: 0.02em; word-break: keep-all; margin: 0% 10%; }
.text_highlight_bold { font-weight: 500; color: #c1935e; }
.brand_content_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.2em; text-align: left; font-size: 1.4rem; font-weight: 500; padding: 0px 0px 10px 0px; }

.signature_wrap { max-width: 1480px; margin: 150px auto 0px; }
.signature_img img { width:100%; display: block; border: none !important; }
.signature_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.25em; text-align: left; font-size: 1.8rem; font-weight: 500; padding: 50px 0px 20px 0px; }
.signature_sub_wrap { text-align: justify; font-size: 1.0rem; line-height: 1.8rem; letter-spacing: 0.02em; word-break: keep-all; padding-bottom: 50px; }

/* [수정 3] strength_wrap 양쪽 사이에 gap: 50px 부여 */
.strength_wrap { max-width: 1480px; display: flex; margin: 150px auto 150px; gap: 6%; }
.strength_img_box { flex-basis: 50%; max-width: 50%; }
.strength_img_box img { width: 100%; display: block; }
.strength_text_box{ position: relative; flex-basis: 40%; max-width: 40%; }
.strength_main_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.25em; font-size: 1.8rem; font-weight: 500; line-height: 1.6rem; margin: 3% 0% 5% 0%; } /* gap 추가로 인해 margin-left 제거 */
.strength_sub_content { text-align: justify; font-size: 0.9rem; line-height: 1.3rem; letter-spacing: 0.02em; word-break: keep-all; margin: 3% 0% 0% 0%; } /* gap 추가로 인해 margin 좌우 정렬 최적화 */
.strength_inner_title { font-family: 'Josefin Sans', sans-serif; text-align: left; font-size: 1.0rem; font-weight: 500; padding: 8px 0px 5px 0px; color: #111; }

.diamond_guide_wrap { position: relative; color: #000; }
.diamond_section_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.25em; text-align: left; font-size: 1.8rem; font-weight: 500; padding: 50px 0px 20px 0px; }
.diamond_section_desc { text-align: justify; font-size: 1.0rem; line-height: 1.8rem; letter-spacing: 0.02em; word-break: keep-all; padding-bottom: 50px; } 
.diamond_carat_title { font-size: 0.9rem; font-weight: 500; padding: 0px 0px 0px 0px; }
.diamond_carat_desc { text-align: justify; font-size: 0.8rem; line-height: 1.6rem; letter-spacing: 0.07em; word-break: keep-all; padding-bottom: 20px; }

.diamond_table_title { font-family: 'Josefin Sans', sans-serif; font-size: 18px; letter-spacing: 0.2em; text-align: left; margin: 50px 0px 10px 0px; color: #524233; }
.diamond_table_group { text-align: center; font-size: 13px; line-height: 22px; padding: 15px 0px 45px; }
.diamond_table_group table { border: 1px solid #c39562; border-image: none; width: 100%; text-align: center; color: #c39562; border-collapse: collapse; font-family: 'Josefin Sans', sans-serif; }
.diamond_table_group table td { border: 1px solid #E1E1E3; padding: 10px 0px; }
.diamond_table_container { width:100%; margin: 0 auto; }
.table_active_cell { background: #efe9df; color: #524233; }
.diamond_range_notice { color: #c39562; padding-top:20px; }
.about_diamond { margin: 80px 0px 0px 0px; }
.about_diamond img { width: 100%; text-align: center; display: block; border: none !important; }

.personal_service_row { display: flex; width: 100%; margin: 100px auto 0px; }
.personal_service_left_col { position: relative; flex-basis: 50%; max-width: 50%; display: flex; align-items: center; }
.personal_service_right_col { flex-basis: 50%; max-width: 50%; }
.personal_service_right_col img { width:100%; display: block; }
.personal_service_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.25em; text-align: left; font-size: 1.8rem; font-weight: 500; padding: 0px 0px 20px 0px; }
.personal_service_desc { text-align: justify; font-size: 1.0rem; line-height: 1.8rem; letter-spacing: 0.02em; word-break: keep-all; padding-bottom: 50px; }
.service_info_warp { padding: 10%; }

.birthstone_title { font-family: 'Josefin Sans', sans-serif; font-size: 23px; letter-spacing: 0.5em; text-align: center; margin: 150px 0px 10px 0px; }
.birthstone_intro_desc { font-size: 0.9rem; line-height: 1.6rem; letter-spacing: 0.02em; }
.birthstone_table_container { text-align: center; font-family: 'Nanum Gothic', serif; font-size: 13px; letter-spacing: 0.02em; line-height: 22px; margin: 30px 0px 0px 0px; }

.birthstone_table_container table { border-image: none; width: 100%; text-align: center; border-collapse: collapse; background-color: #fff; }
.birthstone_table_container table td { font-family: 'Josefin Sans', sans-serif; padding: 10px 0px 0px 0px; color: #524233 !important; } 
.birthstone_table_container table tr { padding: 5px 0px 0px 0px; color: #524233 !important; }
.birthstone_table_container table td img { width:15%; display: inline-block; }

.after_service_wrap { max-width: 1480px; margin: 150px auto 150px; }
.after_service_row { display: flex; }
.after_service_img_box { position: relative; flex-basis: 50%; max-width: 50%; }
.after_service_img_box img { width: 100%; display: block; }
.after_service_text_box { flex-basis: 50%; max-width: 50%; display: flex; align-items: center; }
.after_service_content { text-align: justify; font-size: 1.0rem; line-height: 1.8rem; letter-spacing: 0.02em; word-break: keep-all; padding-left: 10%; }
.after_service_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.25em; text-align: left; font-size: 1.8rem; font-weight: 500; padding: 0px 0px 20px 0px; }
.after_service_link { text-align: center; background: #000; color: #fff; padding: 15px 0px; margin: 30px 0px; font-size: 15px; border: 1px solid #000; text-decoration: none !important; }
.btn_top_margin { margin-top:50px; }

.section-dark { background: #222; color: white; border: none !important; }


/* ==========================================================================
   [수정 1 & 2] 전체 버튼 공통 호버 스타일 추가 및 링크 범위 제한 스타일
   ========================================================================== */

/* 버튼 공통 구조 정의 (기존 속성 통합 및 호버 효과용 포지셔닝) */
.signature_view_btn, .visit_reservation_btn, .personal_service_btn {
    padding: 0 !important; /* 내부 a 태그가 영역을 다 채울 수 있도록 패딩을 0으로 초기화 */
    max-width: 300px;
    background-color: #000000; /* 기본 배경: 블랙 */
    border: 1px solid #000000; /* [추정] 호버 시 크기 흔들림 방지를 위해 기본 테두리 부여 */
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: background-color 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
    box-sizing: border-box; /* 테두리가 버튼 크기에 영향을 주지 않도록 설정 */
}

/* 방문예약하기 버튼의 기존 마진값 보존 */
.visit_reservation_btn { margin: 60px 0px 0px 0px; }

/* 내부 <a> 링크 태그를 버튼 크기만큼 100% 꽉 채움 (텍스트 이외의 영역 클릭 해결) */
.signature_view_btn a, .visit_reservation_btn a, .personal_service_btn a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 0px; /* 기존 버튼에 있던 패딩을 링크 내부로 이식 */
    color: #ffffff; /* 기본 글자색: 화이트 */
    text-align: center;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: color 0.4s ease;
}

/* 퍼스널 서비스 버튼 패딩 조정 보존 */
.personal_service_btn a { padding: 15px 0px; }

/* 아래에서 위로 흰색 배경이 차오르는 가상 요소 설정 */
.signature_view_btn::before, .visit_reservation_btn::before, .personal_service_btn::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* 호버 시 차오를 배경색: 화이트 */
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}

/* 호버 시 스타일 처리 */
.signature_view_btn:hover, .visit_reservation_btn:hover, .personal_service_btn:hover {
    background-color: transparent !important;
    border: 1px solid #111111; /* [요청 반영] 호버 시 검정 테두리 노출 */
}

/* 호버 시 글자 색상 변경 */
.signature_view_btn:hover a, .visit_reservation_btn:hover a, .personal_service_btn:hover a {
    color: #000000; /* 호버 시 글자색: 블랙 */
}

/* 호버 시 흰색 가상 요소가 위로 100% 차오름 */
.signature_view_btn:hover::before, .visit_reservation_btn:hover::before, .personal_service_btn:hover::before {
    transform: scaleY(1); 
}


/* 부티크 CTA 하단버튼 */ 
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 2.2rem; text-align: center; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; padding: 100px 0px 0px 0px; max-width: 1480px; margin: 150px auto 0px; border-top: 1px solid #c7c7c7; }
.what_detail { font-size: 1rem; text-align: center; line-height: 1.8rem; letter-spacing: initial; padding: 30px 0px 30px 0px; }

.visit_btn { min-width: 200px; text-align: center; padding: 1.2em; display: block; margin: 0 auto; font-size: 0.9rem; border: 1px solid #111; position: relative; overflow: hidden; background-color: #fff; color: #fff; z-index: 1; transition: color 0.4s ease; }
.visit_btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #111; z-index: -1; transform: scaleY(1); transform-origin: top; transition: transform 0.4s ease; }
.visit_btn:hover { color: #111; }
.visit_btn:hover::before { transform: scaleY(0); }

.kakao_info { letter-spacing: 0.1em; font-size: 0.9rem; text-align: center; line-height: 1.8rem; padding: 0px 0px 20px 0px; margin: 100px 0px 0px 0px; }
.kakao_btn_wrap { text-align: center; }
.kakao-link { display: inline-block; text-decoration: none; }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.9rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }
.private-btn-wrap.center-align { display: flex; justify-content: center; align-items: center; width: 100%; margin: 10px 0 0 0; }
.boutique-private-btn { min-width: 200px; text-align: center; padding: 1.2em; display: inline-block; font-size: 0.9rem;  border: 1px solid #ffffff; position: relative; overflow: hidden; background-color: #111111; color: #ffffff; z-index: 1; transition: color 0.4s ease, border-color 0.4s ease;  cursor: pointer; text-decoration: none; }
.boutique-private-btn::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s ease; }
.boutique-private-btn:hover { color: #111111; border-color: #111111; }
.boutique-private-btn:hover::before { transform: scaleY(1); }
/* BASIC css end */