/* 호텔 예약 플러그인 CSS 스타일 */

/* 모든 페이지 타이틀 안 보이게 */
.page-header {
    display: none !important;
}

/* 캘린더 컨테이너 */
#hotel-booking-calendar-container {
    width: 100%;
    max-width: 1200px; /* 최대 너비 설정 (필요에 따라 조절) */
    margin: 20px auto; /* 가운데 정렬 및 상하 여백 */
    font-family: sans-serif; /* 기본 폰트 설정 */
}

/* 헤더 위 호텔 예약캘린더 글자 안 보이게*/
/*#hotel-booking-calendar-container h2 {
    display: none;
} */

/* 캘린더 헤더 (월 이동 버튼, 현재 월 표시) */
#calendar-header {
    display: flex;
    justify-content: space-between; /* 요소들 사이에 공간을 균등하게 배분 */
    align-items: center; /* 세로 중앙 정렬 */
    padding: 10px 0;
    margin-bottom: 15px;
}

#calendar-header button {
    padding: 8px 15px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#calendar-header button:hover {
    background-color: #e0e0e0;
}

#current-month-year {
    font-size: 1.4em;
    font-weight: bold;
}

/* 캘린더 그리드 */
#calendar-grid {
    border: 1px solid #ddd; /* 그리드 전체 테두리 */
}

/* 캘린더 행 (요일 헤더, 날짜들) */
.calendar-row {
    display: flex; /* Flexbox를 사용하여 셀들을 가로로 배열 */
    width: 100%;
}

/* 날짜 행의 테두리 */
.calendar-row.dates {
    border-top: 1px solid #eee;
}

/* 요일 헤더 셀 */
.calendar-day-header {
    flex: 1; /* 모든 셀이 동일한 너비를 가지도록 함 */
    padding: 10px 5px;
    text-align: center;
    font-weight: bold;
    background-color: #f8f8f8; /* 헤더 배경색 */
    border-right: 1px solid #eee; /* 오른쪽 구분선 */
}

/* 캘린더 헤더 타이틀 안 보이게 */
#calendar-header-title {
    display: none !important; 
}

/* --- 추가: 요일 헤더 텍스트 색상 --- */
.calendar-day-header.sunday {
    color: red;
}
.calendar-day-header.saturday {
    color: blue;
}
/* --- 추가 끝 --- */

.calendar-day-header:last-child {
    border-right: none; /* 마지막 셀 오른쪽 테두리 제거 */
}

/* 날짜 셀 (기본) */
.calendar-day {
    flex: 1; /* 각 날짜 셀이 동일한 너비를 가지도록 함 */
    min-height: 150px; /* 최소 높이 지정 (내용에 따라 늘어남) */
    padding: 8px;
    border-right: 1px solid #eee; /* 오른쪽 구분선 */
    position: relative; /* 자식 요소(방 상태 등)의 위치 기준 */
    box-sizing: border-box; /* 패딩과 테두리를 너비/높이에 포함 */
}

.calendar-day:last-child {
    border-right: none; /* 마지막 셀 오른쪽 테두리 제거 */
}

/* 비어있는 날짜 셀 */
.calendar-day.empty {
    background-color: #fafafa; /* 비어있는 칸 배경색 */
}

/* 날짜 숫자 */
.day-number {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 5px;
}

/* --- 추가: 날짜 숫자 텍스트 색상 --- */
/* 과거가 아닌 날짜의 일요일 숫자 */
.calendar-day:not(.past-date) .day-number.sunday {
    color: red;
}
/* 과거가 아닌 날짜의 토요일 숫자 */
.calendar-day:not(.past-date) .day-number.saturday {
    color: blue;
}
/* 과거가 아닌 날짜의 공휴일 숫자 (요일보다 우선) */
.calendar-day.holiday:not(.past-date) .day-number {
    color: red !important; /* 공휴일은 무조건 빨간색 */
    font-weight: bold; /* 굵게 스타일은 유지 */
}
/* --- 추가 끝 --- */

/* 방 상태 정보 컨테이너 */
.room-status-container {
    font-size: 0.8em; /* 방 정보 폰트 크기 */
    border-color: #ccc;
}

/* 개별 방 상태 */
.room-status {
    display: block; /* 한 줄에 하나씩 표시 */
    padding: 3px 3px;
    margin-bottom: 2px;
    cursor: default; /* 기본 커서 */
    border-radius: 3px;
}

/* 예약 가능 상태 */
.room-status.available {
    cursor: pointer; /* 클릭 가능 커서 */
    background-color: #e8f5e9; /* 연한 초록 배경 (임시) */
    border-radius: 10%;
}
.room-status.available:hover {
    background-color: #c8e6c9;
}
.status-icon.status-available {
    color: #388e3c; /* 초록색 아이콘 */
    font-weight: bold;
    /* TODO: 이미지 아이콘 사용 시 background-image 속성 활용 */
}

