/* ===================================================================
   BLUEPRINT TECHNICAL THEME — engineering drawing / CAD blueprint look
   Deep blueprint-blue ground, fine white/cyan grid lines, dashed
   annotation borders, monospace type, drafting-tool emoji accents.
   =================================================================== */
:root {
  --bp-bg: #0a2b52;
  --bp-bg2: #0e3564;
  --bp-panel: #0c2f5a;
  --bp-panel2: #123a6e;
  --bp-line: rgba(255,255,255,.14);
  --bp-line-soft: rgba(255,255,255,.08);
  --bp-cyan: #6fd8ff;
  --bp-white: #eaf4ff;
  --bp-dim: #9db8d9;
  --bp-amber: #ffb648;
  --bp-grid-major: rgba(255,255,255,.09);
  --bp-grid-minor: rgba(255,255,255,.045);
}
/* ===== Base / Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Consolas", "SF Mono", "Courier New", ui-monospace, monospace;
  background-color: var(--bp-bg);
  background-image:
    repeating-linear-gradient(0deg, var(--bp-grid-major) 0px, var(--bp-grid-major) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(90deg, var(--bp-grid-major) 0px, var(--bp-grid-major) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, var(--bp-grid-minor) 0px, var(--bp-grid-minor) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(90deg, var(--bp-grid-minor) 0px, var(--bp-grid-minor) 1px, transparent 1px, transparent 16px);
  background-attachment: fixed;
  color: var(--bp-white);
  line-height: 1.4;
  padding-bottom: 24px;
  overflow-x: hidden;
}
[v-cloak] { display: none; }
a { color: inherit; text-decoration: none; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
::-webkit-scrollbar { display: none; }
/* ===== Top Bar ===== */
.topbar {
  position: static; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bp-panel); border-bottom: 1px dashed var(--bp-line);
}
.topbar-logo { font-size: 17px; font-weight: 700; letter-spacing: .03em; color: var(--bp-cyan); }
.topbar-search-btn {
  width: 36px; height: 36px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bp-panel2); color: var(--bp-cyan);
  border: 1px solid var(--bp-line);
}
/* ===== Category Tabs ===== */
.cat-tabs {
  position: static; top: 60px; z-index: 30;
  background: var(--bp-bg); border-bottom: 1px dashed var(--bp-line);
  overflow-x: auto; white-space: nowrap;
}
.cat-tabs-inner { display: inline-flex; gap: 8px; padding: 10px 16px; }
.cat-tab {
  flex-shrink: 0; padding: 7px 14px; border-radius: 4px;
  background: var(--bp-panel); color: var(--bp-dim); font-size: 12px; font-weight: 600;
  border: 1px dashed var(--bp-line);
  letter-spacing: .02em;
}
.cat-tab.active {
  background: var(--bp-cyan);
  color: #062240;
  border: 1px solid var(--bp-cyan);
  font-weight: 700;
}
/* ===== Search ===== */
.search-bar-wrap {
  position: static; top: 60px; z-index: 30;
  display: flex; gap: 8px; padding: 10px 16px;
  background: var(--bp-bg); border-bottom: 1px dashed var(--bp-line);
}
.search-input {
  flex: 1; padding: 9px 14px; border-radius: 4px; border: 1px solid var(--bp-line);
  background: var(--bp-panel2); color: var(--bp-white); font-size: 14px; font-family: inherit;
}
.search-cancel { font-size: 13px; color: var(--bp-cyan); font-weight: 600; padding: 0 4px; }
/* ===== Loading ===== */
.loading-full { display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.loading-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px dashed var(--bp-line); border-top-color: var(--bp-cyan);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Section spacing ===== */
section[class$="-sec"] { margin-bottom: 32px; }
/* ===== Section Header ===== */
.sec-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; border-bottom: 1px dashed var(--bp-line-soft); margin: 0 16px; }
.sec-label { font-size: 14px; font-weight: 700; letter-spacing: .05em; color: var(--bp-white); text-transform: uppercase; }
.sec-more { font-size: 11px; color: var(--bp-cyan); font-weight: 600; border: 1px dashed var(--bp-cyan); padding: 3px 8px; border-radius: 3px; }
.sec-cnt { font-size: 12px; color: var(--bp-dim); border: 1px solid var(--bp-line); padding: 2px 7px; border-radius: 3px; }
/* ===== Featured (Hero) ===== */
.featured-sec { padding: 12px 16px 0; }
.featured-card {
  display: flex; border-radius: 6px; overflow: hidden;
  background: var(--bp-panel);
  border: 1px solid var(--bp-cyan);
  position: relative;
  cursor: pointer;
}
.featured-card::before {
  content: "◈ SPEC-001"; position: absolute; top: 6px; left: 8px; z-index: 2;
  font-size: 9px; color: var(--bp-cyan); letter-spacing: .08em; opacity: .8;
}
.featured-body { flex: 1; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feat-badge {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: transparent; color: var(--bp-amber); padding: 3px 8px; border-radius: 3px; text-transform: uppercase;
  border: 1px dashed var(--bp-amber);
}
.feat-title { font-size: 17px; font-weight: 800; letter-spacing: .01em; color: var(--bp-white); }
.feat-desc { font-size: 12px; color: var(--bp-dim); overflow: hidden; }
.feat-play-btn {
  margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700;
  background: var(--bp-cyan); color: #062240; padding: 7px 14px; border-radius: 4px;
}
.featured-cover { width: 40%; aspect-ratio: 4/5; flex-shrink: 0; border-left: 1px dashed var(--bp-line); }
/* ===== Hot Games (2 big + 3 small) ===== */
.hot-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px 10px; }
.htcard { border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; border: 1px solid var(--bp-line); }
.htcard img { aspect-ratio: 1/1; }
.htcard-nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(6,20,40,.92));
}
.hot-bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.hsmcard { cursor: pointer; }
.hsmcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); }
.hsmcard-img img { aspect-ratio: 1/1; }
.hsmcard-nm { font-size: 11px; margin-top: 5px; text-align: center; color: var(--bp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Rank list (Action) — numbered spec sheet rows ===== */
.rank-list { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.ritem { display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px dashed var(--bp-line); border-radius: 4px; padding: 8px; }
.rnum { width: 22px; text-align: center; font-size: 14px; font-weight: 800; color: var(--bp-dim); flex-shrink: 0; }
.rnum.rn-1 { color: var(--bp-amber); }
.rnum.rn-2 { color: var(--bp-cyan); }
.rnum.rn-3 { color: var(--bp-white); }
.rthumb { width: 52px; height: 52px; border-radius: 4px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--bp-line); }
.rbody { flex: 1; min-width: 0; }
.rname { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtag { font-size: 10px; color: var(--bp-dim); }
.rdesc { font-size: 11px; color: var(--bp-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rplay { color: var(--bp-cyan); font-size: 13px; flex-shrink: 0; }
/* ===== Puzzle horizontal scroll ===== */
.puzzle-scroll { display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; }
.pzcard { flex-shrink: 0; width: 92px; cursor: pointer; }
.pzcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); }
.pzcard-img img { aspect-ratio: 1/1; }
.pzcard-nm { font-size: 11px; margin-top: 5px; text-align: center; color: var(--bp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Generic responsive icon grid ===== */
.kids-grid, .all-grid, .games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px 8px;
}
@media (min-width: 480px) {
.kids-grid, .all-grid, .games-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 860px) {
.kids-grid, .all-grid, .games-grid { grid-template-columns: repeat(8, 1fr); }
}
.kcard, .agcard, .gcard { cursor: pointer; min-width: 0; }
.kcard-img, .agcard-img, .gcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); }
.kcard-img img, .agcard-img img, .gcard-img img { aspect-ratio: 1/1; }
.kcard-nm, .agcard-nm, .gcard-nm {
  font-size: 11px; margin-top: 5px; text-align: center; color: var(--bp-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== Two / Tri column grids (Sports, Racing, Adventure, Girl) ===== */
.two-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px; }
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.twcard, .tgcard { cursor: pointer; }
.twcard-img, .tgcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); }
.twcard-img img, .tgcard-img img { aspect-ratio: 1/1; }
.twcard-nm, .tgcard-nm {
  font-size: 11px; margin-top: 5px; text-align: center; color: var(--bp-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== Spotlight / Hero cards (Sports, Adventure) ===== */
.spot-card, .adv-hero {
  position: relative; margin: 0 16px 10px; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--bp-line);
}
.spot-card img, .adv-hero img { aspect-ratio: 16/9; }
.spot-ovl, .adv-hero-ovl {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px;
  background: linear-gradient(transparent, rgba(6,20,40,.92));
}
.spot-badge, .adv-badge {
  font-size: 10px; font-weight: 700; background: transparent; color: var(--bp-cyan);
  padding: 3px 8px; border-radius: 3px; text-transform: uppercase; border: 1px dashed var(--bp-cyan);
}
.spot-name, .adv-name { font-size: 15px; font-weight: 700; color: #fff; margin-top: 6px; }
.adv-desc { font-size: 11px; color: var(--bp-dim); margin-top: 3px; }
.spot-desc { font-size: 11px; color: var(--bp-dim); margin-top: 3px; }
/* ===== Load more ===== */
.more-wrap, .loadmore-wrap { display: flex; justify-content: center; padding: 16px; }
.more-btn, .loadmore-btn {
  padding: 10px 22px; border-radius: 4px; background: var(--bp-panel2); color: var(--bp-cyan);
  font-size: 13px; font-weight: 600; border: 1px dashed var(--bp-cyan);
}
/* ===== Filter header ===== */
.filter-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.filter-back { font-size: 13px; color: var(--bp-cyan); font-weight: 600; }
.filter-title { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.filter-cnt { font-size: 12px; color: var(--bp-dim); }
.empty-msg { text-align: center; padding: 60px 0; color: var(--bp-dim); font-size: 13px; }
/* ===== Footer ===== */
.site-footer { display: flex; justify-content: center; gap: 10px; padding: 24px 16px; font-size: 12px; color: var(--bp-dim); border-top: 1px dashed var(--bp-line-soft); }
/* ===== Back to top ===== */
.totop-btn {
  position: fixed; right: 16px; bottom: 20px; z-index: 50;
  width: 40px; height: 40px; border-radius: 4px;
  background: var(--bp-cyan); color: #062240; font-size: 16px;
  border: 1px solid var(--bp-white);
}
/* ===== Desktop content width cap ===== */
@media (min-width: 860px) {
  body { max-width: 1080px; margin: 0 auto; }
}
/* ===== Avatar row (Arcade) ===== */
.avatar-row { display: flex; padding: 6px 20px 8px; overflow-x: auto; gap: 4px; }
.avcard { flex-shrink: 0; width: 66px; cursor: pointer; text-align: center; }
.avcard-img { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); }
.avcard-img img { width: 100%; height: 100%; object-fit: cover; }
.avcard-nm { font-size: 10px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bp-dim); }
.twcard-desc, .tgcard-desc { font-size: 10px; color: var(--bp-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Spotlight Picks (terminal / spec log) ===== */
.term-list { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px; margin: 0 16px; background: var(--bp-panel); border: 1px dashed var(--bp-cyan); border-radius: 4px; font-family: inherit; }
.term-item { cursor: pointer; }
.term-prompt { color: var(--bp-amber); margin-right: 6px; font-weight: 700; }
.term-name { color: var(--bp-cyan); font-weight: 700; }
.term-cat { color: var(--bp-dim); margin-left: 8px; font-size: 12px; }
.term-desc { color: var(--bp-dim); font-size: 12px; margin: 4px 0 0 16px; opacity: .85; }

/* ===================================================================
   4 EXTRA THEMATIC BLOCKS (not tied to a data category)
   =================================================================== */
/* ===== New Blueprints (latest, diagonal-tag grid) ===== */
.newdraft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.ndcard { cursor: pointer; position: relative; border: 1px solid var(--bp-line); border-radius: 4px; overflow: hidden; }
.ndcard-img { aspect-ratio: 1/1; }
.nd-tag {
  position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 9px; font-weight: 700;
  color: #062240; background: var(--bp-amber); padding: 2px 6px; border-radius: 2px; letter-spacing: .03em;
}
.ndcard-nm { font-size: 11px; padding: 5px 6px; color: var(--bp-dim); background: var(--bp-panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Engineer's Picks (dashed ruler list w/ measurement ticks) ===== */
.eng-list { padding: 4px 16px; display: flex; flex-direction: column; }
.eng-item { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; border-bottom: 1px dashed var(--bp-line); position: relative; }
.eng-item:last-child { border-bottom: none; }
.eng-tick { width: 10px; flex-shrink: 0; color: var(--bp-cyan); font-size: 12px; text-align: center; }
.eng-thumb { width: 46px; height: 46px; border-radius: 4px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--bp-line); }
.eng-body { flex: 1; min-width: 0; }
.eng-nm { font-size: 13px; font-weight: 600; color: var(--bp-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-desc { font-size: 11px; color: var(--bp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.eng-note { font-size: 10px; color: var(--bp-amber); flex-shrink: 0; border: 1px dashed var(--bp-amber); padding: 2px 6px; border-radius: 3px; }

/* ===================================================================
   STRUCTURAL REDESIGN — 12 distinct layouts (see task spec)
   =================================================================== */

/* 1. rank-sec — compact numbered list, uniform row height */
.rank-list { padding: 0 16px; display: flex; flex-direction: column; gap: 0; border: 1px dashed var(--bp-line); border-radius: 4px; overflow: hidden; }
.ritem { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-bottom: 1px dashed var(--bp-line-soft); }
.ritem:last-child { border-bottom: none; }
.rnum { width: 18px; text-align: center; font-size: 11px; font-weight: 800; color: var(--bp-dim); flex-shrink: 0; }
.rnum.rn-1 { color: var(--bp-amber); }
.rnum.rn-2 { color: var(--bp-cyan); }
.rnum.rn-3 { color: var(--bp-white); }
.rthumb { width: 30px; height: 30px; border-radius: 3px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--bp-line); }
.rname { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rplay { color: var(--bp-cyan); font-size: 11px; flex-shrink: 0; }

/* 2. puzzle-sec — 3-col grid, category tag then title, each own line */
.puzzle-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; padding: 0 16px; }
.pzgcard { cursor: pointer; min-width: 0; }
.pzgcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); aspect-ratio: 1/1; }
.pzgcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pzgcard-tag { display: block; margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--bp-amber); text-transform: uppercase; }
.pzgcard-nm { display: block; margin-top: 2px; font-size: 11px; color: var(--bp-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 3. kids-sec — 6-col mini icon wall, no text (title attr tooltip only) */
.kids-iconwall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0 16px 8px; }
.kicon { display: block; border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); aspect-ratio: 1/1; cursor: pointer; }
.kicon img { width: 100%; height: 100%; object-fit: cover; }

/* 4. sports-sec — 1 big + 4 small fixed CSS Grid (collage) */
.collage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 70px;
  gap: 10px;
  padding: 0 16px;
}
.collage-big { grid-column: span 4; grid-row: span 2; position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--bp-cyan); cursor: pointer; }
.collage-sm { grid-column: span 1; grid-row: span 2; position: relative; border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); cursor: pointer; }
@media (min-width: 480px) { .collage-big { grid-column: span 2; } }
.collage-img { width: 100%; height: 100%; }
.collage-img img { width: 100%; height: 100%; object-fit: cover; }
.collage-badge {
  position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; color: var(--bp-cyan);
  border: 1px dashed var(--bp-cyan); padding: 2px 7px; border-radius: 3px; background: rgba(6,20,40,.6);
}
.collage-nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(6,20,40,.92));
}
.collage-nm-sm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px;
  font-size: 9px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(transparent, rgba(6,20,40,.92));
}

