/* =====================================================================
   main.css — 메인/랜딩 (비주얼 / 빠른서비스 / 공지 / 배너 / 챗봇)
   ===================================================================== */

/* 히어로 비주얼 */
.hero {
  position: relative;
  background: linear-gradient(120deg, var(--c-accent) 0%, var(--c-accent-strong) 100%);
  color: #fff; overflow: hidden;
}
.hero::after { content:""; position:absolute; right:-8rem; top:-8rem; width:38rem; height:38rem; border-radius:50%; background: rgba(255,255,255,.08); }
.hero .inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-32); padding: var(--sp-64) var(--sp-20); align-items:center; }
.hero__eyebrow { font-size: var(--fs-body-s); font-weight: 700; opacity:.9; letter-spacing:.04em; }
.hero__title { font-size: var(--fs-display-m); font-weight: 800; line-height: 1.2; margin: var(--sp-12) 0 var(--sp-16); }
.hero__desc { font-size: var(--fs-body-l); opacity:.95; }
.hero-search { margin-top: var(--sp-24); display:flex; background:#fff; border-radius: var(--radius-m); padding: var(--sp-8); box-shadow: var(--shadow-3); }
.hero-search input { flex:1; border:0; height: 5.2rem; padding: 0 var(--sp-16); font-size: var(--fs-body-m); color: var(--c-text); }
.hero-search input:focus { outline:none; }
.hero-search button { border:0; background: var(--c-accent); color:#fff; border-radius: var(--radius-s); padding: 0 var(--sp-24); font-weight:700; font-size: var(--fs-body-m); }
.hero-keywords { margin-top: var(--sp-12); font-size: var(--fs-body-s); opacity:.9; display:flex; gap: var(--sp-12); flex-wrap:wrap; }
.hero-keywords a { color:#fff; text-decoration: underline; opacity:.9; }
.hero__panel { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius: var(--radius-l); padding: var(--sp-24); }
.hero__panel h3 { font-size: var(--fs-heading-xs); margin-bottom: var(--sp-12); }
.hero__panel .mini-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-8); }
.hero__panel .mini { background: rgba(255,255,255,.14); border-radius: var(--radius-s); padding: var(--sp-12); font-size: var(--fs-body-s); font-weight:600; }
@media (max-width: 900px){ .hero .inner { grid-template-columns: 1fr; padding: var(--sp-40) var(--sp-20);} .hero__title{ font-size: var(--fs-heading-l);} }

/* 섹션 */
.section { padding: var(--sp-48) 0; }
.section__head { display:flex; align-items:flex-end; justify-content: space-between; margin-bottom: var(--sp-24); }
.section__title { font-size: var(--fs-heading-m); font-weight: 800; color: var(--c-gray-90); }
.section__more { font-size: var(--fs-body-s); color: var(--c-gray-60); }

/* 자주찾는 서비스 그리드 */
.quick-grid { display:grid; grid-template-columns: repeat(6,1fr); gap: var(--sp-12); }
@media (max-width: 900px){ .quick-grid { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 560px){ .quick-grid { grid-template-columns: repeat(2,1fr);} }
.quick {
  display:flex; flex-direction:column; align-items:center; gap: var(--sp-12); text-align:center;
  border:1px solid var(--c-gray-10); border-radius: var(--radius-l); padding: var(--sp-24) var(--sp-12); background:#fff;
}
.quick:hover { border-color: var(--c-accent); box-shadow: var(--shadow-2); text-decoration:none; transform: translateY(-2px); transition: .15s; }
.quick__ico { width: 5.6rem; height: 5.6rem; border-radius: var(--radius-l); display:grid; place-items:center; background: var(--c-primary-5); color: var(--c-accent); }
body[data-site="saebit"] .quick__ico { background: #e3f3f1; }
.quick__label { font-size: var(--fs-body-s); font-weight: 700; color: var(--c-gray-80); }

/* 공지 탭 */
.board-tabs { display:flex; gap: var(--sp-8); border-bottom: 2px solid var(--c-gray-10); margin-bottom: var(--sp-16); }
.board-tabs button { border:0; background:none; padding: var(--sp-12) var(--sp-16); font-size: var(--fs-body-m); font-weight:700; color: var(--c-gray-50); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.board-tabs button[aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.board-list li { display:flex; align-items:center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-4); border-bottom: 1px solid var(--c-gray-10); }
.board-list .badge { flex:none; font-size: var(--fs-body-xs); font-weight:700; color: var(--c-accent-strong); background: var(--c-primary-5); border-radius: var(--radius-xs); padding: 2px var(--sp-8); }
body[data-site="saebit"] .board-list .badge { background:#e3f3f1; }
.board-list .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: var(--fs-body-m); color: var(--c-gray-80); }
.board-list .d { flex:none; color: var(--c-gray-50); font-size: var(--fs-body-s); }
.board-tabs .board-more { margin-left:auto; align-self:center; font-size: var(--fs-body-s); color: var(--c-gray-50); }
.board-tabs .board-more:hover { color: var(--c-accent); }
.board-panel[hidden] { display:none; }

.cols-2 { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-40); }
@media (max-width: 900px){ .cols-2 { grid-template-columns: 1fr; gap: var(--sp-32);} }

/* 배너존 */
.banner-zone { background: var(--c-gray-5); }
.banner-row { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-12); }
@media (max-width: 900px){ .banner-row { grid-template-columns: repeat(2,1fr);} }
.banner { background:#fff; border:1px solid var(--c-gray-10); border-radius: var(--radius-m); padding: var(--sp-20); font-size: var(--fs-body-s); font-weight:600; color: var(--c-gray-70); display:flex; justify-content:space-between; align-items:center; }
.banner:hover { border-color: var(--c-accent); text-decoration:none; }

/* 챗봇 FAB */
.chatbot-fab {
  position: fixed; right: var(--sp-20); bottom: var(--sp-20); z-index: 80;
  width: 6.4rem; height: 6.4rem; border-radius: 50%; border:0; color:#fff; background: var(--c-accent);
  box-shadow: var(--shadow-3); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transition: transform .15s, background .15s;
}
.chatbot-fab__txt { font-size: 1.0rem; font-weight: 800; }
.chatbot-fab:hover { background: var(--c-accent-strong); transform: translateY(-2px); }

/* 국민비서 상담 패널 */
.chatbot-panel {
  position: fixed; right: var(--sp-20); bottom: 9.4rem; z-index: 81;
  width: 34rem; max-width: calc(100vw - 4rem); height: 48rem; max-height: calc(100vh - 14rem);
  background:#fff; border:1px solid var(--c-gray-20); border-radius: 1.6rem;
  box-shadow: var(--shadow-3); display:flex; flex-direction:column; overflow:hidden;
}
.chatbot-panel[hidden] { display:none; }
.chatbot-head { background: var(--c-accent); color:#fff; padding: 1.4rem var(--sp-16); display:flex; align-items:center; justify-content:space-between; }
.chatbot-head b { font-size: var(--fs-body-l); }
.chatbot-head small { display:block; font-size: 1.1rem; opacity:.85; font-weight:400; margin-top:2px; }
.chatbot-head button { background:none; border:0; color:#fff; font-size: 2.2rem; line-height:1; cursor:pointer; }
.chatbot-body { flex:1; overflow-y:auto; padding: var(--sp-16); background: var(--c-gray-5); display:flex; flex-direction:column; gap: var(--sp-10); }
.cbot-msg { max-width: 86%; padding: var(--sp-10) var(--sp-12); border-radius: 1.2rem; font-size: var(--fs-body-s); line-height:1.6; word-break:break-word; }
.cbot-msg.bot { background:#fff; border:1px solid var(--c-gray-10); border-top-left-radius:.3rem; align-self:flex-start; }
.cbot-msg.user { background: var(--c-accent); color:#fff; border-top-right-radius:.3rem; align-self:flex-end; }
.cbot-msg a { color: var(--c-accent); font-weight:700; }
.cbot-msg.user a { color:#fff; text-decoration:underline; }
.chatbot-chips { display:flex; flex-wrap:wrap; gap: var(--sp-6); padding: var(--sp-10) var(--sp-12); border-top:1px solid var(--c-gray-10); background:#fff; }
.chatbot-chips button { font-size: var(--fs-body-xs); padding: var(--sp-6) var(--sp-12); border:1px solid var(--c-gray-20); border-radius: var(--radius-max); background:#fff; color: var(--c-gray-70); cursor:pointer; }
.chatbot-chips button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.chatbot-input { display:flex; gap: var(--sp-6); padding: var(--sp-10) var(--sp-12); border-top:1px solid var(--c-gray-10); }
.chatbot-input input { flex:1; height: 4rem; border:1px solid var(--c-gray-30); border-radius: var(--radius-max); padding: 0 1.4rem; font-size: var(--fs-body-s); }
.chatbot-input button { width: 4rem; height: 4rem; border-radius:50%; border:0; background: var(--c-accent); color:#fff; cursor:pointer; flex:0 0 auto; }

/* 공지 팝업 레이어 */
.notice-pop { position: fixed; left: var(--sp-24); top: 22rem; z-index: 90; width: 32rem; background:#fff; border:1px solid var(--c-gray-20); border-radius: var(--radius-m); box-shadow: var(--shadow-3); overflow:hidden; }
.notice-pop__body { padding: var(--sp-20); }
.notice-pop__body h4 { font-size: var(--fs-heading-xs); margin-bottom: var(--sp-8); }
.notice-pop__body p { font-size: var(--fs-body-s); color: var(--c-gray-60); }
.notice-pop__foot { display:flex; justify-content: space-between; align-items:center; border-top:1px solid var(--c-gray-10); padding: var(--sp-8) var(--sp-16); font-size: var(--fs-body-xs); color: var(--c-gray-50); }
.notice-pop__foot button { border:0; background:none; color: var(--c-gray-60); font-size: var(--fs-body-xs); }
@media (max-width: 700px){ .notice-pop { display:none; } }