.trend-body { margin: 0; background: #f1f3f5; color: #18212a; }
.trend-wrap { width: min(1080px, 100%); min-height: 100vh; margin: 0 auto; background: #fff; }
.trend-topbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 50px; padding: 0 16px; background: #e41f26; box-shadow: 0 2px 8px #87121935; color: #fff; }
.trend-topbar a, .trend-topbar strong, .trend-topbar span { color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; }
.trend-topbar strong { text-align: center; }.trend-topbar span { justify-self: end; }
.trend-summary, .trend-card, .trend-empty { margin: 14px; padding: 15px; border: 1px solid #e1e6eb; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px #18212a0d; }
.special-trend-card { border-top: 4px solid #d9ae35; }
.special-analysis-card { border-top: 4px solid #bd8307; }
.special-miss-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.special-miss-item { display: flex; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e1e6eb; border-top: 4px solid #aab5c0; border-radius: 6px; background: #fff; }.special-miss-item.wave-red { border-top-color: #e91d24; }.special-miss-item.wave-blue { border-top-color: #287ed9; }.special-miss-item.wave-green { border-top-color: #18b540; }.special-miss-item b { font-size: 15px; }.special-miss-item span { color: #697684; font-size: 11px; }.special-miss-item em { color: #9a6800; font-size: 14px; font-style: normal; font-weight: 900; }
.attribute-analysis-card { border-top: 4px solid #64748b; }.zodiac-analysis-card { border-top-color: #9c6b30; }.element-analysis-card { border-top-color: #16806c; }.wave-analysis-card { border-top-color: #5875a7; }
.attribute-miss-grid { display: grid; gap: 7px; margin-top: 12px; }.zodiac-miss-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }.element-miss-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }.wave-miss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attribute-miss-item { display: flex; min-height: 53px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e1e6eb; border-top: 4px solid #64748b; border-radius: 6px; background: #fff; }.attribute-miss-item.wave-red { border-top-color: #e91d24; }.attribute-miss-item.wave-blue { border-top-color: #287ed9; }.attribute-miss-item.wave-green { border-top-color: #18b540; }.attribute-miss-item b { color: #26323d; font-size: 16px; }.attribute-miss-item span { color: #697684; font-size: 11px; }.attribute-miss-item em { color: #9a6800; font-size: 15px; font-style: normal; font-weight: 900; }
.trend-summary h1, .trend-card h2, .trend-empty h1 { margin: 0; font-size: 18px; }.trend-summary p, .trend-card-heading span, .trend-empty p { color: #718090; font-size: 13px; }
.frequency-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.frequency-item { display: flex; min-height: 47px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e1e6eb; border-top: 4px solid #aab5c0; border-radius: 6px; background: #fff; }.frequency-item.wave-red { border-top-color: #e91d24; }.frequency-item.wave-blue { border-top-color: #287ed9; }.frequency-item.wave-green { border-top-color: #18b540; }.frequency-item b { font-size: 15px; }.frequency-item span { color: #697684; font-size: 11px; }
.trend-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }.trend-card-heading span { white-space: nowrap; }
.trend-scroll { overflow-x: auto; border: 1px solid #e1e6eb; }.trend-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 11px; }.trend-table th, .trend-table td { width: 30px; height: 33px; border-right: 1px solid #e7eaee; border-bottom: 1px solid #e7eaee; padding: 0; text-align: center; }.trend-table thead th { position: static; background: #f6f8fa; color: #626f7d; font-weight: 800; }.trend-table tr > th:first-child { position: sticky; left: 0; z-index: 1; width: 82px; min-width: 82px; background: #fff; color: #27323d; }.trend-table thead tr > th:first-child { position: static; z-index: auto; background: #f6f8fa; }.trend-table th b, .trend-table th small { display: block; }.trend-table th small { margin-top: 2px; color: #88939e; font-weight: 400; }
.trend-hit { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 2px solid #adb7c2; border-radius: 50%; background: #fff; color: #1c252e; font-size: 9px; font-style: normal; font-weight: 900; }.trend-hit.wave-red { border-color: #e91d24; }.trend-hit.wave-blue { border-color: #287ed9; }.trend-hit.wave-green { border-color: #18b540; }.trend-hit.trend-special { box-shadow: 0 0 0 2px #d9ae35; }
.trend-empty { margin-top: 30px; text-align: center; }.trend-empty p { line-height: 1.7; }
@media (max-width: 600px) { .trend-topbar { min-height: 43px; padding: 0 9px; }.trend-topbar a, .trend-topbar strong, .trend-topbar span { font-size: 15px; }.trend-summary, .trend-card, .trend-empty { margin: 8px; padding: 10px; }.trend-summary h1, .trend-card h2, .trend-empty h1 { font-size: 16px; }.frequency-grid, .special-miss-grid, .attribute-miss-grid { gap: 4px; }.frequency-item, .special-miss-item { min-height: 42px; }.frequency-item b, .special-miss-item b { font-size: 13px; }.frequency-item span, .special-miss-item span { font-size: 9px; }.special-miss-item em { font-size: 11px; }.attribute-miss-item { min-height: 45px; }.attribute-miss-item b { font-size: 14px; }.attribute-miss-item span { font-size: 9px; }.attribute-miss-item em { font-size: 11px; }.trend-card-heading span { font-size: 10px; }.trend-table th, .trend-table td { width: 27px; height: 31px; }.trend-table tr > th:first-child { width: 68px; min-width: 68px; }.trend-hit { width: 20px; height: 20px; font-size: 8px; } }