/* Import Local CSS */
@import url('/css2/base.css');
@import url('/css2/common.css');
@import url('/css2/reset.css');
@import url('/css2/variables.css');
@import url('/css2/globalSe.css');
@import url('/css2/shop.css');
@import url('/css2/Order.css');
@import url('/css2/newSe.css');
* {
    font-family: var(--primary-kr);
    font-weight: 500;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--primary-kr);
    color: var(--dark-black);
    font-size: 14px;
}

/* #### Common CSS #### */

/* Layout CSS */
.container {
    position: relative;
    width: 100%;
    /* 100% */
    margin: 0 auto;
     padding: 16px;
    /*background-color: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-sizing: border-box;*/
    font-family: var(--primary-kr);
}

.container.main {
    position: relative;
    user-select: none;
}

.container.address {
    box-sizing: border-box;

}

.container.detail {
    overflow: visible;
    padding: 0px;
}

.container.category {
    user-select: none;
    position: fixed;
    padding: 0 16px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5000;
    background-color: var(--white) !important;
}

/* Title CSS */
.title {
    font-family: var(--primary-kr);
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
}

/* 팝업 오버레이 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 반투명 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.container.signup .overlay {
    display: none;
}


/* 팝업 콘텐츠 */
.popup {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    max-height: 80%;
    text-align: left;
}

/* 메인 버튼 */
.top-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    /* padding: 20px 0 10px 0; */
    padding: 15px 0 5px 0;
}

.top-buttons a {
    text-decoration: none;
    color: var(--dark-gray);
    line-height: 1;
    font-size: 14px;
    border-radius: 4px;
    transition: color 0.3s, background-color 0.3s;
}

.top-buttons .divider {
    width: 1px;
    /* 선의 두께를 1px로 고정 */
    height: 16px;
    /* 선의 높이 */
    background-color: var(--dark-gray);
    /* 선의 색상 */
    display: inline-block;
    /* span을 블록처럼 보이게 설정 */
    margin: 0;
    /* 불필요한 여백 제거 */
    box-sizing: border-box;
    /* 두께 계산 문제 해결 */
}

.top-buttons a.active {
    font-weight: bold;
    color: var(--navybutton);
    /* 클릭 불가능 */
}

.maindeco {
    position: absolute;
    left: 0;
    width: 100%;
    /* 페이지 폭에 맞추기 */
    height: 10px;
    /* 원하는 높이 설정 */
    background-color: var(--white);
    /* 배경 색 */
    background-image: url('/images/maintabdeco.svg');
    /* SVG 파일 */
    background-repeat: no-repeat;
    /* 반복 방지 */
    background-position: center bottom;
    /* 페이지 폭에 맞춰 하단 중앙에 배치 */
    background-size: 100%, 100%;
    /* 가로 크기를 페이지 폭에 맞춤 */
}

/* 공통 헤더 */
.page-header {
    display: flex;
    align-items: center;
    /* 수직 중앙 정렬 */
    justify-content: space-between;
    /* 좌측 그룹과 우측 버튼 정렬 */
    margin-bottom: 20px;
}

/* 로고와 텍스트 그룹 */
.page-header .header-left {
    display: flex;
    /* 로고와 텍스트를 하나의 그룹으로 정렬 */
    align-items: center;
    gap: 6px;
    /* 로고와 텍스트 사이 간격 */
}

/* 로고 스타일 */
.page-header .logo {
    max-height: 40px;
    height: auto;
}

/* 회원가입 텍스트 */
.page-header .page-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--dark-black);
    margin: 0;
    white-space: nowrap;
}

/* 버튼 컨테이너 */
.page-header .header-buttons {
    display: flex;
    align-items: center;
    /* 버튼 수직 중앙 정렬 */
    gap: 15px;
    /* 버튼 간격 */
    padding-right: 4px;
    /* 오른쪽 여백 */
}

.page-header .header-buttons button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 버튼 아이콘 크기 */
.page-header .header-buttons button img {
    width: 24px;
    height: 24px;
}

/* #### GNB HTML #### */
.gnb {
    border-top: 1px solid var(--lightgray);
    height: 45px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 작업 완료 후 width:100% */
    background-color: var(--white);
    z-index: 500;
    /* align-items: center; */
}

.gnb a {
    align-items: center;
    text-align: center;
    flex: 1;
    display: flex;

    flex-direction: column;
    justify-content: center;
}

.gnb a img {
    width: 20px;
    /* SVG 아이콘 크기 */
    height: 20px;
    /* SVG 아이콘 크기 */
}

.gnb a span {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navybutton);
    display: block;
}

.gnb-scroll-to-top {
    position: fixed;
    bottom: 85px;
    right: 10px;
    display: none;
    cursor: pointer;
    z-index: 2;
}

.gnb-scroll-to-top img {
    width: 40px;
    height: 40px;
}


/* #### Preloading HTML #### */
.container.preloading {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* 화면 전체 높이 */
    max-width: 100vh;
    background-color: var(--white);
    /* 배경색 설정 (원하는 색상으로 변경) */
    margin: 0;
    padding: 0;

}

.preloading-header {
    background-color: var(--navybutton);
    /* 원하는 색상 (파란색 예제) */
    width: 100%;
    /* 헤더 너비를 화면 전체로 */
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: center;
    /* 헤더 안의 로고 중앙 정렬 */
    position: absolute;
}

/* 로고 크기 조정 */
.preloading-header .logo-header img {
    height: auto;
}

.preloader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    display: flex;
    flex-direction: column;
    /* 세로 정렬 */
    align-items: center;
    /* 수평 중앙 정렬 */
    text-align: center;

}



/* 로고 크기 */
.preloader-content .logo-content img {
    max-width: 300px;
    /* 로고 최대 너비 */
    height: auto;
}

/* #### Login HTML #### */

.container.login {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    font-family: var(--primary-kr);
}

.thickline {
    height: 5px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin-top: 16px;
    margin-bottom: 30px;
    /* 위아래 간격 */
}

.thickline-cart {
    height: 5px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin-top: 16px;
    margin-bottom: 6px;
    /* 위아래 간격 */
}

.thickline-b {
    height: 5px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin-top: 16px;
    margin-bottom: 30px;
    /* 위아래 간격 */
}

.thickline-c {
    height: 5px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin-top: 16px;
    margin-bottom: 12px;
    /* 위아래 간격 */
}

/* 로그인 헤더 */
.custom-header,
.overlay-header {
    display: flex;
    align-items: center;
    /* 수직 중앙 정렬 */
    justify-content: space-between;
    /* 좌측 그룹과 우측 버튼 정렬 */
}

body[data-logo="false"] .main-header .logo {
    display: none;
}

/* 로고와 텍스트 그룹 */
.header-left {
    display: flex;
    /* 로고와 텍스트를 하나의 그룹으로 정렬 */
    align-items: center;
    gap: 6px;
    /* 로고와 텍스트 사이 간격 */
}

/* 로고 스타일 */
.custom-header .logo,
.overlay-header .logo {
    max-height: 40px;
    height: auto;
}

/* 로그인 텍스트 */
.overlay-header h1,
.custom-header h1 {
    font-size: 20px;
    font-weight: 500;
    color: var(--dark-black);
    margin: 0;
    white-space: nowrap;
}

/* 버튼 컨테이너 */
.header-buttons {
    display: flex;
    align-items: center;
    /* 수직 중앙 정렬 */
    gap: 15px;
    /* 버튼 간격 */
    padding-right: 4px;
}

.header-buttons button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-buttons .overlay-close-btn {
    font-size: 22px;
}

/* 버튼 아이콘 크기 */
.header-buttons button img {
    width: 24px;
    height: 24px;
}

.login-tabs-wrapper {
    margin-top: 16px;
    margin-bottom: 28px;
}

.login-tabs-wrapper .line {
    height: 2px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin: 0;
    /* 위아래 간격 */
}

/* 탭 스타일 */
.login-tabs {
    display: flex;
    justify-content: space-between;
}

.login-tabs .tab {
    flex: 1;
    text-align: center;
    height: 30px;
    border: none;
    background-color: var(--white);
    color: var(--dark-gray);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.login-tabs .tab.active {
    background-color: var(--navybutton);
    /* 활성 탭 배경색 */
    font-size: 15px;
    color: var(--white);
}

.detail-tabs {
    display: flex;
    justify-content: space-between;
}

.detail-tabs button {
    flex: 1;
    text-align: center;
    height: 30px;
    border: none;
    background-color: var(--white);
    color: var(--dark-gray);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.detail-tabs .by-products {
    background-color: var(--navybutton);
    /* 활성 탭 배경색 */
    font-size: 15px;
    color: var(--white);
}

/* 로그인 폼 */
.login-form {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.form-group {
    margin-left: 16px;
    margin-bottom: 30px;
    display: flex;
    /* Flexbox로 가로 정렬 */
    align-items: center;
    /* 세로 정렬 */
    gap: 70px;
    /* 라벨과 입력 상자 간 간격 */
}

.form-group label {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-black);
    white-space: nowrap;
    /* 텍스트가 줄 바꿈되지 않도록 */
}

/* 입력 상자 스타일 */
.form-group input {
    flex: 1;
    /* 입력 상자가 가능한 공간을 차지 */
    padding: 10px;
    border: 1px solid var(--gray);
}

.submit-button {
    font-size: 18px;
    font-weight: 700;
    height: 50px;
    background-color: var(--navybutton);
    color: var(--white);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.check-button {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    height: 50px;
    background-color: var(--navybutton);
    color: var(--white);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

/* 구분선 */
.divider {
    display: flex;
    /* 가로 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    gap: 20px;
    /* 텍스트와 줄 사이 간격 */
    margin: 25px 0;
    /* 상하 여백 */
    text-align: center;
    color: var(--dark-gray);
    /* 텍스트 색상 */
    font-size: 14px;
    /* 텍스트 크기 */
}

/* 줄 스타일 */
.divider .line {
    flex: 1;
    /* 줄이 가능한 공간을 차지 */
    height: 1px;
    /* 줄 두께 */
    background-color: var(--light-gray);
    /* 줄 색상 */
}

/* 텍스트 스타일 */
.divider .text {
    font-size: 12px;
    white-space: nowrap;
    /* 텍스트 줄바꿈 방지 */
}

/* SNS 로그인 */
.sns-login button {
    display: flex;
    align-items: center;
    /* 아이콘과 텍스트를 세로 정렬 */
    justify-content: center;
    /* 가로 정렬 */
    gap: 7px;
    /* 아이콘과 텍스트 간 간격 */
    width: 100%;
    /* 버튼 가로 길이 */
    height: 50px;
    padding: 10px;
    /* 버튼 내부 여백 */
    border: 1px solid var(--gray);
    /* 기본 테두리 */
    border-radius: 10px;
    /* 둥근 모서리 */
    background: none;
    /* 배경색 제거 */
    font-size: 14px;
    /* 텍스트 크기 */
    font-weight: bold;
    cursor: pointer;
    /* 클릭 가능한 커서 */
    margin-bottom: 10px;
}


.sns-login .btn .icon-wrapper {
	float: left;
	width: 24px;
	height: 24px;
	font-size: 20px;
	text-align: center;
}
.sns-login .btn .icon-wrapper .br-icon-naver {
	background-image: url(/images/login20151030/naver.svg);
}
.sns-login .btn .icon-wrapper .br-icon-kakao {
    background-image: url(/images/login20151030/kakao.svg);
}
.sns-login .btn .icon-wrapper .br-icon-site {
    background-image: url(/images/login20151030/site.svg);
}
.sns-login .btn .br-icon-text {
	font-weight: bold;
	margin-top: 10px;
    width: 110px;
}


/* 메일로 로그인 */
#nsite_regmem_div .btnAttribute{
	padding: 5px 25px;
    font-size: 14px;
	font-weight: 600;
	background-color: #ffffff;
	border: solid 2px #0050b0;
	color: #0050b0;
}

#AccRegLayer{		position:relative;		}
#AccRegLayer .AccRegLayerBtn{
	padding-top: 10px;
	margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
#AccRegLayer .AccRegLayerBtn .btn-back{
	font-size: 16px;
	font-weight: 600;
	background-color: #ffffff;
	border: solid 2px #0050b0;
	color: #0050b0;
}
#AccRegLayer .AccRegLayerBtn .btn-primary {
	font-size: 16px;
	font-weight: 600;
	background-color: #0050b0;
    color: #ffffff;
}
/* 메일로 로그인 */

.AccRegStep2{
	width: 100%;
	overflow: auto;
	height: 750px;
	position: relative;
}


.icon-container {
    width: 24px;
    /* 아이콘 컨테이너의 고정 너비 */
    height: 24px;
    /* 아이콘 컨테이너의 고정 높이 */
    display: flex;
    align-items: center;
    /* 아이콘 세로 중앙 정렬 */
    justify-content: center;
    /* 아이콘 가로 중앙 정렬 */
}

.kakao-login img {
    width: 20px;
    /* SVG 아이콘 크기 */
    height: 20px;
    /* SVG 아이콘 크기 */
}

.kakao-login {
    color: #3A1D1D;
    /* 텍스트 색상 */
}

/* 네이버 버튼 스타일 */
.naver-login img {
    width: 17px;
    /* SVG 아이콘 크기 */
    height: 17px;
    /* SVG 아이콘 크기 */
}

.naver-login {
    color: #1EC800;
    /* 텍스트 색상 */
}

.guest-login,
.guest-order {
    background-color: var(--white);
    border: 1px solid var(--gray);
}

/* 푸터 */
.login-footer {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    gap: 3%;
    font-size: 12px;
    color: var(--light-black);
}

.login-footer a, .login-footer2 a {
    text-decoration: none;
    color: var(--blue);
}

/* 푸터2 */
.login-footer2 {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    gap: 3%;
    font-size: 12px;
    color: var(--light-black);
    text-align: center;
    flex-direction: column;
}


/* 약관 */
.login-terms {

    font-size: 12px;
    color: var(--dark-gray);
    text-align: left;
    margin-top: 20px;
}

.login-terms .line {
    display: block;
    /* 블록 요소로 설정 */
    height: 1px;
    /* 줄의 두께 */
    background-color: var(--light-gray);
    /* 줄 색상 */
    margin-bottom: 30px;
    /* 줄과 텍스트 간 간격 */
}

.login-terms span {
    padding-left: 16px;
    display: block;
    margin-bottom: 5px;
}

.login-terms a {
    color: var(--lightblue);
}

/* #### Signup-SNS-Approval #### */

.container.signup {
    /* 부모 요소의 폭을 기준으로 계산 */
    min-height: 755px;
    /* 최대 폭 설정 */
    padding: 16px;
    /* 패딩 포함 */
    box-sizing: border-box;
    /* 패딩과 테두리를 폭 계산에 포함 */
}

/* Signup Fields */
.signup-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    /* 필드 간 간격 */
}

.signup-content .line {
    height: 2px;
    /* 라인의 두께 */
    background-color: var(--navybutton);
    /* 라인의 색상 */
    width: 100%;
    /* 화면 너비에 맞게 */
    margin-top: 16px;
    margin-bottom: 40px;
}

/* Signup Fields */
.signup-field {
    position: relative;
    justify-content: space-between;
    /* 양쪽 정렬 */
    display: flex;
    /* 라벨과 입력 필드 한 줄 배치 */
    align-items: center;
    /* 수직 중앙 정렬 */
    margin-left: 16px;
    flex: 1;
}

.custom-placeholder {
    position: absolute;
    top: 10px;
    left: 120px;
    font-size: 14px;
    color: var(--dark-gray);
    pointer-events: none;
    /* 클릭 방지 */
}

.signup-field label {
    flex: 0 0 108px;
    /* 라벨 고정 너비 */
    font-size: 14px;
    /* 텍스트 크기 */
    font-weight: 600;
    /* 볼드체 적용 */
    color: var(--dark-black);
    /* 텍스트 색상 */
    text-align: left;
    /* 라벨 텍스트를 오른쪽으로 정렬 */
    white-space: nowrap;
}

.signup-field input {
    flex: 1;
    /* 필드가 남은 공간을 채우도록 */
    padding: 10px;
    border: 1px solid var(--gray);
    font-size: 14px;
    height: 38px;
    /* 높이 통일 */
    box-sizing: border-box;
    margin-left: 0;
    /* 추가적인 여백 제거 */
}

input::placeholder {
    font-weight: 300;
}

/* 별표 스타일 */
.signup-field label em {
    font-style: normal;
    /* 이탤릭 제거 */
    color: var(--alert-red);
    /* 빨간색 적용 */
    font-weight: bold;
    /* 별표도 볼드체 */
}

/* 메시지 기본 스타일 */
/* 메시지 기본 스타일 */
.message {
    text-align: center;
    margin-left: 16px;
    /* 항상 고정된 margin-left */
    font-size: 11px;
    opacity: 1;
    /* 초기 불투명도 */
    height: auto;
    /* 초기 높이 */
    overflow: hidden;
    /* 높이 변화 시 오버플로우 숨김 */
    transition: height 1s ease, opacity 1s ease;
    /* 부드러운 전환 */
}

.message.error {
    color: red;
}

.message.success {
    color: green;
}

/* 숨김 상태 정의 */
.message.hidden {
    display: none;
    /* 트랜지션 종료 후 DOM에서 제거 */
}

.hidden {
    display: none;
}

/* 이메일 입력 필드와 선택하기 필드 */
.check-input-wrapper {
    display: flex;
    position: relative;
    /* 드롭다운 아이콘 정렬을 위한 기준 */
    align-items: center;
    /* 수직 중앙 정렬 */
    width: 100%;
    /* 부모 요소의 너비를 맞춤 */
    box-sizing: border-box;
    /* 패딩 포함 */
    margin-bottom: 20px;
}

.signup-content #CheckUserID,
.signup-content #CheckPWD,
.signup-content #CheckCompanyNum,
.signup-content #CheckCompanyNumID,
.signup-content #CheckEMAIL
{
    display: block;
    font-size: 12px;
    color: #de0404;
    width: 100%;
    margin-top: 30px;
    left: 0;
    text-align: left;
}


.check-input-wrapper span {
    flex: 0;
    position: absolute;
    /* 입력 필드 내부 배치 */
    right: 100px;
    top: 50%;
    transform: translateY(-35%);
    font-size: 12px;
    color: var(--dark-black);
    pointer-events: none;
    /* 클릭 불가 */
}

.check-input-wrapper select {
    height: 40px;
    /* 입력 필드와 동일한 높이 */
    line-height: 40px;
    padding: 0px 10px;
    margin: 0px;
    border-top: 1px solid var(--gray);
    /* 상단 테두리 */
    border-left: none;
    /* 좌측 테두리 */
    border-bottom: 1px solid var(--gray);
    /* 하단 테두리 */
    border-right: 1px solid var(--gray);
    /* 우측 테두리 제외 */
    font-size: 14px;
    appearance: none;
    /* 기본 브라우저 스타일 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.check-input-wrapper .dropdown-icon {
    position: absolute;
    right: 20px;
    /* 드롭다운 아이콘 위치 */
    top: 50%;
    transform: translateY(-30%);
    width: 12px;
    height: 12px;
    background-image: url('/images/dropdown.svg');
    /* 드롭다운 아이콘 */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    /* 클릭 이벤트 차단 */
}

/* 기본적으로 직접입력 필드 숨김 */
#custom-domain {
    display: none;
    /* 기본적으로 숨김 */
    border: none;
    /* 테두리 제거 */
    outline: none;
    /* 포커스 시 나타나는 외곽선도 제거 */
    position: absolute;
    /* 부모 요소를 기준으로 절대 위치 */
    top: 50%;
    /* 부모 요소 기준으로 수직 정렬 */
    transform: translateY(-50%);
    /* 수직 중앙으로 이동 */
    height: 38px;
    font-size: 14px;
    /* 글자 크기 */
    padding: 0px;
}



.signup-content .secondline {
    height: 2px;
    /* 라인의 두께 */
    background-color: var(--deepgray);
    /* 라인의 색상 */
    width: 100%;
    /* 화면 너비에 맞게 */
    margin-top: 40px;
}

.login-form .secondline {
    height: 2px;
    /* 라인의 두께 */
    background-color: var(--deepgray);
    /* 라인의 색상 */
    width: 100%;
    /* 화면 너비에 맞게 */
    margin-top: 33px;
    margin-bottom: 10px;
}

.signup-content .thirdline {
    height: 1px;
    background-color: var(--deepgray);
    width: 100%;
}

.signup-content .fourthline {
    height: 1px;
    background-color: #ddd;
    width: 100%;
}

/* 약관 동의 전체 섹션 */
.agree-section {
    margin-left: 16px;
    margin-top: 10px;
}

.agree-section .agree-title span {
    font-size: 14px;
    /* 입력 필드 제목과 동일 */
    font-weight: 700;
    /* 동일한 굵기 */
    color: var(--dark-black);
    /* 동일한 색상 */
    line-height: 1.5;
    /* 동일한 줄 간격 */
}

/* 이용약관 동의 제목과 약관 전체 동의 */
.agree-title-wrapper {
    display: flex;
    /* 가로 정렬 */
    align-items: center;
    /* 수직 중앙 정렬 */
    justify-content: flex-start;
    /* 좌측 정렬 */
}

.agree-title em {
    font-style: normal;
    color: var(--alert-red);
    font-weight: bold;
}

.agree-all-wrapper {
    display: flex;
    align-items: center;
    /* 체크박스와 텍스트 수직 중앙 정렬 */
    gap: 5px;
}

.agree-all-wrapper label {
    font-weight: 700;
}

/* 커스텀 체크박스 숨기기 */
.custom-checkbox,
.custom-filter-checkbox,
.additional-option,
.checkbox-red,
.checkbox-white,
.checkbox-black,
.checkbox-blue,
.checkbox-yellow,
.checkbox-green,
.checkbox-brown,
.checkbox-metal,
.checkbox-transparent,
.checkbox-picture,
.checkbox-pattern,
.checkbox-nature {
    display: none;
}

/* 약관 전체 동의 체크박스는 기본 체크박스로 유지 */
.container .agree-section .agree-all-checkbox {
    margin: 0 0 0 20px;
    display: inline-block;
    width: 16px;
    height: 16px;
}