/* 예약 진행 상태 */
.room-status.pending {
    background-color: #e3f2fd; /* 연한 파랑 배경 (임시) */
    cursor: not-allowed;
    border-radius: 10%;
}
.status-icon.status-pending {
    color: #1976d2; /* 파란색 아이콘 */
    font-weight: bold;
}

/* 예약 완료 상태 */
.room-status.booked {
    background-color: #ffebee; /* 연한 빨강 배경 (임시) */ 
    /*color: #aaa;*/ /* 완료된 텍스트는 약간 흐리게 */
    cursor: not-allowed;
    border-radius: 10%;
}
.status-icon.status-booked {
    color: #d32f2f; /* 빨간색 아이콘 */
    font-weight: bold;
}

/* --- 추가: 지나간 날짜의 아이콘 및 텍스트 정렬 --- */
.room-status.past-day-room .status-icon,
.room-status.past-day-room .room-name {
    vertical-align: middle;
}
/* --- 추가 끝 --- */

/* 상태 아이콘 (공통) */
.status-icon {
    display: inline-block;
    width: 20px; /* 아이콘 너비 */
    height: 20px; /* 아이콘 높이 */
    line-height: 16px; /* 세로 중앙 정렬 */
    text-align: center;
    margin-right: 2px;
    border-radius: 50%; /* 원형 아이콘 (텍스트 기반) */
    background-color: #fff; /* 아이콘 배경 (필요시) */
    border: 1px solid currentColor; /* 아이콘 색상과 동일한 테두리 */
}

/* --- 추가: 방 아래 가격 표시 스타일 --- */
.room-price-display {
    display: block; /* 방 이름 아래에 표시 */
    font-size: 0.9em;
    color: #888; /* 연한 회색 */
    margin-top: 1px; /* 방 이름과의 간격 */
    padding-left: 20px; /* 상태 아이콘 너비만큼 들여쓰기 (아이콘 + margin-right) */
}
/* --- 추가 끝 --- */

/* 룸 번호 */
.room-name {
    display: inline-block;
    margin-right: 5px;
}

/* 룸 가격 (title 속성으로 대체됨) */
/* .room-price {
    font-weight: bold;
} */

/* --- 두 번째 예약 페이지 스타일 --- */

/* 전체 컨테이너 (Flexbox) */
.booking-step2-flex-container {
    display: flex;
    flex-wrap: wrap; /* 화면 너비가 좁아지면 컬럼이 아래로 떨어지도록 */
    gap: 30px; /* 컬럼 사이 간격 */
    padding: 20px;
    border: 1px solid #eee;
    background-color: #fff;
    margin-top: 20px;
}

/* 좌우 컬럼 */
.booking-step2-column {
    flex: 1; /* 기본적으로 동일한 너비 차지 */
    min-width: 300px; /* 최소 너비 지정 (반응형 대응) */
}

/* 좌측 컬럼 (이미지, 상세정보) */
.booking-step2-left-column {
    /* 특별한 스타일이 필요하면 여기에 추가 */
}

/* 우측 컬럼 (예약 옵션) */
.booking-step2-right-column {
    border-left: 1px solid #eee; /* 좌측 컬럼과의 구분선 (화면 넓을 때) */
    padding-left: 30px;
}

/* 예약 옵션 섹션 구분 */
.booking-options-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee; /* 섹션 구분선 */
}

.booking-options-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 섹션 제목 */
.booking-step2-column h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* 날짜 선택 input */
input[type="date"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px; /* 입력 필드 간 간격 */
}

/* 예약 2단계 페이지 텍스트 굵기 조정 */
#stay-duration, #room-price-display {
    font-weight: bold;  
}

#total-price-section #summary-room-price {
    font-weight: bold;
}

#total-price-section #summary-addon-price {
    font-weight: bold;
}

/* 부가 서비스 옵션 (label + select) */
.addon-option {
    margin-bottom: 10px;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px; /* 요소 간 간격 */
}

.addon-option label {
    width: 80px; /* 레이블 너비 고정 */
    flex-shrink: 0; /* 너비 줄어들지 않도록 */
}

.addon-option select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex-grow: 1; /* 남는 공간 차지 */
}

/* 총 합계 섹션 */
.total-summary p {
    margin: 8px 0;
    display: flex;
    justify-content: space-between; /* 항목 이름과 가격 양쪽 정렬 */
}

.total-summary p strong {
    font-size: 1.1em;
}

/* 예약하기 버튼 섹션 */
.booking-action-section {
    text-align: right; /* 버튼 오른쪽 정렬 */
    margin-top: 20px;
}

#proceed-to-checkout-button {
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #7F54B3; /* 초록색 계열 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#proceed-to-checkout-button:hover {
    background-color: #7748b1;
}

#proceed-to-checkout-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* --- WooCommerce 결제 페이지 커스터마이징 --- */