/* 5. adv-sec — two offset horizontal-scroll rows, non-overlapping */
.adv-rows { display: flex; flex-direction: column; gap: 18px; padding: 0 16px; }
.adv-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.adv-row2 { margin-left: 28px; }
.advcard { flex-shrink: 0; width: 96px; cursor: pointer; }
.advcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); aspect-ratio: 1/1; }
.advcard-img img { width: 100%; height: 100%; object-fit: cover; }
.advcard-nm { margin-top: 5px; font-size: 11px; text-align: center; color: var(--bp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 6. racing-sec — 4-col grid, 4:3 image ratio */
.racing-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 8px; padding: 0 16px; }
.rgcard { cursor: pointer; min-width: 0; }
.rgcard-img { border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); aspect-ratio: 4/3; }
.rgcard-img img { width: 100%; height: 100%; object-fit: cover; }
.rgcard-nm { margin-top: 5px; font-size: 10px; text-align: center; color: var(--bp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 7. girl-sec — circular colored numbered badge list */
.badge-list { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.bitem { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 8px; border: 1px dashed var(--bp-line); border-radius: 4px; }
.bnum {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #062240;
}
.bnum.bn-1 { background: var(--bp-cyan); }
.bnum.bn-2 { background: var(--bp-amber); }
.bnum.bn-3 { background: #ff8fb1; }
.bnum.bn-4 { background: #b39dff; }
.bthumb { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--bp-line); }
.bname { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 8. arcade-sec — tag-cloud cards, flex-wrap, uniform-ish size */
.tagcloud { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 8px; }
.tccard {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px 6px 6px; border-radius: 20px; border: 1px dashed var(--bp-line);
  background: var(--bp-panel2);
}
.tccard-img { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.tccard-img img { width: 100%; height: 100%; object-fit: cover; }
.tccard-nm { font-size: 11px; color: var(--bp-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }

/* 9. hot-sec — Bento grid: 1 big + 3 small fixed template */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 90px);
  gap: 10px;
  padding: 0 16px 10px;
}
.bento-big { grid-column: 1 / 3; grid-row: 1 / 3; position: relative; border-radius: 5px; overflow: hidden; border: 1px solid var(--bp-cyan); cursor: pointer; }
.bento-sm { grid-column: 3; position: relative; border-radius: 4px; overflow: hidden; border: 1px dashed var(--bp-line); cursor: pointer; }
.bento-img { width: 100%; height: 100%; }
.bento-img img { width: 100%; height: 100%; object-fit: cover; }
.bento-badge {
  position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; color: var(--bp-amber);
  border: 1px dashed var(--bp-amber); padding: 2px 6px; border-radius: 3px; background: rgba(6,20,40,.6);
}
.bento-nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(6,20,40,.92));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bento-sm .bento-nm { font-size: 10px; padding: 4px 6px; }

/* 10. text-showcase-sec — index / catalog list w/ dotted leader */
.idx-list { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; margin: 0 16px; background: var(--bp-panel); border: 1px dashed var(--bp-cyan); border-radius: 4px; }
.idx-item { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 7px 2px; }
.idx-no { font-size: 11px; color: var(--bp-amber); font-weight: 700; flex-shrink: 0; }
.idx-nm { font-size: 13px; color: var(--bp-white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.idx-dots { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--bp-line); margin-bottom: 3px; }
.idx-cat { font-size: 10px; color: var(--bp-cyan); flex-shrink: 0; }

/* 11. newdraft-sec — kanban-style grouped columns */
.kanban-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; align-items: start; }
.kanban-col { border: 1px dashed var(--bp-line); border-radius: 4px; padding: 8px; min-width: 0; }
.kanban-col-hd { font-size: 10px; font-weight: 700; color: var(--bp-cyan); letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; }
.kanban-item { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 0; border-bottom: 1px dashed var(--bp-line-soft); }
.kanban-item:last-child { border-bottom: none; }
.kanban-thumb { width: 26px; height: 26px; border-radius: 3px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--bp-line); }
.kanban-nm { font-size: 9px; color: var(--bp-dim); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 12. eng-sec — projected card grid, 3-col, soft shadow, hover deepens */
.eng-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px; }
.eng-card {
  min-width: 0;
  cursor: pointer; padding: 8px; border-radius: 6px; background: var(--bp-panel);
  border: 1px solid var(--bp-line-soft);
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  transition: box-shadow .15s ease;
}
.eng-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.eng-card-img { border-radius: 4px; overflow: hidden; aspect-ratio: 1/1; border: 1px dashed var(--bp-line); }
.eng-card-img img { width: 100%; height: 100%; object-fit: cover; }
.eng-card-nm { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--bp-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-card-desc { margin-top: 2px; font-size: 9px; color: var(--bp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-card-tag { display: inline-block; margin-top: 5px; font-size: 9px; color: var(--bp-amber); border: 1px dashed var(--bp-amber); padding: 1px 6px; border-radius: 3px; }