/* 커스텀 체크박스 스타일 */
.checkbox-icon,
.filter-checkbox-icon,
.checkbox-red-icon,
.checkbox-white-icon,
.checkbox-black-icon,
.checkbox-blue-icon,
.checkbox-yellow-icon,
.checkbox-green-icon,
.checkbox-brown-icon,
.checkbox-metal-icon,
.checkbox-transparent-icon,
.checkbox-picture-icon,
.checkbox-pattern-icon,
.checkbox-nature-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: middle;
}

.checkbox-container {
    display: flex;
    align-items: center;
}

/* 커스텀 체크박스 세팅 및 이미지 */
.checkbox-icon {
    margin-top: 3px;
    background-image: url('/images/unchecked.svg');
}

.additional-options .checkbox-icon {
    margin-bottom: 3px;
    margin-right: 4px;
}

.filter-checkbox-icon {
    margin-top: 1px;
    margin-right: 4px;
    background-image: url('/images/filteruncheckedicon.svg');
}

.checkbox-red-icon,
.checkbox-white-icon,
.checkbox-black-icon,
.checkbox-blue-icon,
.checkbox-yellow-icon,
.checkbox-green-icon,
.checkbox-brown-icon,
.checkbox-metal-icon,
.checkbox-transparent-icon,
.checkbox-picture-icon,
.checkbox-pattern-icon,
.checkbox-nature-icon {
    margin-right: 4px;
}

.checkbox-red-icon {
    background-image: url('/images/cboxreduncheck.svg');
}

.checkbox-white-icon {
    background-image: url('/images/cboxwhiteuncheck.svg');
}

.checkbox-black-icon {
    background-image: url('/images/cboxblackuncheck.svg');
}

.checkbox-blue-icon {
    background-image: url('/images/cboxblueuncheck.svg');
}

.checkbox-yellow-icon {
    background-image: url('/images/cboxyellowuncheck.svg');
}

.checkbox-green-icon {
    background-image: url('/images/cboxgreenuncheck.svg');
}

.checkbox-brown-icon {
    background-image: url('/images/cboxbrownuncheck.svg');
}

.checkbox-metal-icon {
    background-image: url('/images/cboxmetaluncheck.png');
}

.checkbox-transparent-icon {
    background-image: url('/images/cboxtpuncheck.svg');
}

.checkbox-picture-icon {
    background-image: url('/images/cboxpicuncheck.svg');
}

.checkbox-pattern-icon {
    background-image: url('/images/cboxpatternuncheck.svg');
}

.checkbox-nature-icon {
    background-image: url('/images/cboxnatureuncheck.svg');
}

.term-item label {
    cursor: pointer;
    /* 레이블도 클릭 가능하도록 설정 */
    font-size: 14px;
    color: var(--dark-black);
    line-height: 1.5;
}

/* 체크된 상태 아이콘 */
.custom-filter-checkbox:checked+.filter-checkbox-icon {
    background-image: url('/images/filtercheckedicon.svg');
}

.custom-checkbox:checked+.checkbox-icon,
.additional-option:checked+.checkbox-icon {
    background-image: url('/images/checked.svg');
}

.checkbox-red:checked+.checkbox-red-icon {
    background-image: url('/images/cboxredcheck.svg');
}

.checkbox-white:checked+.checkbox-white-icon {
    background-image: url('/images/cboxwhitecheck.svg');
}

.checkbox-black:checked+.checkbox-black-icon {
    background-image: url('/images/cboxblackcheck.svg');
}

.checkbox-blue:checked+.checkbox-blue-icon {
    background-image: url('/images/cboxbluecheck.svg');
}

.checkbox-yellow:checked+.checkbox-yellow-icon {
    background-image: url('/images/cboxyellowcheck.svg');
}

.checkbox-green:checked+.checkbox-green-icon {
    background-image: url('/images/cboxgreencheck.svg');
}

.checkbox-brown:checked+.checkbox-brown-icon {
    background-image: url('/images/cboxbrowncheck.svg');
}

.checkbox-metal:checked+.checkbox-metal-icon {
    background-image: url('/images/cboxmetalcheck.png');
}

.checkbox-transparent:checked+.checkbox-transparent-icon {
    background-image: url('/images/cboxtpcheck.svg');
}

.checkbox-picture:checked+.checkbox-picture-icon {
    background-image: url('/images/cboxpiccheck.svg');
}

.checkbox-pattern:checked+.checkbox-pattern-icon {
    background-image: url('/images/cboxpatterncheck.svg');
}

.checkbox-nature:checked+.checkbox-nature-icon {
    background-image: url('/images/cboxnaturecheck.svg');
}

/* 설명 텍스트 */
.agree-description {
    font-size: 12px;
    color: var(--dark-gray);
    margin-bottom: 15px;
}

/* 개별 약관 항목 */
.term-item {
    display: flex;
    /* 체크박스와 텍스트를 가로로 정렬 */
    align-items: column;
    gap: 10px;
    /* 체크박스와 텍스트 간 간격 */
    margin-bottom: 10px;
    /* 항목 간 간격 */
    margin-left: 16px;
}

.term-item label {
    display: flex;
    /* 텍스트 내부 요소 정렬 */
    align-items: column;
    /* 수직 중앙 정렬 */
    font-size: 14px;
    line-height: 1.5;
    /* 줄 간격 */
    color: var(--dark-black);
}

.btn-view {
    margin-left: 10px;
    display: inline-block;
    padding: 0px 6px;
    /* 버튼 내부 여백 */
    font-size: 12px;
    /* 텍스트 크기 */
    font-weight: bold;
    color: var(--blue);
    /* 텍스트 색상 */
    background-color: var(--blue);
    color: var(--white);
    border: 1px solid var(--blue);
    /* 테두리 */
    border-radius: 6px;
    /* 둥근 모서리 */
    cursor: pointer;
    /* 포인터 커서 */
    text-align: center;
    text-decoration: none;
    /* 텍스트 밑줄 제거 */
}

/* 버튼 호버 효과 */
.btn-view:hover {
    background-color: var(--white);
    color: var(--navy);
    transition: background-color 0.2s ease;
}

.term-item em {
    display: inline-block;
    /* (필수)와 (선택)을 고정 위치로 유지 */
    width: 44px;
    /* 동일한 너비로 정렬 */
    text-align: left;
    /* 가운데 정렬 */
    font-style: normal;
    /* 이탤릭 제거 */
    font-weight: bold;
    /* 굵게 표시 */
    color: var(--light-black);
    margin-left: 4px;
}

.order-info-detail .term-item em {
    color: #C80000;
    overflow: hidden;
    width: 56px;
}

.term-item a {
    color: var(--blue);
    text-decoration: underline;
}

/* Signup Button */
.button-container .btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    background-color: var(--navybutton);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

.button-container .btn-temp-password {
    margin-top: 0px;
}

/* 공통 버튼 스타일 */
.signup-field button {
    height: 40px;
    font-size: 14px;
    color: var(--white);
    background-color: var(--navybutton);
    /* 기본 버튼 색상 */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 버튼 호버 스타일 */
.signup-field button:hover {
    background-color: var(--lightblue);
    /* 버튼 호버 색상 */
    transition: background-color 0.2s ease;
}


.phone-input-wrapper {
    min-width: 0%;
    flex: 1;
    box-sizing: border-box;
    align-items: center;
    display: flex;
    /* 플렉스 박스 설정 */
    justify-content: space-between;

}

.business-input-wrapper {
    min-width: 0%;
    flex: 1;
    align-items: center;
    display: flex;
    /* 플렉스 박스 설정 */
}

.phone-input-wrapper input {
    flex: 1;
    /* 입력 필드가 가용 공간을 차지 */
    height: 40px;
    border: 1px solid var(--gray);
    font-size: 14px;
    box-sizing: border-box;
    min-width: 50%;
    /* 최소 너비 설정 */
}

.phone-input-wrapper .btn-certification {
    padding: 0 10px;
    height: 40px;
    /* 입력 필드와 동일한 높이 */
    border: 1px solid var(--gray);
    font-size: 14px;

}

/* 인증번호 입력 필드 */
.auth-input-wrapper {
    min-width: 0%;
    display: flex;
    /* Flexbox로 가로 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    width: 100%;
    /* 부모 요소의 너비를 꽉 채움 */
    position: relative;
    /* 타이머 배치를 위해 필요 */
    justify-content: space-between;
    gap: 10px;
    overflow: hidden;

}

.auth-input-wrapper input {
    flex: 1;
    /* 입력 필드가 가용 공간을 차지 */
    height: 40px;
    border: 1px solid var(--gray);
    font-size: 14px;
    box-sizing: border-box;
    min-width: 50%;
    /* 최소 너비 설정 */
}

.auth-input-wrapper .timer {
    flex: 0;
    position: absolute;
    /* 입력 필드 내부 배치 */
    right: 78px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--alert-red);
    pointer-events: none;
    /* 클릭 불가 */
}

.auth-input-wrapper .reset {
    flex: 0;
    display: flex;
    position: absolute;
    align-items: center;
    right: 114px;
    justify-content: center;
    text-decoration: none;
    /* 기본 링크 스타일 제거 */
}

.auth-input-wrapper .btn-resend {
    height: 40px;
    font-size: 14px;
    color: white;
    background-color: var(--blue);
    border-radius: 6px;
    box-sizing: border-box;
}

/* 주소 필드 래퍼 */
.address-wrapper {
    display: flex;
    /* Flexbox로 가로 정렬 */
    min-width: 0;
    flex: 1;
    align-items: center;
    /* 세로 중앙 정렬 */
    box-sizing: border-box;
    /* 패딩 포함 */
    position: relative;
    /* 타이머 배치를 위해 필요 */
    flex-wrap: wrap;
}

.address-wrapper input {
    flex: 1;
    /* 입력 필드가 가용 공간을 차지 */
    height: 40px;
    border: 1px solid var(--gray);
    font-size: 14px;
    box-sizing: border-box;
    min-width: 10%;
    /* 최소 너비 설정 */
}

.address-wrapper .btn-post-search {
    height: 40px;
    font-size: 14px;
    color: white;
    background-color: var(--blue);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.notice {
    padding-left: 130px;
    font-size: 11px;
    margin: 0px;
    margin-bottom: 20px;
}

p.info {
    padding-top: 12px;
    padding-bottom: 8px;
    text-align: center;
    font-size: 12px;
}

/* #### Find-id HTML #### */
.id-info {
    box-sizing: border-box;
    margin-top: 80px;
    text-align: center;
    margin-bottom: 50px;

}

.id-info p {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

#signup-finish {
    font-size: 16px;
    color: var(--deep-blue)
}

#congrat {
    font-size: 14px;
    color: var(--navybutton);
    margin-bottom: 4px;
}

.id-info p:nth-child(2) {
    font-size: 21px;
    padding: 10px;
}

.logo-footer {
    margin-top: 40px;
    text-align: center;
}

#businessid {
    height: 60px;
    line-height: 1.5;
}

#businessid:focus+.custom-placeholder {
    display: none;
    /* 입력 시 텍스트 숨기기 */
}

/* 검색 바 스타일 */
.search-bar {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    background: white;
    border-radius: 25px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 검색 입력 필드 */
.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px;
    font-size: 14px;
}

/* 검색 버튼 (lookup.svg 사용) */
.search-bar button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 검색 버튼 내부 아이콘 크기 조정 */
.search-bar button img {
    width: 20px;
    /* 기존 header 아이콘 크기 맞춤 */
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* 검색 버튼 hover 효과 */
.search-bar button:hover img {
    opacity: 1;
}

/* 닫기 버튼 스타일 */
#close-search {
    font-size: 20px;
    color: #888;
    transition: color 0.2s;
}

#close-search:hover {
    color: black;
}

/* 활성화 상태 */
.search-bar.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* #### Main HTML #### */

.main-header {
    position: absolute;
    /* 컨테이너 내부에서 절대 위치 */
    top: 0;
    /* 컨테이너 내부 최상단에 배치 */
    left: 0;
    /* 컨테이너 내부 좌측에 배치 */
    width: 100%;
    /* 패딩 포함된 전체 크기 계산 (좌우 16px씩) */
    height: 54px;
    /* 헤더의 고정 높이 */
    background-color: var(--navybutton);
    /* 헤더 배경색 */
    display: flex;
    /* 정렬 */
    justify-content: space-between;
    /* 내부 요소 간격 */
    align-items: center;
    /* 세로 정렬 */
    z-index: 10;
    /* 다른 요소 위에 표시되도록 */
}

/* 로고 크기 조정 */
.main-header .logo-header img {
    margin-top: 4px;
    margin-left: 16px;
    align-items: center;
}
/*

.toggle-buttons {
    display: flex;
    justify-content: center;
    white-space: nowrap;
}

.toggle-btn {
    padding: 10px 24px;
    border: none;

    margin: -9px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.toggle-btn.active {
    text-align: center;
    background-color: var(--skyblue);
    !* 활성화된 버튼 색상 *!
    color: white;
    z-index: 12;
    border-radius: 24px;
}

.toggle-btn:not(.active) {
    padding-left: 30px;
    text-align: right;
    !* 텍스트 오른쪽 정렬 *!
    background-color: #000;
    color: #999;
    z-index: 1;
    border-radius: 0 24px 24px 0;
    width: 100%;
    !* 버튼의 너비를 설정 *!
    display: block;
    !* 내부 텍스트 정렬을 적용 가능하도록 설정 *!
    padding-right: 14px;
    !* 오른쪽 여백 추가 *!
}
*/

.main-inner {
    padding-top: 40px;
}

.main-content {
    overflow: visible;
    padding-top: 10px;
}

.front-goods-slider a {
    flex: 1;
    /* 내부 요소가 부모 크기를 따르도록 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.front-goods-slider {
    width: 100%;
    /* 올바른 width 계산 */
    margin-left: -16px;
    margin-right: -16px;
    /* aspect-ratio: 16 / 9;
    가로 세로 비율 유지 */
    display: flex;
    /* 내부 요소들이 비율을 따르도록 강제 */
    overflow: hidden;
}


.front-goods-slider a img {
    width: 100%;

}

.long-banner-wrapper {
    position: relative;
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
}

.long-banner {
    position: absolute;
    top: -90px;
    background-color: #3dcaff;
    right: calc((100vw - 222px)/8);
    width: calc(54px + 50vw);
    height: 92px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
    cursor: pointer;

}

.long-banner-wrapper .long-banner p {
    margin-left: 36%;
    color: var(--white);
    font-size: 18px;
    letter-spacing: 0;
}

.long-banner .banner-phone {
    font-size: 20px;
    font-weight: 800;
}

.icon-banner {
    margin-top: 15px; /* 150px->320px->245px */
    margin-bottom: 30px;
    display: grid;
    /* 그리드 레이아웃 */
    grid-template-columns: repeat(4, 1fr);
    /* 5열 */
    gap: 6% 1%;
    /* 항목 간 간격 */
    justify-items: center;
    /* 각 아이템을 수평 중앙 정렬 */
    align-items: center;
    /* 각 아이템을 수직 중앙 정렬 */
    user-select: none;
    /* 드래그 방지 */
}

.icon-banner .icon-item-div {
    width: 70px;
    /* 개별 아이콘 영역 너비 */
}

.icon-banner .icon-item-div .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 가운데 정렬 */
    text-align: center;
    text-decoration: none;
}

.icon-banner .icon-item .icon {
    width: 60px;
    height: 60px;
    /* background-color: var(--dark-gray); */
    /* 배경색 */
    border-radius: 25%;
    /* 동그라미 */
    overflow: hidden;
    /* 동그라미 바깥의 이미지 숨김 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-banner .icon-item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지가 영역을 꽉 채우면서 비율 유지 */
}

.icon-banner .icon-item .text {
    margin-top: 13px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--dark-black);
    white-space: nowrap;
    font-weight: 600;
}

/* 장바구니 */
.cart {
    position: relative;
    padding-right: 20px;

}

.cart-icon,
.cart-icon-navy {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.cart-icon svg {
    fill: white;
}

.cart-icon-navy img {
    width: 30px;
}

.cart-badge em {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ff00ff;
    /* 배지 색상 */
    border-radius: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    left: 28px;
    top: 5px;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: 16px;

}

.cart-badge em:before {
    content: attr(data-count);
}

/* #### Mypage HTML #### */
.mypage-content {
    max-width: 100%;
    background-color: var(--white);
    overflow: hidden;
}

.container.mypage {
    user-select: none;
}

.container.mypage .thickline {
    height: 5px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin-top: 12px;
    margin-bottom: 0px;
}

.emailinfo {
    padding: 15px 0 15px 0;
    _background-color: #f4f4f4;
    border-bottom: 1px solid #ddd;
    color: var(--dark-black);
    font-size: 18px;
    font-weight: bold;
}

/* 섹션 스타일 */
.section {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

.mypage-content .mypage-btn { width:85%;  max-width: 350px; display:flex; gap:8px;justify-content: space-between; }
.mypage-content .mypage-btn .btn-img { flex: 1; }


.mypage-content .section .section-title {
    _background-color: #f0f0f0; /* 원하는 배경색으로 변경 */
}

.mypage-content #faqAccordion {
    border-bottom: 1px solid #ddd;
}

#details,
#reviews,
#qa,
#shipping {
    display: block;
    /* 자식 요소를 블록 흐름으로 배치 */
    padding-bottom: 0;
}

.delivery-case-title {
    font-size: 20px;
    letter-spacing: -1px;
    font-weight: 800;
    margin-bottom: 10px;
}

.delivery-case-secondtitle {
    font-size: 20px;
    letter-spacing: -1px;
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 10px;
}

.delivery-line {
    position: absolute;
    width: 100%;
    left: 0;
    height: 1px;
    background-color: #ddd;
}

.delivery-case-notice {
    font-size: 14px;
    margin-bottom: 12px;
    letter-spacing: -1px;
    color: var(--dark-gray)
}

.hana-image-container {
    position: relative;
    width: 100%;
    /* 필요에 따라 크기 조정 */
    height: 100px;
    /* 원하는 높이 설정 (예: 500px) */
    margin-top: 30px;
}

.hana-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 117px;
    background-image: url("/images/hana.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.photoreview {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.photoreview span {
    color: var(--dimgray);
    cursor: pointer;
}

.delivery-case-pictures {
    display: flex;
    width: calc(100% + 24px);
    margin: 0 -12px;
    left: 2%;
    justify-content: space-between;
    z-index: 2;
}

.delivery-case-pictures .image-list {
    width: 100%;
}

.delivery-case-pictures img {
    width: 24%;
    height: 24vw;
    overflow: hidden;
    /* 넘치는 이미지 제거 */
    cursor: pointer;
}

.delivery-case-pictures img:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.bestreview {
    margin-top: 10px;
    margin-bottom: 6px;
}

.delivery-case-pictures img:nth-child(1) {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.delivery-case-pictures img:nth-child(4) {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    filter: brightness(0.5);
}

.delivery-case-pictures img:nth-child(4):hover {
    filter: brightness(0.7);
}

.seemore {
    font-size: 11px;
    position: absolute;
    right: 12%;
    color: var(--white);
    user-select: none;
    pointer-events: none;
    margin-top: -13%;
}

@media (min-width: 768px) {
    .seemore {
        margin-top: -12%;
        right: 14%;
    }
}

.totalcase {
    letter-spacing: -1px;
    font-size: 14px;
    margin-top: 10px;
}

.delivery-case-gap {
    height: 102px;
    position: relative;
}

.detailimage {
    margin-top: 12px;
    _height: 909px;
}
.detailimage iframe {
    width: 100%;
    height: auto; /* 비율 유지를 위해 height를 auto로 설정 */
}

}
/*.detailimage img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 909px;
}*/

.mypage-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.section-title {
    padding: 15px 0 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--dark-black);
    flex: 1;
    text-align: left;
}

.section-subtitle {
    padding: 15px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: var(--dark-black);
    flex: 1;
    text-align: left;
}

.section-title a,
.section-subtitle a {
    font-size: 18px;
    font-weight: bold;
}

.section-items {
    width: 60%;
    /* 항목 영역 너비 */
    _background-color: var(--cloud);
    padding: 10px;
}

.section-item {
    font-size: 15px;
    color: var(--dark-black);
    text-decoration: none;
    padding: 8px 10px;
    display: block;
    transition: color 0.3s ease;
}

.section-item:hover {
    color: var(--navybutton);
}

.fax-send-wrapper {
    flex: 1;
    display: flex;
    /* Flexbox 활성화 */
    align-items: center;
    /* 세로 가운데 정렬 */
}

.fax-send-text div {
    font-size: 12px;
}

.fax-send-text {
    flex: 7
}

.checkbox-wrapper {
    margin-left: 12px;
    flex: 1;
}

.fax-send-checkbox {
    width: 16px;
    /* 체크박스 너비 */
    height: 16px;
    /* 체크박스 높이 */
    cursor: pointer;
    /* 커서 모양 */
}


.fax-send-wrapper>div {
    line-height: 1.4;
    /* 텍스트 간격 조정 */
}

