.order_list_title, .order_detail_title { font-size: 22px; font-weight: 800; color: var(--text-strong); padding: 30px 0 20px; }

.btn_continue_shopping { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; border-radius: 6px; background: var(--accent2); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }

/* ===== 주문내역 ===== */
/* 좁은 화면에서 네 탭(약 334px)이 한 줄에 안 들어간다. 찌그러뜨리거나 글자를
   접지 말고 가로로 밀리게 둔다. pill 형태라 밑줄에 겹치는 요소가 없어
   컨테이너에 직접 overflow를 줘도 잘릴 게 없다. */
.order_status_tabs {
    display: flex; gap: 8px;
    border-bottom: 1px solid var(--border2);
    padding-bottom: 16px; margin-bottom: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.order_status_tabs::-webkit-scrollbar { display: none; }
.status_tab { height: 34px; padding: 0 16px; border: 1px solid var(--border); border-radius: 17px; background: #fff; color: var(--text-muted); font-size: 13px; cursor: pointer; flex: none; white-space: nowrap; }
.status_tab.active { background: var(--text-strong); color: #fff; border-color: var(--text-strong); }

.order_card_list { display: flex; flex-direction: column; gap: 16px; }
.order_card { border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; }
.order_card_head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fafafa; border-bottom: 1px solid var(--border2); }
.oc_head_left { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-muted); }
.oc_no { color: var(--text-dark); font-weight: 600; }
.oc_head_right { display: flex; align-items: center; gap: 14px; }
.oc_status_badge { font-size: 12px; font-weight: 700; color: var(--accent2); border: 1px solid var(--accent2); border-radius: 4px; padding: 3px 10px; }
.oc_detail_link { font-size: 13px; color: var(--text-dark); text-decoration: underline; }

.order_card_body { padding: 4px 20px; }
.oc_item_row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border2); }
.oc_item_row:last-child { border-bottom: none; }
.oc_item_thumb { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 6px; overflow: hidden; background: #f5f5f6; display: flex; align-items: center; justify-content: center; }
.oc_item_thumb img { width: 100%; height: 100%; object-fit: cover; }
.oc_item_thumb i { font-size: 18px; color: var(--text-light); }
.oc_item_name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-dark); }
.oc_item_qty { font-size: 12px; color: var(--text-muted); }
.oc_item_price { font-size: 13px; font-weight: 700; color: var(--text-strong); }

.order_card_foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border2); }
.oc_total { font-size: 13px; color: var(--text-muted); }
.oc_total strong { font-size: 15px; color: var(--accent2); margin-left: 4px; }
.btn_claim { height: 34px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-dark); text-decoration: none; }
.btn_claim:hover { border-color: var(--accent2); color: var(--accent2); }

/* ===== 주문상세 ===== */
.od_top { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--text-strong); margin-bottom: 20px; }
.od_no { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.od_date { font-size: 13px; color: var(--text-muted); }
.od_badges { display: flex; gap: 8px; margin-left: auto; }
.od_badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--accent2); color: var(--accent2); }

.order_section { border-top: 1px solid var(--border2); padding: 22px 0; }
.order_section:first-child { border-top: none; }
.order_section_title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 14px; }

/* 흰 박스(테두리·라운드)는 shell.css 가 입힌다 — 안쪽 여백이 없어서 글자가
   테두리에 붙어 보였다(지시, 2026-08-31). 여기서 안쪽 여백·불릿·배치를 준다.
   박스가 본문 폭(1280) 그대로라 한 줄 목록이면 오른쪽 2/3 가 텅 빈다 —
   340px 넘는 칸이 둘 이상 서면 저절로 2단으로 갈라 폭을 쓴다(좁으면 1단). */
.info_table {
    padding: 16px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2px 56px;
}
.info_table .row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 13px; }
.info_table .row dt { flex: 0 0 96px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
/* 불릿 — 줄 구분선 대신 항목 앞에 점을 찍는다(지시). 선보다 조용하다. */
.info_table .row dt::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent2); flex: none;
}
.info_table .row dd { flex: 1; min-width: 0; color: var(--text-dark); font-weight: 500; }