/* Flex 컨테이너 */
#hbp-checkout-flex-container.hbp-flex-container {
    display: flex;
    flex-wrap: wrap; /* 화면 너비 좁아지면 컬럼 아래로 */
    gap: 40px; /* 컬럼 사이의 간격 */
    margin-top: 20px; /* 상단 여백 */
}

/* Flex 컬럼 */
.hbp-flex-column {
    flex: 1; /* 기본적으로 컬럼들이 공간을 동일하게 나눠 가짐 */
    min-width: 300px; /* 컬럼 최소 너비, 반응형 고려 */
}

/* 왼쪽 컬럼 */
#hbp-checkout-left-column {
    order: 1; /* 왼쪽 컬럼 순서 */
    /* 추가적인 왼쪽 컬럼 스타일 */
}

/* 오른쪽 컬럼 */
#hbp-checkout-right-column {
    order: 2; /* 오른쪽 컬럼 순서 */
    background-color: #f9f9f9; /* 오른쪽 배경색 약간 다르게 (선택 사항) */
    padding: 20px; /* 내부 여백 */
    border-radius: 5px; /* 모서리 둥글게 (선택 사항) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 그림자 효과 (선택 사항) */
}

/* WooCommerce 기본 요소와의 충돌 방지 및 조절 (필요 시) */
/* 예: .woocommerce-checkout #customer_details { ... } */
/* 예: .woocommerce-checkout #order_review { ... } */

/* 상품명 아래 상세 정보(.variation) 스타일 개선 (가독성 향상) */
.woocommerce-checkout-review-order-table .product-name dl.variation {
    margin-top: 0.5em; /* 위 요소와의 간격 */
    font-size: 0.9em;  /* 약간 작은 폰트 */
}

.woocommerce-checkout-review-order-table .product-name dl.variation dt {
    float: left;
    clear: left;
    margin-right: 0.5em; /* 항목 이름과 값 사이 간격 */
    font-weight: bold; /* 항목 이름은 굵게 */
    color: #555;
    padding: 2px 0; /* 상하 약간의 패딩 */
    /* width: auto; /* 너비 자동 조정 - 필요시 추가 */
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd {
    margin-left: 0; /* 기본 마진 제거 - dt의 float으로 인해 자동 정렬됨 */
    padding: 2px 0; /* 상하 약간의 패딩 */
    color: #777;
    /* display: block; /* 한 줄 전체 차지 않도록 - 필요시 제거 또는 수정 */
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd:last-of-type {
    margin-bottom: 0.5em;
}

/* WooCommerce Checkout Page Styles */
.checkout-flex-container {
    display: flex;
    flex-wrap: wrap; /* 작은 화면에서 줄바꿈 허용 */
    gap: 30px; /* 컬럼 사이 간격 */
}

.checkout-left {
    flex: 1 1 60%; /* 기본 너비 60% */
    box-sizing: border-box;
}

.checkout-right {
    flex: 1 1 calc(40% - 30px); /* 기본 너비 40%, 간격 고려 */
    box-sizing: border-box;
}

/* 추가 스타일 (필요에 따라 조정) */
.woocommerce .col2-set .col-1, 
.woocommerce-page .col2-set .col-1 {
    float: none; /* 테마의 기본 float 제거 */
    width: 100%; /* 너비를 100%로 설정하여 Flex 아이템으로 동작하도록 함 */
}

.woocommerce .col2-set .col-2, 
.woocommerce-page .col2-set .col-2 {
    float: none; /* 테마의 기본 float 제거 */
    width: 100%;
}

#order_review_heading {
    /* 필요하다면 제목 스타일 조정 */
}

#order_review {
    /* 주문 검토 테이블 스타일 조정 */
}

/* 결제 버튼 섹션 */
#place_order {
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #7F54B3; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#place_order:hover {
    background-color: #7748b1;
}

/* 결제 수단 세로 정렬 */
.wc_payment_method input.input-radio {
    vertical-align: middle; /* 또는 top, bottom, baseline 중 적절한 값 */
    margin-top: 2px; /* 필요에 따라 조정 */
}
.wc_payment_method label {
    vertical-align: middle;
}

/* --- 추가: 날짜 상태별 스타일 --- */
/* 과거 날짜 */
.calendar-day.past-date {
    background-color: #fafafa; /* 연한 회색 배경 */
    color: #bbb; /* 글자색도 흐리게 */
    pointer-events: none; /* 클릭 이벤트 비활성화 */
}
.calendar-day.past-date .room-status.available {
    cursor: not-allowed;
    background-color: #eeeeee; /* 예약 가능 표시도 비활성화된 느낌으로 */
    color: #aaa;
}
.calendar-day.past-date .status-icon.status-available {
    color: #ccc; /* 아이콘 색상도 흐리게 */
    border-color: #ccc;
}