/* 섹션 구분 */
.mypage-wrapper:not(:last-child) {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.mypage-footer {
    margin-top: 20px;
    padding: 16px;
}

.button-container .btn-secondary,
.button-container .btn-quaternary {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    font-weight: bold;
    color: var(--white);
    background-color: var(--navybutton);
    border: 1px solid var(--navybutton);
}

.button-container .btn-complete {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    background-color: #144BD9;
    border: 1px solid var(--navybutton);
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn.btn-order {
    font-weight: 500;
}

.button-container .btn-secondary:hover,
.button-container .btn-quaternary:hover {
    color: var(--navybutton);
    background-color: var(--white);
}

.button-container .btn-quaternary {
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn.btn-penta,
.btn.btn-hexa,
.btn.btn-hepta {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    margin-top: 8px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    /* 상태 변화 애니메이션 추가 */
}

/* Penta 버튼 스타일 */
.btn.btn-penta {
    color: var(--dark-black);
    border: 1px solid gray;
}

/* Penta 버튼 hover & active */
.btn.btn-penta:hover {
    background-color: var(--lightgray);
    /* 밝은 회색 배경 */
    color: var(--black);
    /* 텍스트 더 진하게 */
    border-color: #b0b0b0;
    /* 테두리 더 어둡게 */
}

.btn.btn-penta:active {
    background-color: var(--gray);
    color: var(--dark-gray);
    border-color: #a0a0a0;
    transform: scale(0.9);
}

/* Hexa 버튼 스타일 */
.btn.btn-hexa {
    color: var(--white);
    background-color: var(--navybutton);
    border: 1px solid var(--navybutton);
}

.btn.btn-hepta {
    color: var(--dark-black);
    background-color: var(--buttongray);
    border: 1px solid var(--buttongray);
}

/* Hexa 버튼 hover & active */
.btn.btn-hexa:hover {
    background-color: #003366;
    border-color: #002244;
    color: var(--light-gray);
}

.btn.btn-hexa:active {
    background-color: #001a33;
    border-color: #001122;
    color: var(--gray);
    transform: scale(0.9);
}

.button-container .btn-tertiary {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--navybutton);
    border: 1px solid var(--navybutton);
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: color 0.3s, background-color 0.3s;
}

.button-container .btn-tertiary:hover {
    background-color: var(--buttongray);
}

.mypage-footer p {
    color: var(--light-black);
}

.mypage-footer p.workday {
    margin-top: 10px;
    font-size: 16px;
    margin-bottom: 12px;
}

.mypage-footer p.lunchtime {
    font-weight: bold;
    margin-bottom: 6px;
}

.mypage-footer p.holiday {
    margin-bottom: 14px;
}

.mypage-footer h1 {
    margin-top: 7px;
    letter-spacing: -1px;
    /* 좁은 문자 간격 */
}

.mypage-footer p.question {
    font-size: 16px;
    font-weight: 800;
    color: var(--navybutton);
}

.mypage-footer span.b {
    margin-top: 20px;
}

.business-info {
    font-size: 12px;
    margin-top: 20px;
}

.businessinfo-check {
    position: absolute;
    right: 20px;
    border: 1px solid gray;
    margin-right: 10px;
    padding: 3px 5px;
    font-size: 12px;
}

.businessinfo-check:hover {
    background-color: var(--buttongray);
}

.footer-last-icon {
    display: flex;
    flex-direction: row;
    /* 기본 설정 */
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    /* 추가 정렬 */
    height: 100px;
    margin-bottom: 40px;
}

.footer-last-icon .category-logo-deco {
    display: inline-block;
    /* 또는 flex/block */
    margin: 0;
    vertical-align: middle;
    /* 추가 정렬 */
    width: 170px;
}

.sns-icon-wrapper {
    display: flex;
    gap: 12px;
    flex: 2;
}

.blog-icon {
    width: 46px;
    height: 46px;
    background-image: url(/images/naverblogicon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.instagram-icon {
    width: 46px;
    height: 46px;
    background-image: url(/images/instagram.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.blog-icon:hover,
.instagram-icon:hover {
    transform: scale(1.1);
}

.account {
    font-size: 16px;
    font-weight: 800;
    color: var(--navybutton);
}

.logo-content {
    display: flex;
    align-items: center;
    gap: 10px;

}

.logo-content a {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -1px;
}

.container.terms {
    width: 100%;
    background-color: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    font-family: var(--primary-kr);
}

#term-title {
    font-size: 20px;
    font-weight: 800;
    margin-right: 4px;
    color: var(--light-black);
}

.term-title {
    margin-bottom: 30px;
}

.terms-content,
.privacy-content,
.collect-content {
    max-height: 80vh;
    /* 높이를 화면의 70%로 제한 */
    overflow-y: auto;
    /* 세로 스크롤 활성화 */
    padding: 20px;
    /* 내부 여백 추가 */
    box-sizing: border-box;
    /* 패딩 포함 계산 */
    background-color: #fff;
    /* 배경색 */
    border: 1px solid #ccc;
    /* 테두리 */
    border-radius: 5px;
    /* 모서리 둥글게 */
    font-size: 12px;
    word-break: keep-all;

}

.terms-content p:nth-of-type(2),
.terms-content p:nth-of-type(5),
.terms-content p:nth-of-type(10) {
    margin-top: 20px;
}

.terms-content p:nth-of-type(4),
.terms-content p:nth-of-type(9) {
    margin-top: 30px;
}

.terms-content p:nth-of-type(3) {
    margin-top: 10px;
}

.collect-content p:nth-of-type(4),
.collect-content p:nth-of-type(7) {
    margin-top: 20px;
}

.privacy-content p {
    margin-top: 20px;
}

.subject-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

.subject-info {
    padding: 0px 40px;
    word-break: keep-all;
}

.page-content {
    flex: 1;
    /* 페이지 내용 영역 */
    padding: 20p 0px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: var(--white);
    border-top: 1px solid #ddd;
}

.pagination a {
    text-decoration: none;
    color: var(--navybutton);
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.pagination a:hover {
    background-color: var(--navybutton);
    color: var(--white);
}

.pagination a.active {
    background-color: var(--navybutton);
    color: white;
    pointer-events: none;
    /* 클릭 불가능 */
}

.test1 {
    font-family: var(--primary-kr);
    color: var(--alert-red)
}

.test2 {
    font-family: var(--primary-kr);
    font-size: 3em;
    color: var(--navy)
}

.bestseller {
    padding-top: 30px;
    padding-bottom: 10px;
}

#bestseller {
    font-size: 21px;
    font-weight: 700;
    color: var(--dark-gray);
}

#pick {
    margin-left: 4px;
    font-size: 24px;
    font-weight: 800;
    color: var(--navybutton);
}

.banner-slider a {
    width: 100%;
    height: auto;
}

.banner-slider {
    width: calc(100% + 32px);
    margin: 0 -16px;
    /* 슬라이더 높이 */
    z-index: 1;
    /* 다른 요소 위에 배치 */
}

.banner-slider a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지 비율 유지하며 영역 채우기 */
}

.slick-prev:before,
.slick-next:before {
    display: none;
}

.banner-slider .slick-arrow {
    z-index: 10;
}

.banner-slider .slick-prev {
    left: 1px;
    /* 왼쪽 화살표를 슬라이더 안쪽으로 이동 */
}

.banner-slider .slick-next {
    right: 1px;
    /* 오른쪽 화살표를 슬라이더 안쪽으로 이동 */
}

.slick-prev img,
.slick-next img {
    width: 8px;
    /* 화살표 이미지 크기 */
    height: auto;
}

.slick-prev:hover img,
.slick-next:hover img {
    filter: brightness(1.3);
    /* 밝게 만들기 */
}

.banner-slider .slick-dots {
    width: 50%;
    position: absolute;
    /* 부모 요소 기준으로 위치 조정 */
    left: 74%;
    /* 부모 요소 기준 가로 중앙 정렬 */
    top: -34px;
    transform: translateX(-50%);
    /* 정확히 중앙으로 이동 */
}


.banner-slider .slick-dots li button:before {
    transform: scale(1.3);
    color: var(--dark-gray);
    opacity: 1;
}

.banner-slider .slick-dots li.slick-active button:before {
    transform: scale(1.4);
    color: var(--navybutton);
}

.banner-slider .slick-dots li {
    width: 5%;
    height: auto;
}

.front-goods-slider .slick-dots {
    bottom: 15px;
}

.front-goods-slider .slick-dots li button:before {
    transform: scale(1.3);
    color: var(--cloud);
    opacity: 1;
}

.front-goods-slider .slick-dots li.slick-active button:before {
    transform: scale(1.4);
    color: var(--cyan);
}

.front-goods-slider .slick-dots li {
    margin: 0;
    width: 18px;
    height: 16px;
}

#loadMore {
    position: relative;
    top: 0;
    /* 초기 위치 */
}

.spacer-div {
    height: 50px;
    /* 원하는 높이만큼 추가 */
    width: 100%;
    /* 가로 폭은 100%로 설정 */
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1%;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.product-card {
    margin-top: 10px;
    text-align: left;
    border-radius: 5px;
}

.product-card .image-wrapper {
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

.image-wrapper a {
    display: block;
    height: 100%;
    line-height: 0;
}

.product-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.like-button {
    position: absolute;
    right: 4%;
    bottom: 12%;
    width: 15%;
    max-width: 12px;
    aspect-ratio: 1.12;
    cursor: pointer;
    transform: translateY(50%);
    z-index: 2;
}

.like-button:hover {
    filter: brightness(1.4);
}

.item-title {
    font-size: 14px;
    padding-top: 4px;
    font-weight: 500;
    letter-spacing: -1px;
}

.review-rating {
    text-align: center;
    display: flex;
    border: red;
    margin-right: 4px;
    /* 내부 요소를 가로로 배치 */
    align-items: center;
    /* 세로 중앙 정렬 */
    gap: 5px;
    /* 리뷰와 별점 사이의 간격 */
}

.rating-container {
    display: inline-block;
}

.review-count {
    display: inline-block;
    font-size: 9px;
    /* 글씨 크기 조정 */
    font-weight: bold;
    color: var(--skyblue);
    padding: 4px 4px 4px 4px;
    background-color: var(--whiteblue);
    border-radius: 2px;
    white-space: nowrap;
    /* 줄바꿈 방지 */
}

.item-info .review-rating button {display: inline-block;width: 20px;height: 20px;background: url("../image/shop/star.svg") 0 0 / 100% no-repeat;margin-left: -2px;cursor: default;}
.item-info .review-rating button.active {background: url("../image/shop/star_active.svg") 0 0 / 100% no-repeat;}

.item-info .review-rating .star-rating {
    display: flex;
    /* 세로 중앙 정렬 */
}

.star {
    display: inline-block;
    /* 별을 가로로 정렬 */
    position: relative;
    width: 12px;
    /* 별 크기 */
    height: 12px;
    background-image: url('/images/star.svg');
    /* 빈 별 */
    background-size: cover;
    margin-left: 0.5px;
}

.star .star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url('/images/starfill.svg');
    /* 채워진 별 */
    background-size: cover;
    z-index: 1;
}

#btn-more-goods {
    /* button-container
    display: flex;
    justify-content: center;
    height: 100%;
    gap: 10px;*/
    width: 100%;
    height: 30px;
}

.button-container.a {
    margin-top: 20px;
}
body[data-page="cart-pre-login"] .button-container.large {
    margin-left: 0px !important;
    margin-right: 0px !important;
    gap: 12px;
    width: 100%;
}
.button-container.large {
    margin-top: -10px;
    margin-bottom: 10px;
    
}

.load-more {

    width: 170px;
    padding: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--navybutton);
    border: 2px solid var(--navybutton);
    cursor: pointer;
    margin-top: 30px;
    margin-bottom: 40px;
    transition: color 0.3s, background-color 0.3s;
}

.load-more:hover {
    color: var(--white);
    background-color: var(--navybutton);
}

.price {
    font-size: 11px;
    font-weight: 800;
    padding-top: 4px;
    padding-bottom: 2px;
    letter-spacing: -0.3px;
}

.price-product-list-general {
    font-size: 12px;
    font-weight: 800;
    color: var(--navybutton);
    padding-top: 4px;
    padding-bottom: 2px;
}


.discountrate {
    color: red;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: -1px;
}

.discountrate-product-list-general {
    color: red;
    font-weight: 800;
    font-size: 11px;
    padding-right: 2px;
    letter-spacing: -1px;
}

.delprice {
    font-size: 9px;
    letter-spacing: -0.4px;
}

.margin {
    margin-top: 126px;
}

.bannerimage {
    margin: 0 -16px;
    left: 0;
    width: calc(100% + 32px);
    /* 페이지 폭에 맞추기 */

}

.bannerimage img {
    width: 100%;
}

.longbannerimage {
    margin: 20px -16px;
    left: 0;
    width: calc(100% + 32px);
    /* 페이지 폭에 맞추기 */
}

.longbannerimage img {
    width: 100%;
}

.promotion-text {
    margin-top: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.promotion-text .only {
    font-size: 20px;
    color: var(--light-black);
}

.hanafunc {
    font-size: 22px;
    font-weight: 800;
    color: var(--navybutton)
}

.best-title {
    padding-top: 20px;
    padding-bottom: 14px;
}

.installation-case-title {
    padding-top: 22px;
    padding-bottom: 14px;
}

.thismonth {
    font-size: 20px;
}

.best-title .hanafunc {
    font-size: 20px;
    font-weight: 800;
    color: var(--navybutton)
}

.brandnew {
    font-size: 22px;
    font-weight: 800;
    color: var(--dark-gray)
}

.scrolling-container {
    margin-top: 1px;
    width: 100%;
    height: 50px;
    /* 한 줄 높이 */
    overflow: hidden;
    /* 스크롤 영역 밖 숨김 */
    position: relative;
}

.scrolling-content {
    position: relative;
    transition: transform 1s linear;
    /* 부드러운 스크롤 효과 */
}

.wrapper {
    height: 50px;
    /* 한 줄 높이 */
    display: flex;
    /* 가로 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    padding: 0 10px;
    background-color: var(--white);

}

.wrapper .details {
    display: flex;
    flex-direction: row;
    /* 가로 정렬 */
    align-items: center;
    overflow: hidden;
    /* 텍스트 잘림 방지 */
    white-space: nowrap;
}

.wrapper.details .user {
    font-weight: bold;
    margin-right: 10px;
}

.wrapper .ordState,
.wrapper .details .psDate{
    color: #ffffff;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 10px;
    white-space: nowrap;
    /* ✅ 줄바꿈 방지 */
    display: inline-block;
    background-color: #919191;
    padding: 5px 5px;
}

.wrapper .details .description {
    color: #666;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.realtime {
    font-size: 20px;
    font-weight: 500;
    color: var(--dark-black)
}

.orderlist-realtime {
    padding-bottom: 10px;
}

.orderlist {
    font-size: 20px;
    font-weight: 700;
    color: var(--navybutton)
}

.line2 {
    position: absolute;
    left: 0;
    height: .5px;
    width: 100%;
    /* 페이지 폭에 맞추기 */
    background-color: var(--light-gray);
    /* 배경 색 */
}

.reviewtitle {
    padding-top: 30px;
    padding-bottom: 10px;
}

.gap {
    padding: 30px;
}

.gap1 {
    margin-top: 30px;
    margin-bottom: 10px;
}

.gap2 {
    margin-top: 580px;
}

.gap10 {
    margin-top: 10px;
}

.gap3 {
    margin-top: 450px;
}

.blogtitle {
    text-align: center;
    padding-bottom: 20px;
}

.blogtitle .hana {
    font-size: 20px;
    font-weight: 800;
    color: var(--deep-blue);
}

.blogtitle .blog {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark-black);
}

.ui-accordion {
    padding: 6px 0px;
}

.ui-accordion .ui-accordion-header {
    color: var(--dark-black);
    /* 기본 글씨 색 */
    padding: 6px 5px;
    padding-left: 26px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    /* 테두리 제거 */
    background-color: transparent;
    /* 배경색 제거 */
}

.ui-accordion .ui-accordion-header-active {
    color: var(--navybutton);
    /* 활성화된 글씨 색 */
    font-weight: bold;
    /* 필요시 글씨 굵기 추가 */
}

.ui-accordion .ui-accordion-content {
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.2;
    background-color: transparent;
    border: none;
    user-select: none;
}

.ui-accordion .ui-accordion-header .ui-icon {
    display: none;
    /* 삼각형 아이콘 숨기기 */
}

.date-container {
    display: flex;
}

.left-container {
    flex: 3;
    /* 좌측 컨테이너가 2배 크기 */
}

.left-container .date-section {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    /* 좌측 그룹과 우측 버튼 정렬 */
    text-align: center;
}

.left-container .date-section span {
    font-size: 16px;
}

.left-container .period-buttons {
    font-size: 16px;
    display: flex;
    flex: 1;
    gap: 8px;
    height: 40px;
    padding: 5px;
}

#btn-1week,
#btn-1month,
#btn-3months,
#btn-6months {
    border: none;
    color: var(--dark-black);
    background-color: var(--buttongray);
}

.left-container .period-buttons button {
    flex: 1;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.right-container {
    flex: 1;
    /* 우측 컨테이너가 1배 크기 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.right-container button {
    font-size: 16px;
    color: var(--dark-black);
    width: 90%;
    height: 90%;
    background-color: var(--buttongray);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}




/*

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    top: 50%;
    !* 수직 중앙 정렬 *!
    transform: translateY(-50%);
    !* 수직 중앙 정렬 보정 *!
}

!* 이전 버튼 *!
.ui-datepicker .ui-datepicker-prev {
    background-image: url('/images/slickprev.svg');
    background-size: contain;
    align-items: center;
}

.ui-datepicker {
    align-items: center;
}

!* 다음 버튼 *!
.ui-datepicker .ui-datepicker-next {
    background-image: url('/images/slicknext.svg');
    background-size: contain;
    background-position: right center;
}

!* span 요소 숨기기 *!
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(1) {
    !* 일요일 컬럼 *!
    color: red;
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(7) {
    !* 토요일 컬럼 *!
    color: blue;
}

.ui-datepicker .ui-datepicker-calendar td.saturday a {
    color: blue !important;
    !* 토요일 날짜 *!
}

.ui-datepicker .ui-datepicker-calendar td.sunday a {
    color: red !important;
    !* 일요일 날짜 *!
}

.date-picker-container {
    gap: 5px;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 14px;
    padding-top: 4px;
}

.custom-calendar {
    width: 22px;
    height: 22px;
    background-image: url('/images/calendar.svg');
    !* 달력 아이콘 URL *!
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.custom-calendar:hover {
    opacity: 0.8;
    border: none;
}

#start-date,
#end-date {
    width: 80px;
    height: 20px;
    color: var(--dark-black);
    background-color: var(--white);
    font-size: 12px;
    border: none;
    border-radius: 5px;
    text-align: center;
}

.ui-datepicker {
    border: none;
    !* 달력 외곽선 제거 *!
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    !* 부드러운 그림자 *!
    border-radius: 10px;
    !* 둥근 모서리 *!
}

.ui-datepicker table {
    border-spacing: 0;
    !* 날짜 간격 제거 *!
    width: 100%;
    border: none;
    padding: 0;
}

.ui-datepicker .ui-datepicker-calendar td {
    border: none;
    !* 각 날짜 테두리 제거 *!
    padding: 0;
    !* 날짜 셀 간격 제거 *!
    height: auto;
}

.ui-datepicker .ui-datepicker-calendar td a {
    border: none;
    !* 각 날짜 테두리 제거 *!
    height: auto;
    padding: 10px 0px;
}

.hidden-date {
    display: none !important;
    !* 날짜 셀 숨김 *!
}

*/

.order-container,
.secondorder-container {
    margin-top: 12px;
    width: 100%;
    background: #f2f2f2;
    border: 2px solid #595959;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px 4px;
    box-sizing: border-box;
}

.refund-a-container,
.refund-b-container,
.transfer-a-container {
    margin-top: 12px;
    width: 100%;
    background: #f2f2f2;
    border: 2px solid #595959;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px 4px;
    box-sizing: border-box;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-left: 16px;
    margin-right: 16px;
}

.order-header p {
    margin: 2px 0;
    font-size: 12px;
    color: #555;
}

.order-header-final {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-right: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray);
}

.status-button {
    background-color: var(--navybutton);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}

.status-button-light {
    background-color: var(--lightblue);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: none;
}

.status-button-superlight {
    background-color: #82A5FF;
    color: var(--white);
    border: none;
    font-weight: bold;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: none;
}

.status-button-refund {
    background-color: var(--magenta);
    color: var(--white);
    border: none;
    font-weight: bold;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: none;
}

.refund-status-button-light {
    background-color: #D95CA7;
    color: var(--white);
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}

.refund-status-button {
    background-color: var(--magenta);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}

.product-info {
    background-color: #fff;
    display: flex;
    margin-bottom: 16px;
    padding-top: 6px;
    padding-left: 16px;
    padding-right: 16px;
    height: 130px;
    border-top: 1px solid var(--lightgray);
    border-bottom: 1px solid var(--lightgray);
}

.order-product-info {
    background-color: var(--cloud);
    flex-direction: column;
    border-top: 1px solid var(--lightgray);
    border-bottom: 1px solid var(--lightgray);
}

.grayline {
    margin-top: 16px;
    margin-bottom: 16px;
    height: 2px;
    background-color: var(--gray);
    width: 100%;
}

.product-info-title span {
    font-size: 14px;
    font-weight: 700;
    height: 16px;
}

.info-left-container {
    align-items: center;
    /* 세로 중앙 정렬 */
    justify-content: center;
    /* 가로 중앙 정렬 (선택 사항) */
}

.order-info-top-container {
    border-bottom: 1px solid var(--buttonlightgray);
}

.order-info-top-container,
.order-info-bottom-container {
    display: flex;
    align-items: center;
}

.order-info-top-container .product-info-title,
.order-info-bottom-container .product-info-title {
    width: 160px;
    margin-left: 16px;
}

.info-right-container {
    flex: 1;
    text-align: center;
}

.product-image-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.product-info-body {
    display: flex;
    padding-right: 40px;
    font-size: 12px;
    height: 80px;
    align-items: center;
}


.product-images {
    display: flex;
    gap: 8px;
}

.image {
    width: 76px;
    height: 76px;
    background-color: #00aaff;
}

.product-options {
    padding: 0px 16px;
    justify-content: space-between;
    position: relative;
    margin-bottom: 16px;
}

.product-options p {
    margin: 4px 0;
    font-size: 14px;
    font-weight: bold;
}

.product-options ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.product-status p {
    position: absolute;
    top: 0%;
    right: 16px;
    font-size: 16px;
    font-weight: 800;
    color: #0A2D86;
    /* navybutton */
}

.order-item-a {
    border: 1px solid var(--gray);
}

.price-info {
    text-align: center;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    color: #0A2D86;
}

.price-info .refundprice {
    color: var(--magenta);
}

.price-info .pricevalue {

    font-weight: 800;
    font-size: 24px;
}

.detail-button,
.receipt-button {
    width: 98%;
    text-align: center;
    border: none;
    background-color: #DFDFDF;
    color: #222;

    margin-left: 1%;
    padding: 4px;
    font-size: 14px;
    cursor: pointer;
}

.receipt-button {
    margin-top: 10px;
    background-color: #0056b3;
    color: #f2f2f2;
}

.order-left-container {
    display: flex;
    align-items: center;
}

.order-date span {
    font-size: 14px;
    font-weight: 700;
    padding-right: 24px;
}

.category-header {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    top: 0;
    background-color: var(--white);
    z-index: 5001;
}

.category-header-title {
    font-size: 19px;
    font-weight: 800;
}

.category-header-left .close-overlay {
    position: inherit;
    background: none;
    border: none;
    color: var(--dark-gray);
    font-size: 30px;
    cursor: pointer;
    font-weight: normal;
    line-height: 1;
}

.category-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5000;
    margin-left: 16px;
}

