/* PC 맨 위 머리글: 전화번호 · 로고 · 공지사항 (views/parts/logoarea.ejs)
   아파트·전월세 검색(apt-search-app, rent-search-app)도 같은 모양을 쓴다 (이 파일을 메인 사이트 주소로 불러옴)
   글꼴: Pretendard (jsDelivr, 필요한 글자만 받는 dynamic-subset) */
/* 좌우 칸(전화번호·공지사항)을 같은 폭(310px)으로 맞춰 로고가 정확히 가운데, 양옆 여백도 같게 */
.tb { width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 310px 1fr 310px; align-items: center; gap: 20px; padding: 14px 0 12px;
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; box-sizing: border-box; }
.tb *, .tb *::before, .tb *::after { box-sizing: border-box; }

/* 전화번호: 둥근 알약 (누르면 전화) */
.tb-phone { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 7px 22px 7px 7px;
  border: 1px solid #e3e8ee; border-radius: 999px; background: #f7f9fc; color: #1f2d3d !important; text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(20, 43, 72, .06); transition: border-color .15s, box-shadow .15s; }
.tb-phone:hover { border-color: #1a4d8f; box-shadow: 0 3px 10px rgba(26, 77, 143, .14); }
.tb-phone-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #1a4d8f; flex: none; }
.tb-phone-ic svg { width: 21px; height: 21px; fill: #fff; }
.tb-phone-txt small { display: block; font-size: 12px; font-weight: 500; line-height: 1.2; color: #6b7785; letter-spacing: -.2px; }
.tb-phone-txt b { display: block; font-size: 25px; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; }

.tb-logo { justify-self: center; }
.tb-logo img { display: block; width: 330px; height: auto; }

/* 공지사항: 둥근 카드, 두 줄씩 보이고 5초마다 한 줄 넘김 */
.tb-notice { justify-self: stretch; overflow: hidden; border: 1px solid #e3e8ee; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 8px rgba(20, 43, 72, .06); }
.tb-notice-head { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-bottom: 1px solid #eef1f4; background: #f5f7fa;
  font-size: 14px; font-weight: 700; color: #1f2d3d; letter-spacing: -.2px; }
.tb-notice-head svg { width: 16px; height: 16px; fill: #1a4d8f; }
.tb-notice-view { height: 60px; overflow: hidden; padding: 1px 14px; }
.tb-notice .noticeContent { margin: 0; height: 29px; line-height: 29px; font-size: 14.5px; font-weight: 600; color: #333; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-notice .noticeContent::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 1px; border-radius: 50%;
  background: #1a4d8f; vertical-align: middle; }

.tb-line { width: 100%; min-width: 1270px; border-bottom: 1px solid #e5e7eb; }