.calendar-day.past-date .room-status.pending {
    cursor: not-allowed;
    background-color: #eeeeee; /* 예약 가능 표시도 비활성화된 느낌으로 */
    color: #aaa;
}
.calendar-day.past-date .status-icon.status-pending {
    color: #ccc; /* 아이콘 색상도 흐리게 */
    border-color: #ccc;
}

.calendar-day.past-date .room-status.booked {
    cursor: not-allowed;
    background-color: #eeeeee; /* 예약 가능 표시도 비활성화된 느낌으로 */
    color: #aaa;
}
.calendar-day.past-date .status-icon.status-booked {
    color: #ccc; /* 아이콘 색상도 흐리게 */
    border-color: #ccc;
}

.calendar-day.holiday .day-number {
    color: red !important; /* 공휴일은 무조건 빨간색 */
    font-weight: bold;
}

/* 우커머스 결제 페이지 개인정보 보호정책 텍스트 숨기기 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    display: none !important;
}

/* 우커머스 결제 페이지 "고객님의 주문" 제목 숨기기 */
#order_review_heading {
    display: none !important;
}

/* 우커머스 결제 페이지 "최종 결제 금액 상세" 스타일 */
#hbp-final-payment-details {
    margin-top: 30px; 
    padding-top: 20px; 
    border-top: 1px solid #eee;
}

/* WooCommerce 결제 페이지의 주문 검토 테이블 전체 숨기기 */
/*.woocommerce-checkout-review-order-table {
    display: none !important;
}

/* 주문 완료 페이지 '나의 예약 조회하기' 버튼 스타일 */
/*.woocommerce-order-received .button.wc-forward, 주문 완료 페이지의 버튼을 특정 */
/* .woocommerce-view-order .button.wc-forward { 주문 보기 페이지의 버튼도 포함 (선택 사항) */
/*    background-color: #0073aa; /* 예: 파란색 배경 */
/*    color: #ffffff;           /* 예: 흰색 글자 */
/*    padding: 10px 20px;     /* 예: 안쪽 여백 (상하 10px, 좌우 20px) */
/*    border: none;             /* 예: 테두리 없음 */
/*    border-radius: 5px;       /* 예: 모서리 둥글게 */
/*    text-decoration: none;    /* 예: 밑줄 없음 */
/*    font-weight: bold;        /* 예: 글자 굵게 */
/*    transition: background-color 0.3s ease; /* 부드러운 색상 변경 효과 */
/*}

/* 버튼에 마우스를 올렸을 때 스타일 */
/*.woocommerce-order-received .button.wc-forward:hover,
.woocommerce-view-order .button.wc-forward:hover {
    background-color: #005177; /* 예: 더 어두운 파란색 배경 */
/*    color: #ffffff;           /* 예: 흰색 글자 유지 */
/*}

/* 버튼을 감싸는 div의 스타일을 변경하고 싶다면 (예: 너비 조절) */
/* 이 div는 인라인 스타일이 이미 적용되어 있으므로, !important를 사용하거나 인라인 스타일을 제거해야 할 수 있습니다. */
/*
.woocommerce-order-received div > a.button.wc-forward {
    display: inline-block;
    width: auto; / * 또는 특정 너비, 예: 200px * /
}
*/

/* --- WooCommerce 주문완료 페이지 커스터마이징 --- */

/* 주문 상세 정보 위의 상세 정보 텍스트 숨기기 */
.woocommerce-order-overview {
    display: none !important;
}

/* 나의 예약 조회하기 버튼 섹션 */
.woocommerce-order .button.wc-forward {
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #7F54B3; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 버튼을 감싸는 부모 div의 text-align을 right로 변경 */
.woocommerce-order > div[style*="text-align: center"][style*="margin-top: 20px"][style*="margin-bottom: 20px"] {
    text-align: right !important;
}

.woocommerce-order .button.wc-forward:hover {
    background-color: #7748b1;
    color: #fff;
}

/* --- WooCommerce "내 계정 > 주문" 페이지 UI 개선 --- */

/* 전체 "내 계정" 페이지 컨테이너 */
.woocommerce-account .page-content .woocommerce {
    display: flex;
    flex-wrap: wrap; /* 모바일에서 네비게이션과 콘텐츠가 쌓이도록 */
    gap: 30px; /* 네비게이션과 콘텐츠 사이 간격 */
}

/* "내 계정" 네비게이션 */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 15%; /* 네비게이션 너비 고정 (필요시 조정) */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9f9f9;
    align-self: flex-start; /* 콘텐츠 높이와 관계없이 상단 정렬 */
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 0; /* li 기본 마진 제거 */
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-bottom: 5px; /* 각 링크 아이템 하단 간격 */
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #e9e9e9;
    color: #000;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #7F54B3; /* 활성 탭 배경색 (플러그인 메인 컬러와 유사하게) */
    color: #fff;
    font-weight: bold;
}