.category-header-right .carticon {
    width: 26px;
    margin-right: 6px;
}

.category-header-right {
    margin-right: 16px;
}

#category_menu { width: 100%; display: flex; flex-direction: column; height: 800px; }

.category_div { position: relative; background-color: #f5f5f5; }

.category_wrap {
    overflow-x: auto;
    display: flex;
    align-items: center;
    padding: 14px 8px;
    border-bottom: 1px solid #E0E0E0;
}

.type_btn
{
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
    padding: 0 11px;
    position: relative;
    color: #737373;
}

.type_btn.active span 
{
    font-weight: 600;
    color: #12358f;
}

.type_btn.active span::after 
{
    width: 80%;
}

/* 글자 아래 밑줄 */
.type_btn span::after 
{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;            /* 글자 바로 아래 */
    width: 0;
    height: 2px;             /* 밑줄 두께 */
    background-color: #000;
    transform: translateX(-50%);
}

#product_wrap{ flex: 1 1 0; display: flex; min-height: 0; }

/* 카테고리 탭 */
.category_tap_list
{
    display: flex;
    flex-direction: column;
    width: 95px;
    background-color: #f5f5f5;
}

.category_tap_list span::after { background-color: #fff; } 

.category_tap 
{
    display: flex;
    color: #737373;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    height: 60px;
    align-items: center;
}

/* 글자를 중앙에서 살짝 왼쪽으로 이동 */
.category_tap span 
{
    margin-left: 10px;
}

.category_tap.active { background-color: #fff; }

.category_tap.active span { color: #12358f; font-weight: 600; }

.category_tap_title { position: relative; display: inline-block; white-space: nowrap; }

/* 상품 리스트 */
.category_item_list
{
    overflow-y: auto;
    position: relative;
    flex: 1 1 0;
    background: #fff;
    padding-bottom: 100px;
    height: 100dvh;
}

.category_list
{
    display: flex;
    flex-direction: column;
}

.category_title_div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 15px;
    height: 20px;
}

.category_title
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.category_title_s
{
    font-size: 13px;
    font-weight: 600;
    color: #12358f;
}

.category_all_list
{
    color: #737373;
    font-size: 14px;
    font-weight: 500;
}

.item_list
{
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 12px) / 3));
    justify-items: center;
    gap: 10px 5px;
    width: auto;
    padding: 0 5px;
}


.item_list_img
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 110px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 12px;
    word-break: keep-all;
}

.item_list_img img { width: 100%; }

.item-divider { border:none; border-top:1px solid #D6D6D6; margin: 30px 10px 0 10px; display: block; }

.category_icon_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 20px;
    margin: 30px 10px 30px 5px;
}

.business_list_img {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 13px;
    word-break: keep-all;
}

.detail-header {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 5;
}

.detail-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
}

.detail-header-left span {
    font-size: 12px;
    color: #939393;
    padding-bottom: 1px;
}

.detail-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right: 20px;
}

.detail-header-left .divider {
    height: 14px;
    width: 2px;
    background-color: var(--navybutton);
}

.detail-header img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.detail-header .detail-hana-logo {
    margin-left: 2px;
    height: 16px;
    width: auto;
}

.detail-tabs-wrapper {
    border: 1px solid red;
    display: block;
    height: 32px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 40px;
    background-color: var(--white);
    z-index: 3;
}


.detail-tabs-wrapper .line,
.category-tabs-wrapper .line {
    height: 2px;
    background-color: var(--navybutton);
    width: 100%;
    margin: 0;
}

.product-image-container {
    position: relative;
    text-align: center;
}

/* 큰 이미지 */
.main-image {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}

/* 썸네일 이미지 목록 */
.thumbnail-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* padding-bottom: 20px; */
    padding: 20px 0;
}

.thumbnail-container img {
    touch-action: manipulation;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.thumbnail {
    width: 50px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.thumbnail.active {
    opacity: 1;
    border: 2px solid #007bff;
    border-radius: 5px;
}

.arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 1;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.arrow.left {
    left: 0px;
}

.arrow.right {
    right: 0px;
}

.thumbnail-container img {
    width: 16%;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    /* 기본 상태에서 투명한 테두리 */
    transition: transform 0.2s, border-color 0.2s;
}

/* 썸네일 클릭 시 효과 */
.thumbnail-container img:hover {
    transform: scale(1.1);
    border-color: var(--navybutton);
}

.thumbnail-container img.active {
    border-color: var(--navybutton);
}

.product-title {
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-title span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -1px;
}

.priceinfo {
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.priceinfo .discount-rate {
    color: var(--neonpink);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -2px;
    padding-right: 6px;
}

.priceinfo .price {
    color: var(--navybutton);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
}

.priceinfo .originalprice {
    margin-left: 10px;
    color: var(--light-gray);
    font-size: 18px;
    font-weight: bold;
}

.discount-banner {
    display: block;
    width: 100%;
    height: 48px;
    background: url('/images/discountbanner.svg');
    background-size: auto;
    text-align: center;
}

.discount-banner span {
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: -1px;
    color: var(--white);
    line-height: 60px;
}

.product-detail-info {
    padding: 0 20px;
    padding-bottom: 20px;
}

.product-detail-info span {
    display: block;
    margin-top: 16px;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.product-detail-info p {
    font-size: 14px;
    color: var(--dark-gray);
    letter-spacing: -0.5px;
}
.product-detail-info p img { width: 36px; }

.tabs {
    display: flex;
    justify-content: space-around;
    background-color: var(--white);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 40px;
    z-index: 3;
    gap: 10px;
    align-items: center;
}

.tabs .tab {
    padding: 10px 0px;
    cursor: pointer;
    color: var(--dark-gray);
    transition: color 0.3s, border-bottom 0.3s;
    text-align: center;
    width: 100%;
}

.tabs .tab.active {
    color: #ffffff;
    font-weight: bold;
    background-color: var(--navybutton);
}

.category-tabs-wrapper {
    display: block;
    width: 100%;
    height: 32px;
    align-items: center;
    justify-content: space-between;
    top: 46px;
    background-color: var(--white);
    z-index: 3;
}

.category-tabs {
    display: block;
    width: 50%;
    height: 100%;
    left: 5%;
    background-color: var(--buttonlightgray);
    border-bottom: 1px solid #ddd;
    z-index: 5000;
    padding: 10px;
}

.category-tabs .category-button {
    color: var(--white);
    background-color: var(--turkishblue);
    padding-left: 20px;
    font-weight: 700;
    letter-spacing: -1px;
    display: flex;
    height: 34px;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    flex: 1;
    font-size: 14px;
    margin: 5px 0px;
    margin-right: 5px;
}

.category-tab {
    color: var(--navybutton);
    font-weight: 700;
    letter-spacing: -1px;
    display: flex;
    height: 34px;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    margin-right: 5px;
    flex: 1;
    font-size: 15px;
    z-index: 5000;
}

.category-tabs .category-tab:hover {
    background-color: var(--lightgray);
}


.category-tabs .category-tab.active {
    background-color: var(--catblue);
    border-bottom: none;
    color: var(--white);
}

.category-section-container {
    position: fixed;
    left: 52vw;
    bottom: 0;
    width: 48vw;
    height: calc(100vh - 92px);

    background-color: var(--white);
    max-height: calc(100vh - 40px);
    overflow-y: scroll;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.category-section-container .section {
    display: block;
    z-index: 5000;
}

.category-section-container .category-group1 {
    padding-top: 12px;
    padding-bottom: 4px;
    display: flex;
    font-size: 15px;
    font-weight: 800;
    margin-left: 22px;
    justify-content: space-between;
    cursor: pointer;
}

.category-section-container .category-group1 span {
    font-weight: 800;
    margin-right: 10px;
}


.category-section-container .category-group2 a{
    display: block;
    color: var(--dark-gray);
    text-align: left;
    font-size: 14px;
    padding-left: 20px;
    margin: 10px;
    letter-spacing: -1px;
}

.category-logo-deco-pro {
    width: 50%;
    position: absolute;
    bottom: 30px;
    left: 10px;
    text-align: center;
    padding: 0 10px;
}
.category-logo-deco-bus {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 30px;
    left: 0px;
}

.category-tab {
    padding: 8px 20px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    font-size: 14px;
}

.category-tab:hover {
    background-color: #eee;
}

.category-tab.active {
    border-bottom: 3px solid var(--navybutton);
    font-weight: bold;
    color: var(--navybutton);
}

.tab-content {
    padding: 20px;
}

.detail .section {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
}

.sticky-button-container {
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: 48px;
}

.naverpaybox {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.naverpaybox .naverpay-button-No{  pointer-events: none;  cursor: default; /* 마우스 포인터 변경 */  opacity: 0.5;   /* 비활성화 표시 (선택사항) */}

.naverpay-info {
    color: #0A9A19;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 14px;
}

.scrolldown-container {
    height: 26px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: #d9d9d9;
}

.sticky-button-container button {
    cursor: pointer;
    border-radius: 0%;
    flex: 4;
    border: 0px;
}

.sticky-button-container .wishlist-button {
    flex: 1;
    background-color: var(--buttongray);
}

.wishlist-button .heart-icon {
    width: 20px;
    transition: transform 0.2s ease;
}

.wishlist-button.active .heart-icon {
    content: url("/images/filledheart.svg");
    transform: scale(1.1);
}

.cart-button {
    background-color: var(--wishlist);
    color: var(--white);
    font-size: 18px;
    font-weight: bold;
}

.buy-now-button {
    background-color: var(--navybutton);
    color: var(--white);
    font-size: 18px;
    font-weight: bold;
}

.buy-button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* 세로 정렬 */
    align-items: center;
    /* 중앙 정렬 */
    z-index: 1000000000;
}

.buy-button {
    padding: 12px 30px;
    font-size: 18px;
    width: 100%;
    color: #fff;
    background-color: var(--navybutton);
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 옵션 컨테이너와 버튼 사이 여백 */
}

.buy-button:hover {
    background-color: #0056b3;
}

.hidden-container {
    display: none;
    max-height: 95vh;
    overflow-y: scroll;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    scrollbar-width: none;
    /* Firefox에서 스크롤바 숨기기 */
    -ms-overflow-style: none;
    /* IE, Edge에서 스크롤바 숨기기 */

    width: 100%;
    text-align: center;
}

.hidden-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari에서 스크롤바 숨기기 */
}

.buy-option-container {
    padding: 0% 5%;
    background-color: var(--white);
    position: relative;
}

.overlay-fold {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 14;
}



/* 카드 그리드 스타일 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3열 고정 */
    gap: 14px;
    /* 카드 간격 */
    margin-top: 10px;
}
.card_grid_infor{
    width: 100%;
    line-height: 40px;
    text-align: center;
    background-color: var(--col-gray);
    color: #fff;
    font-weight: var(--ft-semibold);
    font-size: var(--ft-size16);
    overflow: hidden;
    position: relative;
}

/* 카드 스타일 */
.card {
    transition: transform 0.2s;
    text-align: center;
    user-select: none;
    overflow: hidden;
}

.card-title {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: -1px;
    padding-bottom: 4px;
}

.card:hover {
    transform: scale(1.05);
}



/* 카드 이미지 */
.card img {
    width: 100%;
    height: auto;
    cursor: pointer;
    /* 클릭 가능하게 설정 */
}

.card-button {
    display: flex;
    justify-content: center;
}

.card-button button {
    display: flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: -1px;
    gap: 4px;

}

.card-button img {
    width: 16px;
}

.card-grid .card .btnSelfDes {
    width: 120px;
    height: 100%;
    margin: 0;
    font-size: 20px;
}

.card-grid .card .SelCcardBtn{
    height: 36px;
    margin: 10px;
    border: 1px solid var(--col-line2);
    border-radius: 4px;
    font-weight: var(--ft-semibold);
}

/* 오버레이 스타일 */
.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
}

.overlay-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-overlay {
    position: absolute;
    top: -35px;
    right: 16px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 32px;
    font-weight: normal;
    cursor: pointer;
    padding-bottom: 5px;
}

.close-overlay:hover {
    color: #ff4d4d;
}

.accordion {
    overflow: hidden;
}

.accordion-header {
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    font-weight: bold;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    line-height: 1;
    background-color: #f0f0f0;
    cursor: pointer;
}

.accordion-content {
    display: none;
    font-size: 12px;
    background-color: #fff;
    border-top: 1px solid #ddd;
    max-height: 30vh;
    overflow-y: scroll;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.accordion-content .option:hover {
    background-color: #f9f9f9;
}

.accordion-content .option:active {
    background-color: #007BFF !important;
}

.option {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.option label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    touch-action: manipulation;
}

.additional-price-container,
.additional-price-container p {
    padding: 0;
    font-size: 14px;
    margin: 0;
}

.additional-price-container p {
    color: #0A2D86;

}

.price-summary {
    text-align: end;
    margin-top: 4px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    color: #0A2D86;
}

.price-summary #total-price {
    font-size: 24px;
    font-weight: 800;
}

.price-summary .won {
    font-size: 24px;
    font-weight: 800;

}

.price-discount {
    text-align: end;
    font-weight: bold;
    font-size: 14px;
    color: #CB007A;
}

.price-discount span {
    font-weight: 800;
    font-size: 16px;
}

.cart-container {
    background-color: var(--cloud);
    padding: 10px;
    display: none;
    max-height: 30vh;
    /* 보이는 최대 높이 설정 */
    overflow-y: auto;
    /* 수직 스크롤 활성화 */
    border: 1px solid #ddd;
    /* 시각적 구분을 위한 테두리 */
    box-sizing: border-box;
    /* 패딩 포함 크기 계산 */
    z-index: 1000;
}

.add-option-container {
    border: 1px solid #ddd;
    border-radius: 5px;
}

#additional-item-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 2;
}

.cart-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 6px;
    padding-bottom: 6px;
    gap: 10px;
    border-bottom: 1px solid darkgray;
    /* 수정 */
    width: 100%;
    box-sizing: border-box;
    /* 크기 계산 포함 */
}

.cart-item:first-child {
    padding-top: 0px;
}

.cart-item:last-child {
    padding-bottom: 0px;
    border-bottom: none;
    /* 마지막 요소의 border-bottom 제거 */
}

.option-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.option-image {
    width: 50px;
    /* 이미지 크기 */
    height: 50px;
    object-fit: cover;
    /* 이미지 비율 유지 */
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-left: 12px;
}

.option-details {
    display: flex;
}

.cart-controls {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.counter-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    box-shadow: 0 0 0 1px dimgray;
}

.counter-container span {
    font-size: 12px !important;
}

.option-details .option-title {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
}

.option-details .option-subtitle {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: normal;
    color: var(--light-black)
}

.price-container {
    display: flex;
    align-items: center;
}

.cart-item .remove {
    width: 14px;
    margin-left: 40px;
}

.increase,
.decrease {
    background-color: lightgray !important;
    box-shadow: 0 0 0 1px dimgray;
}

.cart-item .item-total {
    right: 0%;
}

.bulk-order-container {
    width: 100%;
    padding: 0;
    margin: 0;
}

.bulk-order-button {
    width: 100%;
    height: 32px;
    background-color: var(--bulk);
    border: none;
    color: var(--white);
    font-size: 14px;
    font-weight: bold;
    margin-top: 4px;
    cursor: pointer;
}

.input-request {
    width: 95%;
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 4px;
    margin: 0px 10px;
}

.input-request:placeholder-shown {
    font-size: 11px;
}

.cart-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 좌우로 요소 배치 */
    width: 100%;
    /* 부모 컨테이너 너비 설정 */
}


.option input[type="radio"] {
    display: none;
    pointer-events: none;
}

.radio-image {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
}

input[type="radio"]:checked+.radio-image {
    border: 2px solid #007BFF;
}

.radio-image:hover {
    border: 2px solid #ddd;
}

.cart-item button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0;
}

.cart-item button img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.cart-item span {
    font-size: 16px;
    font-weight: bold;
    margin: 0 10px;
}

.additional-options {
    padding-top: 10px;
    padding-bottom: 6px;
    padding-left: 12px;
}

.additional-options label {
    display: flex;
    justify-content: space-between;
}

.overlay-slider .slick-prev {
    left: -7%;
    /* 왼쪽 화살표를 슬라이더 안쪽으로 이동 */
}

.overlay-slider .slick-next {
    right: -7%;
    /* 오른쪽 화살표를 슬라이더 안쪽으로 이동 */
}

.close-delivery-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: normal;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: black;
    z-index: 1001;
}

.close-delivery-overlay:hover {
    color: #ff4d4d;
}

.delivery-image-overlay,
.photoreview-image-overlay-type-i,
.photoreview-image-overlay-type-ii {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#infoboard {
    z-index: 5000;
}

.overlay-info {
    position: absolute;
    bottom: 4%;
}

#delivery-title {
    font-size: 16px;
    letter-spacing: -0.7px;
}

.deliver-overlay-content,
.photoreview-overlay-content {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
    max-width: 350px;
    min-height: 430px;
    height: 70%;
    max-height: 450px;
    width: 86%;
    overflow: hidden;
    /* 넘치는 콘텐츠 숨김 */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 상단과 하단을 나눠줌 */
}

/* 초기 상태에서 트랜지션 제거 */
.overlay-slider {
    position: absolute;
    top: 52%;
    /* 화면의 세로 중심으로 이동 */
    left: 50%;
    /* 화면의 가로 중심으로 이동 */
    transform: translate(-50%, -50%);
    /* 중심점 기준으로 정중앙 배치 */
    width: 86%;
    height: 70%;
    z-index: 1;
}

.overlay-slider a img {
    top: 10%;
    /* 화면의 세로 중심으로 이동 */
    left: 10%;
    /* 화면의 가로 중심으로 이동 */

    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    /* 이미지 비율 유지하며 영역 채우기 */
}

.unique-overlay,
.review-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* 반투명 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.unique-modal,
.review-modal {
    background-color: white;
    border-radius: 10px;
    /* border-radius 대체 */
    width: 90%;
    max-width: 350px;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}

.unique-modal-header,
.review-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.unique-title,
.review-title {
    font-size: 16px;
    letter-spacing: -0.7px;
}

.unique-close-btn,
.review-close-btn {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}

.unique-close-btn:hover,
.review-close-btn:hover {
    color: #ff4d4d;
}


.unique-modal-content,
.review-modal-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    max-height: 70vh;
    overflow-y: scroll;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.unique-image-grid,
.review-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3열 */
    gap: 10px;
    padding: 0px 6px;
}

.unique-grid-item,
.review-grid-item {
    background-color: var(--buttonlightgray);
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.unique-grid-item:hover,
.review-grid-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.unique-grid-item img,
.review-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 이미지가 박스 크기에 맞게 조정 */
}

#modalContainer {
    display: none;
    /* 기본적으로 숨김 */
    position: fixed;
    /* 화면 전체 기준으로 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* 반투명 배경 */
    z-index: 1000;
    /* 다른 콘텐츠 위에 표시 */
    display: flex;
    justify-content: center;
    /* 수평 중앙 정렬 */
    align-items: center;
    /* 수직 중앙 정렬 */
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.category-business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 10px 30px;
    margin-bottom: 0;
}

.category-business-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--dark-gray);
    font-weight: 800;
    font-size: 12px;
    transition: transform ease 0.2s;

}

.category-business-grid-item:hover {
    transform: scale(1.1);
}

.category-business-grid-item a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.category-business-grid-item a img {
    /* width: 64px;
    height: 64px; */
    margin-bottom: 4px;
    border-radius: 15px;
    cursor: pointer;
}

.category-business-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 16px;
    padding: 0px 20px;
}

.category-business-button-item {
    background-color: var(--turkishblue);
    color: var(--white);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

.category-business-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 20px;
    text-align: center;
    gap: 10px;
    margin-top: 12px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 16px;
    padding: 0px 20px;
}

.category-business-footer a {
    font-size: 12px;
    text-decoration: none;
    color: #0073e6;
}

.customer-service-image {
    width: 100%;
}

.inquiry-notice {
    word-break: keep-all;
    border-bottom: 1px solid #ddd;
    padding: 16px;
    line-height: 1.5em;
}

.select-box {
    margin: 20px 0;
}

#inquiry-type {
    width: 100%;
    height: 38px;
    font-size: 14px;
    padding-left: 12px;
    border: 1px solid #bbb;
    appearance: none;
    /* 기본 드롭다운 화살표 숨기기 */
    background: url('/images/dropdown.svg') no-repeat right 16px center;
    background-color: #fff;
    background-size: 12px;
}

.phone-wrapper {
    display: flex;
    gap: 12px;
    flex: 1;
}

.phone-wrapper input {
    width: 10%;
    flex: 1;
    text-align: center;
}

#phone-middle,
#phone-last {
    flex: 1.4;
}

#phone-prefix,
#deliver-name {
    flex: 1;
    height: 38px;
    padding-left: 8px;
    padding-right: 24px;
    /* 오른쪽 공간 확보 */
    border: 1px solid var(--gray);
    appearance: none;
    /* 기본 드롭다운 아이콘 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    /* 화살표 추가 */
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
    /* 아이콘 위치 조정 */
    background-size: 14px;
}

label[for="checkbox-for-email"] {
    display: flex;
    align-items: center;
    /* 세로 중앙 정렬 */
    font-size: 12px;
    height: 26px;
    margin-right: 50%;
}

#checkbox-for-email {
    width: 15px;
    height: 15px;
}

