@import url("/typography.css");
.orders-page { min-height: 65vh; padding: clamp(3.75rem, 7vw, 6.5rem) 2rem clamp(5.5rem, 9vw, 8rem); background: var(--paper); }
.orders-heading { max-width: 680px; }
.orders-kicker { margin: 0 0 .8rem; color: var(--gold); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; }
.orders-heading h1 { margin: 0; font-size: clamp(3.2rem, 6vw, 6.5rem); line-height: .9; }
.orders-heading > p:last-child { max-width: 560px; margin: 1.5rem 0 0; color: var(--muted); line-height: 1.8; word-break: keep-all; }
.orders-section { max-width: 980px; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.orders-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.orders-section-heading h2 { margin: 0; font-family: "Pretendard", var(--sans); font-size: 1.05rem; font-weight: 500; }
.orders-section-heading p { margin: 0; color: var(--muted); font-size: .75rem; }
.orders-state { margin: 1.5rem 0; color: var(--muted); line-height: 1.7; }
.orders-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.order-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: color-mix(in srgb, var(--white) 60%, transparent); }
.order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.order-card h3 { margin: 0; font-family: "Pretendard", var(--display); font-size: 1.5rem; font-weight: 400; }
.order-card time, .order-card-meta { display: block; margin-top: .45rem; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.order-status { display: inline-flex; align-items: center; min-height: 28px; padding: .3rem .6rem; border: 1px solid var(--line); color: var(--ink); font-size: .7rem; line-height: 1.2; text-align: center; }
.order-status--warning { border-color: var(--gold); color: #725d35; }
.order-status--error { border-color: #a67869; color: #8a5143; }
.order-items { display: grid; gap: .75rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.order-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; }
.order-item strong { font-family: "Pretendard", var(--sans); font-size: .84rem; font-weight: 500; }
.order-item span, .order-card-total { color: var(--muted); font-size: .74rem; line-height: 1.6; }
.order-card-total { display: flex; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.order-card-total strong { color: var(--ink); font-size: .9rem; font-weight: 500; }
.orders-empty { padding: 3rem 0; }
.orders-empty h2 { margin: 0; font-family: "Pretendard", var(--display); font-size: 2rem; font-weight: 400; }
.orders-empty p { max-width: 460px; margin: .8rem 0 1.5rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 620px) { .orders-page { padding-right: 1rem; padding-left: 1rem; } .order-card-head { display: grid; gap: .85rem; } .order-status { justify-self: start; } }