/**
 * Shop-Bedding Theme - My Page Styles
 * Order history, profile edit, guest order lookup
 *
 * @package shop-bedding
 */

/* ==========================================
   My Page Layout
   ========================================== */
.sb-mypage {
    padding: 2rem 0 3rem;
}

.sb-mypage-header {
    margin-bottom: 1.5rem;
}

.sb-mypage-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--sb-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.sb-mypage-title i {
    color: var(--sb-primary);
}

.sb-mypage-welcome {
    font-size: 0.9375rem;
    color: var(--sb-text-light);
    margin: 0;
}

.sb-mypage-welcome strong {
    color: var(--sb-primary);
    font-weight: 600;
}

/* ==========================================
   Tab Navigation
   ========================================== */
.sb-mypage-tabs {
    display: flex;
    border-bottom: 2px solid var(--sb-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sb-mypage-tabs::-webkit-scrollbar {
    display: none;
}

.sb-mypage-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sb-text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--sb-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.sb-mypage-tab:hover {
    color: var(--sb-primary);
}

.sb-mypage-tab.active {
    color: var(--sb-primary);
    border-bottom-color: var(--sb-primary);
    font-weight: 600;
}

.sb-mypage-tab i {
    font-size: 0.875rem;
}

/* ==========================================
   Content Panel
   ========================================== */
.sb-mypage-content {
    min-height: 40vh;
}

.sb-mypage-panel {
    animation: sbFadeIn 0.25s ease;
}

@keyframes sbFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   Wishlist Tab
   ========================================== */
.sb-wishlist-grid .sb-product-grid {
    grid-template-columns: repeat(4, 1fr);
}

.sb-wishlist-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sb-text-light, #777);
}

.sb-wishlist-empty i {
    font-size: 2.5rem;
    color: #ddd;
    display: block;
    margin-bottom: 1rem;
}

.sb-wishlist-empty p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.sb-wishlist-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    color: #fff;
    transition: background 0.2s;
}

.sb-wishlist-remove-btn:hover {
    background: rgba(231, 76, 60, 0.9);
}

@media (max-width: 767px) {
    .sb-wishlist-grid .sb-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sb-wishlist-grid .sb-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================
   Order Status Filter Tabs
   ========================================== */
.sb-order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sb-order-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sb-text-light);
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: 2rem;
    text-decoration: none;
    transition: all var(--sb-transition);
}

.sb-order-filter:hover {
    color: var(--sb-primary);
    border-color: var(--sb-primary);
}

.sb-order-filter.active {
    color: #ffffff;
    background: var(--sb-primary);
    border-color: var(--sb-primary);
}

/* ==========================================
   Order Count
   ========================================== */
.sb-order-count {
    font-size: 0.875rem;
    color: var(--sb-text-light);
    margin-bottom: 1rem;
}

.sb-order-count strong {
    color: var(--sb-primary);
    font-weight: 600;
}

/* ==========================================
   Empty State
   ========================================== */
.sb-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--sb-text-muted);
}

.sb-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.4;
}

.sb-empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* ==========================================
   Order Card
   ========================================== */
.sb-order-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sb-order-card {
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
    transition: border-color var(--sb-transition);
}

.sb-order-card:hover {
    border-color: var(--sb-primary-light);
}

.sb-order-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background var(--sb-transition);
    user-select: none;
}

.sb-order-card-header:hover {
    background: var(--sb-bg-gray);
}

.sb-order-card-main {
    flex: 1;
    min-width: 0;
}

.sb-order-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.sb-order-card-id {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-order-card-date {
    font-size: 0.75rem;
    color: var(--sb-text-muted);
}

.sb-order-card-product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.sb-order-card-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sb-order-card-qty {
    font-size: 0.75rem;
    color: var(--sb-text-muted);
    flex-shrink: 0;
}

.sb-order-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sb-order-card-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-text);
}

/* Toggle Chevron */
.sb-order-card-toggle {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text-muted);
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.sb-order-card.expanded .sb-order-card-toggle {
    transform: rotate(180deg);
}