/* 네이게이션 대시보드 메뉴 안 보이게 */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard {
    display: none;
}

/* 네비게이션 다운로드 메뉴 안 보이게 */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--downloads {
    display: none;
}

/* 네비게이션 주소 메뉴 안 보이게 */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address {
    display: none;
}

/* "내 계정" 콘텐츠 영역 */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1; /* 남은 공간을 모두 차지 */
    min-width: 0; /* flex 아이템이 콘텐츠보다 작아질 수 있도록 */
}

/* "계정 정보" 필드셋 여백 조정 */
.woocommerce-EditAccountForm fieldset {
    margin-top: 10px;
    margin-bottom: 24px;
}

/* "계정 정보" 버튼 오른쪽으로 배치 */
.woocommerce-EditAccountForm button[name="save_account_details"] {
    float: right;
}

/* 내 주문 페이지 버튼 오른쪽으로 배치 */
.woocommerce-pagination {
    display: flex;
    justify-content: space-between;
}

.woocommerce-pagination .woocommerce-button--previous {
    order: 1;
}

.woocommerce-pagination .woocommerce-button--next {
    order: 2;
    margin-left: auto !important;
}

/* 주문 테이블 상단 여백 (네비게이션과의 구분) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table {
    margin-top: 0; /* 이미 woocommerce-MyAccount-content에 의해 간격이 생김 */
}

/* 주문 테이블 스타일 */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* 테이블 전체 모서리 둥글게 */
    overflow: hidden; /* border-radius 적용을 위해 */
}

.woocommerce-orders-table thead th {
    background-color: #f8f8f8;
    color: #333;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.woocommerce-orders-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.woocommerce-orders-table tbody tr:last-child {
    border-bottom: none;
}

.woocommerce-orders-table tbody tr:hover {
    background-color: #f9f9f9;
}

.woocommerce-orders-table td,
.woocommerce-orders-table th[scope="row"] { /* 주문번호 th도 포함 */
    padding: 12px 15px;
    vertical-align: middle;
}

/* 특정 셀 정렬 */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
    text-align: left;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
    text-align: right;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    text-align: center;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status span {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px; /* 타원형 모양 */
    font-size: 0.9em;
    font-weight: 500;
    min-width: 80px; /* 최소 너비로 일관성 유지 */
}