.file-upload-container {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
}

.file-upload-container label {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

.file-upload-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.file-upload-button {
    display: inline-block;
    padding: 8px 20px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}


.file-upload-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-selected {
    font-size: 14px;
    color: var(--dark-gray)
}

#multiline-input {
    width: 100%;
    height: 150px;
    padding: 10px;
    resize: none;
    border: 1px solid var(--gray);
}

.policy-agreement {
    width: 100%;
    margin-top: 12px;
    border-top: 1px solid #ddd;
    margin-bottom: 12px;
}

#policy-agree-checkbox {
    width: 18px;
    height: 18px;
}

label[for="policy-agree-checkbox"] {
    display: flex;
    align-items: center;
    /* 세로 중앙 정렬 */
    font-size: 14px;
    height: 26px;
    justify-content: center;
    padding-top: 10px;
}

/* 버튼 그룹 양식 */
.btn {
/*    display: inline-block;
    width: 120px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s, filter 0.3s;*/
}

/* Primary 버튼 (등록) */
.btn-first {
    background-color: var(--navybutton);
    /* 파란색 */
    color: var(--white);
}

/* Secondary 버튼 (취소) */
.btn-second {
    background-color: var(--buttongray);
    /* 회색 */
    color: var(--dark-black);
}

.btn-first:hover,
.btn-second:hover {
    transform: scale(1.05);
}

.btn-first:active,
.btn-second:active {
    transform: scale(0.95);
}

/* Disabled 버튼 */
.btn:disabled {
    background-color: #f0f0f0;
    /* 연한 회색 */
    color: #aaa;
    cursor: not-allowed;
    pointer-events: none;
}

/* 버튼 그룹 간 간격 */
.button-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    /* 버튼 간 간격 */
}

.cart-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 70px;
    font-weight: 500;
    color: var(--middle-gray);
    width: 16%;
    text-align: center;
}

.cart-status-cart {
    display: flex;
    /* Flexbox 활성화 */
    flex-direction: column;
    /* 세로 정렬 */
    align-items: center;
    /* 가로 중앙 정렬 */
    justify-content: center;
    /* 세로 중앙 정렬 */
    flex-shrink: 0;
    height: 70px;
    color: #0163CE;
    font-weight: 700;
    width: 16%;
    text-align: center;
}

.btn-tertiary.btn-order {
    font-weight: normal;
}

.cart-status-thumbnail {

    display: flex;
    gap: 18px;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 6px;
}

.cart-image,
.order-payment-image,
.order-complete-image {
    width: 46px;
    height: 46px;
    background-color: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 4px;
}

.cart-order-payment-image {
    width: 46px;
    height: 46px;
    _background-color: #47C7F0;
    border-radius: 6px;
    margin-bottom: 4px;
}

.cart-status .cart-image {           background-image: url(/images/order/PageImgOrder01.png);    }
.cart-status.active .cart-image {    background-image: url(/images/order/PageImgOrder11.png);    }
.cart-status .order-payment-image {           background-image: url(/images/order/PageImgOrder20.png);    }
.cart-status.active .order-payment-image {    background-image: url(/images/order/PageImgOrder21.png);    }
.cart-status .order-complete-image {             background-image: url(/images/order/PageImgOrder30.png);    }
.cart-status.active .order-complete-image {      background-image: url(/images/order/PageImgOrder31.png);    }
.cart-status.active { color: #0163CE;  }

.cart-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.cart-actions label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
}

.cart-actions button {
    border: none;
    cursor: pointer;
}

.cart-actions label {
    font-size: 15px;
    font-weight: 700;
}

.cart-content {
    flex-direction: column;
}

.cart-item-image {
    width: 76px;
    height: 76px;
    background-color: #0056b3;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
}

.cart-item-image-name {
    position: absolute;
    bottom: -20px;
    text-align: center;
    font-size: 11px;
    width: 100%;
}

.item-check {
    display: flex;
    align-items: center;
}

.item-checkbox {
    margin: 0 10px;
    text-align: center;
}

#select-all {
    margin-left: 14px;
    margin-right: 10px;
}

.item-check .cart-item-name {
    padding-left: 16px;
}

.cart-item-name {
    flex: 4;
    width: 100%;
    height: 120px;
    flex-direction: column;
    /* 자식 요소들을 세로로 정렬 */
    justify-content: flex-start;
    /* 세로로 가장 위쪽으로 배치 */
    align-items: flex-start;
    /* 내부 요소들을 왼쪽 정렬 */
}

.cart-item-name .cart-item-title {
    width: 100%;
    text-align: center;
}

.cart-item-title {
    font-weight: 600;
    font-size: 14px;
}

.cart-item-detail {
    height: 100px;
    display: flex;
    align-items: center;
}

.cart-item-image-container {
    flex: 4;
    text-align: center;
    height: 120px;
}

.cart-item-image-title {
    font-size: 14px;
    font-weight: 600;
}

.cart-item-image-container .image-wrapper {
    display: flex;
    gap: 8px;
    padding-right: 8px;
    justify-content: center;
}

.cart-item-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

.cart-decrease,
.cart-increase {
    width: 22px;
    /* 버튼 크기 */
    height: 22px;
    background-color: lightgray;
    box-shadow: 0 0 0 1px dimgray;
    border: none;
    /* 버튼 테두리 제거 */
    cursor: pointer;
    /* 커서 모양 변경 */
    padding: 0;
    /* 기본 여백 제거 */
}

.cart-decrease img,
.cart-increase img {
    max-width: 8px;
    /* 이미지 크기 설정 */
    height: 8px;
    object-fit: contain;
    /* 이미지가 버튼 내부에 맞게 조정 */
}

.cart-counter-container {
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 1px dimgray;
    width: 80px;
    justify-content: space-between;
}

.cart-item-option-detail {
    flex: 1;
    margin-left: 32px;
}

.cart-item-select-price {
    letter-spacing: -1px;
    font-weight: 800;
    font-size: 14px;
}

.option-description {
    margin-left: 32px;
}

.option-description p {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
}

.option-description ul {
    padding: none;
    margin-top: 8px;
    list-style-type: none;
    padding-left: 0;
}

.option-description li::before {
    content: "- ";
    /* 하이픈 추가 */
}

.option-description li {
    padding-left: 46px;
    font-weight: 300;
    text-indent: -46px;
    /* 들여쓰기 */
    letter-spacing: -1px;
}

.cart-options .option-description {
    margin: 0 16px;
}

.item-cart-total {
    border-top: 2px solid gray;
    flex-direction: column;
    width: 100%;
    padding-top: 8px;
}

.option-price-total {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    margin-bottom: 8px;
}

.option-price-total span:nth-child(1) {
    font-size: 15px;
    margin-left: 6px;
    font-weight: bold;
    width: 44px;
}

.option-price-total .member-discounted-price {
    background-color: #CC0F75;
    border-radius: 30px;
    padding: 4px;
    color: var(--white);
    letter-spacing: -1px;
    font-size: 12px;
}

.total-price,
.deliver-price {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -1px;
}

.price-total-info {
    margin-top: 12px;
    margin-bottom: 10px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--navybutton);
    display: flex;
    width: 100%;
    gap: 4px;
    justify-content: end;
    border-top: 2px solid gray;
}

.price-total-info span {
    font-weight: 800;
}

.delivery-price-label {
    margin-left: 10px;
    ;
}

.deliver-price-info {
    letter-spacing: -1px;
    font-size: 14px;
}

.member-discounted-total-price {
    padding-top: 10px;
    border-top: 2px solid gray;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: -1px;
    color: #CC0F75;
}

.cart-total-info {
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: end;
}

.general-total-price {
    border-bottom: 2px solid gray;
    margin-top: 4px;
    padding-bottom: 6px;
    letter-spacing: -2px;
    font-size: 18px;
    font-weight: bold;
    color: var(--lightblue);
}

.general-total-price span {
    font-size: 24px;
    font-weight: 800;
    margin-left: 10px;
}

.cart-section {
    width: 100%;
    background-color: var(--cloud);
    padding: 10px 0;
    border-bottom: 2px solid var(--buttonlightgray);
}

.item-detail-counter {
    padding-top: 10px;
    padding-bottom: 4px;
    width: 100%;
    background-color: var(--buttonlightgray);
}

.gap5 {
    height: 20px;
    width: 100%;
}

.gap6 {
    height: 100px;
    width: 100%;
}

.coupon-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #ddd;
}

.coupon-body {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.coupon-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.coupon-name-period {

    flex: 5;
}

.coupon-name {
    font-weight: bold;
    color: #1073AB;
}

.coupon-name-invalid {
    font-weight: bold;
    color: #C82B2B;

}

.coupon-valid {
    font-weight: bold;
    font-size: 12px;
    color: #1073AB;
}

.coupon-invalid {
    font-weight: bold;
    font-size: 12px;
    color: #C82B2B;
}

.coupon-period {
    font-size: 12px;
}

.coupon-period-invalid {
    font-size: 12px;
    color: #C82B2B;
}

.coupon-price {
    flex: 3;
    text-align: center;
}

.coupon-price span {
    font-size: 14px;
    letter-spacing: -1px;
}

.coupon-checkbox {
    flex: 2;
    text-align: center;
}

.coupon-type {
    font-size: 12px;
    display: block;
}

.coupon-detail {
    font-size: 0.9em;
    color: #666;
    display: block;
    padding-left: 75px;
    /* 전체 들여쓰기 */
    text-indent: -75px;
    word-break: keep-all;

}

.coupon-detail-wrapper {
    position: absolute;
    left: 0;
    padding: 10px;
    margin: 0px 16px;
    width: calc(100% - 32px);
    background-color: var(--buttongray);
}

.order-info-detail {
    margin-top: 10px;
    position: relative;
}

.order-info-detail-title {
    font-size: 18px;
    font-weight: bold;
    margin-left: 12px;
    padding: 14px 0px;
    margin-bottom: 10px;

}

.deliver-info-checkbox {
    display: flex;
    align-items: center;
    /* 세로 정렬 */
    position: absolute;
    top: 10px;
    right: 2px;
    padding: 5px;
}

.deliver-info-checkbox input {
    margin-right: 5px;
}

.add-to-address-checkbox,
.use-redeem-points-checkbox,
.show-redeem-points {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.show-redeem-points label {
    color: var(--blueblue);
    letter-spacing: -1px;
    font-size: 14px;
}

.use-redeem-points-checkbox {
    margin-left: 10px;
}

#add-to-address,
#use-redeem-points {
    width: 16px;
    height: 16px;
    flex: none;
}

.redeem-points-wrapper {
    display: flex;
    flex: 1;
}

.final-payment-info {
    padding-top: 12px;
    display: flex;
    background-color: #083FCB;
    color: var(--white);
    letter-spacing: -1px;
    line-height: 1.3em;
}

.info-title {
    flex: 3;
    text-align: end;
    padding-right: 20px;
}

.final-payment-info .info-title {
    flex: 3;
    text-align: end;
    padding-right: 20px;
    line-height: 1.5rem;
}

.info-price {
    flex: 1;
    padding-right: 16px;
    text-align: end;
}

.final-payment-info .info-price {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    padding-right: 16px;
    text-align: end;
    line-height: 1.5rem;
    letter-spacing: -1px;
}

.payment-price-info {
    display: flex;
    align-items: center;
    background-color: var(--navybutton);
    padding-top: 10px;
    padding-bottom: 12px;
    color: var(--white);
    letter-spacing: -1px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.price-title {
    flex: 3;
    text-align: end;
    padding-right: 20px;
    font-size: 16px;
    font-weight: bold;
}

.price-title span {
    font-size: 14px;
}

.price-final {
    text-align: end;
    flex: 1;
    padding-right: 16px;
    font-size: 18px;
    font-weight: 800;
}

.price-final span {
    font-size: 14px;
}

.category-title {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    top: 54px;
    width: 100%;
    height: 58px;
    align-items: center;
    background-color: #47C7F0;
    font-size: 24px;
    font-weight: 800;
}

.filter-wrapper {
    padding: 0;
    width: 100%;
    position: relative;
}

.filter-container {
    position: relative;
    padding: 0;
    left: 0;
    width: 100%;
    user-select: none;
    box-sizing: border-box;
}

.gap8 {
    height: 58px;
    width: 100%;
}

.category-view-filter-header {
    display: flex;
    height: 40px;
    align-items: end;
}

.whole-product {
    flex: 5;
    font-size: 18px;
    letter-spacing: -1px;
}

.whole-product #GsTotNum {
    font-weight: 800;
    color: #010F87;
}

.category-wrapper {
    display: flex;
    gap: 10px;
    /* 드롭다운 사이 간격 추가 */
}

/* 드롭다운을 감싸는 div */
.category-dropdown {
    position: relative;
    display: inline-block;
    width: 110px;
    /* 셀렉트 박스 크기 (더 넓게 조정 가능) */
}

.category-dropdown:nth-child(2) {
    width: 80px;
}

/* 셀렉트 박스 스타일 */
.category-view {
    width: 100%;
    height: 100%;
    padding: 0 30px 0 10px;
    /* 우측에 아이콘 공간 확보 */
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: var(--white);
    appearance: none;
    /* 기본 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* 드롭다운 아이콘 스타일 */
.category-dropdown .dropdown-icon {
    position: absolute;
    right: 10px;
    /* 기존 4px → 10px로 변경하여 텍스트와 간격 확보 */
    top: 50%;
    transform: translateY(-40%);
    width: 12px;
    height: 12px;
    background-image: url('/images/dropdown.svg');
    /* 커스텀 아이콘 */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    /* 클릭 방지 */
}

.category-wrapper {
    display: flex;
}

.scrollable-content {
    max-height: 180px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    word-break: keep-all;
}

/* #### company-intro.HTML #### */
.company-intro-title {
    text-align: center;
    /*margin-top: 25px;*/
    margin: 10px 0;
    font-size: 20px;
    font-weight: 800;
}

.company-intro-title img {
    margin-top: 14px;
    width: 95%;
}

.terms-title-wrapper {
    margin-top: 40px;
    display: flex;
    align-items: flex-end;
}

.terms-title {
    font-size: 19px;
    font-weight: bold;
    margin-right: 10px;
}

.article {
    word-break: keep-all;
    margin-top: 30px;
    letter-spacing: -1px;
}

.article ul {
    list-style-type: decimal;
    padding-left: 16px;
}

.article-title,
.article-subtitle {
    margin-bottom: 14px;
}

.portfolio-img {
    width: calc (100% + 32px);
    margin: 10px -16px 0 -16px;
}

.gallery-list-wrap .prod-title { font-weight: var(--ft-bold); font-size: var(--ft-size15); letter-spacing: -0.04em; color: var(--col-black); text-align: center; padding: 20px 0 10px; border-bottom: 1px #ddd solid; }

.case-study-img {
    width: calc (100% + 32px);
}

.associated-product-title {
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
}

.listview-again {
    text-align: center;
    width: 100%;
    background-color: var(--buttongray);
    margin-top: 20px;
    padding: 8px;
    font-weight: bold;
    border-radius: 15px;
    letter-spacing: -1px;
    cursor: pointer;
}

.best-product-view {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    width: calc (100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    align-items: center;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    justify-content: center;
    height: 50px;
    background-color: var(--navybutton);
}

.best-product-view span {
    color: var(--yellow);
    font-weight: 800;
    margin: 0 4px;
}

.best-product-view .go-button {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding: 12px;
    padding-top: 14px;
    font-weight: 800;
    border-radius: 10px;
    background-color: var(--white);
    color: var(--navybutton);
    height: 26px;
    cursor: pointer;
}

.order-wrapper {
    padding: 8px;
    padding-bottom: 1px;
    background-color: var(--buttonlightgray);
}

.order-wrapper-final {
    padding: 8px;
    padding-bottom: 1px;
}

.info-title {
    margin-left: 8px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.order-column-wrapper {
    display: flex;
    justify-content: space-between;
}

.order-sub {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    flex: 1;
    margin-bottom: 12px;
    word-break: keep-all;
}

.order-sub .extrabold {
    padding-top: 2px;
    font-weight: 800;
}

.info-subtitle {
    padding-top: 2px;
    margin-right: 14px;
    font-size: 14px;
    font-weight: bold;
}

.card-receipt-view {
    background-color: var(--buttongray);
    border: none;
    padding: 11px;
    font-weight: bold;
    cursor: pointer;
}

.button-container-right {
    margin-top: 6px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.transfer-a-container .order-date {
    width: 90px;
    margin-left: 16px;
}

.blue-title {
    color: var(--navybutton);
    font-weight: bold;
}

.content-info {
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
    margin-bottom: 8px;
    padding: 10px;
    word-break: keep-all;
}

.review-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.review-table thead th {
    padding: 6px;
    text-align: center;
    border-top: 1px solid var(--gray);
    ;
    border-bottom: 1px solid var(--gray);
    font-weight: bold;
}

.review-table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.review-table tbody tr:hover {
    background-color: #f5f5f5;
}

.review-table .product img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.inquiry-answer-table .product {
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    vertical-align: middle;
}

.review-table .product {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.review-table .purchase-date {
    text-align: center;
    color: var(--dark-black);
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 13px;
}

.inquiry-answer-table .product img {
    width: 50px;
    height: 50px;
}

.rewards-points-info {
    display: flex;
    padding: 26px 12px;
    padding-top: 30px;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray);
    border-top: 1px solid var(--gray);
}

.expiring-points-info {
    display: flex;
    padding: 8px 12px;
    font-size: 12px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray);
    margin-bottom: 20px;
}

.rewards-points-info span {
    font-size: 22px;
    font-weight: bold;
    color: var(--textblue);
}

.reward-section {
    display: flex;
    padding: 12px;
    border-top: 1px solid var(--gray);
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.reward-info {
    flex-direction: column;
}

.reward-info-wrapper {
    display: flex;
    align-items: center;
}

.reward-state-expire {
    padding: 4px 12px;
    background-color: var(--buttongray);
    border-radius: 6px;
    margin-right: 6px;
    font-size: 13px;
}

.reward-state-get {
    padding: 4px 12px;
    background-color: #2F6AFF;
    color: #fff;
    border-radius: 6px;
    margin-right: 6px;
    font-size: 13px;
}

.reward-expire-date,
.reward-date {
    min-width: 110px;
    padding-bottom: 10px;
}

.reward-expire-date-absolute {
    position: absolute;
    font-size: 11px;
    top: 11px;
    right: 0px;
}

.reward-points {
    position: relative;
    text-align: end;
}

#loadMoreTwoColumn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #010F87;
    color: white;
    border-radius: 5px;
}

.filter-wrapper {
    position: relative;
    width: calc(100% + 36px);
    margin-left: -16px;
}

.grid-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 5열 */
    gap: 10px;
    justify-items: center;
}

#productGrid .product-card.hidden-product {
    display: none !important;
}

.two-col-card-icon {
    /* 이름 변경 유지 (충돌 가능성 있음) */
    width: 46px;
    height: 46px;
    background-color: #3dcaff;
    border-radius: 10px;
    margin-bottom: 10px;
}

.card-include {
    position: relative;
    width: 100%;
}

/* New two-column grid styles */
.two-column-container {
    position: relative;
    width: 100%;
    /* border: 1px solid blue; */
    display: block;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    box-sizing: border-box;
}

.two-column-grid {
    margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

/* Specific styles for product cards *within* the two-column grid */
.two-column-grid .product-card {
    /* Styles from original '.card' specific to this page */
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background-color: var(--white);
    /* text-align: center; <-- 이 줄 삭제! */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 아이콘 등 중앙 정렬 유지 */

    /* Styles from original '.product-card' specific to this page */
    transition: transform 0.2s ease;
    /* Ensure text inside aligns left (should be default for <p> in <a>) */
    text-align: left;
    /* 명시적으로 좌측 정렬 추가 */
}

.two-column-grid .product-card a {
    /* 링크 내부 컨텐츠 정렬 위해 추가 */
    text-align: left;
    width: 100%;
    /* 링크 영역 확장 */
    _padding: 0 4px;
    /* 좌우 약간의 패딩 */
    box-sizing: border-box;
}


.two-column-grid .product-card:hover {
    transform: scale(1.05);
}

.product-image-container .image-container {
    /* Added parent context */
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}

/* .main-image is likely styled globally, this adds specificity if needed */
.product-image-container .main-image {
    /* Added parent context */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Shipping tab specific styles (#shipping) */
#shipping .delivery-info-section {
    padding-top: 14px;
    margin-bottom: 20px;
}

/* Highly specific selector for 'em' to avoid global conflict */
#shipping .delivery-info-refund em {
    font-style: normal;
    color: var(--alert-red);
}

#shipping .delivery-info-detail {
    word-break: keep-all;
    text-indent: -12px;
    padding-left: 12px;
}

#shipping .delivery-info-title {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

/* Q&A tab specific styles (#qa) */
#qa .answer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#qa .answer-status {
    width: 60px;
    text-align: center;
    line-height: 1.4;
    letter-spacing: -1px;
    background-color: var(--buttongray);
    padding: 12px 2px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#qa .answer-info {
    width: 100%;
}

#qa .answer-status .wait {
    color: var(--darkgray);
}

#qa .answer-status .complete {
    color: #191695;
}

#qa .answer-detail {
    letter-spacing: -1px;
}

#qa .answer-info-date {
    display: flex;
    gap: 30px;
    margin-top: 10px;
    letter-spacing: -1px;
    color: var(--darkgray);
}

#qa .qna-button {
    text-align: center;
    padding: 8px;
    background-color: var(--buttongray);
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 10px;
    /* Added cursor pointer for better UX */
    cursor: pointer;
}

.npay_button_box {
    background-color: transparent !important;
}

body.product-detail {
    scrollbar-width: none;
    /* Firefox에서 스크롤바 숨기기 */
    -ms-overflow-style: none;
    /* IE, Edge에서 스크롤바 숨기기 */
}

body.product-detail::-webkit-scrollbar {
    display: none;
}

.review-detail {
    margin-bottom: 20px;
}

#reviews .totalcase {
    display: flex;
    justify-content: space-between;
}

#reviews .totalcase span {
    color: var(--dimgray);
    letter-spacing: -1px;
}

