/* 🚧 공사중 표시 · 안내 — 2026-10-17 게이트 ② (설정: src/home/config/construction.js)
   카드의 글씨·아이콘만 흐리게 한다. 카드에 붙은 구매 장식(감자 친구 등)은 원래 색 그대로 둔다. */

/* 카드 표시 */
.hb-cz { position: relative; }
.hb-cz > .hb-home-card-icon, .hb-cz > .hb-home-card-name, .hb-cz > .hb-home-card-sub,
.hb-cz > .hb-game-icon, .hb-cz > .hb-game-name, .hb-cz > .hb-game-desc {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.hb-cz .hb-redDot { display: none !important; }
.hb-cz-badge {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; line-height: 22px; letter-spacing: -0.01em; white-space: nowrap;
  color: #3a2f12; background: #ffd65a; box-shadow: 0 2px 0 rgba(120, 90, 30, 0.25);
  pointer-events: none;
}
.hb-cz:has(.decor-potato) .hb-cz-badge { right: 36px; }
.hb-cz-part .hb-cz-badge { top: auto; bottom: 9px; }
/* 퀵바 · 글 단추 안의 작은 표시 */
.hb-cz-link .hb-cz-badge {
  position: static; display: inline-block; margin-left: 4px; padding: 0; line-height: 1;
  background: none; box-shadow: none; font-size: 0.95em;
}
.quickbar-item.hb-cz-link { opacity: 0.75; }

/* 팝업 · 안내 블록 */
.hb-cz-notice {
  position: relative; overflow: hidden; text-align: center;
  margin: 4px 0 8px; padding: 30px 18px 20px;
  background: var(--color-surface); border: 2px solid var(--bm-line, var(--color-border)); border-radius: 22px;
}
.hb-cz-notice--compact { padding: 24px 14px 14px; margin-top: 12px; }
.hb-cz-tape {
  position: absolute; left: -30px; right: -30px; top: 12px; height: 16px; transform: rotate(-3deg);
  background: repeating-linear-gradient(-45deg, #ffd65a 0 12px, #3a2f12 12px 24px); opacity: 0.88;
}
.hb-cz-avatar, .cz-avatar {
  display: block; width: 84px; height: 84px; margin: 14px auto 8px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--color-surface); box-shadow: 0 3px 0 rgba(120, 90, 40, 0.18);
}
.hb-cz-title, .cz-title { margin: 6px 0 6px; font-size: 19px; font-weight: 800; color: var(--ink, var(--color-text)); letter-spacing: -0.02em; }
.hb-cz-text, .cz-text { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--color-text-secondary); word-break: keep-all; }
.hb-cz-chip {
  display: inline-block; margin: 2px 0 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--olive-d, #5c6339); background: var(--olive-bg, #ecf1dd);
}
.hb-cz-btn {
  display: block; margin-top: 10px; min-height: 46px; line-height: 46px; border-radius: 14px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  color: var(--ink, var(--color-text)); background: var(--color-bg); border: 2px solid var(--bm-line, var(--color-border));
}

/* construction.html */
.cz-main { max-width: 440px; margin: 0 auto; padding: 18px 16px 40px; }
.cz-card {
  position: relative; overflow: hidden; text-align: center; padding: 34px 20px 22px;
  background: var(--color-surface); border: 2px solid var(--bm-line, var(--color-border)); border-radius: 24px;
  box-shadow: var(--sh-strong, 0 4px 0 rgba(160, 130, 70, 0.13));
}
.cz-card .hb-cz-tape { top: 18px; height: 22px; transform: rotate(-4deg); }
.cz-avatar { width: 104px; height: 104px; margin-top: 36px; }
.cz-btns { display: grid; gap: 10px; margin-top: 14px; }
.cz-btn {
  display: block; min-height: 50px; line-height: 50px; border-radius: 14px;
  font-size: 15.5px; font-weight: 800; text-decoration: none;
}
.cz-btn--main { color: #fff; background: var(--olive, #7a8450); box-shadow: 0 4px 0 var(--olive-d, #5c6339); }
.cz-btn--sub { color: var(--ink, var(--color-text)); background: var(--color-bg); border: 2px solid var(--bm-line, var(--color-border)); }
[data-theme="dark"] .cz-btn--main { color: #1f1a10; }
@media (prefers-reduced-motion: no-preference) {
  .cz-avatar { animation: czBob 3.2s ease-in-out infinite; }
  @keyframes czBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}