/* ==========================================
   Order Status Badges
   ========================================== */
.sb-order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.sb-order-status-pending {
    background: #fff3e0;
    color: #ff9800;
}

.sb-order-status-paid {
    background: #e8f5e9;
    color: #4caf50;
}

.sb-order-status-shipped {
    background: #e3f2fd;
    color: #2196f3;
}

.sb-order-status-delivered {
    background: #eef1f9;
    color: #5671c0;
}

.sb-order-status-cancelled {
    background: #f5f5f5;
    color: #999999;
}

/* ==========================================
   Order Card Detail (Expandable)
   ========================================== */
.sb-order-card-detail {
    display: none;
    padding: 0 1.25rem 1rem;
    border-top: 1px solid var(--sb-border-light);
}

.sb-order-card.expanded .sb-order-card-detail {
    display: block;
}

.sb-order-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0.75rem;
}

.sb-order-detail-row {
    display: flex;
    align-items: center;
    padding: 0.375rem 0;
}

.sb-order-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--sb-border-light);
}

.sb-order-detail-label {
    flex-shrink: 0;
    width: 5.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sb-text-light);
}

.sb-order-detail-value {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--sb-text);
    word-break: break-all;
}

/* ==========================================
   Pagination
   ========================================== */
.sb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sb-border-light);
}

.sb-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sb-text-light);
    text-decoration: none;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    transition: all var(--sb-transition);
}

.sb-page-link:hover {
    color: var(--sb-primary);
    border-color: var(--sb-primary);
}

.sb-page-link.active {
    color: #ffffff;
    background: var(--sb-primary);
    border-color: var(--sb-primary);
}

.sb-page-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2.25rem;
    font-size: 0.8125rem;
    color: var(--sb-text-muted);
}

/* ==========================================
   Profile Section
   ========================================== */
.sb-profile-section {
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sb-profile-section:last-child {
    margin-bottom: 0;
}

.sb-profile-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-text);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sb-border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sb-profile-section-title i {
    color: var(--sb-primary);
    font-size: 0.9375rem;
}

/* Reuse sb-form-group, sb-form-label, sb-form-input, sb-form-required from style-product.css */

.sb-form-input-readonly {
    background: var(--sb-bg-gray);
    color: var(--sb-text-muted);
    cursor: not-allowed;
}

.sb-btn-block {
    width: 100%;
}

/* ==========================================
   Guest Order Lookup
   ========================================== */
.sb-guest-lookup {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0;
}

.sb-guest-lookup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--sb-primary-bg);
    color: var(--sb-primary);
    font-size: 1.5rem;
    margin: 0 auto 1.25rem;
}

.sb-guest-lookup-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sb-text);
    margin: 0 0 0.5rem;
}

.sb-guest-lookup-desc {
    font-size: 0.875rem;
    color: var(--sb-text-light);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.sb-guest-form {
    text-align: left;
}

/* ==========================================
   Guest Order Result Card
   ========================================== */
.sb-guest-result {
    margin-top: 1.5rem;
    text-align: left;
}

.sb-guest-result-card {
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
    animation: sbFadeIn 0.3s ease;
}

.sb-guest-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--sb-primary-bg);
    border-bottom: 1px solid var(--sb-border-light);
}

.sb-guest-result-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sb-guest-result-id {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-guest-result-date {
    font-size: 0.75rem;
    color: var(--sb-text-muted);
}

.sb-guest-result-body {
    padding: 1rem 1.25rem;
}

.sb-guest-result-row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

.sb-guest-result-row:not(:last-child) {
    border-bottom: 1px solid var(--sb-border-light);
}

.sb-guest-result-label {
    flex-shrink: 0;
    width: 5.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sb-text-light);
}

.sb-guest-result-value {
    flex: 1;
    font-size: 0.875rem;
    color: var(--sb-text);
    font-weight: 500;
}