.bestreview-info {
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviewer-rating {
    display: flex;
    gap: 12px;
    letter-spacing: -1px;
}

.bestreviewtag {
    background-color: var(--skyblue);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 800;
}

.arrowcontainer {
    display: flex;
    justify-content: space-between;
    /* 양쪽에 배치 */
    align-items: center;
    position: absolute;
    top: 188px;
    left: 0px;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    /* 화살표 외 영역 클릭 방지 */
}

.arrowcontainer button {
    background: none;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    /* 버튼은 클릭 가능 */
}

.arrowcontainer img {
    width: 12px;
    /* 화살표 크기 조정 */
    opacity: 1;
    /* 약간 투명하게 */
    transition: opacity 0.2s ease-in-out;
}

.arrowcontainer img:hover {
    opacity: 0.7;
}

.photo-review-title-gap {
    height: 26px;
}

.photo-review-title {
    position: absolute;
    top: 20px;
    left: 24px;
    font-size: 16px;
    letter-spacing: -0.7;
    text-align: left;
    width: 100%;
}

.photoreview-overlay-info {
    max-width: 300px;
    text-align: left;
    letter-spacing: -1px;
    margin-top: 10px;
}

.best-review-container {
    position: relative;
    width: 100%;
    display: flex;
}

.best-review {
    position: absolute;
    top: -30px;
    letter-spacing: -1px;
    font-weight: 800;
    font-size: 14px;
    color: var(--white);
    background-color: var(--skyblue);
    padding: 5px 12px;
    border-radius: 10px;
}

.review-data {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: -1px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.review-data .id-info {
    margin: 0;
    font-weight: bold;
}

.review-score .rating-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-score .rating-container .star-rating {
    display: flex;
}

.star-detail {
    display: inline-block;
    /* 별을 가로로 정렬 */
    position: relative;
    width: 12px;
    /* 별 크기 */
    height: 12px;
    background-image: url('/images/star.svg');
    /* 빈 별 */
    background-size: cover;
    margin-left: 1px;
}

.star-detail .star-detail-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url('/images/starfill.svg');
    /* 채워진 별 */
    background-size: cover;
    z-index: 1;
}

/* 슬라이더 메인 이미지 */
.slider-main img {
    width: 100vw;
    height: auto;
    object-fit: cover;
}

/* 썸네일 슬라이더 */
.slider-nav img {
    width: 80px;
    height: 80px;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.slider-nav img.slick-current {
    border-color: #007bff;
    /* 활성화된 썸네일 강조 */
}

.photo-review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.photo-review-content {
    background-color: var(--white);
    padding: 24px 24px 10px 24px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    border-radius: 10px;
}

.photo-review-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 32px;
    font-weight: normal;
    background: none;
    border: none;
    cursor: pointer;
}

.photo-review-close-btn:hover {
    color: #ff4d4d;
}

.photo-review-slider {
    height: 270px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.photo-review-slider img {
    max-width: 270px;
    max-height: 270px;
    object-fit: contain;
    /* 이미지 비율 유지 + 빈 공간을 배경색으로 처리 */
    cursor: pointer;
}


.photo-review-thumbnails {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    gap: 4px;
}

.photo-review-thumbnails img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.photo-review-thumbnails img.active {
    border-color: #007bff;
}

.product-review-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-review-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
}

.close-review-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.main-slider img,
.thumbnail-slider img {
    width: 100%;
    height: auto;
}

.thumbnail-slider {
    margin-top: 10px;
}

.thumbnail-slider .slick-slide {
    cursor: pointer;
    opacity: 0.6;
}

.thumbnail-slider .slick-current {
    opacity: 1;
}


.cart-badger em {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ff00ff;
    /* 배지 색상 */
    border-radius: 100%;
    text-align: center;
    top: 50%;
    right: 20px;
    top: 12px;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: 16px;

}

.cart-badger em:before {
    content: attr(data-count);
}

.product-detail .custom-slick-arrow {
    z-index: 1002;
    /* 충분히 높은 값 */
    display: block;
    /* 강제로 화살표 표시 */
}

.product-detail .custom-slick-prev:before,
.product-detail .custom-slick-next:before {
    display: none;
}

.product-detail .custom-slick-prev img,
.product-detail .custom-slick-next img {
    width: 12px;
    /* 화살표 이미지 크기 */
    height: auto;
}

/* =============================== */
/* 주소록 보기 페이지 스타일 (추가) */
/* =============================== */

/* 주소록 페이지 상단 구분선 */
.container.address .thickline {
    height: 5px;
    background-color: var(--navybutton);
    width: 100%;
    margin-top: 16px;
    margin-bottom: 4px;
}

/* 주소록 테이블 기본 레이아웃 (Grid) */
.container.address .address-table {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 2fr;
    /* 컬럼 비율 */
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

/* Grid 레이아웃을 위한 설정 */
.container.address .address-table thead,
.container.address .address-table tbody,
.container.address .address-table tr {
    display: contents;
}

/* 주소록 테이블 액션 행 (colspan=4) 스타일 */
.container.address .address-table td[colspan="4"] {
    grid-column: span 4;
    /* 4칸 병합 */
    border-bottom: 1px solid #ddd;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 주소록 테이블 th, td 공통 스타일 */
.container.address .address-table th,
.container.address .address-table td {
    font-size: 12px;
    padding: 8px 6px;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    /* border-top은 data td에 inline으로 적용됨 */
}

/* 주소록 테이블 헤더(th) 스타일 */
.container.address .address-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    letter-spacing: -1px;
    border-bottom: 1px solid #ddd;
}

/* 주소록 테이블 액션 버튼 영역 */
.container.address .action-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 6px;
}

/* 주소록 테이블 액션 버튼 공통 */
.container.address .action-wrapper button {
    padding: 5px 10px;
    margin: 0 3px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}

/* 주소록 테이블 개별 액션 버튼 */
.container.address .select-btn {
    background-color: var(--navybutton);
    color: white;
}

.container.address .edit-btn {
    background-color: var(--gray);
    color: black;
}

.container.address .delete-btn {
    background-color: var(--heart);
    color: white;
}

.container.address .pagination,
.container.address .pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top: none;
}

.container.address .register-btn {
    background-color: var(--navybutton);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.container.address .close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.container.signup .button-container.large {
    margin-left: 50px;
    margin-right: 50px;
    gap: 12px;
}

.container.signup .id-info {
    margin-top: 20px;
}

.container.order-complete-page .btn.btn-hexa-complete {
    padding: 8px;
    font-size: 14px;
    font-weight: bold;
}

.oc-page .btn.btn-hexa-oc {
    padding: 8px;
    font-size: 14px;
    font-weight: bold;
}

.oc-page .orderer-oc {
    text-align: left;
    margin-left: 24%;
    font-weight: normal;
    line-height: 1.5;
    font-size: 14px;
}

.oc-page .cart-image-oc {
    background-color: #47C7F0;
}

.oc-page .order-payment-image-oc {
    background-color: #47C7F0;
}

.oc-page .order-complete-image-oc {
    background-color: #1FA4CF;
}

.oc-page .thickline-oc {
    margin-bottom: 6px;
}

.oc-page .cart-status-thumbnail .cart-status:nth-child(3) {
    color: #0163CE;
}

.order-payment {
    user-select: none;
}

.overlay .overlay-content {
    background-color: vara(--white);
    position: absolute;
    top: 50%;
    min-width: 90vw;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 80vh;
    border-radius: 8px;
    overflow-y: scroll;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.overlay .overlay-content::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari에서 스크롤바 숨기기 */
}

.header-item:nth-child(1) {
    flex: 5;
}

.header-item:nth-child(2) {
    flex: 3;
    text-align: center;
}

.header-item:nth-child(3) {
    flex: 2;
    text-align: center;
}

.receipt-request input[type="radio"],
.cash-receipt input[type="radio"],
.radiobutton-wrapper input[type="radio"] {
    position: relative;
    top: 2px;
    margin-left: 8px;
    /* 다른 라디오 버튼에 적용되지 않음 */
}

.radiobutton-wrapper {
    display: flex;
    align-items: center;
}

.radiobutton-wrapper label {
    margin: 5px 0;
    font-weight: bold;
}

.signup-field span {
    flex: 1;
    text-align: center;
}

#directDepositNotice {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

#directDepositNotice p:nth-child(1) {
    color: var(--alert-red);
    line-height: 2.2em;
    font-size: 14px;
    letter-spacing: -1px;
}

#directDepositNotice p:nth-child(2) {
    font-size: 14px;
    letter-spacing: -1px;
}

.receipt-request,
.cash-receipt {
    padding: 10px 0;
}

.receipt-request label,
.cash-receipt label {
    font-weight: bold;
}

.direct-transfer-info {
    margin-left: 16px;
    ;
}

.direct-transfer-info span {
    line-height: 2em;
}

.bank-account-info {
    display: flex;
    flex: 1;
    padding: 10px 0;
    font-weight: bold;
    line-height: 1.5;
}

h4 {
    padding-left: 16px;
    padding-bottom: 10px;
    padding-top: 6px;
}

.order-info-detail .line {
    flex: 1;
    height: 2px;
    background-color: var(--lightgray);
    margin-top: 16px;
    margin-bottom: 12px;
}

.second-line {
    height: 2px;
    background-color: var(--dimgray);
    box-sizing: content-box;
    margin-top: 16px;
    margin-bottom: 12px;
}

.btn.btn-secondary {
    font-weight: bold;
    padding: 12px;
}

.cop-order-payment-image {
    background-color: #1FA4CF;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.cop-thickline {
    height: 5px;
    /* 줄 두께 */
    background-color: var(--navybutton);
    /* 줄 색상 */
    width: 100%;
    /* 줄 너비 */
    margin-top: 16px;
    margin-bottom: 50px;
    /* 위아래 간격 */
    margin-bottom: 6px;
}

.cart-status-active {
    color: #0163CE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 70px;
    font-weight: 500;
    width: 16%;
    text-align: center;
}

.cart-options .cart-item-container {
    padding-right: 16px;
}

.cop-option-price-total span:nth-child(1) {
    width: 100px;
    margin-left: 16px;
    font-size: 15px;
    font-weight: bold;
}

.cop-option-price-total.minus {
    color: var(--darkred);
}

.cop-option-price-total {
    padding-right: 16px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    margin-bottom: 8px;
}

.item-cart-total .price-total-info {
    padding-right: 16px;
    color: var(--darkred);
}

#address-look {
    font-weight: normal;
    height: 38px;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    width: 100px;
    background-color: var(--navybutton);
}

.cart-item-name .cart-item-detail {
    padding-right: 10px;
}

body[data-title="장바구니"] h1.page-title,
body[data-title="주문/결제"] h1.page-title {
    font-weight: 700;
}

body[data-title="장바구니"] .thickline {
    margin-bottom: 6px;
}

body[data-title="장바구니"] input[type="checkbox"] {
    border-radius: 0;
    width: 16px;
    /* 원하는 크기로 조절 */
    height: 16px;
    cursor: pointer;
    /* 클릭 영역을 더 직관적으로 */
}

body[data-page="category-business-apt"] .discountrate {
    color: red;
    font-weight: 800;
    font-size: 11px;
    padding-right: 2px;
    letter-spacing: -1px;
}

body[data-page="category-business-apt"] .price {
    font-size: 12px;
    font-weight: 800;
    color: var(--navybutton);
    padding-top: 4px;
    padding-bottom: 2px;
}

body[data-page="category-business-apt"] .item-title {
    font-size: 15px;
    padding-top: 4px;
    color: var(--dark-black);
    letter-spacing: -1px;
}

body[data-page="category-business-apt"] .like-button {
    position: absolute;
    right: 5%;
    bottom: 12%;
    width: 15%;
    max-width: 18px;
    aspect-ratio: 1.12;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(50%);
    z-index: 5;
}

body[data-page="category-business-apt"] .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    pointer-events: none;
}

body[data-page="category-business-apt"] .card-include {
    position: relative;
    width: 100%;
}

body[data-page="category-business-apt"] .two-column-container {
    /* Note: This class wasn't used in the provided HTML structure for the grid */
    /* If you use it elsewhere, this style will apply */
    position: relative;
    width: 100%;
    border: 1px solid blue;
    /* Example border */
    display: block;
    /* Should likely be flex or grid depending on usage */
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    box-sizing: border-box;
}

body[data-page="category-business-apt"] .two-column-grid {
    /* This targets the #productGrid */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 1200px;
    /* Adjust as needed */
}

body[data-page="category-business-apt"] .product-card {
    transition: transform 0.2s ease;
    /* Add other necessary card styles here if needed (border, padding, etc.) */
    /* Ensure .product-card class is added to dynamically loaded product items */
}

body[data-page="category-business-apt"] .product-card:hover {
    transform: scale(1.05);
}

body[data-page="category-business-apt"] #loadMoreTwoColumn {
    /* Note: The button ID in HTML is #loadMoreProducts. Update CSS or HTML ID. */
    /* Assuming you meant #loadMoreProducts: */
    /* body[data-page="category-business-apt"] #loadMoreProducts { */
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #010F87;
    color: white;
    border-radius: 5px;
}

/* --- Filter & Category Icon Styles (if applicable) --- */
body[data-page="category-business-apt"] .filter-wrapper {
    position: relative;
    width: calc(100% + 32px);
    margin-left: -16px;
}

body[data-page="category-business-apt"] .grid-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    justify-items: center;
}

body[data-page="category-business-apt"] .card {
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background-color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body[data-page="category-business-apt"] .icon {
    width: 46px;
    height: 46px;
    background-color: #3dcaff;
    /* 아이콘 색상 */
    border-radius: 10px;
    margin-bottom: 10px;
}

body[data-page="category-business-apt"] .card p {
    padding: 0;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: var(--dark-gray);
}

body[data-page="category-business-apt"] .main-inner .maindeco {
    background-image: url('/images/maintabdecobright.svg');
}

body[data-page="category-business-apt"] .main-inner .main-header {
    background-color: #749DF5;
}

body[data-page="category-business-apt"] .toggle-btn.active#btn-categories {
    background-color: white;
    color: var(--skyblue);
    z-index: 12;
    padding-right: 24px;
    border-radius: 24px;
    padding-left: 24px;
}

body[data-page="category-business-apt"] .toggle-btn:not(.active)#btn-products {
    background-color: var(--button-inactive);
    color: var(--light-cloudblue);
    border-radius: 24px 0 0 24px;
    padding-left: 14px;
    padding-right: 30px;
}

body[data-page="category-product"] .discountrate {
    color: red;
    font-weight: 800;
    font-size: 11px;
    padding-right: 2px;
    letter-spacing: -1px;
}

body[data-page="category-product"] .price {
    font-size: 12px;
    font-weight: 800;
    color: var(--navybutton);
    padding-top: 4px;
    padding-bottom: 2px;
}

body[data-page="category-product"] .item-title {
    font-size: 15px;
    padding-top: 4px;
    color: var(--dark-black);
    letter-spacing: -1px;
}

body[data-page="category-product"] .like-button {
    position: absolute;
    right: 5%;
    bottom: 12%;
    width: 15%;
    max-width: 18px;
    aspect-ratio: 1.12;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(50%);
    z-index: 5;
}

body[data-page="category-product"] .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    pointer-events: none;
}

body[data-page="category-product"] .card-include {
    position: relative;
    width: 100%;
}

body[data-page="category-product"] .two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 1200px;
    /* Adjust as needed */
}

/* Individual product card style */
body[data-page="category-product"] .product-card {
    /* Add border, background, padding etc. as needed for product cards */
    transition: transform 0.2s ease;
    /* Ensure dynamically loaded products get this class */
}

body[data-page="category-product"] .product-card:hover {
    transform: scale(1.05);
}

/* "Load More" button */
body[data-page="category-product"] #loadMoreProducts {
    /* The ID #loadMoreTwoColumn was in the style block, but HTML uses #loadMoreProducts */
    /* Using #loadMoreProducts here to match HTML */
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #010F87;
    color: white;
    border-radius: 5px;
}


/* --- Filter Styles --- */
body[data-page="category-product"] .filter-wrapper {
    position: relative;
    width: calc(100% + 32px);
    /* Adjust based on container padding */
    margin-left: -16px;
    /* Adjust based on container padding */
}

/* --- Category Icon Grid Styles --- */
body[data-page="category-product"] .grid-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 columns for icons */
    gap: 10px;
    justify-items: center;
}

