/* 마이페이지 공통 스타일 - 일관된 폰트 사이즈 정의 */

/* 페이지 타이틀 폰트 크기 */
.page-title {
    font-size: var(--h2-font-size);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* 섹션 타이틀 폰트 크기 */
.section-title {
    font-size: var(--h3-font-size);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* 사이드바 제목 폰트 크기 */
.sidebar-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #777;
    letter-spacing: 0.05rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

/* 데스크탑에서 사이드바 border 제거 */
@media (min-width: 992px) {
    .sidebar-menu {
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/* 사이드바 링크 폰트 크기 */
.nav-link {
    font-size: 0.95rem;
    padding: 0.5rem 0;
    transition: all 0.2s;
}

/* 상품명 폰트 크기 */
.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* 상품명 - product-main 클래스 */
.product-main {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 상품 옵션 폰트 크기 */
.product-option {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

/* 가격 폰트 크기 */
.product-price {
    font-size: 1.05rem;
    font-weight: 600;
}

/* 수량 폰트 크기 */
.product-quantity {
    font-size: 0.9rem;
    color: #666;
}

/* 주문번호 폰트 크기 */
.order-id, .order-number {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 주문/교환/반품 날짜 폰트 크기 */
.order-date, .exchange-date {
    font-size: 0.95rem;
    color: #666;
}

/* 상태 뱃지 폰트 크기 */
.status-badge {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* 정보 라벨 폰트 크기 */
.info-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
}

/* 정보 값 폰트 크기 */
.info-value {
    font-size: 0.95rem;
}

/* 안내 텍스트 폰트 크기 */
.notice-list li {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* 버튼 폰트 크기 */
.btn-sm {
    font-size: 0.85rem;
}

/* 타임라인 타이틀 폰트 크기 */
.timeline-title {
    font-size: 0.95rem;
    font-weight: 600;
}

/* 타임라인 날짜 폰트 크기 */
.timeline-date {
    font-size: 0.85rem;
    color: #666;
}

/* 브레드크럼 폰트 크기 */
.breadcrumb {
    font-size: 0.9rem;
}

/* 필터 영역 폰트 크기 */
.filter-container .btn {
    font-size: 0.85rem;
}

.date-picker-container input,
.date-inputs input {
    font-size: 0.9rem;
}

/* 모달 폰트 크기 */
.modal-title {
    font-size: 1.2rem;
}

.modal-body label {
    font-size: 0.95rem;
}

.modal-body .form-control {
    font-size: 0.95rem;
}

.modal-footer .btn {
    font-size: 0.9rem;
}

/* 교환 사유 폰트 크기 */
.exchange-reason {
    font-size: 0.9rem;
}

/* 상품 개수 폰트 크기 */
.product-count {
    font-size: 0.95rem;
}

/* 총 가격 폰트 크기 */
.total-price {
    font-size: 1.05rem;
    font-weight: 600;
}

/* 접는 메뉴 아이콘 */
.sidebar-toggle-btn i.bi-list {
    font-size: 1.25rem;
}

/* 교환 아이콘 */
.exchange-arrow-icon i {
    font-size: 1.75rem;
}

.exchange-arrow-text {
    font-size: 0.85rem;
}

/* 모바일 반응형 폰트 크기 - 태블릿 */
@media (max-width: 991.98px) {
    .product-title, .product-main {
        font-size: 1.05rem;
    }

    .order-id, .order-number {
        font-size: 1.05rem;
    }

    .product-price, .total-price {
        font-size: 1rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    .modal-title {
        font-size: 1.15rem;
    }

    .timeline-title {
        font-size: 0.9rem;
    }

    .timeline-date {
        font-size: 0.8rem;
    }
}

/* 모바일 반응형 폰트 크기 - 모바일 (767.98px 이하) */
@media (max-width: 767.98px) {
    .page-title {
        margin-bottom: 1.2rem;
    }

    .section-title {
        margin-bottom: 0.8rem;
    }

    .product-title, .product-main {
        font-size: 1rem;
    }

    .order-id, .order-number {
        font-size: 1rem;
    }

    .order-date, .exchange-date {
        font-size: 0.9rem;
    }

    .order-number {
        font-size: 0.85rem;
    }

    .total-price {
        font-size: 0.95rem;
    }

    .product-count {
        font-size: 0.9rem;
    }

    .status-badge {
        font-size: 0.8rem;
        padding: 0.25rem 0.65rem;
    }

    .sidebar-heading {
        font-size: 0.8rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    .exchange-reason {
        font-size: 0.85rem;
    }

    .info-label, .info-value {
        font-size: 0.9rem;
    }

    .notice-list li {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .product-option {
        font-size: 0.85rem;
    }

    .product-quantity {
        font-size: 0.85rem;
    }

    .timeline-title {
        font-size: 0.85rem;
    }

    .timeline-date {
        font-size: 0.75rem;
    }

    .filter-container .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .date-picker-container input,
    .date-inputs input {
        font-size: 0.85rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .modal-footer .btn {
        font-size: 0.85rem;
    }

    .btn-sm {
        font-size: 0.8rem;
    }
}

/* 모바일 반응형 폰트 크기 - 작은 모바일 (576px 이하) */
@media (max-width: 576px) {
    .page-title {
        margin-bottom: 1.25rem;
    }

    .section-title {
        margin-bottom: 0.7rem;
    }

    .product-title, .product-main {
        font-size: 0.95rem;
    }

    .product-option {
        font-size: 0.8rem;
    }

    .product-price {
        font-size: 0.9rem;
    }

    .product-quantity {
        font-size: 0.8rem;
    }

    .order-date, .exchange-date {
        font-size: 0.85rem;
    }

    .order-date::before, .exchange-date::before {
        font-size: 1rem;
    }

    .order-id, .order-number {
        font-size: 0.95rem;
    }

    .order-number {
        font-size: 0.8rem;
    }

    .order-header, .order-content, .exchange-header, .exchange-content {
        padding: 0.75rem 1rem;
    }

    .total-price {
        font-size: 0.9rem;
    }

    .product-count {
        font-size: 0.85rem;
    }

    .status-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }

    .info-label, .info-value {
        font-size: 0.85rem;
    }

    .notice-list li {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .btn-sm {
        font-size: 0.75rem;
    }

    .filter-container .btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }

    .date-picker-container input,
    .date-inputs input {
        font-size: 0.8rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    .modal-footer .btn {
        font-size: 0.8rem;
    }

    .timeline-title {
        font-size: 0.8rem;
    }

    .timeline-date {
        font-size: 0.7rem;
    }

    .sidebar-heading {
        font-size: 0.75rem;
    }

    .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0;
    }

    .exchange-reason {
        font-size: 0.8rem;
    }

    .order-meta, .exchange-meta {
        gap: 1.25rem;
    }

    .order-actions .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
} 

/* 마이페이지 공통 스타일 */

/* 기본 폼 요소 스타일 */
.form-control,
.form-select,
.btn {
    padding: 0.6rem 1rem;
    height: auto;
    border-radius: 4px;
    transition: all 0.2s;
}

/* 입력 필드 포커스 스타일 */
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(126, 79, 34, 0.25);
    border-color: #7E4F22;
}

/* 버튼 기본 스타일 */
.btn {
    font-weight: 500;
}

/* 기본 버튼 스타일 */
.btn-primary {
    background-color: #7E4F22;
    border-color: #7E4F22;
}

.btn-primary:hover, 
.btn-primary:focus {
    background-color: #683f1c;
    border-color: #683f1c;
}

.btn-outline-primary {
    color: #7E4F22;
    border-color: #7E4F22;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #7E4F22;
    color: #fff;
}

/* 보조 버튼 스타일 */
.btn-secondary {
    background-color: #B88000;
    border-color: #B88000;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #9e6d00;
    border-color: #9e6d00;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

/* 체크박스 및 라디오 버튼 스타일 */
.form-check-input:checked {
    background-color: #7E4F22;
    border-color: #7E4F22;
}

/* 토글 스위치 스타일 */
.form-switch .form-check-input {
    width: 3em;
    height: 2em;
    cursor: pointer;
}

/* 폼 레이블 스타일 */
.form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* 모달 스타일 */
.modal-content {
    border-radius: 6px;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    padding: 1rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
}

/* 부드러운 전환 효과 */
.transition-all {
    transition: all 0.3s ease;
}

/* 사이드바 스타일 */
.sidebar-menu ul.nav .nav-link {
    padding: 0.5rem 0;
    transition: all 0.2s;
}

.nav-link:hover {
    color: var(--primary-color);
    padding-left: 0.25rem;
}

.nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* 테이블 스타일 */
.table {
    vertical-align: middle;
}

.table th {
    font-weight: 500;
}

/* 컨텐츠 래퍼 */
.content-wrapper {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
}

/* 모바일 반응형 스타일 */
@media (max-width: 767.98px) {
    /* 모바일에서의 폼 요소 크기 조정 */
    .form-control,
    .form-select {
        padding: 0.5rem 0.8rem;
        height: auto;
    }

    /* 모바일에서의 폼 레이블 */
    .form-label {
        margin-bottom: 0.3rem;
    }

    /* 모바일에서의 폼 스위치 크기 조정 */
    .form-switch .form-check-input {
        width: 2.5em;
        height: 1.5em;
    }

    /* 모바일에서의 버튼 크기 조정 */
    .btn {
        padding: 0.5rem 0.8rem;
    }

    /* 모바일에서의 컨텐츠 래퍼 */
    .content-wrapper {
        padding: 1rem;
        border-radius: 6px;
    }

    /* 모바일에서의 모달 패딩 조정 */
    .modal-header {
        padding: 0.8rem 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 0.8rem 1rem;
    }

    /* 모달 내 폼 요소 */
    .modal-body .form-control,
    .modal-body .form-select {
        padding: 0.5rem 0.7rem;
    }

    /* 모달 버튼 */
    .modal-footer .btn {
        padding: 0.4rem 0.8rem;
    }

    /* 테이블 폰트 크기 */
    .table {
        font-size: 0.85rem;
    }

    /* 작은 텍스트 요소 */
    small.form-text {
        font-size: 0.75rem;
    }
}

/* 태블릿 반응형 스타일 */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 태블릿에서의 폼 요소 크기 조정 */
    .form-control,
    .form-select {
        padding: 0.55rem 0.9rem;
    }

    /* 태블릿에서의 폼 스위치 크기 조정 */
    .form-switch .form-check-input {
        width: 2.8em;
        height: 1.8em;
    }

    /* 태블릿에서의 버튼 크기와 여백 조정 */
    .btn {
        padding: 0.55rem 1rem;
    }

    /* 태블릿에서의 컨텐츠 래퍼 */
    .content-wrapper {
        padding: 1.25rem;
    }

    /* 태블릿에서 모달 패딩 */
    .modal-header,
    .modal-footer {
        padding: 0.9rem 1.2rem;
    }

    .modal-body {
        padding: 1.2rem;
    }

    /* 태블릿에서 모달 버튼 */
    .modal-footer .btn {
        padding: 0.5rem 0.9rem;
    }
}

/* ============================================================
 * 주문 상태 요약 카드 — 반응형 6 버킷 배치
 * 모바일·태블릿: 3열 2행 / md 이상: 6열 1행
 * 라벨은 칸 안에서 줄바꿈 (언어별 길이 차이 흡수) + 숫자와의 간격 통일
 * ============================================================ */
.order-status-summary .col {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.order-status-summary .status-count {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.order-status-summary .status-label {
    font-size: 0.75rem;
    line-height: 1.3;
    /* 한 줄 고정 + ellipsis 는 한국어 라벨 폭 기준이라 en/ja 에서 잘렸다 (2026-09-08).
       칸 안에서 줄바꿈을 허용하고, 어절 중간이 아니라 구분자에서 끊는다. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .order-status-summary .status-count {
        font-size: 1.1rem;
    }
    .order-status-summary .status-label {
        font-size: 0.68rem;
    }
} 
/* ============================================================
   필터 버튼 공통 스타일 (mypage 모든 화면)
   원래 order-list.css 에만 있던 .filter-btn 스타일이 inquiry/inquiries/reviews 화면에서
   동작 안 해 active 글자 가독성 깨지던 문제 해소.
   selector specificity .filter-container .btn.filter-btn (0,3,0) 으로 Bootstrap btn-outline-secondary 위.
   active 색상은 Bootstrap .btn-check:checked+.btn / .btn.active cascade 충돌로 specificity 만으로 못 막아 !important 사용.
   ============================================================ */
.filter-container .btn.filter-btn {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    border-radius: 2rem;
    padding: 0.3rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s;
}
.filter-container .btn.filter-btn:hover,
.filter-container .btn.filter-btn:focus {
    border-color: #999;
    background-color: #f0f0f0;
    color: #333;
}
.filter-container .btn.filter-btn.active,
.filter-container .btn.filter-btn.active:hover,
.filter-container .btn.filter-btn.active:focus {
    background-color: #444 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* P1 #29/#30 (리뷰): 터치 44px 보장 — 모바일 WCAG 2.5.5.
   inquiry/inquiries/reviews 의 .btn-toggle (페이지네이션 등) + orders 의 .oi-actions .btn 데스크탑 포함. */
@media (max-width: 767.98px) {
    .btn-toggle,
    .order-card .oi-actions .btn,
    .order-card .order-action-btn {
        min-height: 44px;
        min-width: 44px;
    }
}
.order-card .oi-actions .btn,
.order-card .order-action-btn {
    min-height: 36px;  /* 데스크탑 fallback — 너무 좁아지지 않도록 */
}