/* ============================================================
   linxuan.asia 严选杂志式骨架 lxg-2026.css（2026-10-26 B 版）
   通知条 + 居中刊头 + 露边大图 + 金刚区 + 横卡楼层
   ============================================================ */
:root {
    --lxg-ink: #1B2430;
    --lxg-navy: #22303F;
    --lxg-brass: #A9713F;
    --lxg-cream: #F5F1E8;
    --lxg-paper: #FFFDF8;
    --lxg-line: #E1D7C5;
    --lxg-muted: #76705F;
}
.lxg-notice { display: flex; gap: 14px; overflow-x: auto; background: #EFE7D7; color: #6B6352; font-size: 10.5px; padding: 7px 12px; white-space: nowrap; scrollbar-width: none; }
.lxg-notice::-webkit-scrollbar { display: none; }

.lxg-mast { background: var(--lxg-paper); border-bottom: 1px solid var(--lxg-line); padding: 16px 16px 12px; text-align: center; }
.lxg-brand { display: block; }
.lxg-mark { display: block; font-size: 28px; font-weight: 800; letter-spacing: 6px; color: var(--lxg-navy); }
.lxg-tagline { display: block; font-size: 11.5px; color: var(--lxg-muted); letter-spacing: 1px; margin-top: 5px; }
.lxg-find { max-width: 340px; margin: 10px auto 0; }
.lxg-find-input { width: 100%; border: 1px solid var(--lxg-line); border-radius: 2px; padding: 8px 12px; font-size: 12.5px; background: #fff; outline: none; }

.lxg-hero { margin: 10px 12px 0; }
.lxg-hero-link { position: relative; display: block; overflow: hidden; }
.lxg-hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center top; background: #EFE9DC; }
.lxg-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 12px; background: linear-gradient(transparent, rgba(20, 28, 38, .78)); color: #fff; }
.lxg-hero-cap b { display: block; font-size: 14px; font-weight: 700; }
.lxg-hero-cap span { display: block; font-size: 11.5px; opacity: .85; margin-top: 3px; }

.lxg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lxg-line); border-bottom: 1px solid var(--lxg-line); margin-top: 10px; }
.lxg-tile { background: var(--lxg-paper); text-align: center; padding: 10px 4px; }
.lxg-tile-name { display: block; font-size: 12px; color: var(--lxg-ink); }
.lxg-tile-count { display: block; font-size: 10px; color: var(--lxg-muted); margin-top: 2px; }

.lxg-floor { margin: 18px 12px; background: var(--lxg-paper); border-top: 2px solid var(--lxg-navy); }
.lxg-floor-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 12px 8px; border-bottom: 1px solid var(--lxg-line); }
.lxg-floor-no { font-size: 13px; font-weight: 800; color: var(--lxg-brass); letter-spacing: 1px; }
.lxg-floor-copy { flex: 1; min-width: 0; }
.lxg-floor-title { font-size: 16px; font-weight: 800; }
.lxg-floor-note { font-size: 11px; color: var(--lxg-muted); margin-top: 3px; line-height: 1.5; }
.lxg-floor-more { font-size: 10.5px; color: var(--lxg-brass); white-space: nowrap; }
.lxg-floor-body { padding: 12px; }

