/* 완료된 주문 검색 페이지 전용 CSS */

/* 네비게이션 헤더 */
.navigation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navigation-header .admin-info {
    margin-top: 0;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.admin-link:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: scale(1.05);
}

.search-form {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-form input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
}

.search-form button {
    padding: 10px 20px;
    background: #2196f3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.completed-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.completed-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.completed-table th,
.completed-table td {
    padding: 12px 8px;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    vertical-align: middle;
    line-height: 1.4;
}

/* 컬럼별 고정 너비 설정 - 8개 컬럼으로 조정 */
.completed-table th:nth-child(1),
.completed-table td:nth-child(1) {
    width: 80px;  /* 주문번호 */
}

.completed-table th:nth-child(2),
.completed-table td:nth-child(2) {
    width: 90px;  /* 성함 */
}

.completed-table th:nth-child(3),
.completed-table td:nth-child(3) {
    width: 150px; /* 전화번호 */
}

.completed-table th:nth-child(4),
.completed-table td:nth-child(4) {
    width: 150px;  /* 확인서 - 테스트용으로 150px로 증가 */
}

.completed-table th:nth-child(5),
.completed-table td:nth-child(5) {
    width: 160px; /* 소통채널 */
}

.completed-table th:nth-child(6),
.completed-table td:nth-child(6) {
    width: auto;  /* 상품별 정보 - 더 넓은 공간 확보 */
}

.completed-table th:nth-child(7),
.completed-table td:nth-child(7) {
    width: 400px; /* 진행상태 - 350px에서 400px로 50px 증가 */
}

.completed-table th:nth-child(8),
.completed-table td:nth-child(8) {
    width: 60px;  /* 메모 상태 */
}

.completed-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.completed-table tr:nth-child(even) {
    background: #f8f9fa;
}

.completed-table tr:nth-child(odd) {
    background: #ffffff;
}

.completed-table tr:hover {
    background: #e3f2fd !important;
    transition: background-color 0.2s ease;
}

.back-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
}

/* 입력 필드 스타일 */
.name-input, .phone-input {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    transition: border-color 0.2s ease;
    vertical-align: middle;
}

.name-input {
    width: 80px;
}

.phone-input {
    width: 95px;
}

.phone-input.unsaved, .name-input.unsaved {
    color: #dc3545;
    border-color: #dc3545;
    background-color: #fff5f5;
}

.phone-input.saved, .name-input.saved {
    color: #000;
    border-color: #28a745;
    background-color: #f8fff8;
}

/* SVG 아이콘 버튼 스타일 */
.phone-btn {
    border: none;
    background: transparent;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 5px;
}

.phone-btn:hover {
    background: rgba(0,0,0,0.05);
    transform: scale(1.1);
}

.phone-btn img {
    transition: filter 0.2s ease;
    display: block;
    vertical-align: middle;
}

.phone-btn:hover img {
    filter: brightness(1.1) saturate(1.2);
}

.phone-btn:active {
    transform: scale(0.95);
}