.od_item_list { border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
.od_shipping_group { border-bottom: 6px solid var(--bg-soft, #f5f5f6); }
.od_shipping_group:last-child { border-bottom: none; }
.odsg_header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg-soft, #f9f9fa); font-size: 13px; }
.odsg_seller { font-weight: 700; color: var(--text-strong); }
.odsg_policy { color: var(--text-muted); }
.odsg_status { margin-left: auto; font-weight: 700; color: var(--accent2); }
.odsg_tracking { color: var(--text-muted); }
.od_item_row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border2); }
.od_shipping_group .od_item_row:last-child { border-bottom: none; }
.od_item_row .chk { flex: 0 0 20px; }
.od_item_thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: #f5f5f6; display: flex; align-items: center; justify-content: center; }
.od_item_thumb img { width: 100%; height: 100%; object-fit: cover; }
.od_item_thumb i { font-size: 18px; color: var(--text-light); }
.od_item_info { flex: 1; min-width: 0; font-size: 13px; color: var(--text-dark); }
/* 주문할 때 옵션에 적어 넣은 것(명패 이름·택N 선택) */
.od_item_input { margin-top: 2px; font-size: 12px; color: var(--text-muted); word-break: break-all; }
.od_item_price { font-size: 13px; font-weight: 700; color: var(--text-strong); flex: 0 0 auto; }

.od_item_review_btn { flex: 0 0 auto; height: 32px; line-height: 32px; padding: 0 14px; font-size: 12px; }
.od_item_review_done { flex: 0 0 auto; font-size: 12px; color: var(--text-light); white-space: nowrap; }

.pay_summary_box { border: 1px solid var(--border2); border-radius: 8px; padding: 20px 24px; }
.sum_line { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--text-dark); }
.sum_line span { color: var(--text-muted); margin-right: auto; }
.sum_line.total { border-top: 1px solid var(--border2); margin-top: 8px; padding-top: 12px; font-size: 15px; }
.sum_line.total strong { font-size: 20px; font-weight: 800; color: var(--accent2); }