/* 주문 상태별 스타일 */
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status span,
.woocommerce-orders-table__row--status-awaiting-vbank .woocommerce-orders-table__cell-order-status span {
    background-color: #fff8e1; /* 연한 노랑 */
    color: #f57f17; /* 주황 계열 */
    border: 1px solid #fdd835;
}
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status span {
    background-color: #e3f2fd; /* 연한 파랑 */
    color: #1565c0; /* 파랑 계열 */
    border: 1px solid #64b5f6;
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status span {
    background-color: #e8f5e9; /* 연한 초록 */
    color: #2e7d32; /* 초록 계열 */
    border: 1px solid #81c784;
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status span {
    background-color: #ffebee; /* 연한 빨강 */
    color: #c62828; /* 빨강 계열 */
    border: 1px solid #e57373;
}
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status span {
    background-color: #f3e5f5; /* 연한 보라 */
    color: #6a1b9a; /* 보라 계열 */
    border: 1px solid #ba68c8;
}
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status span {
    background-color: #eceff1; /* 연한 회색 */
    color: #37474f; /* 어두운 회색 */
    border: 1px solid #90a4ae;
}


/* 작업(Actions) 열 버튼 */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    text-align: right;
    white-space: nowrap; /* 버튼들이 한 줄에 표시되도록 */
    min-width: 250px; /* 버튼 2-3개 정도를 위한 최소 너비, 필요시 조정 */
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    padding: 6px 12px; /* 버튼 크기 약간 작게 조정 */
    font-size: 0.9em;
    margin-left: 5px; /* 이전 margin-right을 margin-left로 변경 (오른쪽 정렬이므로) */
    margin-bottom: 0; /* 한 줄에 표시되므로 하단 마진 불필요 */
    vertical-align: middle;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:first-child {
    margin-left: 0; /* 첫 번째 버튼에는 왼쪽 마진 없음 */
}

/* 페이지네이션 */
.woocommerce-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.woocommerce-pagination .woocommerce-button {
    padding: 8px 15px;
}

/* 섬네일, 상품 이름 컬럼에 대한 스타일 추가 (내용에 따라) */
.woocommerce-orders-table__header-order-thumbnail,
.woocommerce-orders-table__cell-order-thumbnail {
    width: 80px; /* 섬네일 너비 고정 */
    text-align: center !important;
}
.woocommerce-orders-table__cell-order-thumbnail img {
    max-width: 50px;
    height: auto;
    border-radius: 3px;
}

.woocommerce-orders-table__header-order-product {
    /* 상품 이름 열에 대한 스타일 (필요시) */
}

/* "주문" 열 링크 스타일 */
.woocommerce-orders-table__cell-order-number a {
    font-weight: 600;
    color: #7F54B3;
    text-decoration: none;
}
.woocommerce-orders-table__cell-order-number a:hover {
    text-decoration: underline;
}

/* --- 로그인 페이지 폼 중앙 정렬 --- */
/* WP 기본 페이지 컨테이너가 있을 경우를 대비하여 body 또는 특정 상위 요소에 높이 100% 설정이 필요할 수 있음 */
/* 예시: body, html { height: 100%; } */

/* 로그인 폼을 포함하는 page-content에 flex 적용 (로그인 페이지에서만) */
.hbp-login-page .page-content {
    display: flex;
    flex-direction: column; /* 내부 요소들이 세로로 쌓이도록 */
    align-items: center;    /* 가로축 중앙 정렬 */
    justify-content: center; /* 세로축 중앙 정렬 */
    min-height: 70vh;       /* 최소 높이를 뷰포트 높이의 70%로 설정 (헤더/푸터 등 다른 요소 고려) */
                                /* 이 값은 실제 페이지 레이아웃에 따라 조절 필요 */
    padding: 20px; /* 상하좌우 여백 */
    box-sizing: border-box; /* 패딩과 테두리를 너비/높이에 포함 */
}

/* --- 태블릿 반응형 디자인 --- */
@media (max-width: 900px) {

    /* 모바일에서 테이블 스크롤 가능하도록 (필요시) */
    /* .woocommerce-MyAccount-content {
        overflow-x: auto;
    } */

    /* 모바일에서 테이블 셀들이 블록으로 표시되어 세로로 쌓이는 것을 방지 (테마 기본값일 수 있음) */
    /* 이 부분은 테마에 따라 다를 수 있으므로, 문제가 없다면 주석 처리 */
    /*
    .woocommerce-orders-table thead {
        display: table-header-group;
    }
    .woocommerce-orders-table tbody tr {
        display: table-row;
    }
    .woocommerce-orders-table td,
    .woocommerce-orders-table th[scope="row"] {
        display: table-cell;
        text-align: left !important; / * 모든 셀 왼쪽 정렬 (모바일에서) * /
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
        white-space: normal; / * 모바일에서는 버튼 줄바꿈 허용 * /
        text-align: left !important;
        min-width: auto;
    }
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
        display: block; / * 버튼을 블록 요소로 만들어 세로로 쌓이도록 * /
        margin-left: 0;
        margin-bottom: 8px;
        width: 100%; / * 버튼 너비 100% * /
    }
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:last-child {
        margin-bottom: 0;
    }
    */

    /* === 태블릿 캘린더 스타일 시작 === */
    #hotel-booking-calendar-container {
        overflow-x: hidden;
    }

    #calendar-header {
        /* flex-direction: column; */ 
        /* gap: 10px; */ 
        padding-bottom: 10px; 
    }
    #calendar-header button {
        font-size: 0.8em; 
        padding: 6px 10px;
    }
    #current-month-year {
        font-size: 1.1em; 
    }
    .calendar-legend {
        justify-content: left;
        gap: 5px !important;
        margin-left: 0;
        flex-wrap: wrap;
    }
    .calendar-legend .room-status {
        font-size: 0.65em;
    }
    .calendar-legend .room-status .status-icon { /* 범례 아이콘 정렬 */
        position: relative;
        line-height: 1em; 
        top: -0.1em;
    }

    #calendar-grid {
    }
    .calendar-day-header {
        font-size: 0.8em; 
        padding: 8px 4px; 
        white-space: nowrap;
    }
    .calendar-day {
        min-height: auto;  /* PC의 150px에서 auto로 변경 */
        padding: 5px;
        /* height: 100px; */ /* 고정 높이 설정 (선택 사항) */
        /* overflow-y: auto; */ /* 개별 셀 스크롤 (선택 사항) */
    }
    .day-number {
        font-size: 0.8em;
        margin-bottom: 3px;
    }
    .room-status-container { /* 각 날짜 셀 안의 방 상태 목록 */
        font-size: 0.7em; /* 전체적인 폰트 크기 기준 */
    }
    .room-status { /* 개별 방 상태 (아이콘, 방번호, 가격 포함) */
        font-size: 0.75em; /* room-status-container 내부에서의 상대적 크기 */
        padding: 2px 0;
        line-height: 1.3;
    }
    .room-status > span { /* 아이콘, 방번호, 가격 각각의 span */
        /* vertical-align: middle; */ /* 아이콘-텍스트 수직 정렬 시도 */
    }
    .room-status .status-icon {
        width: 10px;
        height: 10px;
        line-height: 9px; /* height와 동일하게 수정 */
        margin-right: 1px;
        font-size: 0.8em; 
        /* vertical-align: middle; */ /* 부모의 line-height에 의해 조절되도록 시도 */
    }
    .room-status .room-name { /* 클래스명 변경 */
        font-size: 1.0em;
        /* vertical-align: middle; */ /* 인라인-블록 요소들 정렬 */
    }
    .room-status .room-price-display {
        display: block; /* 가격은 다음 줄로 */
        font-size: 0.9em; /* 방번호와 동일 크기 또는 약간 작게 */
        margin-top: 1px;
        padding-left: 12px; /* 아이콘 너비만큼 들여쓰기 시도 (아이콘 크기 변경 시 조정 필요) */
    }

    /* 2단계 예약 페이지 커스터마이징 */
    .booking-step2-flex-container {
        flex-direction: column; /* 컬럼을 세로로 쌓음 */
        gap: 20px; /* 컬럼 사이 간격 조정 (선택 사항) */
    }
    .booking-step2-column {
        width: 100%; /* 각 컬럼이 전체 너비를 차지하도록 */
        min-width: unset; /* 기존 min-width를 해제하거나 필요에 맞게 조정 */
    }
    .booking-step2-right-column {
        border-left: none; /* 세로로 쌓일 때 구분선 제거 */
        padding-left: 0;
        border-top: 1px solid #eee; /* 상단 구분선 추가 */
        padding-top: 20px;
        margin-top: 20px;
    }
    .booking-step2-column h2{
        font-size: 28px;
    }
    .booking-step2-column h3{
        font-size: 24px;
    }
    .booking-step2-column h4{
        font-size: 20px;
    }
    .booking-step2-column p{
        font-size: 16px;
    }
    .booking-step2-column .booking-options-section label[for="start-date"] {
        margin-bottom: 5px !important; 
    }
    .booking-step2-column .booking-options-section label[for="end-date"] {
        margin: 10px 0px 5px 0px !important; 
    }

    /* 우커머스 결제 페이지 커스터마이징 */
    .woocommerce-checkout h2 {
        font-size: 28px;
    }
    .woocommerce-checkout h3 {
        font-size: 24px;
    }
    .woocommerce-checkout h4 {
        font-size: 20px;
    }
    .woocommerce-checkout p {
        font-size: 16px;
    }

    .woocommerce-account .page-content .woocommerce {
        display: flex;
        flex-direction: column;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
        margin-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        padding-left: 0;
    }

    /* 주문 확인 페이지 커스터마이징 */
    .woocommerce-order h2 {
        font-size: 28px;
    }
    .woocommerce-order h3 {
        font-size: 24px;
    }
    .woocommerce-order h4 {
        font-size: 20px;
    }
    .woocommerce-order p {
        font-size: 16px;
    }
    td.woocommerce-table__product-name ul.wc-item-meta {
        padding-left: 0 !important; /* 주문 상세 페이지 옵션 목록 왼쪽 여백 제거 */
    }

    /* 반응형: "내 계정" 페이지 */
    .woocommerce-account .page-content .woocommerce {
        flex-direction: column; /* 모바일에서는 세로로 쌓음 */
        gap: 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 1 1 auto; /* 너비 자동으로 */
        margin-bottom: 0; /* 콘텐츠와의 간격은 gap으로 처리 */
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        /* 이미 flex: 1로 설정됨 */
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex; /* 모바일에서 네비게이션 목록을 가로로 배치 */

        gap: 10px; /* 네비게이션 목록 사이 간격 */
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        flex: 1 1 auto; /* 네비게이션 목록 아이템이 콘텐츠보다 작아질 수 있도록 */
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {

        padding: 5px 10px; /* 네비게이션 목록 아이템 내부 여백 */
        text-align: center; /* 네비게이션 목록 아이템 텍스트 가운데 정렬 */
    }
}