/* 확인서 버튼 스타일 */
.receipt-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.receipt-btn {
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.receipt-btn:hover {
    background: rgba(33, 150, 243, 0.1);
    transform: scale(1.1);
}

.receipt-btn.view-btn:hover {
    background: rgba(40, 167, 69, 0.1);
}

.receipt-btn.copy-btn:hover,
.receipt-btn.receipt-copy-btn:hover {
    background: rgba(255, 193, 7, 0.1);
}

.receipt-btn img {
    transition: filter 0.2s ease;
    display: block;
}

.receipt-btn:hover img {
    filter: brightness(1.1) saturate(1.2);
}

.receipt-btn:active {
    transform: scale(0.95);
}

.receipt-buttons.disabled {
    opacity: 0.5;
}

.no-phone-msg {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

/* 소통채널 스타일 */
.communication-channel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.channel-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.channel-icon {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 3px;
    padding: 1px;
}

.channel-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 선택 모드 (저장 전) */
.channel-selecting .channel-icon {
    opacity: 1;
}

.channel-selecting .channel-icon.selected {
    opacity: 1;
    border: 2px solid #007bff;
    background-color: rgba(0,123,255,0.1);
}

.channel-selecting .channel-icon:not(.selected) {
    opacity: 0.3;
}

/* 선택 완료 모드 (저장 후) - 테두리 제거, 크기 증가로 변경 */
.channel-selected .channel-icon {
    opacity: 0.3;
}

.channel-selected .channel-icon.selected {
    opacity: 1;
    /* 크기 증가로 변경 (패딩 줄이는 방식) */
    transform: scale(1.2);
    padding: 0px;  /* 패딩 줄이기 */
}

/* 소통채널 버튼 */
.channel-btn {
    border: none;
    background: transparent;
    padding: 0px;  /* 전화번호 버튼과 동일 */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 5px;
}

.channel-btn:hover {
    background: rgba(0,0,0,0.05);
    transform: scale(1.1);
}

.channel-btn img {
    transition: filter 0.2s ease;
    display: block;
    vertical-align: middle;
}

.channel-btn:hover img {
    filter: brightness(1.1) saturate(1.2);
}

.channel-btn:active {
    transform: scale(0.95);
}

/* 상품별 정보 스타일 */
.order-specs {
    font-size: 12px;
    color: #495057;
    line-height: 1.4;
    word-wrap: break-word;
    text-align: left;
    max-width: 550px;
    padding: 8px;
}

.product-line {
    margin-bottom: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.size-info {
    font-weight: 600;
    color: #495057;
    width: 200px;  /* 180px에서 200px로 20px 증가 */
    text-align: left;
    flex-shrink: 0;
}

.edit-info {
    color: #1976d2;
    width: 140px;  /* 120px에서 140px로 20px 증가 */
    text-align: left;
    flex-shrink: 0;
}

.post-info {
    color: #7b1fa2;
    width: 170px;  /* 150px에서 170px로 20px 증가 */
    text-align: left;
    flex-shrink: 0;
}

.extra-info {
    color: #d84315;
    width: 140px;  /* 120px에서 140px로 20px 증가 */
    text-align: left;
    flex-shrink: 0;
}

/* 확장 행 스타일 */
.order-row {
    transition: background-color 0.2s ease;
}

.order-row:hover {
    background: #e3f2fd !important;
}

.order-row.expanded {
    background: #f0f8ff !important;
    border-bottom: 2px solid #007bff;
}

.detail-row {
    background: #f8f9fa !important;
}

.detail-content {
    padding: 0 !important;
}

.detail-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-top: none;
    background: white;
}

.detail-section {
    height: 215px;  /* 기존 195px에서 20px 증가 */
    display: flex;
    flex-direction: column;
}

.detail-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;  /* 제목 영역 고정 */
}

/* 윈도우창 스타일 버튼 - 크기 증가 */
.header-btn {
    width: 28px;  /* 20px에서 28px로 증가 */
    height: 28px; /* 20px에서 28px로 증가 */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;  /* 3px에서 4px로 증가 */
    transition: all 0.2s ease;
}

.header-btn:hover {
    background: rgba(0,0,0,0.1);
    transform: scale(1.1);
}

.header-btn img {
    width: 20px;  /* 16px에서 20px로 증가 */
    height: 20px; /* 16px에서 20px로 증가 */
    display: block;
}

.memo-content {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    flex: 1;  /* 남은 공간 모두 차지 */
    overflow-y: auto;  /* 세로 스크롤 */
    resize: none;  /* 크기 조절 불가 */
    text-align: left;  /* 왼쪽 정렬 */
}

.customer-memo {
    color: #495057;
    white-space: pre-wrap;  /* 줄바꿈 보존 */
    word-wrap: break-word;
}

.admin-memo {
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
}

.admin-memo-input {
    flex: 1;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px;
    font-size: 13px;  /* 동일한 텍스트 크기 */
    resize: none;  /* 크기 조절 불가 */
    font-family: inherit;
    line-height: 1.5;  /* 동일한 줄간격 */
    overflow-y: auto;  /* 세로 스크롤 */
    text-align: left;  /* 왼쪽 정렬 */
}

.admin-memo-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* 관리자메모 저장 버튼 제거 */
.save-memo-btn {
    display: none !important;  /* 완전히 숨김 */
}

/* 상세정보 영역 - 줄바꿈 최소화 */
.detail-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    font-size: 12px;  /* 13px에서 12px로 줄임 */
    line-height: 1.3;  /* 1.5에서 1.3으로 줄임 */
    flex: 1;
    overflow-y: auto;
    text-align: left;
    white-space: normal;  /* nowrap에서 normal로 변경 */
    word-wrap: break-word;    /* normal에서 break-word로 변경 */
    overflow-x: hidden;     /* auto에서 hidden으로 변경 */
}

.detail-info table {
    white-space: nowrap;  /* 테이블 내용은 줄바꿈 방지 */
}

.detail-info h5 {
    margin: 0 0 6px 0;  /* 8px에서 6px로 줄임 */
    font-size: 11px;    /* 12px에서 11px로 줄임 */
    font-weight: 600;
    color: #6c757d;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 3px;  /* 4px에서 3px로 줄임 */
    white-space: nowrap;
}

.detail-info p {
    margin: 2px 0;  /* 4px에서 2px로 줄임 */
    font-size: 11px; /* 12px에서 11px로 줄임 */
    white-space: nowrap;  /* 줄바꿈 방지 */
}

.detail-info strong {
    color: #495057;
    font-weight: 600;
}

/* 기존 불필요한 스타일 제거 - 테스트용으로 copy-btn 주석처리 */
/* .copy-btn, */ .detail-actions, .detail-btn {
    display: none;
}

/* 페이지네이션 */
.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination a.current {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .detail-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .detail-section {
        height: 176px;  /* 기존 156px에서 20px 증가 */
    }
}

/* 메모 상태 컬럼 스타일 - 단순화 */
.memo-status-column {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    border-bottom: 1px solid #eee !important;  /* 보더 복원하되 명확히 지정 */
    position: relative !important;
    width: 60px !important;
    height: auto !important;
}