.lxg-lead { display: grid; grid-template-columns: 42% 1fr; background: #fff; border: 1px solid var(--lxg-line); }
.lxg-lead-pic { display: block; background: #EFE9DC; }
.lxg-lead-pic img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.lxg-lead-body { padding: 12px; }
.lxg-lead-flag { display: inline-block; font-size: 10px; letter-spacing: 1px; color: #fff; background: var(--lxg-navy); padding: 2px 8px; margin-bottom: 7px; }
.lxg-lead-name { font-size: 14.5px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; }
.lxg-spec { margin: 0; }
.lxg-spec-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--lxg-line); font-size: 11.5px; }
.lxg-spec-row:last-child { border-bottom: none; }
.lxg-spec-key { color: var(--lxg-muted); }
.lxg-spec-val { text-align: right; }
.lxg-lead-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.lxg-lead-price { font-size: 18px; font-weight: 800; color: var(--lxg-brass); }
.lxg-go { background: var(--lxg-navy); color: #fff; font-size: 12px; padding: 8px 14px; }

.lxg-hcards { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lxg-line); border: 1px solid var(--lxg-line); margin-top: 12px; }
.lxg-hcard { display: flex; gap: 10px; background: #fff; padding: 10px; }
.lxg-hcard-pic { width: 92px; height: 92px; flex: none; object-fit: cover; background: #EFE9DC; }
.lxg-hcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.lxg-hcard-name { font-size: 12.5px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lxg-hcard-meta { font-size: 10.5px; color: var(--lxg-muted); margin-top: 4px; }
.lxg-hcard-price { font-size: 14px; font-weight: 700; color: var(--lxg-brass); margin-top: 4px; }

.lxg-band { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 2px 12px; padding: 11px 12px; background: var(--lxg-navy); color: #E9E2D3; font-size: 11px; letter-spacing: .4px; }

.lxg-rail { margin: 18px 12px 0; background: var(--lxg-paper); border: 1px solid var(--lxg-line); }
.lxg-rail-head { padding: 12px 12px 8px; border-bottom: 1px solid var(--lxg-line); }
.lxg-rail-title { font-size: 16px; font-weight: 800; }
.lxg-rail-sub { font-size: 11px; color: var(--lxg-muted); margin-top: 3px; }
.lxg-rail-scroll { display: flex; gap: 1px; overflow-x: auto; background: var(--lxg-line); scrollbar-width: none; }
.lxg-rail-scroll::-webkit-scrollbar { display: none; }
.lxg-rail-card { flex: 0 0 78%; background: #fff; padding: 12px; }
.lxg-rail-no { font-size: 11px; font-weight: 800; color: var(--lxg-brass); letter-spacing: 1px; }
.lxg-rail-name { font-size: 14px; margin: 3px 0 5px; }
.lxg-rail-text { font-size: 12px; line-height: 1.8; color: var(--lxg-muted); }

.lxg-topic { margin: 18px 0 0; padding: 0 0 4px; }
.lxg-topic .lxg-rail-head { margin: 0 12px; background: transparent; border-bottom: none; padding: 4px 0 8px; }
.lxg-topic-rail { display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px 8px; scrollbar-width: none; }
.lxg-topic-rail::-webkit-scrollbar { display: none; }
.lxg-topic-card { flex: 0 0 118px; background: var(--lxg-paper); border: 1px solid var(--lxg-line); }
.lxg-topic-pic { width: 100%; aspect-ratio: 1; object-fit: cover; background: #EFE9DC; }
.lxg-topic-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.4; padding: 6px 7px 0; height: 34px; }
.lxg-topic-price { display: block; font-size: 12px; font-weight: 700; color: var(--lxg-brass); padding: 2px 7px 7px; }

.lxg-long { margin: 18px 12px 0; background: var(--lxg-paper); border: 1px solid var(--lxg-line); padding: 16px 14px; }
.lxg-long-title { font-size: 17px; font-weight: 800; color: var(--lxg-navy); }
.lxg-long-sub { font-size: 12px; color: var(--lxg-muted); line-height: 1.8; margin-top: 6px; }
.lxg-long-grid { margin-top: 12px; }
.lxg-long-item { padding: 10px 0; border-top: 1px dashed var(--lxg-line); }
.lxg-long-item h3 { font-size: 13.5px; margin-bottom: 5px; }
.lxg-long-item p { font-size: 12px; line-height: 1.85; color: #4C4A42; }
.lxg-long-shop { margin-bottom: 6px; }

/* 分类页 */
.lxg-catnav { display: flex; overflow-x: auto; background: #EFE7D7; border-bottom: 1px solid var(--lxg-line); padding: 0 8px; scrollbar-width: none; }
.lxg-catnav::-webkit-scrollbar { display: none; }
.lxg-catnav a { flex: none; padding: 10px 12px; font-size: 12.5px; color: #5E5849; border-bottom: 2px solid transparent; white-space: nowrap; }
.lxg-catnav a.on { color: var(--lxg-navy); border-bottom-color: var(--lxg-navy); font-weight: 700; }
.lxg-listing { padding-bottom: 8px; }
.lxg-listing-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 14px 2px; }
.lxg-listing-title { font-size: 19px; font-weight: 800; }
.lxg-listing-meta { font-size: 11px; color: var(--lxg-muted); }
.lxg-empty { padding: 40px 20px; text-align: center; color: var(--lxg-muted); font-size: 13px; }

@media (hover: hover) {
    .lxg-hcard:hover { background: #FBF8F1; }
    .lxg-topic-card:hover { border-color: #C9B998; }
}

@media (min-width: 768px) {
    .lxg-notice { justify-content: center; gap: 34px; padding: 8px 20px; font-size: 11.5px; }
    .lxg-mast { padding: 12px 20px 8px; }
    .lxg-mark { font-size: 29px; letter-spacing: 8px; }
    .lxg-tagline { font-size: 12px; }
    .lxg-find { max-width: 360px; margin-top: 5px; }
    .lxg-hero { max-width: 1200px; margin: 12px auto 0; }
    .lxg-hero-img { aspect-ratio: auto; height: 170px; object-position: center 22%; }
    .lxg-hero-cap { padding: 28px 20px 14px; }
    .lxg-hero-cap b { font-size: 19px; }
    .lxg-hero-cap span { font-size: 12px; }
    .lxg-tiles { max-width: 1200px; margin: 10px auto 0; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--lxg-line); }
    .lxg-tile { padding: 10px 6px; }
    .lxg-tile-name { font-size: 13px; }
    .lxg-floor { max-width: 1200px; margin: 16px auto 0; }
    .lxg-floor-head { padding: 12px 18px 8px; }
    .lxg-floor-title { font-size: 21px; }
    .lxg-floor-note { font-size: 12px; }
    .lxg-floor-body { padding: 18px; }
    .lxg-lead { grid-template-columns: 300px 1fr; }
    .lxg-lead-pic img { min-height: 220px; height: 100%; }
    .lxg-lead-body { display: flex; flex-direction: column; padding: 12px 16px; }
    .lxg-lead-name { font-size: 17px; }
    .lxg-spec-row { font-size: 12.5px; padding: 6px 0; }
    .lxg-lead-buy { margin-top: auto; }
    .lxg-lead-price { font-size: 24px; }
    .lxg-hcards { grid-template-columns: repeat(3, 1fr); margin-top: 14px; gap: 14px; background: transparent; border: none; }
    .lxg-hcard { border: 1px solid var(--lxg-line); padding: 12px; gap: 12px; }
    .lxg-hcard-pic { width: 118px; height: 118px; }
    .lxg-hcard-name { font-size: 13px; }
    .lxg-hcard-price { font-size: 16px; }
    .lxg-band { max-width: 1200px; margin: 26px auto 0; padding: 13px 20px; font-size: 12px; justify-content: center; gap: 46px; }
    .lxg-rail { max-width: 1200px; margin: 26px auto 0; }
    .lxg-rail-head { padding: 16px 18px 10px; }
    .lxg-rail-title { font-size: 20px; }
    .lxg-rail-scroll { gap: 0; }
    .lxg-rail-card { flex: 1 1 0; padding: 16px 18px; border-right: 1px solid var(--lxg-line); }
    .lxg-rail-card:last-child { border-right: none; }
    .lxg-rail-name { font-size: 16px; }
    .lxg-rail-text { font-size: 13px; }
    .lxg-topic { max-width: 1200px; margin: 26px auto 0; }
    .lxg-topic .lxg-rail-head { margin: 0; }
    .lxg-topic-rail { padding: 4px 0 10px; gap: 14px; }
    .lxg-topic-card { flex: 0 0 180px; }
    .lxg-topic-name { font-size: 12.5px; height: 38px; }
    .lxg-topic-price { font-size: 14px; }
    .lxg-long { max-width: 1200px; margin: 26px auto 0; padding: 22px 24px; }
    .lxg-long-title { font-size: 22px; }
    .lxg-long-sub { font-size: 13px; max-width: 820px; }
    .lxg-long-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
    .lxg-long-item p { font-size: 13px; }
    .lxg-catnav { justify-content: center; padding: 0; }
    .lxg-catnav a { padding: 12px 26px; font-size: 13.5px; }
    .lxg-listing-head { max-width: 1200px; margin: 0 auto; padding: 28px 4px 4px; }
    .lxg-listing-title { font-size: 26px; }
}