/* --- 모바일 반응형 디자인 --- */
@media (max-width: 500px) {
    /* === 모바일 (더 작은 화면) 캘린더 스타일 시작 === */
    #calendar-header button {
        font-size: 0.7em; 
        padding: 5px 8px;
    }
    #current-month-year {
        font-size: 1.1em; 
    }
    .calendar-legend {
    }
    .calendar-legend .room-status {
    }
    .calendar-legend .room-status .status-icon {
        width: 10px;
        height: 10px;
        line-height: 1em; /* height와 동일하게 수정 */
        margin-right: 1px;
        font-size: 0.8em; 
    }

    .calendar-day-header {
        font-size: 0.7em; /* 태블릿(0.8em)보다 작게 */
        padding: 6px 2px; 
    }
    .calendar-day {
        padding: 4px; /* 태블릿(5px)보다 작게 */
    }
    .day-number {
        font-size: 0.7em; /* 태블릿(0.8em)보다 작게 */
        margin-bottom: 2px;
    }
    .room-status-container { 
        font-size: 0.6em; /* 태블릿(0.7em)보다 작게 */
    }
    .room-status { 
        font-size: 0.7em; /* room-status-container 내부에서의 상대적 크기 */
        padding: 2px 0;
        line-height: 1.3;
    }
    .room-status .status-icon {
        width: 10px;
        height: 10px;
        line-height: 1.2em; /* height와 동일하게 수정 */
        font-size: 0.8em; 
        margin-right: 0px;
    }
    .room-status .room-name { 
        font-size: 0.7em; /* 기존 0.8em에서 0.75em으로 수정 */
    }
    .room-status .room-price-display {
        font-size: 0.7em; /* 기존 0.8em에서 0.75em으로 수정 */
        padding-left: 5px;
    }

    /* 2단계 예약 페이지 커스터마이징 */
    .booking-step2-column h2{
        font-size: 24px;
    }
    .booking-step2-column h3{
        font-size: 20px;
    }
    .booking-step2-column h4{
        font-size: 20px;
    }
    .booking-step2-column p{
        font-size: 16px;
    }

    /* 결제 페이지 커스터마이징 */
    .woocommerce-checkout h2 {
        font-size: 24px;
    }
    .woocommerce-checkout h3 {
        font-size: 20px;
    }
    .woocommerce-checkout h4 {
        font-size: 20px;
    }
    .woocommerce-checkout p {
        font-size: 16px;
    }

    /* 주문 확인 페이지 커스터마이징 */
    .woocommerce-order h2 {
        font-size: 24px;
    }
    .woocommerce-order h3 {
        font-size: 20px;
    }
    .woocommerce-order h4 {
        font-size: 20px;
    }
    .woocommerce-order p {
        font-size: 16px;
    }
}