/* 메모 점들을 담는 컨테이너 */
.memo-dots-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 50px !important;  /* 최소 높이 설정 */
    padding: 12px 0 !important;  /* 상하 패딩만 */
}

/* 메모 상태 컬럼의 부모 tr에도 적용 */
.order-row td.memo-status-column {
    position: relative !important;
}

/* 메모 상태 컬럼 전용 보더 제거 */
.memo-status-column::after {
    display: none;
}

/* 메모 상태 표시 점 */
.memo-status-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: block !important;  /* inline-block에서 block으로 변경 */
    flex-shrink: 0 !important;
    cursor: help !important;
    margin: 0 !important;
    position: static !important;  /* relative에서 static으로 변경 */
}

.memo-status-dot.has-memo {
    background-color: #28a745; /* 초록색 - 메모 있음 */
}

.memo-status-dot.no-memo {
    background-color: #dee2e6; /* 회색 - 메모 없음 */
}

/* 확장된 상태에서는 점 숨김 제거 (별도 컬럼이므로 계속 표시) */

/* 진행상태 스타일 - 게이지 바 방식 */
.progress-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* 간격 제거 */
    padding: 0px; /* TD 패딩 활용으로 div 패딩 제거 */
}

.progress-steps {
    display: flex;
    align-items: center;
    gap: 2px; /* 간격을 줄여서 게이지 바 같은 느낌 */
    justify-content: center;
    flex-wrap: wrap;
}

.progress-step {
    width: 50px; /* 48px에서 50px로 증가 */
    height: 40px; /* 32px에서 40px로 증가 - 정사각에 가깝게 */
    border-radius: 6px; /* 둥근 모서리 증가 */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid #dee2e6;
    font-size: 12px; /* 10px에서 12px로 증가 */
    font-weight: 700; /* 볼드체로 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 2px; /* 좌우 패딩 줄임 4px → 2px */
    text-align: center;
    line-height: 1.1; /* 줄간격 조정 */
    box-sizing: border-box;
    white-space: pre-line; /* 줄바꿈 허용 */
}

.progress-step.completed {
    background-color: #28a745;
    color: white;
    border-color: #1e7e34;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.progress-step.current {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
    transform: scale(1.05); /* 현재 단계는 살짝 크게 */
}

.progress-step.pending {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
}

.progress-step:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.progress-step.completed:hover {
    background-color: #218838;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
}

.progress-step.pending:hover {
    background-color: #e9ecef;
    color: #495057;
}

.progress-step.current:hover {
    background-color: #0056b3;
    transform: translateY(-2px) scale(1.07);
}

/* 진행상태 텍스트 완전 제거 */
.progress-status-text {
    display: none;
}

/* 각 단계별 텍스트 - 네글자는 줄바꿈 */
.progress-step[data-status="주문확인"]::after { content: '주문\A확인'; }
.progress-step[data-status="편집중"]::after { content: '편집중'; }
.progress-step[data-status="제작대기"]::after { content: '제작\A대기'; }
.progress-step[data-status="제작완료"]::after { content: '제작\A완료'; }
.progress-step[data-status="포장완료"]::after { content: '포장\A완료'; }
.progress-step[data-status="픽업대기"]::after { content: '픽업\A대기'; }
.progress-step[data-status="완료"]::after { content: '완료'; }

/* 모바일/태블릿 최적화 */
@media (max-width: 1024px) {
    .completed-table th:nth-child(6),
    .completed-table td:nth-child(6) {
        width: 320px; /* 모바일에서는 적당히 */
    }
    
    .progress-steps {
        gap: 1px; /* 모바일에서는 간격 더 줄임 */
        flex-wrap: wrap; /* 필요시 줄바꿈 */
    }
    
    .progress-step {
        width: 42px; /* 모바일에서는 더 줄임 */
        height: 28px;
        font-size: 8px;
    }
} 
/* ===== 항목 수정 버튼 ===== */
.item-edit-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 13px;
    cursor: pointer;
    margin-left: 8px;
    opacity: 0.5;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.product-line:hover .item-edit-btn { opacity: 1; }

/* ===== 수정 모달 오버레이 ===== */
.edit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.edit-modal-box {
    background: #fff;
    border-radius: 12px;
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.edit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #dee2e6;
    font-size: 16px;
    font-weight: 700;
}
.edit-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
}
.edit-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #dee2e6;
}
.edit-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.edit-field-row label {
    width: 50px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.edit-field-row select,
.edit-field-row input[type="number"] {
    font-size: 14px;
    padding: 5px 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}
.edit-size-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.edit-size-inputs input { width: 70px; }
.edit-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #495057;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 12px 0 6px;
}
.edit-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.edit-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.qty-inline {
    width: 44px;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    text-align: center;
}
.edit-price-box {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8f9fa;
    border-radius: 8px;
}
.edit-price-row {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
    font-size: 13px;
}
.edit-recalc-btn {
    margin-top: 8px;
    padding: 7px 18px;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.edit-recalc-btn:hover { background: #0b5ed7; }
.edit-btn-cancel {
    padding: 8px 22px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.edit-btn-save {
    padding: 8px 22px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.edit-btn-save:disabled { background: #adb5bd; cursor: not-allowed; }