/* Hanok Brain widget — 다크+앰버. 사이트 전역을 오염하지 않도록 전부 .hb 스코프 */
/* geo-app nav-hub 섹션 배치 래퍼: 데스크톱 좌측 오버레이, 모바일은 flex 흐름 맨 아래 */
.hanok-brain-slot { position: absolute; left: 4vw; top: 50%; transform: translateY(-50%);
  width: min(480px, 36vw); z-index: 6; }
@media (max-width: 1023px) {
  .hanok-brain-slot { position: static; transform: none; width: min(560px, 92vw);
    margin: 28px auto 0; order: 99; }
}
.hb { position: relative; max-width: 560px; min-height: 300px;
      font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif; }
.hb-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-bar { position: relative; z-index: 2; display: flex; gap: 10px; }
.hb-input { flex: 1; padding: 13px 18px; font-size: 15px; color: #f5ecdd;
  background: rgba(28, 29, 33, .55); border: 1px solid rgba(255, 240, 220, .16);
  border-radius: 999px; outline: none; backdrop-filter: blur(6px); }
.hb-input::placeholder { color: #c7b89f; opacity: .75; }
.hb-input:focus { border-color: rgba(232, 161, 107, .65);
  box-shadow: 0 0 0 3px rgba(232, 161, 107, .15); }
.hb-send { padding: 0 22px; font-size: 15px; color: #e8a16b; cursor: pointer;
  background: rgba(232, 161, 107, .15); border: 1px solid rgba(232, 161, 107, .5);
  border-radius: 999px; }
.hb-send:hover { color: #f5b47c; border-color: #f5b47c; }
.hb-send:disabled { opacity: .5; cursor: default; }
.hb-card { position: relative; z-index: 2; margin-top: 14px; padding: 18px 20px;
  max-height: min(48vh, 380px); overflow-y: auto; color: #f5ecdd;
  background: rgba(28, 29, 33, .82); border: 1px solid rgba(255, 240, 220, .12);
  border-radius: 14px; backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.hb-card-label { font-size: 12px; letter-spacing: .12em; color: #c7b89f; }
.hb-card-q { margin: 4px 0 12px; font-size: 17px; font-weight: 700; color: #f7f8f8; }
.hb-card-a { font-size: 14.5px; line-height: 1.75; }
.hb-card-a p { margin: 0 0 10px; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hb-chip { padding: 5px 12px; font-size: 12.5px; color: #e8a16b; cursor: pointer;
  background: rgba(232, 161, 107, .12); border: 1px solid rgba(232, 161, 107, .4);
  border-radius: 999px; }
.hb-chip:hover { color: #08090a; background: #e8a16b; text-shadow: none; }
.hb-close { position: absolute; top: 10px; right: 14px; font-size: 16px;
  color: #c7b89f; cursor: pointer; background: none; border: none; }
.hb-close:hover { color: #f5ecdd; }
.hb-err { color: #e07b7b; }
.hb-link { color: #e8a16b; text-decoration: underline; word-break: break-all; }
.hb-link:hover { color: #f5b47c; }
.hb-pop { position: absolute; z-index: 3; max-width: 260px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.6; color: #f5ecdd;
  background: rgba(28, 29, 33, .94); border: 1px solid rgba(232, 161, 107, .4);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.hb-pop-title { font-weight: 700; color: #f5b47c; margin-bottom: 4px; }
@media (max-width: 767px) {
  .hb { max-width: 100%; min-height: 220px; }
  .hb-card { max-height: 46vh; }
}