/*
Theme Name: MyTheme
Author: You
Version: 1.0
*/

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Header */
.site-header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
}

/* 상단 컨테이너: 관리자/로그인 영역 */
.header-top {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f5f5f5;
  padding: 5px 15px;
}
.header-top a {
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  padding: 3px 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #fff;
}

/* 하단 컨테이너: 로고 + 게시판 메뉴 */
.header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ddd;
  padding: 10px 15px;
}
.site-title { margin: 0; font-size: 1.5rem; }
.site-title a, .site-logo-link {
  text-decoration: none; /* 밑줄 제거 */
  color: inherit;        /* 부모 색상 상속 */
}

/* 본문 & 푸터 */
.site-main {
  padding: 20px;
  min-height: 50vh;
  background: #fff;
}
.site-footer {
  border-top: 1px solid #eee;
  padding: 20px 15px;
  color: #666;
  font-size: 0.9rem;
}

/* 캐러셀 배경 이미지 모드(배경으로 꽉 차게) */
.home-hero .carousel,
.home-hero .carousel-inner,
.home-hero .carousel-item { min-height: 420px; }

.home-hero .carousel-item {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* XL (≥1200px) - 조금 더 크게 */
@media (min-width: 1200px) {
  .home-hero .carousel,
  .home-hero .carousel-inner,
  .home-hero .carousel-item { min-height: 520px; }
}

/* SM (<768px) - 모바일에서 너무 크지 않게 */
@media (max-width: 767.98px) {
  .home-hero .carousel,
  .home-hero .carousel-inner,
  .home-hero .carousel-item { min-height: 300px; }
}

/* 토글 버튼 아이콘이 보이도록 색상 스킴 지정 (navbar-light 가정) */
.header-bottom.navbar.navbar-light .navbar-toggler { border-color: rgba(0,0,0,.1); }
.header-bottom.navbar.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* 게시판 메뉴 버튼 간격 & 패딩 */
.header-bottom .navbar-nav .menu-item a {
  padding: .5rem 1rem;      /* 버튼 내부 여백 */
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

/* PC(가로배치)에서 항목 사이 간격 */
@media (min-width: 480px) {
  .header-bottom .navbar-nav .menu-item + .menu-item a {
    margin-left: 2px;       /* 항목 간 좌우 간격 */
  }
}

/* 모바일(세로배치)에서 항목 사이 간격 */
@media (max-width: 760px) {
  .header-bottom .navbar-nav .menu-item a { display: block; }
  .header-bottom .navbar-nav .menu-item + .menu-item a {
    margin-top: 1px;        /* 항목 간 상하 간격 */
  }
}

/* 호버 효과(선택) */
.header-bottom .navbar-nav .menu-item a:hover {
  background: #bbb;
}

.board-header { margin: 0 0 10px; }
.board-title  { margin: 0; font-size: 1.25rem; font-weight: 600; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid #eee; color: #666; font-size: 0.95rem; }

/* 상단 3컬럼 */
.top-footer {
  display: flex; gap: 24px; padding: 24px 15px; align-items: flex-start;
  flex-wrap: wrap; /* 좁을 때 줄바꿈 */
}
.top-footer .col { flex: 1 1 240px; min-width: 200px; }

.footer-section-title { font-weight: 600; margin-bottom: 10px; color: #333; }

/* 1) 로고 + 아이콘 수직 */
.footer-brand { font-weight: 700; text-decoration: none; color: inherit; font-size: 1.1rem; }
.quick-icons { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.qi { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid #ccc; border-radius: 8px; background: #fff; text-decoration: none; font-size: 1.1rem; }
.qi:hover { background: #f2f2f2; }

/* 2) 게시판 메뉴 (board_menu) */
.footer-board-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-board-menu a { text-decoration: none; color: #333; padding: 4px 0; }
.footer-board-menu a:hover { text-decoration: underline; }

/* 3) 제목글 3개 + 아이콘 → 메뉴 3개를 수직으로 */
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-links a { text-decoration: none; color: #333; padding: 4px 0; position: relative; }
/* 우측에 외부링크 화살표 느낌 아이콘 */
.footer-links a:hover { text-decoration: underline; }

@media (min-width: 992px) {
  .top-footer { flex-wrap: nowrap; }
  .top-footer .logo-col  { flex: 0 1 25%; max-width: 25%; }
  .top-footer .menu-col  { flex: 0 1 20%; max-width: 20%; }
  .top-footer .links-col { flex: 0 1 55%; max-width: 55%; }
  .top-footer .col { min-width: 0; }
}

/* 하단 카피라이트 */
.bottom-footer { border-top: 1px solid #eee; padding: 14px 15px; text-align: center; background: #fafafa; }
.footer-copy { color: #888; font-size: 0.9rem; }

/* 모바일 정렬 */
@media (max-width: 767.98px) {
  .top-footer { gap: 16px; padding: 18px 12px; }
  .qi { width: 36px; height: 36px; }
}

/* 로고 아래 빠른 링크: 각 1줄씩 세로 배치 */
.quick-links { 
  display: block;         /* 혹시 flex였으면 끔 */
  margin-top: 10px;
}
.quick-links .ql {
  display: block;         /* 링크 하나 = 한 줄 */
  padding: 4px 0;
  text-decoration: none;
  color: #333;
}
.quick-links .ql + .ql {
  margin-top: 6px;        /* 링크들 사이 간격 */
}
.quick-links .ql:hover { text-decoration: underline; }

/* 연락처 리스트 */
.links-col .contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;                 /* 항목 간격 */
}
.links-col .contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;                 /* 아이콘-텍스트 간격 */
  line-height: 1.4;
}
.links-col .contact-list a {
  text-decoration: none;
  color: inherit;           /* 주변 텍스트 색상과 동일 */
}
.links-col .contact-list a:hover { text-decoration: underline; }

/* 아이콘 (유니코드) */
.links-col .ico { width: 1.2em; text-align: center; }
.links-col .ico-office::before { content: "🏢"; }
.links-col .ico-chat::before   { content: "💬"; }  /* 필요하면 ☎로 바꿔도 됩니다 */
.links-col .ico-mail::before   { content: "✉️"; }
.links-col .ico-fax::before    { content: "📠"; }

/* 모바일에서 여백 약간 늘리기 (선택) */
@media (max-width: 767.98px) {
  .links-col .contact-list { gap: 10px; }
}
