/* skin/css/index.css */

/* Banner */
.banner-frame { padding: 5px; }
.main-swiper { border: 1px solid #ccc; }
.swiper-pagination-bullet { width: 6px; height: 6px; background: #000; opacity: 0.2; }
.swiper-pagination-bullet-active { background: var(--bp-blue); opacity: 1; }

/* 2. Tech List */
.tech-list-box { padding: 0 15px; }
.tech-row {
    display: flex; align-items: center; padding: 15px;
    border: 1px solid #ccc; background: #fff; margin-bottom: 10px;
    position: relative;
}
.tech-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bp-blue);
}
.tech-row img { width: 48px; height: 48px; margin-right: 15px; border: 1px solid #eee; }
.tr-data { flex: 1; }
.tr-data h3 { font-size: 14px; font-weight: bold; margin-bottom: 2px; }
.tr-data p { font-size: 10px; font-family: monospace; color: var(--bp-sub); }

/* 3. Grid 2 */
.bp-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 15px 15px;
}
.bg2-item {
    display: flex; align-items: center; padding: 8px; border: 1px dashed var(--bp-blue);
    background: #fff;
}
.bg2-item img { width: 32px; height: 32px; margin-right: 8px; }
.bg2-item span { font-size: 12px; font-weight: bold; }

/* 4. Mini List Frame */
.mini-list-frame { padding: 0 15px; }
.mini-row {
    display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dotted #ccc;
}
.mini-row:last-child { border-bottom: none; }
.mini-row img { width: 32px; height: 32px; margin-right: 10px; }
.mr-info { flex: 1; font-size: 13px; font-weight: bold; }
.mr-arrow { font-family: monospace; font-weight: bold; color: var(--bp-blue); }

/* 5. Grid 4 */
.bp-grid-4 {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 15px 15px;
}
.bg4-item { text-align: center; border: 1px solid #eee; padding: 5px; background: #fff; }
.bg4-item img { width: 36px; height: 36px; margin: 0 auto 5px; }
.bg4-item span { font-size: 11px; }

/* 6. Rank Table */
.rank-table { padding: 0; }
.rt-row {
    display: flex; align-items: center; padding: 10px 15px;
    border-bottom: 1px solid #eee;
}
.rt-row:last-child { border-bottom: none; }
.rt-idx { width: 30px; font-family: monospace; font-weight: bold; color: #999; }
.rt-idx.top { color: var(--bp-blue); }
.rt-name { flex: 1; font-weight: bold; font-size: 14px; }
.rt-hot { font-family: monospace; font-size: 12px; color: var(--bp-sub); }