.sb-guest-result-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: var(--sb-bg-gray);
    border-top: 1px solid var(--sb-border-light);
}

.sb-guest-result-total-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sb-text);
}

.sb-guest-result-total-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sb-accent);
}

/* ==========================================
   Address Management
   ========================================== */
.sb-address-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sb-address-header .sb-profile-section-title {
    margin: 0;
    padding: 0;
    border: none;
}

.sb-address-form-wrap {
    background: var(--sb-bg);
    border: 1px solid var(--sb-primary-light);
    border-radius: var(--sb-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sb-form-row {
    display: flex;
    gap: 1rem;
}

.sb-form-half {
    flex: 1;
    min-width: 0;
}

.sb-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--sb-text);
    cursor: pointer;
    height: 2.75rem;
}

.sb-checkbox-label input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--sb-primary);
    cursor: pointer;
}

.sb-address-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sb-address-zipcode {
    width: 7rem;
    flex-shrink: 0;
}

.sb-address-search-btn {
    flex-shrink: 0;
    background: var(--sb-text);
    color: #fff;
    border: none;
    border-radius: var(--sb-radius);
    padding: 0 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--sb-transition);
}

.sb-address-search-btn:hover {
    opacity: 0.85;
}

.sb-address-form-wrap .sb-form-input + .sb-form-input {
    margin-top: 0.5rem;
}

.sb-address-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sb-border-light);
}

/* Address Card List */
.sb-address-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sb-address-card {
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
    transition: border-color var(--sb-transition);
}

.sb-address-card:hover {
    border-color: var(--sb-primary-light);
}

.sb-address-card.sb-address-default {
    border-color: var(--sb-primary);
}

.sb-address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--sb-bg-gray);
    border-bottom: 1px solid var(--sb-border-light);
}

.sb-address-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sb-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sb-address-badge-default {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    background: var(--sb-primary);
    border-radius: 0.25rem;
}

.sb-address-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sb-address-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--sb-text-muted);
    font-size: 0.8125rem;
    border-radius: var(--sb-radius);
    cursor: pointer;
    transition: all var(--sb-transition);
}

.sb-address-action-btn:hover {
    background: var(--sb-border-light);
    color: var(--sb-primary);
}

.sb-address-action-delete:hover {
    background: #fee2e2;
    color: #ef4444;
}

.sb-address-card-body {
    padding: 0.875rem 1.25rem;
}

.sb-address-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--sb-text);
    line-height: 1.5;
}

.sb-address-card-row:not(:last-child) {
    margin-bottom: 0.375rem;
}

.sb-address-card-row i {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    color: var(--sb-text-muted);
    margin-top: 0.1875rem;
}

.sb-loading {
    text-align: center;
    padding: 2rem;
    color: var(--sb-text-muted);
    font-size: 0.875rem;
}

.sb-empty-state-sub {
    font-size: 0.8125rem;
    color: var(--sb-text-muted);
    margin-top: 0.5rem;
}

/* ==========================================
   Order Timeline (Guest Result)
   ========================================== */
.sb-order-timeline {
    display: flex;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sb-timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    min-width: 4.5rem;
}

.sb-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0.5625rem;
    left: calc(50% + 0.75rem);
    right: calc(-50% + 0.75rem);
    height: 2px;
    background: var(--sb-border);
}

.sb-timeline-step.sb-timeline-done:not(:last-child)::after {
    background: var(--sb-primary);
}

.sb-timeline-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--sb-border);
    border: 2px solid var(--sb-bg);
    box-shadow: 0 0 0 2px var(--sb-border);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.sb-timeline-done .sb-timeline-dot {
    background: var(--sb-primary);
    box-shadow: 0 0 0 2px var(--sb-primary);
}

.sb-timeline-active .sb-timeline-dot {
    background: var(--sb-primary);
    box-shadow: 0 0 0 2px var(--sb-primary), 0 0 0 5px rgba(var(--sb-primary-rgb, 79, 70, 229), 0.2);
}

