:root {
    --ld-bg: #f8fafc;
    --ld-surface: #ffffff;
    --ld-border: #e2e8f0;
    --ld-accent: #1e3a8a;
    --ld-success: #059669;
    --ld-price: #dc2626;
    --ld-text-main: #0f172a;
    --ld-text-sub: #64748b;
    --ld-radius: 8px;
}
body { margin: 0; background-color: var(--ld-bg); color: var(--ld-text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.ld-header { background-color: var(--ld-surface); border-bottom: 1px solid var(--ld-border); padding: 18px 0; }
.ld-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-sizing: border-box; }
.ld-logo img { height: 26px; }
.ld-menu { display: flex; gap: 35px; }
.ld-menu a { text-decoration: none; color: var(--ld-text-sub); font-weight: 600; font-size: 14px; transition: 0.3s; }
.ld-menu a:hover { color: var(--ld-accent); }
.ld-container { max-width: 1200px; margin: 40px auto; padding: 0 24px; box-sizing: border-box; }
.ld-notice { background: var(--ld-surface); border-radius: var(--ld-radius); border: 1px solid var(--ld-border); padding: 18px 24px; font-size: 13px; color: var(--ld-text-main); line-height: 1.6; display: flex; align-items: center; gap: 12px; }
.ld-notice i { color: var(--ld-accent); font-size: 18px; }
.ld-list-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 50px; }
.ld-row { background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: var(--ld-radius); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; transition: all 0.2s ease-in-out; }
.ld-row:hover { border-color: var(--ld-accent); box-shadow: 0 4px 12px rgba(0,0,0,0.03); transform: translateY(-1px); }
.ld-item-left { display: flex; align-items: center; gap: 20px; }
.ld-img-box { width: 56px; height: 56px; background: #fafafa; border-radius: 6px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ld-border); }
.ld-img-box img { width: 70%; height: 70%; object-fit: contain; }
.ld-item-title { font-size: 15px; font-weight: 700; color: var(--ld-text-main); }
.ld-tag { display: inline-block; background: rgba(5, 150, 105, 0.1); color: var(--ld-success); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: bold; margin-left: 10px; }
.ld-tag-manual { display: inline-block; background: rgba(30, 58, 138, 0.1); color: var(--ld-accent); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: bold; margin-left: 10px; }
.ld-item-mid { display: flex; gap: 30px; font-size: 13px; color: var(--ld-text-sub); }
.ld-item-right { display: flex; align-items: center; gap: 20px; }
.ld-price { color: var(--ld-price); font-weight: 800; font-size: 18px; }
.ld-btn-buy { background: var(--ld-accent); color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 12px; font-weight: 700; transition: 0.2s; }
.ld-row:hover .ld-btn-buy { background: var(--ld-text-main); }
.ld-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
.ld-box { background: var(--ld-surface); border-radius: var(--ld-radius); padding: 35px; border: 1px solid var(--ld-border); }
.ld-h1 { font-size: 24px; font-weight: 800; margin: 0 0 20px 0; color: var(--ld-text-main); }
.ld-input { width: 100%; height: 46px; background: #f8fafc; border: 1px solid var(--ld-border); border-radius: 8px; padding: 0 15px; font-size: 14px; box-sizing: border-box; outline: none; transition: 0.3s; margin-top: 8px; color: var(--ld-text-main); }
.ld-input:focus { border-color: var(--ld-accent); background: var(--ld-surface); }
.ld-label { display: block; font-size: 12px; font-weight: 700; color: var(--ld-text-sub); }
.ld-btn { width: 100%; height: 50px; background: var(--ld-accent); color: var(--ld-surface); border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; margin-top: 20px; }
.ld-btn:hover { opacity: 0.95; transform: translateY(-1px); }
.ld-footer { background: var(--ld-surface); border-top: 1px solid var(--ld-border); padding: 50px 0; margin-top: 80px; text-align: center; }
@media (max-width: 960px) { .ld-row { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px; } .ld-item-mid { width: 100%; justify-content: space-between; } .ld-item-right { width: 100%; justify-content: space-between; } .ld-detail-grid { grid-template-columns: 1fr; } }