:root {
  --ink: #292d2a;
  --muted: #737871;
  --line: #d8d9d3;
  --paper: #f4f1ea;
  --green: #53675a;
  --sans: "DM Sans", "Gowun Dodum", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 13px; }
header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; padding: 12px clamp(18px,4vw,58px); border-bottom: 1px solid var(--line); background: #fff; }
header a { display: flex; align-items: center; gap: 10px; color: inherit; font-size: calc(11px + 1pt); font-weight: 600; letter-spacing: .08em; text-decoration: none; }
header img { width: 38px; height: 38px; }
header nav { display: flex; gap: 16px; }
header nav a { color: var(--muted); font-size: calc(9px + 1pt); font-weight: 500; letter-spacing: 0; }
main { width: min(1180px,calc(100% - 36px)); margin: 0 auto; padding: 54px 0 100px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 34px; }
.page-heading p { margin: 0; color: var(--muted); font-size: calc(9px + 1pt); letter-spacing: .16em; }
.page-heading h1 { margin: 8px 0 0; font-size: 38px; font-weight: 500; }
.page-heading button, .order-action { padding: 10px 16px; border: 0; border-radius: 99px; color: #fff; background: var(--green); cursor: pointer; font: 600 calc(10px + 1pt) var(--sans); }
.admin-notice { padding: 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #fff; }
.admin-notice.error { color: #7b3f38; background: #f8e9e6; }
.admin-orders { display: grid; gap: 18px; }
.admin-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-card-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-card-head h2 { margin: 4px 0 0; font-size: 14px; }
.admin-card-head small { color: var(--muted); font-size: calc(9px + 1pt); }
.status { align-self: flex-start; padding: 6px 10px; border-radius: 99px; color: var(--green); background: #e8eee9; font-size: calc(9px + 1pt); }
.admin-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; padding-top: 20px; }
.customer { padding: 18px; border-radius: 12px; background: #f6f4ef; }
.customer h3, .products h3 { margin: 0 0 12px; font-size: calc(11px + 1pt); }
.customer p { margin: 6px 0; color: var(--muted); font-size: calc(10px + 1pt); line-height: 1.6; }
.customer strong { color: var(--ink); }
.admin-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: calc(10px + 1pt); }
.admin-item span { color: var(--muted); }
.admin-breakdown { display: grid; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.admin-breakdown p { display: flex; justify-content: space-between; gap: 16px; margin: 0; color: var(--muted); font-size: calc(9px + 1pt); }
.admin-total { display: flex; justify-content: space-between; margin: 18px 0 0; font-size: calc(12px + 1pt); }
.admin-record { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.admin-record p { display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 14px; border-radius: 10px; color: var(--muted); background: #f2f0eb; font-size: calc(9px + 1pt); }
.admin-record strong { color: var(--ink); }
.admin-record span { text-align: right; }
.admin-record .refund-record { grid-column: 1/-1; color: #8b443c; background: #f8e9e6; }
.fulfillment { display: flex; align-items: end; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.fulfillment label { display: grid; flex: 1; gap: 6px; color: var(--muted); font-size: calc(9px + 1pt); }
.fulfillment input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; font: calc(12px + 1pt) var(--sans); }
.fulfillment .order-action { min-height: 38px; }
.refund-control { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.refund-control span { color: var(--muted); font-size: calc(9px + 1pt); }
.refund-action { padding: 9px 14px; border: 1px solid #b9695f; border-radius: 99px; color: #8b443c; background: #fff; cursor: pointer; font: 600 calc(10px + 1pt) var(--sans); }
.refund-action:disabled { cursor: wait; opacity: .55; }
.return-admin-panel { display: grid; gap: 12px; margin-top: 18px; padding: 17px; border: 1px solid #cdd9d1; border-radius: 12px; background: #f4f8f5; }
.return-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.return-admin-head h3 { margin: 0; font-size: calc(11px + 1pt); }
.return-admin-head p { margin: 5px 0 0; color: var(--muted); font-size: calc(9px + 1pt); }
.return-admin-head > span { padding: 6px 10px; border-radius: 99px; color: var(--green); background: #e2ede6; font-size: calc(9px + 1pt); white-space: nowrap; }
.return-admin-head > span[data-status="rejected"], .return-admin-head > span[data-status="cancelled"] { color: #874d45; background: #f7e8e5; }
.return-admin-head > span[data-status="completed"] { color: #355b47; background: #dbeadf; }
.return-reason, .return-note { margin: 0; color: var(--muted); font-size: calc(10px + 1pt); line-height: 1.65; }
.return-note { padding: 11px 13px; border-radius: 9px; background: #fff; }
.return-note strong { display: block; margin-bottom: 3px; color: var(--ink); }
.return-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.return-admin-actions button { padding: 9px 14px; border: 1px solid var(--green); border-radius: 99px; color: var(--green); background: #fff; cursor: pointer; font: 600 calc(9px + 1pt) var(--sans); }
.return-admin-actions button:last-child:not(:first-child) { border-color: #b9695f; color: #8b443c; }
.return-admin-actions button:disabled { cursor: wait; opacity: .55; }
.tracking-readonly { margin: 20px 0 0; padding: 14px; border-radius: 10px; background: #f2f0eb; font-size: calc(10px + 1pt); }
.admin-history-panel { margin-top: 18px; border-top: 1px solid var(--line); }
.admin-history-panel > summary { padding: 17px 0 0; color: var(--green); cursor: pointer; font-size: calc(10px + 1pt); font-weight: 600; }
.admin-history { display: grid; gap: 0; margin: 18px 0 0; padding: 16px 16px 0; border-radius: 12px; background: #f6f4ef; list-style: none; }
.admin-history li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 9px; padding-bottom: 17px; }
.admin-history li:not(:last-child)::before { position: absolute; top: 9px; bottom: 0; left: 5px; width: 1px; background: var(--line); content: ""; }
.admin-history li > span { position: relative; z-index: 1; width: 10px; height: 10px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.admin-history li > div > div { display: flex; justify-content: space-between; gap: 14px; }
.admin-history strong { font-size: calc(9px + 1pt); }
.admin-history time, .admin-history p, .admin-history small, .admin-history-empty { margin: 0; color: var(--muted); font-size: calc(8px + 1pt); line-height: 1.55; }
.admin-history p { margin-top: 4px; }
.admin-history small { display: block; margin-top: 3px; color: var(--green); }
.empty { padding: 70px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: center; }

@media (max-width: 760px) {
  main { width: calc(100% - 24px); padding-top: 36px; }
  .page-heading h1 { font-size: 30px; }
  .admin-card { padding: 18px 14px; }
  .admin-grid, .admin-record { grid-template-columns: 1fr; gap: 18px; }
  .admin-record .refund-record { grid-column: auto; }
  .fulfillment { flex-direction: column; align-items: stretch; }
  .admin-card-head { gap: 10px; }
  .admin-history li > div > div { display: grid; gap: 2px; }
  .return-admin-head { flex-direction: column; }
}