.claim_form_box { border: 1px solid var(--border2); border-radius: 8px; padding: 20px; }
.claim_type_group { display: flex; gap: 16px; margin-bottom: 14px; }
.claim_type_group label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dark); cursor: pointer; }
.claim_form_box textarea {
    width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; resize: vertical; box-sizing: border-box; margin-bottom: 14px;
}
.btn_claim_submit { height: 40px; padding: 0 20px; border: none; border-radius: 6px; background: var(--accent2); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn_claim_submit:hover { background: #3a86e0; }

/* 출고 전 안내 — 왜 취소 대신 반품/교환만 보이는지 알려준다 */
.claim_guide { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }

/* 주문상세 → 목록으로 돌아가는 길. 원래 없어서 브라우저 뒤로가기밖에 없었다. */
.od_head { display: flex; align-items: center; gap: 12px; }
.od_head .order_detail_title { padding-left: 0; }
.btn_back_list {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 13px; color: var(--text-muted);
    white-space: nowrap;
}
.btn_back_list:hover { color: var(--accent2); }
.btn_back_list i { font-size: 18px; }

/* 취소된 주문 — 배송상태(preparing)가 남아 있어 표시 단계에서 구분해 준다 */
.oc_status_badge.is_cancelled,
.od_badge.is_cancelled,
.odsg_status.is_cancelled { color: var(--sale); }

/* ===== 주문 직접취소 (출고 전) ===== */
.cancel_box { border: 1px solid var(--border2); border-radius: 8px; padding: 20px; }
.cancel_note { font-size: 13px; color: var(--text-dark); line-height: 1.6; margin-bottom: 14px; }
.cancel_box textarea {
    width: 100%; min-height: 60px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; resize: vertical; box-sizing: border-box; margin-bottom: 14px;
}
.btn_cancel_order {
    height: 40px; padding: 0 20px;
    border: 1px solid var(--sale); border-radius: 6px;
    background: #fff; color: var(--sale);
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn_cancel_order:hover { background: var(--sale); color: #fff; }
.btn_cancel_order:disabled { opacity: .6; cursor: default; }

.refund_account_box { margin-bottom: 14px; }
.refund_account_box .ra_title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.refund_account_box .ra_row { display: flex; gap: 8px; }
.refund_account_box input {
    height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; box-sizing: border-box; min-width: 0;
}
.refund_account_box input:nth-child(1) { flex: 0 0 100px; }
.refund_account_box input:nth-child(2) { flex: 1; }
.refund_account_box input:nth-child(3) { flex: 0 0 100px; }

@media (max-width: 700px) {
    .refund_account_box .ra_row { flex-wrap: wrap; }
    .refund_account_box input:nth-child(1) { flex: 0 0 100px; }
    .refund_account_box input:nth-child(2) { flex: 1 1 auto; }
    .refund_account_box input:nth-child(3) { flex: 1 1 100%; }
}

.claim_history_list { display: flex; flex-direction: column; gap: 10px; }
.claim_history_item { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border2); border-radius: 6px; padding: 12px 16px; font-size: 13px; }
.claim_history_item .ch_type { font-weight: 700; color: var(--text-strong); }
.claim_history_item .ch_status { margin-left: auto; font-size: 12px; color: var(--accent2); }
.claim_history_item .ch_reason { color: var(--text-muted); flex: 1; }

@media (max-width: 700px) {
    .order_card_head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .od_top { flex-wrap: wrap; }
}

/* 증빙 발행 상태 */
.receipt_state {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 100px;
    background: #f0f0f0;
    font-size: 11px;
    color: var(--text-muted);
}

/* 과세/면세 내역 */
.pay_summary_box .sum_line.tax_line {
    font-size: 12px;
    color: var(--text-muted);
}
.pay_summary_box .sum_line.tax_line strong { font-weight: 500; color: var(--text-muted); }

/* ===== 결제 결과 ===== */
.pay_result { max-width: 520px; margin: 60px auto 100px; }
.pay_state { text-align: center; padding: 40px 20px; }
.pay_state i { font-size: 56px; display: block; margin-bottom: 18px; color: var(--accent2); }
.pay_state.is_done i { color: #52c41a; }
.pay_state.is_fail i { color: var(--sale); }
.pay_state h3 { font-size: 20px; font-weight: 800; color: var(--text-strong); margin-bottom: 10px; }
.pay_state p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.pay_state .pay_code { margin-top: 6px; font-size: 12px; color: var(--text-light); }

.pay_actions { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.pay_btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 46px; padding: 0 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 14px; font-weight: 600; color: var(--text-dark);
    text-decoration: none;
}
.pay_btn:hover { border-color: var(--text-dark); }
.pay_btn.is_primary { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.pay_btn.is_primary:hover { background: #3a86e0; }

.spin { animation: pay_spin 1s linear infinite; }
@keyframes pay_spin { to { transform: rotate(360deg); } }

/* ===== 비회원 주문조회 ===== */
.lookup_box { max-width: 460px; margin: 60px auto 100px; }
.lookup_title { font-size: 22px; font-weight: 800; color: var(--text-strong); margin-bottom: 10px; }
.lookup_desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; }
.lookup_desc strong { color: var(--text-dark); font-weight: 600; }
.lookup_form { border: 1px solid var(--border2); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.lookup_row { display: flex; flex-direction: column; gap: 6px; }
.lookup_row label { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.lookup_row input {
    height: 42px; padding: 0 12px; border: 1px solid var(--border);
    font-size: 14px; box-sizing: border-box;
}
.lookup_row input:focus { outline: none; border-color: var(--accent2); }
.lookup_error { margin: 0; font-size: 13px; color: var(--sale); }
.btn_lookup {
    height: 44px; border: none; background: var(--accent2); color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn_lookup:hover { background: #3a86e0; }
.btn_lookup:disabled { opacity: .6; cursor: default; }
.lookup_help { margin-top: 16px; font-size: 13px; color: var(--text-muted); text-align: center; }
.lookup_help a { color: var(--accent2); font-weight: 600; }