.sb-timeline-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--sb-text-muted);
    margin-top: 0.5rem;
    white-space: nowrap;
}

.sb-timeline-done .sb-timeline-label {
    color: var(--sb-text);
    font-weight: 600;
}

.sb-timeline-active .sb-timeline-label {
    color: var(--sb-primary);
}

.sb-timeline-date {
    font-size: 0.625rem;
    color: var(--sb-text-muted);
    margin-top: 0.125rem;
    white-space: nowrap;
}

/* ==========================================
   Enhanced Guest Result: Product & Delivery
   ========================================== */
.sb-guest-result-product {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.sb-guest-result-thumb {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--sb-radius);
    overflow: hidden;
    border: 1px solid var(--sb-border-light);
}

.sb-guest-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-guest-result-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.sb-guest-result-product-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-guest-result-product-qty {
    font-size: 0.8125rem;
    color: var(--sb-text-muted);
}

.sb-guest-result-product-price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sb-text);
}

.sb-guest-result-delivery {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--sb-border-light);
}

.sb-guest-result-subtitle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sb-text);
    margin: 0 0 0.625rem;
}

.sb-guest-result-subtitle i {
    color: var(--sb-primary);
    font-size: 0.75rem;
}

.sb-guest-result-row-total {
    border-top: 1px solid var(--sb-text) !important;
    margin-top: 0.25rem;
    padding-top: 0.75rem !important;
}

.sb-guest-result-row-total .sb-guest-result-label {
    font-weight: 600;
    color: var(--sb-text);
}

.sb-guest-result-row-total .sb-guest-result-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sb-accent);
}

.sb-guest-result-actions {
    display: flex;
    justify-content: center;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--sb-border-light);
}

/* ==========================================
   Responsive: Tablet Landscape (1024px~1279px)
   ========================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .sb-order-card-name {
        max-width: 400px;
    }
}

/* ==========================================
   Responsive: Tablet Portrait (768px~1023px)
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .sb-mypage-title {
        font-size: 1.25rem;
    }

    .sb-order-card-name {
        max-width: 300px;
    }

    .sb-profile-section {
        padding: 1.25rem;
    }
}

/* ==========================================
   Responsive: Mobile (360px~767px)
   ========================================== */