/* 로그인 페이지용 CSS (페이지 ID 110 사용) */
.hbp-login-page .entry-header,
.hbp-login-page .page-title {
    display: none !important;
}

.hbp-login-page .page-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    max-width: 400px; /* 폼 최대 너비 설정 */
    margin: 0 auto; /* 페이지 중앙 정렬 */
}

.hbp-login-page form#loginform,
.hbp-login-page form#registerform, /* 회원가입 폼에도 적용 (WP-Members 등) */
.hbp-login-page form#lostpasswordform { /* 비밀번호 찾기 폼에도 적용 */
    border: 1px solid #ccd0d4;
    padding: 26px 24px 30px; /* 내부 여백 증가 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    background: #fff; /* 배경색 흰색으로 명시 */
    border-radius: 4px; /* 모서리 약간 둥글게 */
}

.hbp-login-page form#loginform p,
.hbp-login-page form#registerform p,
.hbp-login-page form#lostpasswordform p {
    margin-bottom: 15px; /* 필드 간 간격 조정 */
}

.hbp-login-page form#loginform p.login-submit,
.hbp-login-page form#registerform p.submit,
.hbp-login-page form#lostpasswordform p.lostpassword-submit {
    margin-top: 20px; /* 제출 버튼 상단 여백 */
}

.hbp-login-page input[type="text"],
.hbp-login-page input[type="password"],
.hbp-login-page input[type="email"] {
    font-size: 16px; /* 입력 필드 폰트 크기 키움 */
    padding: 8px 10px; /* 입력 필드 패딩 조정 */
    width: 100%;
    border-radius: 3px; /* 입력 필드 모서리 약간 둥글게 */
    border: 1px solid #8c8f94;
}
.hbp-login-page input[type="text"]:focus,
.hbp-login-page input[type="password"]:focus,
.hbp-login-page input[type="email"]:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}


.hbp-login-page .login-remember label {
    font-size: 13px; /* '로그인 상태 유지' 폰트 크기 */
    color: #3c434a;
}

.hbp-login-page #login_error,
.hbp-login-page .message {
    border-left-width: 4px;
    padding: 12px;
    margin-bottom: 20px; /* 오류/알림 메시지 하단 여백 */
    border-radius: 3px; /* 메시지 박스 모서리 약간 둥글게 */
}

.hbp-login-page #nav,
.hbp-login-page #backtoblog {
    margin: 15px 0 0; /* 하단 링크 영역 상단 여백 */
    padding: 0;
    text-align: center; /* 링크들 가운데 정렬 */
    font-size: 13px;
}
.hbp-login-page #nav a,
.hbp-login-page #backtoblog a {
    color: #50575e; /* 링크 색상 조정 */
    text-decoration: underline;
}
.hbp-login-page #nav a:hover,
.hbp-login-page #backtoblog a:hover {
    color: #0a4b78; /* 링크 호버 색상 */
}

.hbp-login-page .submit input[type="submit"] {
    width: 100%; /* 버튼 너비 100% */
    padding: 10px 0; /* 버튼 내부 상하 패딩 */
    font-size: 14px;
    background: #2271b1; /* WordPress 기본 버튼 색상 */
    border-color: #2271b1;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.hbp-login-page .submit input[type="submit"]:hover {
    background: #1e649a;
    border-color: #1e649a;
}