body[data-page="category-product"] .grid-container .card {
    /* Target cards *inside* the icon grid */
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background-color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body[data-page="category-product"] .grid-container .icon {
    /* Target icons *inside* the icon grid */
    width: 46px;
    height: 46px;
    background-color: #3dcaff;
    /* 아이콘 색상 - Default or placeholder */
    border-radius: 10px;
    margin-bottom: 10px;
}

body[data-page="category-product"] .grid-container .card p {
    /* Target p *inside* icon grid cards */
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    /* Was bold previously, changed to 500 as in style block */
    color: var(--dark-gray);
    letter-spacing: -0.5px;
    /* Added missing property from previous requests */
    line-height: 1.3;
    /* Improve readability for two-line text */
}


/* --- Style for .two-column-container (if used elsewhere) --- */
body[data-page="category-product"] .two-column-container {
    /* This class was styled but not present in the main HTML structure provided */
    position: relative;
    width: 100%;
    border: 1px solid blue;
    /* Example border */
    display: block;
    /* Or flex/grid */
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    box-sizing: border-box;
}

body[data-page="company"] .article ul {
    list-style-type: none;
    padding-left: 13px;
    text-indent: -8px;
}

/*body[data-page="easy-search"] #productGrid,
body[data-page="easy-search"] .category-view-filter-header,
body[data-page="easy-search"] .button-container {
    display: none;
}

body[data-page="easy-search"] #productGrid.visible {
    display: grid;
}

body[data-page="easy-search"] .category-view-filter-header.visible {
    display: flex;
    !* 또는 block *!
    justify-content: space-between;
    align-items: center;
}

body[data-page="easy-search"] .button-container.visible {
    display: block; !* 또는 원래 display 값 *!
    text-align: center; !* <<< 이 줄 추가 *!
}*/

body[data-page="company"] .article ul li::before {
    content: "- ";
}

body[data-page="customer-inquiry-list"] table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

body[data-page="customer-inquiry-list"] td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

body[data-page="customer-inquiry-list"] tbody tr {
    cursor: pointer;
    /* 클릭 가능한 커서 */
    transition: background-color 0.2s ease-in-out;
}

body[data-page="customer-inquiry-list"] tbody tr:hover {
    background-color: var(--cloud);
    /* 행 강조 색상 */
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
body[data-page="customer-inquiry-list"] th,
body[data-page="customer-inquiry-list"] td {
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
body[data-page="customer-inquiry-list"] .title-column,
body[data-page="customer-inquiry-list"] .order-column,
body[data-page="customer-inquiry-list"] .category-column,
body[data-page="customer-inquiry-list"] .inquiry-date-column,
body[data-page="customer-inquiry-list"] .reply-date-column,
body[data-page="customer-inquiry-list"] .status-column {
    padding-bottom: 10px;
    font-size: 12px;
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
/* 순번 열 */
body[data-page="customer-inquiry-list"] th.order-column,
body[data-page="customer-inquiry-list"] td.order-column {
    width: 8%;
    /* 순번 열 너비 */
    text-align: center;
    color: #555;
    font-weight: bold;
}

body[data-page="customer-inquiry-list"] td.order-column {
    color: var(--navybutton);
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
body[data-page="customer-inquiry-list"] th.category-column,
body[data-page="customer-inquiry-list"] td.category-column {
    width: 19%;
    text-align: center;
    /* 원본 스타일 유지 (이전 요청에서 추가했던 부분) */
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
body[data-page="customer-inquiry-list"] th.inquiry-date-column,
body[data-page="customer-inquiry-list"] td.inquiry-date-column,
body[data-page="customer-inquiry-list"] th.reply-date-column,
body[data-page="customer-inquiry-list"] td.reply-date-column,
body[data-page="customer-inquiry-list"] th.status-column,
body[data-page="customer-inquiry-list"] td.status-column {
    width: 13%;
    /* 각 열 너비 동일하게 분배 */
    text-align: center;
}

body[data-page="customer-inquiry-list"] td.title-column {
    text-align: left;
    width: 30%;
    color: var(--dark-black);
    font-size: 12px;
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
body[data-page="customer-inquiry-list"] td.category-column,
body[data-page="customer-inquiry-list"] td.inquiry-date-column,
body[data-page="customer-inquiry-list"] td.reply-date-column {
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 그룹 선택자 처리: 각 선택자 앞에 접두사 추가 */
body[data-page="customer-inquiry-list"] td.inquiry-date-column,
body[data-page="customer-inquiry-list"] td.reply-date-column {
    font-size: 10px;
}

body[data-page="customer-inquiry-list"] td.status-column {
    text-align: center;
    width: 15%;
    font-weight: bold;
    /* color: var(--dark-gray); */
    /* JS에서 직접 설정하므로 원본 스타일 유지 */
}

body[data-page="customer-inquiry-view"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="customer-inquiry-view"] .button-group-wrapper button,
body[data-page="customer-inquiry-view"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="customer-inquiry-view"] .button-group-wrapper button:hover,
body[data-page="customer-inquiry-view"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="customer-inquiry-view"] .button-group-wrapper button:active,
body[data-page="customer-inquiry-view"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="customer-inquiry-view"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="customer-inquiry-view"] .reply-section span {
    font-weight: bold;
}

body[data-page="customer-inquiry-view"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="customer-inquiry-view"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="customer-inquiry-view"] .response-header,
body[data-page="customer-inquiry-view"] .response-content {
    padding-left: 12px;
}

body[data-page="customer-inquiry-view"] .response-content {
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="customer-inquiry-view"] .response-date {
    font-size: 11px;
}

body[data-page="customer-inquiry-view"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="customer-inquiry-view"] .inquiry-answer-table th {
    font-size: 12px;
    letter-spacing: -1px;
}

body[data-page="customer-inquiry-view"] .inquiry-answer-table td:nth-child(2) {
    font-size: 11px;
}

/* 그룹 선택자 처리 */
body[data-page="customer-inquiry-view"] .inquiry-answer-table td:nth-child(4),
body[data-page="customer-inquiry-view"] .inquiry-answer-table td:nth-child(6) {
    font-size: 11px;
}

body[data-page="customer-inquiry-view"] .inquiry-answer-table td[colspan="5"] {
    font-size: 12px;
    font-weight: bold;
    /* 제목과 답변완료의 글씨 크기 */
}

body[data-page="customer-inquiry-view"] .inquiry-answer-table td.status-complete {
    color: var(--navybutton);
}

body[data-page="customer-inquiry-view"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="customer-inquiry-view"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="customer-inquiry-view"] .response-content {
    /* 두 번째 등장 */
    word-break: keep-all;
}

body[data-page="customer-inquiry-view"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="customer-inquiry-view"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="customer-inquiry-view"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="customer-inquiry-view"] th,
body[data-page="customer-inquiry-view"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="customer-inquiry-view"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="easy-search"] .filter-data-wrapper {
    display: flex;
    min-height: 40px;
}

body[data-page="easy-search"] .all-count {
    align-items: center;
    width: 104px;
    font-size: 14px;
    font-weight: bold;
    color: var(--dark-black);
    cursor: pointer;
}

body[data-page="easy-search"] .all-count.active {
    color: var(--skyblue);
    /* 모든 체크박스가 선택되거나 클릭되었을 때 파란색 */
    /* 라디오 버튼 방식에서는 이 클래스가 더 이상 사용되지 않을 수 있음 */
}

body[data-page="easy-search"] #selected-categories {
    flex: 1;
    text-align: end;
    justify-content: flex-end;
}

body[data-page="easy-search"] .search-container {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
}

/*body[data-page="easy-search"] #search-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: #d3d3d3;
    color: #fff;
    outline: none;
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}*/

/*body[data-page="easy-search"] #search-input::placeholder {
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

body[data-page="easy-search"] #search-input:focus {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    !* 포커스 시 그림자 효과 *!
}

body[data-page="easy-search"] .search-container::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('/images/lookupwhite.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}*/

body[data-page="easy-search"] .categories {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    gap: 8px;
    padding: 0 5px;
}

body[data-page="easy-search"] .category {
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

body[data-page="easy-search"] .category .category-name {
    margin-top: 4px;
}

/* 그룹 선택자 처리 */
body[data-page="easy-search"] .category[data-checked="true"] .category-name,
body[data-page="easy-search"] .category[data-checked="true"] .category-count {
    color: #005eff;
    font-weight: bold;
    /* 강조 효과 */
    transition: color 0.1s ease;
}

body[data-page="easy-search"] .circle {
    width: 54px;
    height: 54px;
    /* 원본 색상 유지 */
    border-radius: 29%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.1s ease;
    /* box-shadow: 3px 3px 3px 0px #999; */
}

body[data-page="easy-search"] .circle i {
    width: 54px;
    height: 50px;
    border-radius: 29%;
    overflow: hidden;
}

body[data-page="easy-search"] .category[data-checked="true"] .circle {
    border-color: #005eff;
}

body[data-page="easy-search"] .category[data-checked="true"] .checkmark {
    display: block;
}

body[data-page="easy-search"] .checkmark {
    width: 14px;
    height: 14px;
    background-image: url('/images/checkbright.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}

body[data-page="easy-search"] .category-name {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
}

body[data-page="easy-search"] .category-count {
    font-size: 11px;
    color: #555;
    padding: 0;
    margin: 0;
}

body[data-page="easy-search"] #selected-categories {
    /* 두 번째 등장 */
    font-weight: bold;
    word-break: keep-all;
    font-size: 14px;
}

body[data-page="easy-search"] .discountrate {
    color: red;
    font-weight: 800;
    font-size: 11px;
    padding-right: 2px;
    letter-spacing: -1px;
}

body[data-page="easy-search"] .price {
    font-size: 12px;
    font-weight: 800;
    color: var(--navybutton);
    padding-top: 5px;
    padding-bottom: 5px;
}

body[data-page="easy-search"] .item-title {
    font-size: 15px;
    padding-top: 4px;
    color: var(--dark-black);
    letter-spacing: -1px;
}

body[data-page="easy-search"] .like-button {
    position: absolute;
    right: 5%;
    bottom: 12%;
    width: 15%;
    max-width: 18px;
    aspect-ratio: 1.12;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(50%);
    z-index: 5;
}

body[data-page="easy-search"] .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    pointer-events: none;
}

body[data-page="easy-search"] .card-include {
    position: relative;
    width: 100%;
}

body[data-page="easy-search"] .two-column-container {
    position: relative;
    width: 100%;
    border: 1px solid blue;
    /* 원본 유지 */
    display: block;
    /* 원본 유지 */
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    box-sizing: border-box;
}

body[data-page="easy-search"] .two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 1200px;
}

body[data-page="easy-search"] .product-card {
    transition: transform 0.2s ease;
}

body[data-page="easy-search"] .product-card:hover {
    transform: scale(1.05);
}

body[data-page="easy-search"] #loadMoreTwoColumn {
    /* ID 주의: HTML에는 loadMoreProducts 사용됨 */
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #010F87;
    color: white;
    border-radius: 5px;
}

body[data-page="easy-search"] .filter-wrapper {
    position: relative;
    /*width: calc(100% + 32px);*/
    /*margin-left: -16px;*/
    width: 100%;
    margin: 0;
}

body[data-page="easy-search"] .grid-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    justify-items: center;
}

body[data-page="easy-search"] .card {
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background-color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body[data-page="easy-search"] .icon {
    width: 46px;
    height: 46px;
    background-color: #3dcaff;
    /* 아이콘 색상 */
    border-radius: 10px;
    margin-bottom: 10px;
}

body[data-page="easy-search"] p {
    /* 일반 p 태그 */
    padding: 0;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: var(--dark-gray);
}


body[data-page="easy-search"] .filter-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0046AD;
    color: var(--white);
    min-height: 36px;
    font-size: 18px;
    font-weight: 700;
}

body[data-page="easy-search"] .filter-icon {
    position: absolute;
    top: 7px;
    right: 20px;
}

body[data-page="easy-search"] .filter-section {
    display: flex;
    align-items: center;
    min-height: 32px;
    border-bottom: 1px solid #ddd;
}

body[data-page="easy-search"] .filter-section .label {
    min-width: 100px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 16px;
}

body[data-page="easy-search"] .filter-options {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    font-size: 11px;
    letter-spacing: -1px;
    ;
    /* 원본 세미콜론 유지 */
    /* 모바일에서 부드러운 스크롤 */
    -webkit-overflow-scrolling: touch;
    padding-right: 12px;
}

/* 스크롤바 숨기기 */
body[data-page="easy-search"] .filter-options::-webkit-scrollbar {
    display: none;
}

body[data-page="easy-search"] .filter-option {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

body[data-page="easy-search"] .filter-option input[type="checkbox"] {
    margin-right: 5px;
}

/*body[data-page="easy-search"] .filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}*/

/* 그룹 선택자 처리: 각 부분에 접두사 추가 */
/*body[data-page="easy-search"] .filter-footer button {
    height: 35px;
    min-width: 270px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    background-color: var(--skyblue);
    letter-spacing: -1px;
    color: white;
    cursor: pointer;
}*/

/*body[data-page="easy-search"] .filter-footer button:hover {
    background-color: #00348a;
}*/

/*
body[data-page="easy-search"] .filter-footer .reset-button {
    background-color: #ddd;
    color: var(--dark-gray);
    margin-right: -14px;
    min-width: 120px;
    font-size: 16px;
}
*/

/*
body[data-page="easy-search"] .filter-footer .reset-button:hover {
    background-color: #bbb;
}
*/

body[data-page="easy-search"] .filter-box {
    position: relative;
    min-width: 580px;
    z-index: 2;
    font-size: 240px;
}


/*body[data-page="easy-search"] .reset-button {
    !* .filter-footer 내부 reset-button 과 별개 *!
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/*body[data-page="easy-search"] .reset-button span {
    font-size: 16px;
    font-weight: 700;
}*/

/* 초기화버튼 이미지 크기 */
/*body[data-page="easy-search"] .reset-button-icon {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

body[data-page="easy-search"] .product-view-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="easy-search"] .view-button-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}*/
/*

body[data-page="main-business"] .main-inner .maindeco {
    background-image: url('/images/maintabdecobright.svg');
}

body[data-page="main-business"] .main-inner .main-header {
    background-color: #749DF5;
}

body[data-page="main-business"] .toggle-btn.active#btn-categories {
    background-color: white;
    color: var(--skyblue);
    z-index: 12;
    padding-right: 24px;
    ;
    !* 원본 세미콜론 유지 *!
    border-radius: 24px;
    padding-left: 24px;
}

body[data-page="main-business"] .toggle-btn:not(.active)#btn-products {
    background-color: var(--button-inactive);
    color: var(--light-cloudblue);
    border-radius: 24px 0 0 24px;
    padding-left: 14px;
    padding-right: 30px;
}

!* --- 두 번째 style 블록 내용 --- *!
body[data-page="main-business"] .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

body[data-page="main-business"] .project-card {
    overflow: hidden;
    transition: transform 0.2s;
    cursor: pointer;
    padding: 4px;
}

body[data-page="main-business"] .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

body[data-page="main-business"] .project-image {
    background-color: #3dcaff;
    border-radius: 2px;
    height: 120px;
}

body[data-page="main-business"] .project-title {
    font-size: 14px;
    color: var(--dark-black);
    padding-top: 8px;
    font-weight: bold;
}

body[data-page="main-business"] .project-description {
    font-size: 10px;
    color: var(--light-gray);
    margin-bottom: 4px;
}

body[data-page="main-business"] .project-extra {
    font-size: 10px;
    color: var(--light-gray);
}

body[data-page="main-business"] .grid-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    !* 원본 4열 유지 *!
    gap: 10px;
    justify-items: center;
}

body[data-page="main-business"] .card {
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background-color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body[data-page="main-business"] .icon-banner {
    margin-top: 30px;
}

body[data-page="main-business"] .card .icon {
    width: 68px;
    height: 68px;
    background-color: #3dcaff;
    !* 아이콘 색상 *!
    border-radius: 15px;
    margin-bottom: 10px;
    position: relative;
    !* 부모 hover 효과 간섭 방지 *!
}

body[data-page="main-business"] p {
    !* 일반 p 태그 스타일 *!
    padding: 0;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: var(--dark-gray);
}
*/

body[data-page="member-withdrawal"] .radio-group {
    padding: 0px 12px;
    margin: 6px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body[data-page="member-withdrawal"] .radio-option {
    display: flex;
    align-items: center;
    gap: 5px;
}

body[data-page="member-withdrawal"] .login-tabs-wrapper {
    margin: 0;
}

body[data-page="member-withdrawal"] .radio-option label {
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
}

body[data-page="member-withdrawal"] .term-item em {
    display: inline-block;
    /* (필수)와 (선택)을 고정 위치로 유지 */
    width: 44px;
    /* 동일한 너비로 정렬 */
    text-align: left;
    /* 가운데 정렬 */
    /* 원본 주석 유지 */
    font-style: normal;
    /* 이탤릭 제거 */
    font-weight: bold;
    /* 굵게 표시 */
    color: var(--light-black);
    margin-left: 4px;
}

body[data-page="member-withdrawal"] .login-tabs .tab {
    font-size: 12px;
    cursor: default;
}

body[data-page="member-withdrawal"] .id-name {
    flex: 1;
    padding: 8px 0;
}

body[data-page="member-withdrawal"] .inquiry-notice span {
    font-size: 15px;
    line-height: 2;
}

body[data-page="member-withdrawal"] .information {
    font-size: 12px;
    margin: 0 12px;
    word-break: keep-all;
    text-indent: -10px;
    margin-left: 20px;
}

body[data-page="mypage-coupon-list"] .coupon-header {
    padding-top: 10px;
    border-top: 1px solid var(--gray);
}

body[data-page="mypage-coupon-list"] .coupon-detail-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
}

body[data-page="mypage-coupon-list"] .header-item:nth-child(1) {
    flex: 5;
}

body[data-page="mypage-coupon-list"] .header-item:nth-child(2) {
    flex: 3;
    text-align: center;
}

body[data-page="mypage-coupon-list"] .header-item:nth-child(3) {
    flex: 2;
    text-align: center;
}

body[data-page="mypage-review-write"] .star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    position: relative;
    gap: 20px;
    width: 100%;
}

body[data-page="mypage-review-write"] .star-rating input[type="radio"] {
    display: none;
}

/* 별 */
body[data-page="mypage-review-write"] .star-rating label {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url('/images/star.svg');
    background-size: cover;
    margin: 0;
}

/* 선택된 별 및 마우스 오버 시 가득 찬 별 표시 */
/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] .star-rating input[type="radio"]:checked~label,
body[data-page="mypage-review-write"] .star-rating label:hover,
body[data-page="mypage-review-write"] .star-rating label:hover~label {
    background-image: url('/images/starfill.svg');
}

/* 별이 겹치는 부분의 클릭 영역 확장 */
body[data-page="mypage-review-write"] .star-rating label::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    width: 50px;
    height: 45px;
    background: transparent;
    z-index: 1;
}

body[data-page="mypage-review-write"] .file-upload-button {
    padding: 8px 40px;
}

body[data-page="mypage-review-write"] .review-notice {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    color: #175BE1;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 12px;
}

body[data-page="mypage-review-write"] .file-upload-message {
    margin-left: 104px;
    margin-top: 6px;
}

body[data-page="mypage-review-write"] .file-upload-button span {
    font-size: 12px;
}

body[data-page="mypage-review-write"] .file-upload-container {
    margin-left: 16px;
    gap: 40px;
    margin-top: 10px;
}

body[data-page="mypage-review-write"] .file-upload-container label {
    font-size: 12px;
    font-weight: normal;
}

body[data-page="mypage-review-write"] #multiline-input {
    height: 250px;
}

body[data-page="mypage-review-write"] .clickable-image:hover {
    transform: scale(1.1);
}

/* 모달 스타일 */
body[data-page="mypage-review-write"] .modal {
    text-align: center;
    display: flex;
    /* 원본 유지 (JS에서 display:none 처리) */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

/* 모달 내용 (이미지) */
body[data-page="mypage-review-write"] .modal-content {
    position: relative;
    /* X 버튼 위치 조정을 위해 필요 */
    max-width: 90vw;
    max-height: 90vh;
}

/* 닫기 버튼 */
body[data-page="mypage-review-write"] .close {
    position: absolute;
    top: -32px;
    right: 0px;
    color: white;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body[data-page="mypage-review-write"] .modal-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 10px;
}

body[data-page="mypage-review-write"] .close:hover {
    color: #ff4d4d;
}

body[data-page="mypage-review-write"] .photo-section-title {
    margin-top: 14px;
    letter-spacing: -1px;
    margin-left: 16px;
    font-size: 14px;
}

body[data-page="mypage-review-write"] .photo-section-wrapper {
    margin-top: 12px;
    margin-left: 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

body[data-page="mypage-review-write"] .photo-section-wrapper img {
    width: 82px;
    height: 82px;
    border-radius: 8px;
    border: 1px solid var(--buttongray);
    object-fit: contain;
    background-color: var(--cloud);
    cursor: pointer;
    transition: transform 0.2s ease;
}

body[data-page="mypage-review-write"] .photo-section-wrapper img:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    /* 원본 중복 유지 */
}

body[data-page="mypage-review-write"] .star {
    width: 22px;
    height: 22px;
    margin-right: 20px;
}

body[data-page="mypage-review-write"] .cell-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

body[data-page="mypage-review-write"] table th {
    padding-left: 16px;
    text-align: left;
}

body[data-page="mypage-review-write"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] .button-group-wrapper button,
body[data-page="mypage-review-write"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] .button-group-wrapper button:hover,
body[data-page="mypage-review-write"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] .button-group-wrapper button:active,
body[data-page="mypage-review-write"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="mypage-review-write"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="mypage-review-write"] .reply-section span {
    font-weight: bold;
}

body[data-page="mypage-review-write"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="mypage-review-write"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] .response-header,
body[data-page="mypage-review-write"] .response-content {
    padding-left: 12px;
}

body[data-page="mypage-review-write"] .response-content {
    /* 두 번째 등장 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="mypage-review-write"] .response-date {
    font-size: 11px;
}

body[data-page="mypage-review-write"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="mypage-review-write"] .inquiry-answer-table th {
    font-size: 12px;
    letter-spacing: -1px;
    width: 30%;
}

body[data-page="mypage-review-write"] .inquiry-answer-table td:nth-child(2) {
    font-size: 11px;
    letter-spacing: -1px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] .inquiry-answer-table td:nth-child(4),
body[data-page="mypage-review-write"] .inquiry-answer-table td:nth-child(6) {
    font-size: 11px;
}

body[data-page="mypage-review-write"] .inquiry-answer-table td[colspan="5"] {
    font-size: 12px;
    font-weight: bold;
    /* 제목과 답변완료의 글씨 크기 */
}

body[data-page="mypage-review-write"] .inquiry-answer-table td.status-complete {
    color: var(--navybutton);
}

body[data-page="mypage-review-write"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="mypage-review-write"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="mypage-review-write"] .response-content {
    /* 세 번째 등장 */
    letter-spacing: -1px;
    word-break: keep-all;
}

body[data-page="mypage-review-write"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="mypage-review-write"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="mypage-review-write"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-review-write"] th,
body[data-page="mypage-review-write"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="mypage-review-write"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="mypage-edit-info"] .login-tabs-wrapper {
    margin: 0;
}

body[data-page="mypage-edit-info"] .term-item em {
    display: inline-block;
    /* (필수)와 (선택)을 고정 위치로 유지 */
    width: 44px;
    /* 동일한 너비로 정렬 */
    text-align: left;
    /* 가운데 정렬 */
    /* 원본 주석 유지 */
    font-style: normal;
    /* 이탤릭 제거 */
    font-weight: bold;
    /* 굵게 표시 */
    color: var(--light-black);
    margin-left: 4px;
}

body[data-page="mypage-edit-info"] .login-tabs .tab {
    font-size: 12px;
    cursor: default;
}

body[data-page="mypage-edit-info"] .id-name {
    flex: 1;
    padding: 8px 0;
}

body[data-page="mypage-edit-info"] .inquiry-notice span {
    font-size: 15px;
    line-height: 2;
}

body[data-page="mypage-myreview-view"] .clickable-image:hover {
    transform: scale(1.1);
}

/* 모달 스타일 */
body[data-page="mypage-myreview-view"] .modal {
    text-align: center;
    display: flex;
    /* 원본 유지 (JS에서 display:none 처리) */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

/* 모달 내용 (이미지) */
body[data-page="mypage-myreview-view"] .modal-content {
    position: relative;
    /* X 버튼 위치 조정을 위해 필요 */
    max-width: 90vw;
    max-height: 90vh;
}

/* 닫기 버튼 */
body[data-page="mypage-myreview-view"] .close {
    position: absolute;
    top: -32px;
    right: 0px;
    color: white;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body[data-page="mypage-myreview-view"] .modal-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 10px;
}

body[data-page="mypage-myreview-view"] .close:hover {
    color: #ff4d4d;
}

body[data-page="mypage-myreview-view"] .photo-section-title {
    margin-top: 14px;
    letter-spacing: -1px;
    margin-left: 16px;
    font-size: 14px;
}

body[data-page="mypage-myreview-view"] .photo-section-wrapper {
    margin-top: 12px;
    margin-left: 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

body[data-page="mypage-myreview-view"] .photo-section-wrapper img {
    width: 82px;
    height: 82px;
    border-radius: 8px;
    border: 1px solid var(--buttongray);
    object-fit: contain;
    background-color: var(--cloud);
    cursor: pointer;
    transition: transform 0.2s ease;
}

body[data-page="mypage-myreview-view"] .photo-section-wrapper img:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    /* 원본 중복 유지 */
}

body[data-page="mypage-myreview-view"] .star {
    width: 22px;
    height: 22px;
    margin-right: 20px;
}

body[data-page="mypage-myreview-view"] .cell-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

body[data-page="mypage-myreview-view"] table th {
    padding-left: 16px;
    text-align: left;
}

body[data-page="mypage-myreview-view"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-myreview-view"] .button-group-wrapper button,
body[data-page="mypage-myreview-view"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-myreview-view"] .button-group-wrapper button:hover,
body[data-page="mypage-myreview-view"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-myreview-view"] .button-group-wrapper button:active,
body[data-page="mypage-myreview-view"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="mypage-myreview-view"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="mypage-myreview-view"] .reply-section span {
    font-weight: bold;
}

body[data-page="mypage-myreview-view"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="mypage-myreview-view"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-myreview-view"] .response-header,
body[data-page="mypage-myreview-view"] .response-content {
    padding-left: 12px;
}

body[data-page="mypage-myreview-view"] .response-content {
    /* 두 번째 등장 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="mypage-myreview-view"] .response-date {
    font-size: 11px;
}

body[data-page="mypage-myreview-view"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="mypage-myreview-view"] .inquiry-answer-table th {
    font-size: 12px;
    letter-spacing: -1px;
}

body[data-page="mypage-myreview-view"] .inquiry-answer-table td:nth-child(2) {
    font-size: 12px;
    /* 원본 유지 */
}

/* 그룹 선택자 처리 */
body[data-page="mypage-myreview-view"] .inquiry-answer-table td:nth-child(4),
body[data-page="mypage-myreview-view"] .inquiry-answer-table td:nth-child(6) {
    font-size: 12px;
    /* 원본 유지 */
}

body[data-page="mypage-myreview-view"] .inquiry-answer-table td[colspan="5"] {
    font-size: 12px;
    font-weight: bold;
    /* 제목과 답변완료의 글씨 크기 */
}

body[data-page="mypage-myreview-view"] .inquiry-answer-table td.status-complete {
    color: var(--navybutton);
}

body[data-page="mypage-myreview-view"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="mypage-myreview-view"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="mypage-myreview-view"] .response-content {
    /* 세 번째 등장 */
    letter-spacing: -1px;
    word-break: keep-all;
}

body[data-page="mypage-myreview-view"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="mypage-myreview-view"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="mypage-myreview-view"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-myreview-view"] th,
body[data-page="mypage-myreview-view"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="mypage-myreview-view"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="mypage-myreviewlist"] .category-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

body[data-page="mypage-myreviewlist"] .rating-container .rating-value {
    font-size: 12px;
}

body[data-page="mypage-orderdetail-refunditem"] .total-price,
body[data-page="mypage-orderdetail-refunditem"] .delivery-price,
body[data-page="mypage-orderdetail-refunditem"] .total-discount,
body[data-page="mypage-orderdetail-refunditem"] .total-pay-price {
    width: 100%;
    display: flex;
    margin-left: 12px;
    font-weight: bold;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail-refunditem"] .total-price span,
body[data-page="mypage-orderdetail-refunditem"] .delivery-price span,
body[data-page="mypage-orderdetail-refunditem"] .total-discount span,
body[data-page="mypage-orderdetail-refunditem"] .total-pay-price span {
    display: flex;
    justify-content: end;
    flex: 1;
}

body[data-page="mypage-orderdetail-refunditem"] .total-pay-price span {
    font-weight: bold;
}

body[data-page="mypage-orderdetail-refunditem"] .total-discount {
    color: #B329A5;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail-refunditem"] .total-price-delivery,
body[data-page="mypage-orderdetail-refunditem"] .total-price-discount {
    display: flex;
    margin-bottom: 4px;
    justify-content: space-between;
}

body[data-page="mypage-orderdetail-refunditem"] .total-info {
    background-color: var(--cloud);
    padding-top: 16px;
    font-size: 15px;
    padding-bottom: 12px;
    padding-right: 12px;
}

body[data-page="mypage-orderdetail-refunditem"] .total-info span {
    justify-content: end;
    /* 원본 유지 */
}

body[data-page="mypage-orderdetail-refunditem"] .product-options {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray);
}

body[data-page="mypage-orderdetail-refunditem"] .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-page="mypage-orderdetail-refunditem"] .order-price-info {
    width: calc (100% - 32px);
    /* 원본 유지 (띄어쓰기 주의) */
    margin-left: 16px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail-refunditem"] .coupon-discount-price,
body[data-page="mypage-orderdetail-refunditem"] .order-product-price {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

body[data-page="mypage-orderdetail-refunditem"] .order-product-price {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 14px;
}

body[data-page="mypage-orderdetail-refunditem"] .coupon-discount-price {
    color: #B329A5;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 14px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail-refunditem"] .coupon-discount-price span,
body[data-page="mypage-orderdetail-refunditem"] .order-product-price span {
    text-align: end;
    font-weight: bold;
    margin-right: 10px;
    font-size: 15px;
}

body[data-page="mypage-orderdetail-refunditem"] .item .price {
    margin-right: 40%;
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 14px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail-refunditem"] b,
body[data-page="mypage-orderdetail-refunditem"] b span {
    letter-spacing: -1px;
    font-size: 14px;
    font-weight: bold !important;
}

body[data-page="mypage-orderdetail-refunditem"] .order-header {
    margin-top: 16px;
}

body[data-page="mypage-orderdetail"] .total-price,
body[data-page="mypage-orderdetail"] .delivery-price,
body[data-page="mypage-orderdetail"] .total-discount,
body[data-page="mypage-orderdetail"] .total-pay-price {
    width: 100%;
    display: flex;
    margin-left: 12px;
    font-weight: bold;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail"] .total-price span,
body[data-page="mypage-orderdetail"] .delivery-price span,
body[data-page="mypage-orderdetail"] .total-discount span,
body[data-page="mypage-orderdetail"] .total-pay-price span {
    display: flex;
    justify-content: end;
    flex: 1;
}

body[data-page="mypage-orderdetail"] .total-pay-price span {
    font-weight: bold;
}

body[data-page="mypage-orderdetail"] .total-discount {
    color: #B329A5;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail"] .total-price-delivery,
body[data-page="mypage-orderdetail"] .total-price-discount {
    display: flex;
    margin-bottom: 4px;
    justify-content: space-between;
}

body[data-page="mypage-orderdetail"] .total-info {
    background-color: var(--cloud);
    padding-top: 16px;
    font-size: 15px;
    padding-bottom: 12px;
    padding-right: 12px;
}

body[data-page="mypage-orderdetail"] .total-info span {
    justify-content: end;
    /* 원본 유지 */
}

body[data-page="mypage-orderdetail"] .product-options {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray);
}

body[data-page="mypage-orderdetail"] .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-page="mypage-orderdetail"] .order-price-info {
    width: calc (100% - 32px);
    /* 원본 유지 (띄어쓰기 주의) */
    margin-left: 16px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail"] .coupon-discount-price,
body[data-page="mypage-orderdetail"] .order-product-price {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

body[data-page="mypage-orderdetail"] .order-product-price {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 14px;
}

body[data-page="mypage-orderdetail"] .coupon-discount-price {
    color: #B329A5;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 14px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail"] .coupon-discount-price span,
body[data-page="mypage-orderdetail"] .order-product-price span {
    text-align: end;
    font-weight: bold;
    margin-right: 10px;
    font-size: 15px;
}

body[data-page="mypage-orderdetail"] .item .price {
    margin-right: 40%;
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 14px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-orderdetail"] b,
body[data-page="mypage-orderdetail"] b span {
    letter-spacing: -1px;
    font-size: 14px;
    font-weight: bold !important;
}

body[data-page="mypage-orderdetail"] .order-header {
    margin-top: 16px;
}

body[data-page="mypage-reassure-sns"] .id-name {
    flex: 1;
    padding: 8px 0;
}

body[data-page="mypage-reassure-sns"] .inquiry-notice span {
    font-size: 15px;
    line-height: 2;
}

body[data-page="mypage-reassure-password"] .id-name {
    flex: 1;
    padding: 8px 0;
}

body[data-page="mypage-reassure-password"] .inquiry-notice span {
    font-size: 15px;
    line-height: 2;
}

body[data-page="mypage-product-inquiry-correction"] #multiline-input {
    height: 200px;
}

body[data-page="mypage-product-inquiry-correction"] input[type="email"] {
    width: 100%;
    /* 입력 필드의 너비를 셀에 맞춤 */
    padding: 8px;
    /* 안쪽 여백 */
    border: 1px solid #ddd;
    /* 테두리 */
    border-radius: 4px;
    /* 모서리를 둥글게 */
    box-sizing: border-box;
    /* 패딩 포함 너비 계산 */
    font-size: 14px;
    /* 글자 크기 */
}

body[data-page="mypage-product-inquiry-correction"] .cell-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

body[data-page="mypage-product-inquiry-correction"] table th {
    padding-left: 16px;
    text-align: left;
}

body[data-page="mypage-product-inquiry-correction"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-correction"] .button-group-wrapper button,
body[data-page="mypage-product-inquiry-correction"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-correction"] .button-group-wrapper button:hover,
body[data-page="mypage-product-inquiry-correction"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-correction"] .button-group-wrapper button:active,
body[data-page="mypage-product-inquiry-correction"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="mypage-product-inquiry-correction"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="mypage-product-inquiry-correction"] .reply-section span {
    font-weight: bold;
}

body[data-page="mypage-product-inquiry-correction"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="mypage-product-inquiry-correction"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-correction"] .response-header,
body[data-page="mypage-product-inquiry-correction"] .response-content {
    padding-left: 12px;
}

body[data-page="mypage-product-inquiry-correction"] .response-content {
    /* 두 번째 등장 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-correction"] .response-date {
    font-size: 11px;
}

body[data-page="mypage-product-inquiry-correction"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table th {
    font-size: 12px;
    letter-spacing: -1px;
}

body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table td:nth-child(2) {
    font-size: 11px;
    letter-spacing: -1px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table td:nth-child(4),
body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table td:nth-child(6) {
    font-size: 11px;
}

body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table td[colspan="5"] {
    font-size: 12px;
    font-weight: bold;
    /* 제목과 답변완료의 글씨 크기 */
}

body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table td.status-complete {
    color: var(--navybutton);
}

body[data-page="mypage-product-inquiry-correction"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="mypage-product-inquiry-correction"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-correction"] .response-content {
    /* 세 번째 등장 */
    letter-spacing: -1px;
    word-break: keep-all;
}

body[data-page="mypage-product-inquiry-correction"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="mypage-product-inquiry-correction"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-correction"] th,
body[data-page="mypage-product-inquiry-correction"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="mypage-product-inquiry-correction"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="mypage-product-inquiry-list"] .category-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

body[data-page="mypage-product-inquiry-list"] .rating-container .rating-value {
    font-size: 12px;
}

body[data-page="mypage-product-inquiry-list"] .answer-status {
    text-align: center;
}

body[data-page="mypage-product-inquiry-list"] .answer-status-complete {
    text-align: center;
    font-weight: bold;
    color: var(--navybutton);
}

body[data-page="mypage-product-inquiry-view"] .cell-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

body[data-page="mypage-product-inquiry-view"] table th {
    padding-left: 16px;
    text-align: left;
}

body[data-page="mypage-product-inquiry-view"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-view"] .button-group-wrapper button,
body[data-page="mypage-product-inquiry-view"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-view"] .button-group-wrapper button:hover,
body[data-page="mypage-product-inquiry-view"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-view"] .button-group-wrapper button:active,
body[data-page="mypage-product-inquiry-view"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="mypage-product-inquiry-view"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="mypage-product-inquiry-view"] .reply-section span {
    font-weight: bold;
}

body[data-page="mypage-product-inquiry-view"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="mypage-product-inquiry-view"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-view"] .response-header,
body[data-page="mypage-product-inquiry-view"] .response-content {
    padding-left: 12px;
}

body[data-page="mypage-product-inquiry-view"] .response-content {
    /* 두 번째 등장 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-view"] .response-date {
    font-size: 11px;
}

body[data-page="mypage-product-inquiry-view"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="mypage-product-inquiry-view"] .inquiry-answer-table th {
    font-size: 12px;
    letter-spacing: -1px;
}

body[data-page="mypage-product-inquiry-view"] .inquiry-answer-table td:nth-child(2) {
    font-size: 12px;
    /* 원본 유지 */
}

body[data-page="mypage-product-inquiry-view"] .inquiry-answer-table td[colspan="5"] {
    font-size: 12px;
    font-weight: bold;
    /* 제목과 답변완료의 글씨 크기 */
}

body[data-page="mypage-product-inquiry-view"] .inquiry-answer-table td.status-complete {
    color: var(--navybutton);
}

body[data-page="mypage-product-inquiry-view"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="mypage-product-inquiry-view"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-view"] .response-content {
    /* 세 번째 등장 */
    letter-spacing: -1px;
    word-break: keep-all;
}

body[data-page="mypage-product-inquiry-view"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="mypage-product-inquiry-view"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="mypage-product-inquiry-view"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-view"] th,
body[data-page="mypage-product-inquiry-view"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="mypage-product-inquiry-view"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="mypage-product-inquiry-write-product-a"] .find-button {
    width: 100%;
    text-align: center;
    background-color: #A4A4A4;
    padding: 10px;
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
}

body[data-page="mypage-product-inquiry-write-product-a"] #multiline-input {
    height: 200px;
}

body[data-page="mypage-product-inquiry-write-product-a"] input[type="email"] {
    width: 100%;
    /* 입력 필드의 너비를 셀에 맞춤 */
    padding: 8px;
    /* 안쪽 여백 */
    border: 1px solid #ddd;
    /* 테두리 */
    border-radius: 4px;
    /* 모서리를 둥글게 */
    box-sizing: border-box;
    /* 패딩 포함 너비 계산 */
    font-size: 14px;
    /* 글자 크기 */
}

body[data-page="mypage-product-inquiry-write-product-a"] .cell-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

body[data-page="mypage-product-inquiry-write-product-a"] table th {
    padding-left: 16px;
    text-align: left;
}

body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper button,
body[data-page="mypage-product-inquiry-write-product-a"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper button:hover,
body[data-page="mypage-product-inquiry-write-product-a"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper button:active,
body[data-page="mypage-product-inquiry-write-product-a"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="mypage-product-inquiry-write-product-a"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-section span {
    font-weight: bold;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .response-header,
body[data-page="mypage-product-inquiry-write-product-a"] .response-content {
    padding-left: 12px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-content {
    /* 두 번째 등장 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-date {
    font-size: 11px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table th {
    font-size: 12px;
    width: 30%;
    letter-spacing: -1px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table td:nth-child(2) {
    font-size: 12px;
    /* 원본 유지 */
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-content {
    /* 세 번째 등장 */
    letter-spacing: -1px;
    word-break: keep-all;
}

body[data-page="mypage-product-inquiry-write-product-a"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="mypage-product-inquiry-write-product-a"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] th,
body[data-page="mypage-product-inquiry-write-product-a"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="mypage-product-inquiry-write-product-a"] .find-button {
    width: 100%;
    text-align: center;
    background-color: #A4A4A4;
    padding: 10px;
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

body[data-page="mypage-product-inquiry-write-product-a"] #multiline-input {
    height: 200px;
}

body[data-page="mypage-product-inquiry-write-product-a"] input[type="email"] {
    width: 100%;
    /* 입력 필드의 너비를 셀에 맞춤 */
    padding: 8px;
    /* 안쪽 여백 */
    border: 1px solid #ddd;
    /* 테두리 */
    border-radius: 4px;
    /* 모서리를 둥글게 */
    box-sizing: border-box;
    /* 패딩 포함 너비 계산 */
    font-size: 14px;
    /* 글자 크기 */
}

body[data-page="mypage-product-inquiry-write-product-a"] .cell-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

body[data-page="mypage-product-inquiry-write-product-a"] table th {
    padding-left: 16px;
    text-align: left;
}

body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper button,
body[data-page="mypage-product-inquiry-write-product-a"] .toggle-reply-button {
    padding: 4px 28px;
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper button:hover,
body[data-page="mypage-product-inquiry-write-product-a"] .toggle-reply-button:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
    color: #000;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .button-group-wrapper button:active,
body[data-page="mypage-product-inquiry-write-product-a"] .toggle-reply-button {
    /* 원본 유지 */
    background-color: #eee;
    color: #000;
    transform: scale(0.9);
}

body[data-page="mypage-product-inquiry-write-product-a"] .comment-textarea {
    margin-top: 10px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-section span {
    font-weight: bold;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-header {
    font-size: 12px;
    letter-spacing: -1px;
    padding: 12px 0px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-header .responder {
    color: #5754F0;
    font-weight: bold;
    padding: 0px 6px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] .response-header,
body[data-page="mypage-product-inquiry-write-product-a"] .response-content {
    padding-left: 12px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-content {
    /* 두 번째 등장 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-date {
    font-size: 11px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table th {
    font-size: 12px;
    width: 30%;
    letter-spacing: -1px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table td:nth-child(2) {
    font-size: 12px;
    /* 원본 유지 */
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-section {
    display: none;
    /* 처음에는 숨김 */
    margin-top: 10px;
    border-radius: 5px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .reply-section span {
    /* 두 번째 등장 */
    padding-left: 12px;
    margin-bottom: 10px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .response-content {
    /* 세 번째 등장 */
    letter-spacing: -1px;
    word-break: keep-all;
}

body[data-page="mypage-product-inquiry-write-product-a"] .comment-textarea {
    /* 두 번째 등장 */
    width: 100%;
    height: 80px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    resize: none;
    border: 1px solid #ccc;
    /* 크기 조정 비활성화 */
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

body[data-page="mypage-product-inquiry-write-product-a"] td {
    /* 일반 td */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* 그룹 선택자 처리 */
body[data-page="mypage-product-inquiry-write-product-a"] th,
body[data-page="mypage-product-inquiry-write-product-a"] td {
    /* 일반 th, td */
    border-bottom: 1px solid #ccc;
    /* 각 행 아래에 줄 추가 */
    padding: 10px 0px;
}

body[data-page="mypage-product-inquiry-write-product-a"] .inquiry-answer-table tr:last-child {
    border-bottom: none;
}

body[data-page="mypage-recentview"] .product-label {
    width: 100px;
    padding-left: 40px;
}

body[data-page="mypage-recentview"] .product-price-info {
    width: 100%;
    border-top: 1px solid var(--lightgray);
    padding: 8px 0;
    text-align: right;
    padding-right: 40px;
    font-weight: bold;
}

body[data-page="mypage-recentview"] .btn.btn-delete {
    margin-bottom: 0;
}

body[data-page="mypage-recentview"] .product-image-info {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

body[data-page="mypage-recentview"] .product-image-info img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    margin-left: 40px;
    margin-right: 20px;
}

body[data-page="mypage-recentview"] .cart-actions {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

body[data-page="mypage-recentview"] .product-box {
    border: 1px solid gray;
}

body[data-page="mypage-recentview"] .product-box .check-box {
    padding-left: 10px;
    width: 100%;
    border-bottom: 1px solid var(--lightgray);
    padding-top: 16px;
    padding-bottom: 16px;
}

body[data-page="mypage-recentview"] .product-number {
    margin-left: 30px;
    /* 체크박스와 상품번호 간격 */
}

body[data-page="mypage-recentview"] label {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    gap: 10px;
    font-size: 15px;
}

body[data-page="mypage-recentview"] .coupon-header {
    padding-top: 10px;
    border-top: 1px solid var(--gray);
}

body[data-page="mypage-recentview"] .coupon-detail-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
}

body[data-page="mypage-recentview"] .header-item:nth-child(1) {
    flex: 5;
}

body[data-page="mypage-recentview"] .header-item:nth-child(2) {
    flex: 3;
    text-align: center;
}

body[data-page="mypage-recentview"] .header-item:nth-child(3) {
    flex: 2;
    text-align: center;
}

body[data-page="mypage-rewardpointslist"] .total-case {
    display: flex;
    margin-top: 18px;
    margin-bottom: 12px;
}

body[data-page="mypage-rewardpointslist"] .category-dropdown .dropdown-icon {
    position: absolute;
    right: -90px;
    height: 8px;
}

body[data-page="mypage-rewardpointslist"] .total-case span {
    width: 120px;
    margin-left: 16px;
    font-size: 15px;
    font-weight: bold;
}

body[data-page="mypage-rewardpointslist"] .category-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

body[data-page="mypage-rewardpointslist"] .rating-container .rating-value {
    font-size: 12px;
}

body[data-page="mypage-rewardpointslist"] .radio-tab-wrapper {
    display: flex;
    justify-content: space-around;
    /* 변경 */
    margin-bottom: 10px;
    width: 100%;
}

body[data-page="mypage-rewardpointslist"] .radio-tab {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.rewards-points-info span {
    color: #0038FF;
}

body[data-page="mypage-rewardpointslist"] .radio-tab input[type="radio"] {
    display: none;
    /* 기본 라디오 버튼 숨김 */
}

body[data-page="mypage-rewardpointslist"] .radio-tab span {
    display: inline-flex;
    /* inline-block 대신 inline-flex 사용 */
    width: 70px;
    height: 40px;
    border: 2px solid transparent;
    /* 기본 상태에서 투명 테두리 */
    box-shadow: 0 0 0 1px lightgray;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    font-weight: bold;
    /* text-align: center; 제거 또는 유지 (flex item이 텍스트 뿐이므로 justify-content로 대체 가능) */
    align-items: center;
    /* Flex 아이템(텍스트)을 세로 중앙 정렬 */
    justify-content: center;
    /* Flex 아이템(텍스트)을 가로 중앙 정렬 */
    vertical-align: top;
    /* inline-flex 요소 간의 정렬을 위해 추가 (선택 사항) */
}

body[data-page="mypage-rewardpointslist"] .radio-tab input[type="radio"]:checked+span {
    border-color: #007bff;
    /* 선택된 상태에서 파란 테두리 */
    color: #007bff;
    box-shadow: none;

    /* 텍스트 색상 변경 */
}

body[data-page="signup-email-business"] .btn-view,
body[data-page="signup-email-general"] .btn-view,
body[data-page="signup-sns-approval"] .btn-view {
    padding: 4px 8px;
}

body[data-page="signup-email-business"] .term-item label,
body[data-page="signup-email-general"] .term-item label,
body[data-page="signup-sns-approval"] .term-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

body[data-page="wishlist"] .product-image-info {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

body[data-page="wishlist"] .product-image-info img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    margin-left: 40px;
    margin-right: 20px;
}

body[data-page="wishlist"] .cart-actions {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

body[data-page="wishlist"] .product-box {
    border: 1px solid gray;
}

body[data-page="wishlist"] .product-box .check-box {
    padding-left: 10px;
    width: 100%;
    border-bottom: 1px solid var(--lightgray);
    padding-top: 16px;
    padding-bottom: 16px;
}

body[data-page="wishlist"] .product-number {
    margin-left: 30px;
    /* 체크박스와 상품번호 간격 */
}

body[data-page="wishlist"] label {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    gap: 10px;
    font-size: 15px;
}

body[data-page="wishlist"] .coupon-header {
    padding-top: 10px;
    border-top: 1px solid var(--gray);
}

body[data-page="wishlist"] .coupon-detail-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
}

body[data-page="wishlist"] .header-item:nth-child(1) {
    flex: 5;
}

body[data-page="wishlist"] .header-item:nth-child(2) {
    flex: 3;
    text-align: center;
}

body[data-page="wishlist"] .header-item:nth-child(3) {
    flex: 2;
    text-align: center;
}

/*
body[data-page="cart-pre-login"] input[type="checkbox"] {
    border-radius: 0;
    width: 16px;
    !* 원하는 크기로 조절 *!
    height: 16px;
    cursor: pointer;
    !* 클릭 영역을 더 직관적으로 *!
}

body[data-page="cart-pre-login"] .cart-status:nth-child(1) {
    color: #0163CE;
}

body[data-page="cart-after-login"] .btn.btn-penta.btn-order {
    margin-top: 10px;
    margin-bottom: 0;
}

body[data-page="cart-after-login"] .npay_button_box {
    background-color: transparent !important;
}

body[data-page="cart-after-login"] h1.page-title {
    font-weight: 700;
}*/