@media (max-width: 767px) {
    .sb-mypage {
        padding: 1.25rem 0 2rem;
    }

    .sb-mypage-header {
        margin-bottom: 1rem;
    }

    .sb-mypage-title {
        font-size: 1.125rem;
    }

    .sb-mypage-welcome {
        font-size: 0.8125rem;
    }

    /* Tabs */
    .sb-mypage-tab {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .sb-mypage-tab i {
        font-size: 0.75rem;
    }

    /* Order Filters */
    .sb-order-filters {
        gap: 0.375rem;
    }

    .sb-order-filter {
        padding: 0.3125rem 0.625rem;
        font-size: 0.75rem;
    }

    /* Order Card */
    .sb-order-card-header {
        padding: 0.875rem 1rem;
    }

    .sb-order-card-name {
        font-size: 0.875rem;
        max-width: 200px;
    }

    .sb-order-card-price {
        font-size: 0.9375rem;
    }

    .sb-order-card-detail {
        padding: 0 1rem 0.875rem;
    }

    .sb-order-detail-label {
        width: 4.5rem;
        font-size: 0.75rem;
    }

    .sb-order-detail-value {
        font-size: 0.75rem;
    }

    /* Pagination */
    .sb-pagination {
        gap: 0.1875rem;
    }

    .sb-page-link {
        min-width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    /* Profile */
    .sb-profile-section {
        padding: 1rem;
    }

    .sb-profile-section-title {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .sb-form-input {
        padding: 0.5625rem 0.75rem;
        font-size: 1rem;
    }

    /* Guest */
    .sb-guest-lookup {
        padding: 1rem 0;
    }

    .sb-guest-lookup-icon {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.25rem;
    }

    .sb-guest-lookup-title {
        font-size: 1.125rem;
    }

    .sb-guest-result-label {
        width: 4.5rem;
        font-size: 0.75rem;
    }

    .sb-guest-result-value {
        font-size: 0.8125rem;
    }

    /* Address Management */
    .sb-address-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .sb-address-form-wrap {
        padding: 1rem;
    }

    .sb-form-row {
        flex-direction: column;
        gap: 0;
    }

    .sb-address-card-header {
        padding: 0.75rem 1rem;
    }

    .sb-address-card-name {
        font-size: 0.875rem;
    }

    .sb-address-card-body {
        padding: 0.75rem 1rem;
    }

    .sb-address-card-row {
        font-size: 0.75rem;
    }

    /* Timeline */
    .sb-order-timeline {
        padding: 1rem 1rem 0.5rem;
    }

    .sb-timeline-step {
        min-width: 3.75rem;
    }

    .sb-timeline-label {
        font-size: 0.625rem;
    }

    .sb-timeline-date {
        font-size: 0.5625rem;
    }

    .sb-timeline-dot {
        width: 1rem;
        height: 1rem;
    }

    .sb-timeline-step:not(:last-child)::after {
        top: 0.4375rem;
        left: calc(50% + 0.625rem);
        right: calc(-50% + 0.625rem);
    }

    /* Guest result product */
    .sb-guest-result-thumb {
        width: 3.5rem;
        height: 3.5rem;
    }

    .sb-guest-result-product-name {
        font-size: 0.875rem;
    }

    .sb-guest-result-delivery {
        padding: 0.75rem 1rem;
    }

    .sb-guest-result-actions {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================
   Responsive: Fold/Flip (~359px)
   ========================================== */
@media (max-width: 359px) {
    .sb-mypage-title {
        font-size: 1rem;
    }

    .sb-mypage-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.375rem;
    }

    .sb-order-card-name {
        max-width: 140px;
        font-size: 0.8125rem;
    }

    .sb-order-card-id {
        font-size: 0.75rem;
    }

    .sb-order-card-price {
        font-size: 0.875rem;
    }

    .sb-guest-lookup-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }

    .sb-order-detail-label,
    .sb-guest-result-label {
        width: 4rem;
    }

    /* Address */
    .sb-address-action-btn {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .sb-address-badge-default {
        font-size: 0.625rem;
        padding: 0.0625rem 0.375rem;
    }

    /* Timeline */
    .sb-timeline-step {
        min-width: 3.25rem;
    }

    .sb-guest-result-product {
        gap: 0.75rem;
    }

    .sb-guest-result-thumb {
        width: 3rem;
        height: 3rem;
    }
}

/* ==========================================
   Responsive: FHD (1920px~2559px)
   ========================================== */
@media (min-width: 1920px) and (max-width: 2559px) {
    .sb-mypage-title {
        font-size: 1.5rem;
    }

    .sb-order-card-header {
        padding: 1.125rem 1.5rem;
    }

    .sb-order-card-name {
        font-size: 1rem;
    }

    .sb-profile-section {
        padding: 1.75rem;
    }

    .sb-guest-lookup {
        max-width: 520px;
    }
}

/* ==========================================
   Responsive: QHD (2560px~3839px)
   ========================================== */
@media (min-width: 2560px) and (max-width: 3839px) {
    .sb-mypage-title {
        font-size: 1.625rem;
    }

    .sb-order-card-header {
        padding: 1.25rem 1.75rem;
    }

    .sb-profile-section {
        padding: 2rem;
    }

    .sb-guest-lookup {
        max-width: 560px;
    }
}

/* ==========================================
   Responsive: UHD (3840px+)
   ========================================== */
@media (min-width: 3840px) {
    .sb-mypage-title {
        font-size: 1.75rem;
    }

    .sb-order-card-header {
        padding: 1.5rem 2rem;
    }

    .sb-profile-section {
        padding: 2.5rem;
    }

    .sb-guest-lookup {
        max-width: 640px;
    }
}