@import url("mobile-fixes.css");

* { margin: 0; padding: 0; box-sizing: border-box; }
body { min-height: 100vh; background: #fdfdfb; color: #20242c; font-family: Arial, Helvetica, sans-serif; }
.history-header { display: flex; align-items: center; justify-content: space-between; padding: 32px 6vw; border-bottom: 1px solid #e8e8e3; }
.brand { color: #20242c; font: 18px Georgia, "Times New Roman", serif; letter-spacing: 1.5px; text-decoration: none; }
.history-header > div { display: flex; gap: 24px; }
.history-header a { color: #555; font-size: 9px; letter-spacing: 1.5px; text-decoration: none; }
.history-header .brand { color: #20242c; font-size: 18px; }
.history-main { width: 88%; max-width: 1120px; margin: 0 auto; padding: 82px 0 120px; }
.history-intro { max-width: 650px; margin-bottom: 52px; }
.history-intro > p:first-child, .history-label { margin-bottom: 14px; color: #999; font-size: 9px; letter-spacing: 3px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { font-size: clamp(42px, 5vw, 62px); letter-spacing: -2px; }
.history-copy { max-width: 500px; margin-top: 20px; color: #777; font-size: 14px; line-height: 1.7; }
.history-list { display: grid; gap: 18px; }
.history-card { border: 1px solid #e5e5df; background: #fff; }
.history-card-top { display: flex; justify-content: space-between; gap: 20px; padding: 23px 26px; border-bottom: 1px solid #e8e8e3; }
.history-reference { margin-bottom: 7px; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; }
.history-date { color: #888; font-size: 11px; }
.history-status { padding: 9px 11px; border: 1px solid #d7d7d1; color: #555; font-size: 8px; letter-spacing: 1.4px; white-space: nowrap; }
.history-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 35px; padding: 25px 26px; }
.history-items { display: grid; gap: 10px; }
.history-item { display: flex; justify-content: space-between; gap: 15px; color: #666; font-size: 12px; line-height: 1.45; }
.history-item strong { color: #20242c; font-weight: 500; }
.history-total { padding-top: 15px; border-top: 1px solid #e8e8e3; color: #20242c; font: 20px Georgia, "Times New Roman", serif; text-align: right; }
.history-total span { display: block; margin-bottom: 7px; color: #999; font: 8px Arial, Helvetica, sans-serif; letter-spacing: 1.5px; }
.received-button { width: 100%; margin-top: 16px; padding: 12px; border: 1px solid #20242c; background: transparent; color: #20242c; cursor: pointer; font: 8px Arial, Helvetica, sans-serif; letter-spacing: 1.3px; }
.received-button:active { border-color: #b08d24; background: #b08d24; color: #fff; }
.received-copy { display: block; margin-top: 18px; color: #507358; font-size: 8px; letter-spacing: 1.3px; text-align: center; }
.history-empty { max-width: 610px; padding-top: 55px; border-top: 1px solid #20242c; }
.history-empty p { margin-bottom: 14px; color: #999; font-size: 9px; letter-spacing: 2.4px; }
.history-empty h2 { font-size: 31px; line-height: 1.2; }
.history-empty a { display: inline-block; margin-top: 28px; padding: 16px 22px; background: #20242c; color: #fff; font-size: 9px; letter-spacing: 1.6px; text-decoration: none; }
@media (max-width: 700px) { .history-header { position: fixed; z-index: 1000; inset: 0 0 auto; padding: 24px 5vw; background: #fdfdfb; } .history-header > div { gap: 13px; } .history-header a { font-size: 8px; letter-spacing: 1px; } .history-main { width: 90%; margin-top: 69px; padding: 55px 0 80px; } .history-card-top, .history-body { padding: 20px; } .history-body { grid-template-columns: 1fr; gap: 25px; } .history-total { text-align: left; } }