@charset "utf-8";

/*
 * 공개 사이트 스타일. head.sub.php가 body.wb-site일 때만 불러온다(head.php 공개 셸을 그리는 화면).
 * 모든 선택자는 .wb-site로 시작한다. 키프레임 이름은 wb-site-로 시작한다(tools/uat/check.site-static.js가 검사).
 * 기존 style.css·default.css는 고치지 않고 이 범위에서 덮는다. 토큰은 css/wb-tokens.css.
 */

/* ── 공통: 폭·여백(540 / 860 / 1440), 숨김 글, 아이콘 ── */
.wb-site {
  --wb-site-gutter: 16px;
  --wb-site-width: min(calc(100% - 2 * var(--wb-site-gutter)), 1328px);
  --wb-site-header-h: 56px;
}
@media (min-width: 540px) {
  .wb-site { --wb-site-gutter: 64px; }
}
@media (min-width: 860px) {
  .wb-site { --wb-site-gutter: 56px; --wb-site-header-h: 64px; }
}
@media (min-width: 1440px) {
  .wb-site { --wb-site-width: min(90%, 1328px); }
}
/* 화면에서 감추고 읽기 도구에만 둔다. 스킨이 그리는 감춘 제목(게시판 분류 h2, 갤러리 검색 legend, 보기의 글·첨부·링크 제목, 댓글 h2,
   메일 인증 표 caption)도 같이 감춘다. */
.wb-site .wb-sr,
.wb-site #bo_cate h2,
.wb-site .wb-board--search legend,
.wb-site .wb-board--view :is(#bo_v_atc_title, #bo_v_file h2, #bo_v_link h2),
.wb-site .wb-board--view #bo_vc > h2,
.wb-site form[name="fregister_email"] .rg_em caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.wb-site .wb-icon {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
}

/* ── 셸 조각 바탕: 옛 요소 규칙(a 12px, p break-all, h2 17px, button 여백)을 덮는다. 점수 낮은 :where로 둔다. ── */
.wb-site :where(.wb-promo, .wb-site-header, .wb-drawer, .wb-site-footer, .wb-float) {
  font-family: var(--wb-font-body);
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: var(--wb-c-text);
}
.wb-site :where(.wb-promo, .wb-site-header, .wb-drawer, .wb-site-footer, .wb-float) :where(a, button, input, p, h2, dt, dd) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(.wb-promo, .wb-site-header, .wb-drawer, .wb-site-footer, .wb-float) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* 초점 표시: 3px 점선, 마우스로 눌러도 남는다(참고 방식). */
.wb-site :where(.wb-promo, .wb-site-header, .wb-drawer, .wb-site-footer, .wb-float) :where(a, button, input):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}

/* ── 홍보 띠(남색): 공지사항 최신 글이 30일 안일 때만 서버가 그린다 ── */
.wb-site .wb-promo {
  position: relative;
  padding: 10px 52px;
  background: var(--wb-c-navy-hover);
  color: var(--wb-c-on-navy);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.wb-site .wb-promo[hidden],
.wb-site .wb-promo__close[hidden] {
  display: none;
}
.wb-site .wb-promo__text {
  margin: 0;
}
.wb-site .wb-promo__date {
  margin: 0 8px;
  color: var(--wb-c-divider);
  font-size: 14px;
}
.wb-site .wb-promo__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.wb-site .wb-promo__link:hover {
  color: #fff;
}
.wb-site .wb-promo__close {
  position: absolute;
  top: 0;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wb-r-s);
  color: var(--wb-c-divider);
}
.wb-site .wb-promo__close:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* ── 머리글(#header 하나). 회원 스킨의 body.wb-member-page #header{max-width:960px}도 덮는다. ── */
.wb-site #header.wb-site-header {
  position: relative;
  z-index: 1000;
  width: auto;
  max-width: none;
  margin: 0;
  background: var(--wb-c-surface);
  border-bottom: 1px solid var(--wb-c-fill);
  font-size: 16px;
  line-height: 24px;
}
.wb-site .wb-site-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--wb-site-width);
  height: var(--wb-site-header-h);
  margin: 0 auto;
}
/* 로고 링크: 그림(36·40px)보다 높게 잡아 누르는 칸을 44px 이상으로 둔다. */
.wb-site .wb-site-header__logo {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}
.wb-site .wb-site-header__logo img {
  display: block;
  width: auto;
  height: 36px;
}
.wb-site .wb-site-header__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}
.wb-site .wb-search-toggle,
.wb-site .wb-menu-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wb-r-s);
  color: var(--wb-c-navy-pressed);
}
.wb-site .wb-search-toggle:hover,
.wb-site .wb-menu-button:hover,
.wb-site .wb-search-toggle[aria-expanded="true"] {
  background: var(--wb-c-fill);
}
.wb-site .wb-site-header__tools .wb-account {
  display: none;
}
.wb-site .wb-site-header__tools .wb-account a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--wb-r-s);
  color: var(--wb-c-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.wb-site .wb-site-header__tools .wb-account a:hover {
  background: var(--wb-c-fill);
  color: var(--wb-c-text-strong);
}
/* JS가 없으면 검색 폼은 펼쳐 두고, 동작하지 않는 버튼은 숨기며, 폰에서도 계정 링크를 머리글에 둔다. */
.wb-site:not(.wb-js) .wb-search-toggle,
.wb-site:not(.wb-js) .wb-menu-button {
  display: none;
}
.wb-site:not(.wb-js) .wb-site-header__tools .wb-account {
  display: flex;
}

/* 주 메뉴(860 이상). 드롭다운은 버튼의 aria-expanded로 연다. */
.wb-site .wb-gnb {
  display: none;
}
.wb-site .wb-gnb__panel {
  display: none;
}
@media (min-width: 860px) {
  .wb-site .wb-site-header__logo {
    margin-right: 0;
  }
  .wb-site .wb-site-header__logo img {
    height: 40px;
  }
  .wb-site .wb-gnb {
    display: block;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
  }
  .wb-site .wb-gnb__list {
    display: flex;
    justify-content: center;
    height: 100%;
  }
  .wb-site .wb-gnb__item {
    position: relative;
    display: flex;
  }
  .wb-site .wb-gnb__button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    color: #262626;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    white-space: nowrap;
    transition: background-color var(--wb-dur-indicator) ease;
  }
  .wb-site .wb-gnb__button:hover,
  .wb-site .wb-gnb__button[aria-expanded="true"] {
    background: var(--wb-c-footer);
  }
  .wb-site .wb-gnb__chevron {
    width: 16px;
    height: 16px;
    transition: transform var(--wb-dur-indicator) ease;
  }
  .wb-site .wb-gnb__button[aria-expanded="true"] .wb-gnb__chevron {
    transform: rotate(180deg);
  }
  .wb-site .wb-gnb__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 8px 0;
    border-radius: 0 0 var(--wb-r-s) var(--wb-r-s);
    background: var(--wb-c-surface);
    box-shadow: var(--wb-depth-16);
  }
  .wb-site .wb-gnb__item:nth-last-child(-n+2) > .wb-gnb__panel {
    right: 0;
    left: auto;
  }
  .wb-site .wb-gnb__button[aria-expanded="true"] + .wb-gnb__panel,
  .wb-site:not(.wb-js) .wb-gnb__item:hover > .wb-gnb__panel,
  .wb-site:not(.wb-js) .wb-gnb__item:focus-within > .wb-gnb__panel {
    display: block;
  }
  .wb-site .wb-gnb__panel a {
    display: block;
    padding: 11px 20px; /* 22 + 11·2 = 44px 누르는 칸 */
    color: var(--wb-c-text);
    font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
  }
  .wb-site .wb-gnb__panel a:hover {
    background: var(--wb-c-tint);
    color: var(--wb-c-text-strong);
  }
  .wb-site .wb-site-header__tools .wb-account {
    display: flex;
  }
  .wb-site .wb-menu-button {
    display: none;
  }
}
/* 860~1279: 최고관리자의 계정 링크 4개까지 한 줄에 들어가도록 줄인다. 그래도 모자라면 띄어쓴 대메뉴 이름이 두 줄이 된다. */
@media (min-width: 860px) and (max-width: 1279.98px) {
  .wb-site .wb-site-header__bar {
    gap: 4px;
  }
  .wb-site .wb-site-header__logo img {
    height: 36px;
  }
  .wb-site .wb-gnb__button {
    padding: 0 6px;
    font-size: 14px;
    line-height: 18px;
    white-space: normal;
    text-align: center;
  }
  .wb-site .wb-gnb__chevron {
    display: none;
  }
  .wb-site .wb-site-header__tools {
    gap: 0;
  }
  .wb-site .wb-site-header__tools .wb-account a {
    padding: 0 4px;
    font-size: 13px;
  }
}

/* 검색: 머리글 아래 한 줄. JS가 있으면 검색 버튼으로 펼친다. */
.wb-site .wb-search-panel {
  border-top: 1px solid var(--wb-c-fill);
}
.wb-site.wb-js .wb-search-panel:not(.is-open) {
  display: none;
}
.wb-site .wb-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: var(--wb-site-width);
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 0;
}
.wb-site .wb-search__input {
  flex: 1 1 200px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 2px solid var(--wb-c-divider);
  border-radius: var(--wb-r-s);
  background: #fff;
  color: var(--wb-c-text-strong);
  font-size: 16px;
  line-height: 24px;
  appearance: none;
}
.wb-site .wb-search__input:focus {
  border-color: var(--wb-c-navy);
}
.wb-site .wb-search__input[aria-invalid="true"] {
  border-color: #a4262c;
}
.wb-site .wb-search__submit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wb-r-s);
  background: var(--wb-c-navy);
  color: #fff;
}
.wb-site .wb-search__submit:hover {
  background: var(--wb-c-navy-hover);
}
.wb-site .wb-search__message {
  flex-basis: 100%;
  margin: 0;
  color: #a4262c;
  font-size: 14px;
  line-height: 20px;
}
.wb-site .wb-search__message:empty {
  display: none;
}

/* ── 폰 서랍: 오른쪽에서 여는 대화상자. 대메뉴는 아코디언(350ms). ── */
.wb-site .wb-drawer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  justify-content: flex-end;
  background: rgba(9, 31, 44, .45);
}
.wb-site .wb-drawer[hidden] {
  display: none;
}
.wb-site.wb-drawer-open {
  overflow: hidden;
}
.wb-site .wb-drawer__panel {
  display: flex;
  flex-direction: column;
  width: min(360px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-64);
  font-size: 16px;
  line-height: 24px;
}
.wb-site .wb-drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--wb-c-fill);
}
.wb-site .wb-drawer__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.wb-site .wb-drawer__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wb-r-s);
  color: var(--wb-c-navy-pressed);
}
.wb-site .wb-drawer__close:hover {
  background: var(--wb-c-fill);
}
.wb-site .wb-drawer__list > li {
  border-bottom: 1px solid var(--wb-c-fill);
}
.wb-site .wb-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  color: var(--wb-c-text-strong);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}
.wb-site .wb-drawer__toggle .wb-icon {
  transition: transform var(--wb-dur-chevron) ease;
}
.wb-site .wb-drawer__toggle[aria-expanded="true"] .wb-icon {
  transform: rotate(180deg);
}
.wb-site .wb-drawer__items {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--wb-dur-faq) ease, visibility var(--wb-dur-faq);
}
.wb-site .wb-drawer__toggle[aria-expanded="true"] + .wb-drawer__items {
  grid-template-rows: 1fr;
  visibility: visible;
}
.wb-site .wb-drawer__items > ul {
  min-height: 0;
  overflow: hidden;
}
.wb-site .wb-drawer__items a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  color: var(--wb-c-text);
  font-size: 15px;
  line-height: 22px;
}
.wb-site .wb-drawer__items li:last-child a {
  margin-bottom: 8px;
}
.wb-site .wb-drawer__items a:hover {
  background: var(--wb-c-tint);
  color: var(--wb-c-text-strong);
}
.wb-site .wb-drawer__account {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 16px;
}
.wb-site .wb-drawer__account a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--wb-c-navy);
  border-radius: var(--wb-r-s);
  color: var(--wb-c-navy-pressed);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.wb-site .wb-drawer__account a:hover {
  background: var(--wb-c-fill);
}

/* ── 바닥글(옅은 회색): 메뉴 열(폰 2, JS가 있으면 폰은 1열 아코디언, 860 이상 4, 1440 이상 7)과 아래 줄 ── */
.wb-site .wb-site-footer {
  margin-top: 24px;
  padding: 32px 0 96px;
  background: var(--wb-c-footer);
  color: var(--wb-c-muted);
  font-size: 13px;
  line-height: 20px;
}
.wb-site .wb-site-footer__inner {
  width: var(--wb-site-width);
  margin: 0 auto;
}
.wb-site .wb-site-footer__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}
.wb-site .wb-site-footer__heading {
  margin: 0 0 4px;
  color: #262626;
  font-family: var(--wb-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.wb-site .wb-site-footer__menu a {
  display: inline-block;
  padding: 6px 0;
  color: var(--wb-c-muted);
}
/* 폰 아코디언: 860 미만이면 JS가 섹션 이름을 버튼으로 감싼다. 목록은 hidden으로 접고 화살표만 돈다(참고 사이트의 폰 메뉴 방식).
   h2에 바로 든 화살표(JS 없음, 860 이상)는 숨긴다. 버튼이 있을 때는 한 줄에 한 섹션이고 섹션마다 아래에 줄을 긋는다.
   마지막 섹션의 줄이 아래 줄(회사 정보)의 윗줄을 대신한다. */
.wb-site .wb-site-footer__heading > .wb-icon,
.wb-site .wb-site-footer__menu ul[hidden] {
  display: none;
}
.wb-site .wb-site-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  text-align: left;
}
.wb-site .wb-site-footer__toggle .wb-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--wb-dur-chevron) ease;
}
.wb-site .wb-site-footer__toggle[aria-expanded="true"] .wb-icon {
  transform: rotate(180deg);
}
@media (max-width: 859.98px) {
  .wb-site.wb-js .wb-site-footer__menu {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .wb-site.wb-js .wb-site-footer__section {
    border-bottom: 1px solid var(--wb-c-divider);
  }
  .wb-site.wb-js .wb-site-footer__heading {
    margin: 0;
  }
  .wb-site.wb-js .wb-site-footer__menu ul {
    padding-bottom: 12px;
  }
  .wb-site.wb-js .wb-site-footer__bottom {
    margin-top: 0;
    border-top: 0;
  }
}
.wb-site .wb-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--wb-c-divider);
}
.wb-site .wb-site-footer__company {
  flex: 1 1 100%;
  margin: 0;
}
.wb-site .wb-site-footer__company > span {
  display: block;
}
@media (min-width: 860px) {
  .wb-site .wb-site-footer__company > span {
    display: inline-block;
  }
  .wb-site .wb-site-footer__company > span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 10px;
    background: var(--wb-c-divider);
  }
}
.wb-site .wb-site-footer__bottom a {
  color: var(--wb-c-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-site-footer a:hover {
  color: var(--wb-c-text-strong);
  text-decoration: underline;
}
.wb-site .wb-site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.wb-site .wb-site-footer__copyright {
  margin: 0;
}
@media (min-width: 860px) {
  .wb-site .wb-site-footer {
    margin-top: 48px;
    padding-top: 36px;
  }
  .wb-site .wb-site-footer__menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-site-footer__menu {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* ── 떠 있는 버튼('위탁운영 문의')과 맨 위로: 오른쪽 아래, 스크롤 등장 효과보다 위(z 1040) ──
   JS가 있으면(.wb-js) 첫 화면에서는 숨는다. 메인은 히어로를 지나야, 폰의 맨 위로는 한 화면 넘게 내려야 wb-site.js가 .is-shown을 단다.
   상자(.wb-float)는 누름을 받지 않아 숨은 둘의 자리 밑(섹션 바, 로그인 카드)을 그대로 누를 수 있다. 나타나고 사라질 때 125ms 페이드.
   JS가 없으면 칩은 없고(패널을 열 수 없다) 맨 위로는 860 이상에서만 늘 있다(#wrap으로 가는 링크). 860 미만은 히어로가 길어
   맨 위로가 첫 화면부터 로그인 카드 위에 떠 있게 되므로 없다. */
.wb-site .wb-float {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1040;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
  pointer-events: none;
}
.wb-site .wb-to-top,
.wb-site .wb-float__contact {
  pointer-events: auto;
  transition: opacity var(--wb-dur-pill) ease-in-out, visibility var(--wb-dur-pill);
}
.wb-site.wb-js .wb-to-top:not(.is-shown),
.wb-site.wb-js .wb-float__contact:not(.is-shown) {
  visibility: hidden;
  opacity: 0;
}
.wb-site .wb-to-top {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--wb-c-navy);
  border-radius: 50%;
  background: var(--wb-c-surface);
  color: var(--wb-c-navy-pressed);
  box-shadow: var(--wb-depth-8);
}
.wb-site .wb-to-top:hover {
  background: var(--wb-c-tint);
}
.wb-site .wb-float__contact {
  position: relative;
}
.wb-site:not(.wb-js) .wb-float__contact {
  display: none;
}
@media (max-width: 859.98px) {
  .wb-site:not(.wb-js) .wb-to-top {
    display: none;
  }
}
.wb-site .wb-float__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--wb-c-border-soft);
  border-radius: var(--wb-r-s);
  background: var(--wb-c-tint);
  box-shadow: var(--wb-depth-16);
  color: var(--wb-c-navy-pressed);
  font-weight: 600;
  white-space: nowrap;
}
.wb-site .wb-float__toggle:hover,
.wb-site .wb-float__toggle[aria-expanded="true"] {
  background: var(--wb-c-tint-2);
}
.wb-site .wb-float__icon {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: var(--wb-r-s);
  background: var(--wb-c-navy);
  color: #fff;
}
.wb-site .wb-float__panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--wb-c-border-card);
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-16);
}
.wb-site .wb-float__toggle[aria-expanded="true"] + .wb-float__panel {
  display: block;
}
.wb-site .wb-float__title {
  margin: 0 0 12px;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.wb-site .wb-float__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 16px;
}
.wb-site .wb-float__list dt {
  grid-column: 1;
  color: var(--wb-c-muted);
  font-size: 14px;
}
.wb-site .wb-float__list dd {
  grid-column: 2;
  margin: 0;
}
.wb-site .wb-float__list a {
  color: var(--wb-c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-float__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--wb-r-s);
  background: var(--wb-c-navy);
  color: #fff;
  font-weight: 600;
}
.wb-site .wb-float__cta:hover {
  background: var(--wb-c-navy-hover);
  color: #fff;
}
@media (min-width: 860px) {
  .wb-site .wb-float {
    right: 16px;
    bottom: 16px;
  }
  .wb-site .wb-float__toggle {
    gap: 12px;
    padding: 16px;
  }
}

/* ── 컴포넌트(탭, 아코디언, 캐러셀, 섹션 바, 카드, 버튼, 등장 효과). 마크업 본보기: tools/uat/fixtures/site-components.html.
   동작과 상태(aria-*, hidden, .is-in·.is-stuck, body.wb-motion)는 js/wb-site.js가 정하고 모양은 여기서 상태 선택자로 정한다.
   서버 마크업은 JS 없이 모두 보이는 상태다. 닫힌 모양은 JS가 단 aria-expanded="false"로만 그린다. ── */

/* 바탕: 옛 요소 규칙(a 12px, p break-all, h2·h3 17px, button 여백)을 덮는다. 점수 낮은 :where로 둔다. */
.wb-site :where(.wb-tabs, .wb-accordion, .wb-carousel, .wb-section-nav, .wb-card) {
  font-family: var(--wb-font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: var(--wb-c-text);
}
.wb-site :where(.wb-tabs, .wb-accordion, .wb-carousel, .wb-section-nav, .wb-card) :where(a, button, p, h2, h3, li) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(.wb-tabs, .wb-accordion, .wb-carousel, .wb-section-nav) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* 초점 표시: 셸과 같은 3px 점선. 흰 글자인 고른 탭과 기본 버튼은 남색 점선이다. */
.wb-site :where(.wb-tabs, .wb-accordion, .wb-carousel, .wb-section-nav, .wb-card) :where(a, button, [tabindex]):focus,
.wb-site :where(a.wb-card, .wb-btn):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
.wb-site .wb-tabs__tab[aria-selected="true"]:focus,
.wb-site .wb-btn:not(.wb-btn--secondary):focus {
  outline-color: var(--wb-c-navy-pressed);
}

/* 버튼: 기본(남색)과 보조(외곽선), 높이 52px·작은 36px. 꺼진 것은 opacity .2. */
.wb-site .wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--wb-c-navy);
  border-radius: var(--wb-r-s);
  background: var(--wb-c-navy);
  color: #fff;
  font-family: var(--wb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wb-dur-pill) ease-in-out, border-color var(--wb-dur-pill) ease-in-out,
    color var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-btn:hover {
  border-color: var(--wb-c-navy-hover);
  background: var(--wb-c-navy-hover);
  color: #fff;
}
.wb-site .wb-btn:active {
  border-color: var(--wb-c-navy-pressed);
  background: var(--wb-c-navy-pressed);
}
.wb-site .wb-btn--secondary {
  background: transparent;
  color: var(--wb-c-navy-pressed);
}
.wb-site .wb-btn--secondary:hover,
.wb-site .wb-btn--secondary:active {
  background: var(--wb-c-fill);
  color: var(--wb-c-navy-pressed);
}
.wb-site .wb-btn--sm {
  min-height: 36px;
  padding: 4px 12px;
}
.wb-site .wb-btn:disabled {
  opacity: .2;
  cursor: default;
}

/* 탭(알약): JS가 role·aria-selected를 달고 고른 탭의 패널만 남긴다(125ms, 패널 150ms linear).
   JS가 없으면 탭 줄은 hidden 그대로이고 패널이 모두 보인다. 줄이 넘치면 다음 줄로 내려간다(넘김 화살표 없음). */
.wb-site .wb-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wb-site .wb-tabs__list[hidden] {
  display: none;
}
.wb-site .wb-tabs__tab {
  flex: none;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-fill);
  color: var(--wb-c-navy-pressed);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  transition: background-color var(--wb-dur-pill) ease-in-out, color var(--wb-dur-pill) ease-in-out,
    outline-offset var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-tabs__tab:hover {
  background: var(--wb-c-fill-hover);
}
.wb-site .wb-tabs__tab:active {
  background: #5a6972;
  color: #fff;
}
.wb-site .wb-tabs__tab[aria-selected="true"] {
  background: var(--wb-c-navy-selected);
  color: #fff;
}
.wb-site .wb-tabs__panel {
  margin-top: 24px;
}
@media (min-width: 860px) {
  .wb-site .wb-tabs__tab {
    padding: 8px 24px;
  }
  .wb-site .wb-tabs__panel {
    margin-top: 32px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-tabs__panel[role="tabpanel"] {
    animation: wb-site-fade var(--wb-dur-panel) linear;
  }
}

/* 사진이 없을 때의 면 구성: 파스텔 바탕 위에 청록 판과 흰 카드를 겹친다(그림·글 없음). */
.wb-site .wb-media-fallback {
  position: relative;
  overflow: hidden;
  background: var(--wb-g-lavender-mint);
}
.wb-site .wb-media-fallback::before,
.wb-site .wb-media-fallback::after {
  content: "";
  position: absolute;
}
.wb-site .wb-media-fallback::before {
  bottom: -12%;
  left: 10%;
  width: 56%;
  height: 62%;
  border-radius: var(--wb-r-l);
  background: var(--wb-g-teal);
}
.wb-site .wb-media-fallback::after {
  top: 14%;
  right: 10%;
  width: 44%;
  height: 46%;
  border-radius: var(--wb-r-m);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-16);
}

/* 아코디언(하나만 열림): 높이 800ms ease-in-out, 화살표 600ms expo, 860 이상에서 왼쪽 4px 막대 scaleY 800ms.
   사진 칸은 860 이상에서 오른쪽(약 57%), 860 미만에서 목록 위. 열린 항목의 새 사진 겹이 옛 겹 위로 들어온다. */
.wb-site .wb-accordion {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wb-site .wb-accordion__item {
  position: relative;
  border-bottom: 1px solid var(--wb-c-divider);
}
.wb-site .wb-accordion__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 4px;
  border-radius: 4px;
  background: var(--wb-c-accent);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--wb-dur-accordion) ease-in-out, opacity var(--wb-dur-accordion) ease-in-out;
}
.wb-site .wb-accordion__item:has(> .wb-accordion__title > [aria-expanded="true"])::before {
  opacity: 1;
  transform: none;
}
.wb-site .wb-accordion__title {
  margin: 0;
}
.wb-site .wb-accordion__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 24px 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}
.wb-site .wb-accordion__item:first-child .wb-accordion__head {
  padding-top: 0;
}
.wb-site .wb-accordion__chevron {
  width: 20px;
  height: 20px;
  transition: transform var(--wb-dur-chevron) var(--wb-ease-expo);
}
.wb-site .wb-accordion__head[aria-expanded="true"] .wb-accordion__chevron {
  transform: rotate(-180deg);
}
.wb-site .wb-accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--wb-dur-accordion) ease-in-out, visibility var(--wb-dur-accordion);
}
.wb-site .wb-accordion__item:has(> .wb-accordion__title > [aria-expanded="false"]) > .wb-accordion__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
}
/* 접힐 때 안쪽을 자른다. 좌우 6px은 초점 점선이 잘리지 않게 둔 여유다. */
.wb-site .wb-accordion__body {
  min-height: 0;
  margin: 0 -6px;
  padding: 0 6px;
  overflow: hidden;
}
.wb-site .wb-accordion__body > * + * {
  margin-top: 16px;
}
.wb-site .wb-accordion__body > :last-child {
  margin-bottom: 24px;
}
.wb-site .wb-accordion__body a {
  color: var(--wb-c-navy-pressed);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 끝의 [자세히 보기]처럼 본문에 바로 놓인 링크도 위 간격(16)과 끝 여백(24/32)을 받는다(줄 안 요소는 위아래 margin이 없다). */
.wb-site .wb-accordion__body > a {
  display: inline-block;
}
.wb-site .wb-accordion__media {
  position: relative;
  order: -1;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-tint);
}
.wb-site .wb-accordion__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 새 겹: 860 미만은 아래에서 올라오며 나타나고, 860 이상은 오른쪽에서 옛 겹 위로 밀려 들어온다(800ms). */
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-accordion__media > * + * {
    animation: wb-site-slide-up var(--wb-dur-accordion) ease-in-out backwards;
  }
}
@media (max-width: 540px) {
  .wb-site .wb-accordion__head {
    justify-content: space-between;
  }
}
@media (min-width: 860px) {
  .wb-site .wb-accordion {
    flex-direction: row;
    align-items: flex-start;
    column-gap: 10%;
  }
  .wb-site .wb-accordion__list {
    flex: 1 1 0;
    min-width: 0;
  }
  .wb-site .wb-accordion__media {
    flex: 0 0 57%;
    order: 0;
  }
  .wb-site .wb-accordion__item {
    padding-left: 51px;
  }
  .wb-site .wb-accordion__item::before {
    display: block;
  }
  .wb-site .wb-accordion__head {
    padding: 32px 0;
  }
  .wb-site .wb-accordion__body > :last-child {
    margin-bottom: 32px;
  }
}
@media (min-width: 860px) and (prefers-reduced-motion: no-preference) {
  .wb-site .wb-accordion__media > * + * {
    animation: wb-site-media-in var(--wb-dur-accordion) ease-in-out backwards;
  }
}

/* 캐러셀: 가로 스크롤 트랙(scroll-snap x mandatory, 860 이상 한 화면 3장, 미만 1장과 다음 장 끝)과 아래 왼쪽의 원형 버튼.
   양 끝의 버튼은 disabled(opacity .2). JS가 없으면 버튼 없이 스크롤 막대로 넘긴다. 트랙의 6px 여유는 그림자·초점 점선 자리다. */
.wb-site .wb-carousel__track {
  display: flex;
  gap: 16px;
  margin: -6px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 6px;
}
.wb-site .wb-carousel__track > * {
  flex: 0 0 83.33%;
  scroll-snap-align: start;
}
.wb-site .wb-carousel:has(> .wb-carousel__controls:not([hidden])) > .wb-carousel__track {
  scrollbar-width: none;
}
.wb-site .wb-carousel:has(> .wb-carousel__controls:not([hidden])) > .wb-carousel__track::-webkit-scrollbar {
  display: none;
}
.wb-site .wb-carousel__controls {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.wb-site .wb-carousel__controls[hidden] {
  display: none;
}
.wb-site .wb-carousel__arrow {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--wb-c-navy);
  border-radius: 50%;
  color: var(--wb-c-navy-pressed);
  transition: background-color var(--wb-dur-pill) ease-in-out, opacity var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-carousel__arrow:hover:not(:disabled) {
  background: var(--wb-c-fill);
}
.wb-site .wb-carousel__arrow:disabled {
  opacity: .2;
  cursor: default;
}
.wb-site .wb-carousel__prev .wb-icon {
  transform: scaleX(-1);
}
@media (min-width: 860px) {
  .wb-site .wb-carousel__track > * {
    flex-basis: calc((100% - 32px) / 3);
  }
  .wb-site .wb-carousel__arrow {
    width: 58px;
    height: 58px;
  }
}

/* 섹션 바: 같은 쪽 섹션 링크 줄. 섹션들과 같은 부모 안, 섹션 앞에 둔다(sticky는 부모 안에서만 붙는다).
   바로 위 센티널이 화면 위로 나가면 JS가 .is-stuck을 단다: 860 이상은 위 24px 알약(depth-64, 380ms ease-out).
   링크마다 4px 표시선이 있고 현재 섹션(aria-current="true")과 올린 링크에 200ms 동안 나타난다.
   860 미만은 '현재 섹션 ▾' 드롭다운(화살표 600ms ease)이고, JS가 없으면 가로로 스크롤하는 링크 줄이다. */
.wb-site .wb-section-nav {
  position: sticky;
  top: 0;
  z-index: 990;
  width: 100%;
  margin: 0 auto;
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-2);
  color: var(--wb-c-text-strong);
  font-size: 15px;
  line-height: 22px;
  transition: top var(--wb-dur-sticky) ease-out, width var(--wb-dur-sticky) ease-out,
    border-radius var(--wb-dur-sticky) ease-out, box-shadow var(--wb-dur-sticky) ease-out;
}
.wb-site .wb-section-nav__sentinel {
  height: 1px;
  margin-top: -1px;
}
/* 링크로 건너뛴 섹션의 머리가 붙은 바 아래에 온다. */
.wb-site [data-wb-section-nav] ~ [id] {
  scroll-margin-top: 80px;
}
.wb-site .wb-section-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: var(--wb-site-width);
  margin: 0 auto;
}
.wb-site .wb-section-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  font-weight: 600;
  text-align: left;
}
.wb-site .wb-section-nav__toggle[hidden] {
  display: none;
}
.wb-site .wb-section-nav__chevron {
  width: 20px;
  height: 20px;
  transition: transform var(--wb-dur-chevron) ease;
}
.wb-site .wb-section-nav__toggle[aria-expanded="true"] .wb-section-nav__chevron {
  transform: rotate(-180deg);
}
.wb-site .wb-section-nav__list {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}
.wb-site .wb-section-nav__list li {
  flex: none;
}
.wb-site .wb-section-nav__list a {
  position: relative;
  display: block;
  padding: 13px 0;
  color: inherit; /* 옛 base.css의 a:hover 파랑을 덮는다 */
  font-weight: 600;
  white-space: nowrap;
}
.wb-site .wb-section-nav__list a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--wb-c-accent);
  opacity: 0;
  transition: opacity var(--wb-dur-indicator) ease;
}
.wb-site .wb-section-nav__list a:hover::after,
.wb-site .wb-section-nav__list a[aria-current="true"]::after {
  opacity: 1;
}
.wb-site .wb-section-nav__actions {
  display: none;
}
@media (max-width: 859.98px) {
  /* JS가 연 드롭다운: 버튼 아래로 목록이 열린다(최대 300px, 넘치면 스크롤). 표시선은 왼쪽 세로 막대다. */
  .wb-site .wb-section-nav__toggle:not([hidden]) + .wb-section-nav__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid var(--wb-c-border-soft);
    border-radius: 0 0 16px 16px;
    background: var(--wb-c-surface);
    box-shadow: var(--wb-depth-4);
  }
  .wb-site .wb-section-nav__toggle[aria-expanded="false"]:not([hidden]) + .wb-section-nav__list {
    display: none;
  }
  .wb-site .wb-section-nav__toggle:not([hidden]) + .wb-section-nav__list a {
    padding: 12px 16px;
  }
  .wb-site .wb-section-nav__toggle:not([hidden]) + .wb-section-nav__list a::after {
    top: 8px;
    right: auto;
    bottom: 8px;
    width: 4px;
    height: auto;
  }
  .wb-site .wb-section-nav.is-stuck {
    top: 16px;
    width: calc(100% - 32px);
    border-radius: 16px;
  }
}
@media (min-width: 540px) and (max-width: 859.98px) {
  .wb-site .wb-section-nav.is-stuck {
    width: calc(100% - 8rem);
  }
}
@media (min-width: 860px) {
  .wb-site [data-wb-section-nav] ~ [id] {
    scroll-margin-top: 104px;
  }
  .wb-site .wb-section-nav__toggle {
    display: none;
  }
  .wb-site .wb-section-nav__list {
    flex: 1 1 auto;
    gap: 48px;
    overflow: visible;
  }
  .wb-site .wb-section-nav__list a {
    padding: 17px 0;
  }
  .wb-site .wb-section-nav__actions {
    display: flex;
    flex: none;
    gap: 8px;
  }
  .wb-site .wb-section-nav.is-stuck {
    top: 24px;
    width: calc(100% - 7rem);
    max-width: 1328px;
    border-radius: 16px;
    box-shadow: var(--wb-depth-64);
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-section-nav.is-stuck {
    width: 90%;
  }
}

/* 카드: depth-4, 올리면 depth-8(200ms). 사진은 움직임이 허용될 때만 1.15배로 600ms 동안 커진다. */
.wb-site .wb-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-4);
  color: var(--wb-c-text);
  text-decoration: none;
  transition: box-shadow var(--wb-dur-indicator) ease;
}
.wb-site .wb-card:hover {
  box-shadow: var(--wb-depth-8);
}
.wb-site a.wb-card:active {
  background: var(--wb-c-surface-pressed);
  box-shadow: var(--wb-depth-2);
}
.wb-site .wb-card__media {
  margin: 8px 8px 0;
  overflow: hidden;
  border-radius: var(--wb-r-m);
}
.wb-site .wb-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--wb-dur-zoom) ease-in-out;
}
.wb-site .wb-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.wb-site .wb-card__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-card:hover .wb-card__media img {
    transform: scale(1.15);
  }
}
@media (min-width: 860px) {
  .wb-site .wb-card__body {
    padding: 24px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-card__title {
    font-size: 20px;
    line-height: 28px;
  }
}

/* 등장 효과: JS가 움직임 허용을 확인하고 body에 wb-motion을 단 화면에서만 숨겼다가 화면에 들어오면(.is-in) 보인다.
   up은 1.2s 페이드와 함께 100px 아래에서, fade는 1.2s 페이드, right는 50px 오른쪽에서 들어온다.
   묶음(stagger)의 자식 N은 75+150·(N−1)px 아래에서 25ms 간격으로 올라오고(6번째부터 같음, --i는 JS가 단다),
   그동안 묶음 밖으로 나간 것은 자른다(2.4s의 절반). 인쇄에는 걸지 않는다.
   시작할 때 이미 화면 안에 있던 것(.is-instant, JS가 단다)은 등장 없이 그대로 보인다(그려진 첫 화면이 깜박이지 않는다). */
@media screen and (prefers-reduced-motion: no-preference) {
  .wb-site.wb-motion [data-wb-reveal] {
    opacity: 0;
    transition: opacity var(--wb-dur-reveal) ease-in-out 50ms;
  }
  .wb-site.wb-motion [data-wb-reveal].is-in {
    opacity: 1;
  }
  .wb-site.wb-motion [data-wb-reveal="up"].is-in {
    animation: wb-site-slide-up var(--wb-dur-reveal) ease-in-out backwards;
  }
  .wb-site.wb-motion [data-wb-reveal="fade"].is-in {
    animation: wb-site-fade var(--wb-dur-reveal) ease backwards;
  }
  .wb-site.wb-motion [data-wb-reveal="right"].is-in {
    animation: wb-site-slide-right var(--wb-dur-reveal) ease-in-out backwards;
  }
  .wb-site.wb-motion [data-wb-reveal="stagger"].is-in {
    animation: wb-site-clip calc(2 * var(--wb-dur-reveal)) ease-in-out;
  }
  .wb-site.wb-motion [data-wb-reveal="stagger"].is-in > * {
    animation: wb-site-rise var(--wb-dur-reveal) ease-in-out calc((var(--i, 0) + 1) * var(--wb-stagger)) backwards;
  }
  .wb-site.wb-motion [data-wb-reveal].is-instant,
  .wb-site.wb-motion [data-wb-reveal="stagger"].is-instant > * {
    animation: none;
  }
}
@keyframes wb-site-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wb-site-slide-up {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-site-slide-right {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-site-rise {
  from { opacity: 0; transform: translateY(calc(75px + 150px * var(--i, 0))); }
  to { opacity: 1; transform: none; }
}
/* overflow는 단계로 바뀐다: 앞 절반은 hidden, 뒤 절반은 visible. */
@keyframes wb-site-clip {
  from { overflow: hidden; }
  to { overflow: visible; }
}
@keyframes wb-site-media-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

/* ── 메인(index.php): 히어로 · 섹션 바 · 사업 분야 · 공지사항 · 관련법규 · 문의 · 채용 ──
   섹션 바는 <main> 안에서 히어로 다음, 섹션들 앞에 있다(sticky는 부모 안에서만 붙는다). 그래서 .wb-home과 그 조상에는 overflow를 주지 않는다.
   글자 단계는 860 미만 / 860~1439 / 1440 이상. 히어로 제목은 한글이 원본 이미지처럼 두 줄에 들도록 참고 표보다 조금 작다. */

/* 바탕: 옛 요소 규칙(a 12px, p break-all, h1~h3 17px, input 12px)을 덮는다. 점수 낮은 :where로 둔다. */
.wb-site :where(.wb-home) {
  font-family: var(--wb-font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: var(--wb-c-text);
}
.wb-site :where(.wb-home) :where(a, button, p, h1, h2, h3, li, dt, dd, label, input) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(.wb-home) :where(a, button, input):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}

/* 섹션: 위아래 56/96, 제목(h2) 32/40 · 40/48 · 48/56, 제목 아래 32/48 */
.wb-site .wb-home-section {
  padding: 56px 0;
}
.wb-site .wb-home-section--tint {
  background: var(--wb-c-tint);
}
.wb-site .wb-home-section__inner {
  width: var(--wb-site-width);
  margin: 0 auto;
}
.wb-site .wb-home-section__title {
  margin: 0 0 32px;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
.wb-site .wb-home-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 32px;
}
.wb-site .wb-home-section__head .wb-home-section__title {
  margin: 0;
}
@media (min-width: 860px) {
  .wb-site .wb-home-section {
    padding: 96px 0;
  }
  .wb-site .wb-home-section__title {
    margin-bottom: 48px;
    font-size: 40px;
    line-height: 48px;
  }
  .wb-site .wb-home-section__head {
    margin-bottom: 48px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-home-section__title {
    font-size: 48px;
    line-height: 56px;
  }
}

/* 히어로: 860 미만은 사진 → 글(제목·리드·단추) → 로그인 카드 한 줄. 540 미만은 단추가 전체 폭이다.
   860 이상은 두 칸이다. 왼쪽 글, 오른쪽은 청록 판 위에 사진 카드(위·오른쪽)와 로그인 카드(아래·왼쪽)를 겹친다. */
.wb-site .wb-hero {
  padding: 24px 0 56px;
  background: var(--wb-g-sky);
}
.wb-site .wb-hero__inner {
  display: grid;
  grid-template-areas: "photo" "text" "login";
  gap: 24px;
  width: var(--wb-site-width);
  margin: 0 auto;
}
.wb-site .wb-hero__text {
  grid-area: text;
  min-width: 0;
}
.wb-site .wb-hero__plate {
  display: none;
}
.wb-site .wb-hero__photo {
  grid-area: photo;
  min-width: 0;
}
.wb-site .wb-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--wb-r-l);
  object-fit: cover;
  object-position: 50% 20%;
}
.wb-site .wb-hero__login {
  grid-area: login;
  min-width: 0;
}
.wb-site .wb-hero__eyebrow {
  margin: 0 0 12px;
  color: var(--wb-c-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wb-site .wb-hero__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 36px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
.wb-site .wb-hero__title span {
  display: block;
}
.wb-site .wb-hero__lead {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 28px;
}
.wb-site .wb-hero__lead strong {
  color: var(--wb-c-text-strong);
  font-weight: 700;
}
.wb-site .wb-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
@media (min-width: 540px) {
  .wb-site .wb-hero__actions {
    flex-flow: row wrap;
  }
}
@media (min-width: 860px) {
  .wb-site .wb-hero {
    padding: 64px 0 96px;
  }
  .wb-site .wb-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "text photo" "text login";
    column-gap: 48px;
    row-gap: 0;
  }
  .wb-site .wb-hero__text {
    align-self: center;
  }
  .wb-site .wb-hero__plate {
    display: block;
    grid-area: 1 / 2 / 3 / 3;
    margin: 48px 0 48px 40px;
    border-radius: var(--wb-r-l);
    background: var(--wb-g-teal);
  }
  .wb-site .wb-hero__photo {
    position: relative;
    z-index: 1;
    justify-self: end;
    box-sizing: border-box;
    width: min(280px, 72%);
    margin-right: 24px;
    padding: 8px;
    border-radius: var(--wb-r-l);
    background: var(--wb-c-surface);
    box-shadow: var(--wb-depth-16);
  }
  .wb-site .wb-hero__photo img {
    aspect-ratio: auto;
    border-radius: var(--wb-r-m);
  }
  .wb-site .wb-hero__login {
    position: relative;
    z-index: 2;
    justify-self: start;
    width: min(100%, 360px);
    margin-top: -96px;
  }
  .wb-site .wb-hero__title {
    font-size: 44px;
    line-height: 56px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-hero__title {
    font-size: 56px;
    line-height: 68px;
  }
  .wb-site .wb-hero__lead {
    font-size: 20px;
    line-height: 32px;
  }
}
/* 히어로 등장: 글은 100px 아래에서, 사진은 제자리에서 1.2s 페이드. 첫 화면이라 wb-site.js(등장 효과 [data-wb-reveal])를 기다리지 않고
   CSS가 첫 그림부터 돌린다. body.wb-js는 머리글의 인라인 스크립트가 히어로를 그리기 전에 단다. 그래서 다 보인 히어로가 스크립트가
   돈 뒤 다시 사라졌다 나타나는 깜박임이 없다. JS가 없거나 움직임 줄이기면 등장 없이 처음부터 보인다. 인쇄에는 걸지 않는다.
   로그인 카드(.wb-hero__login)에는 등장 효과가 없다. */
@media screen and (prefers-reduced-motion: no-preference) {
  .wb-site.wb-js .wb-hero__text {
    animation: wb-site-slide-up var(--wb-dur-reveal) ease-in-out backwards;
  }
  .wb-site.wb-js .wb-hero__photo {
    animation: wb-site-fade var(--wb-dur-reveal) ease backwards;
  }
}

/* 아이콘 링크: 남색 네모(36) 안의 흰 화살표와 14/20 굵은 글 */
.wb-site .wb-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--wb-c-navy-pressed);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
.wb-site .wb-icon-link:hover {
  color: var(--wb-c-navy-pressed);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-icon-link__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wb-r-s);
  background: var(--wb-c-navy);
  color: #fff;
  transition: background-color var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-icon-link:hover .wb-icon-link__mark {
  background: var(--wb-c-navy-hover);
}
.wb-site .wb-icon-link__mark .wb-icon {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

/* 임직원 로그인 카드(skin/outlogin/wb): 흰 카드, depth-16. 손님은 label이 붙은 두 칸과 로그인 단추, 회원은 이름과 계정 링크. */
.wb-site .wb-login {
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-16);
}
.wb-site .wb-login__title {
  margin: 0 0 16px;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.wb-site .wb-login__form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wb-site .wb-login__label {
  color: var(--wb-c-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.wb-site .wb-login__input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 2px solid var(--wb-c-divider);
  border-radius: var(--wb-r-s);
  background: #fff;
  color: var(--wb-c-text-strong);
  font-size: 16px;
  line-height: 24px;
  appearance: none;
}
.wb-site .wb-login__input:focus {
  border-color: var(--wb-c-navy);
}
.wb-site .wb-login__submit {
  width: 100%;
}
.wb-site .wb-login__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 16px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  list-style: none;
}
.wb-site .wb-login__links a:not(.wb-btn) {
  color: var(--wb-c-navy-pressed);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-login__links a:not(.wb-btn):hover {
  color: var(--wb-c-accent);
}
.wb-site .wb-login--member .wb-login__links {
  justify-content: flex-start;
}
.wb-site .wb-login--member .wb-login__links li:has(> .wb-btn) {
  flex: 1 1 100%;
}
.wb-site .wb-login--member .wb-login__links .wb-btn {
  box-sizing: border-box;
  width: 100%;
}
.wb-site .wb-login__name {
  color: var(--wb-c-accent);
}

/* 사업 분야: 탭·아코디언은 위 컴포넌트. 메인 사진은 하위 페이지 사진을 자른 작은 그림(세로 227~247px)이라 3:2 칸에 맞추고,
   860 이상에서 칸을 540px까지만 넓혀 1.5배 넘게 늘어나지 않게 한다. 가로로 긴 사진은 사람 쪽을 보인다. */
.wb-site .wb-home-business .wb-accordion__media {
  aspect-ratio: 3 / 2;
}
@media (min-width: 860px) {
  .wb-site .wb-home-business .wb-accordion__media {
    flex-basis: 50%;
    max-width: 540px;
  }
}
.wb-site .wb-home-business .wb-accordion__media img[src$="/law-gym.jpg"] {
  object-position: 85% 50%;
}
.wb-site .wb-home-business .wb-accordion__media img[src$="/outsourcing-runner.jpg"] {
  object-position: 30% 50%;
}

/* 공지사항 · 관련법규: 카드 두 장(860 이상 나란히). 글마다 제목과 날짜, 머리에 [전체 보기]. */
.wb-site .wb-home-latest {
  display: grid;
  gap: 16px;
}
.wb-site .wb-latest {
  padding: 24px;
}
.wb-site .wb-latest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wb-c-divider);
}
.wb-site .wb-latest__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.wb-site .wb-latest__more {
  flex: none;
  color: var(--wb-c-navy-pressed);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-latest__more:hover {
  color: var(--wb-c-accent);
}
.wb-site .wb-latest__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-latest__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wb-c-border-card);
}
.wb-site .wb-latest__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.wb-site .wb-latest__link {
  min-width: 0;
  color: var(--wb-c-text-strong);
  overflow-wrap: anywhere;
}
.wb-site .wb-latest__link:hover {
  color: var(--wb-c-text-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-latest__date {
  flex: none;
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.wb-site .wb-latest__empty {
  margin: 16px 0 0;
  color: var(--wb-c-muted);
}
@media (min-width: 860px) {
  .wb-site .wb-home-latest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .wb-site .wb-latest {
    padding: 32px;
  }
}

/* 문의: 아이콘 카드 셋. 고객상담안내(전화·이메일·상담 시간), 지점별 연락처, 오시는 길. 문의하기(sub/contact.php)도 같은 카드다.
   860 미만 1열, 860~1439는 고객상담안내가 한 줄을 다 쓰고 나머지 둘이 나란히(전화·이메일이 쪼개지지 않게), 1440 이상 3열. */
.wb-site .wb-contact-cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-contact-cards__card {
  gap: 16px;
  padding: 24px;
}
.wb-site .wb-contact-cards__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--wb-c-border-card);
  border-radius: var(--wb-r-s);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-2);
  color: var(--wb-c-teal);
}
.wb-site .wb-contact-cards__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.wb-site .wb-contact-cards__card p {
  margin: 0;
}
.wb-site .wb-contact-cards__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
}
.wb-site .wb-contact-cards__list dt {
  color: var(--wb-c-muted);
  font-size: 14px;
}
.wb-site .wb-contact-cards__list dd {
  grid-column: 2;
  margin: 0;
  overflow-wrap: break-word;
}
.wb-site .wb-contact-cards a {
  color: var(--wb-c-navy-pressed);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-contact-cards a:hover {
  color: var(--wb-c-accent);
}
.wb-site .wb-contact-cards .wb-contact-cards__tel {
  font-size: 18px;
}
.wb-site .wb-contact-cards__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .wb-site .wb-contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb-site .wb-contact-cards__card:first-child {
    grid-column: 1 / -1;
  }
  .wb-site .wb-contact-cards__card {
    padding: 32px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-contact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wb-site .wb-contact-cards__card:first-child {
    grid-column: auto;
  }
}

/* 채용 띠: 2열 CTA 카드(860 이상). 왼쪽 제목·글·단추, 오른쪽 사진(흰 바탕을 파스텔 면에 곱해 오린 사진처럼 보인다). */
.wb-site .wb-card.wb-home-recruit {
  display: grid;
  gap: 8px;
  padding: 8px;
}
.wb-site .wb-home-recruit__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 16px 24px;
}
.wb-site .wb-home-recruit__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.015em;
}
.wb-site .wb-home-recruit__text {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}
.wb-site .wb-home-recruit__media {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--wb-r-m);
  background: var(--wb-g-lavender-mint);
}
.wb-site .wb-home-recruit__media img {
  display: block;
  width: min(100%, 224px);
  height: auto;
  mix-blend-mode: multiply;
}
@media (min-width: 860px) {
  .wb-site .wb-card.wb-home-recruit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .wb-site .wb-home-recruit__body {
    justify-content: center;
    padding: 32px;
  }
  .wb-site .wb-home-recruit__title {
    font-size: 32px;
    line-height: 40px;
  }
  .wb-site .wb-home-recruit__media {
    align-items: flex-end;
    padding-top: 24px;
  }
  .wb-site .wb-home-recruit__media img {
    width: min(100%, 288px);
  }
}

/* ── 하위 화면 틀(head.php): 페이지 머리 · 섹션 탭 · 본문 폭 ──
   inc/wb_site_page_head.php가 메뉴에서 그린다. 머리 띠(하늘 그라데이션)는 화면 폭 전체이고 글은 본문 폭(--wb-site-width) 안에 둔다.
   섹션 탭은 알약 링크이고 현재 항목(aria-current="page")은 남색이다(스펙 5.3). 알약은 한 줄이고 넘치면 옆으로 넘긴다.
   860 이상은 넘칠 때 JS가 40px 원 화살표를 연다. 860 미만은 JS가 줄 대신 현재 항목 드롭다운 버튼을 연다.
   글자 단계는 860 미만 / 860~1439 / 1440 이상. */

/* 바탕: 옛 요소 규칙(a 12px, p break-all, h1 17px)을 덮는다. 점수 낮은 :where로 둔다. */
.wb-site :where(.wb-page-head, .wb-section-tabs) {
  font-family: var(--wb-font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: var(--wb-c-text);
}
.wb-site :where(.wb-page-head, .wb-section-tabs) :where(a, p, h1, li) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(.wb-page-head, .wb-section-tabs) :where(a):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
/* 머리 띠: 양옆 여백이 (화면 폭 − 본문 폭) / 2라서 글이 본문과 같은 줄에 선다. */
.wb-site .wb-page-head {
  padding: 40px calc((100% - var(--wb-site-width)) / 2) 32px;
  background: var(--wb-g-sky);
}
.wb-site .wb-eyebrow {
  margin: 0 0 12px;
  color: var(--wb-c-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wb-site .wb-page-head h1 {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
/* 경로: 홈 > 섹션 > 현재 항목. 단계 사이 꺾쇠는 장식(테두리로 그린다)이라 읽지 않는다. */
.wb-site .wb-breadcrumb {
  margin-top: 16px;
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
}
.wb-site .wb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-breadcrumb li {
  display: flex;
  align-items: center;
}
.wb-site .wb-breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.wb-site .wb-breadcrumb a {
  color: var(--wb-c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-breadcrumb a:hover {
  color: var(--wb-c-navy-pressed);
}
.wb-site .wb-breadcrumb [aria-current="page"] {
  color: var(--wb-c-text);
  font-weight: 600;
}
/* 최고관리자의 비공개 보관함 링크(고객지원 화면) */
.wb-site .wb-page-head__admin {
  margin: 16px 0 0;
}
.wb-site .wb-page-head__admin a[aria-current="page"] {
  background: var(--wb-c-fill);
}
/* 섹션 탭: 알약 40px, 125ms. 860 미만은 한 줄 가로 스크롤이고 첫 탭은 본문 왼쪽 끝에 선다. 위아래 여백은 초점 점선 자리다.
   nav는 드롭다운 목록과 화살표의 자리 기준이다. */
.wb-site .wb-section-tabs {
  position: relative;
  display: flow-root;
  border-bottom: 1px solid var(--wb-c-border-card);
}
.wb-site .wb-section-tabs__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 16px calc((100% - var(--wb-site-width)) / 2);
  overflow-x: auto;
  list-style: none;
}
.wb-site .wb-section-tabs__list li {
  flex: none;
}
.wb-site .wb-section-tabs__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-fill);
  color: var(--wb-c-navy-pressed);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--wb-dur-pill) ease-in-out, color var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-section-tabs__link:hover {
  background: var(--wb-c-fill-hover);
  color: var(--wb-c-navy-pressed);
}
.wb-site .wb-section-tabs__link:active {
  background: #5a6972;
  color: #fff;
}
.wb-site .wb-section-tabs__link[aria-current="page"] {
  background: var(--wb-c-navy-selected);
  color: #fff;
}
.wb-site .wb-section-tabs__link[aria-current="page"]:focus {
  outline-color: var(--wb-c-navy-pressed);
}
/* 드롭다운 버튼(860 미만, JS가 hidden을 푼다): 현재 항목을 이름으로 단 남색 알약. 화살표는 600ms ease로 돈다.
   연 목록은 버튼 아래 8px에 뜨는 판(depth-16)이고 알약이 세로로 선다(항목이 7개뿐이라 높이 제한 없이 다 보인다). */
.wb-site .wb-section-tabs__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  width: var(--wb-site-width);
  min-height: 48px;
  margin: 16px auto;
  padding: 8px 16px 8px 24px;
  border: 0;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-navy-selected);
  color: #fff;
  font-family: var(--wb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-align: left;
  word-break: keep-all;
  cursor: pointer;
}
.wb-site .wb-section-tabs__toggle[hidden] {
  display: none;
}
.wb-site .wb-section-tabs__toggle:focus {
  outline: 3px dotted var(--wb-c-navy-pressed);
  outline-offset: 2px;
}
.wb-site .wb-section-tabs__chevron {
  transition: transform var(--wb-dur-chevron) ease;
}
.wb-site .wb-section-tabs__toggle[aria-expanded="true"] .wb-section-tabs__chevron {
  transform: rotate(-180deg);
}
@media (max-width: 859.98px) {
  .wb-site .wb-section-tabs__toggle:not([hidden]) ~ .wb-section-tabs__list {
    position: absolute;
    top: calc(100% - 8px);
    right: calc((100% - var(--wb-site-width)) / 2);
    left: calc((100% - var(--wb-site-width)) / 2);
    z-index: 980;
    flex-direction: column;
    padding: 16px;
    overflow: visible;
    border-radius: var(--wb-r-l);
    background: var(--wb-c-surface);
    box-shadow: var(--wb-depth-16);
  }
  .wb-site .wb-section-tabs__toggle[aria-expanded="false"]:not([hidden]) ~ .wb-section-tabs__list {
    display: none;
  }
}
/* 넘침 화살표(860 이상, 줄이 넘칠 때 JS가 hidden을 푼다): 본문 양 끝의 40px 원(2px #051118)과 그 안쪽 흐림 띠(nav의 ::before·::after).
   양 끝에서는 disabled이고 띠와 함께 125ms ease-in-out으로 사라진다. 화살표가 있으면 스크롤 막대는 숨긴다. */
.wb-site .wb-section-tabs::before,
.wb-site .wb-section-tabs::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 72px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-section-tabs::before {
  left: calc((100% - var(--wb-site-width)) / 2 - 6px);
  background: linear-gradient(90deg, #fefefe 25%, rgba(242, 242, 242, 0));
}
.wb-site .wb-section-tabs::after {
  right: calc((100% - var(--wb-site-width)) / 2 - 6px);
  background: linear-gradient(270deg, #fefefe 25%, rgba(242, 242, 242, 0));
}
.wb-site .wb-section-tabs:has(> .wb-section-tabs__prev:not([hidden]):enabled)::before,
.wb-site .wb-section-tabs:has(> .wb-section-tabs__next:not([hidden]):enabled)::after {
  opacity: 1;
}
.wb-site .wb-section-tabs__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  padding: 0;
  border: 2px solid var(--wb-c-navy-pressed);
  border-radius: 50%;
  background: var(--wb-c-surface);
  color: var(--wb-c-navy-pressed);
  cursor: pointer;
  transition: box-shadow var(--wb-dur-pill) ease-in-out, opacity var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-section-tabs__arrow[hidden] {
  display: none;
}
.wb-site .wb-section-tabs__arrow:hover:not(:disabled) {
  box-shadow: inset 0 0 0 20px var(--wb-c-fill);
}
.wb-site .wb-section-tabs__arrow:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}
.wb-site .wb-section-tabs__arrow:focus {
  outline: 3px dotted var(--wb-c-navy-pressed);
  outline-offset: 2px;
}
.wb-site .wb-section-tabs__prev {
  left: calc((100% - var(--wb-site-width)) / 2);
}
.wb-site .wb-section-tabs__next {
  right: calc((100% - var(--wb-site-width)) / 2);
}
.wb-site .wb-section-tabs__arrow .wb-icon {
  width: 20px;
  height: 20px;
}
.wb-site .wb-section-tabs__prev .wb-icon {
  transform: rotate(90deg);
}
.wb-site .wb-section-tabs__next .wb-icon {
  transform: rotate(-90deg);
}
.wb-site .wb-section-tabs:has(> .wb-section-tabs__arrow:not([hidden])) > .wb-section-tabs__list {
  scrollbar-width: none;
}
.wb-site .wb-section-tabs:has(> .wb-section-tabs__arrow:not([hidden])) > .wb-section-tabs__list::-webkit-scrollbar {
  display: none;
}
/* 본문 틀: 옛 960px 틀과 왼쪽 메뉴 자리(#sub_content 730px, 왼쪽 30px)를 걷어 머리 글과 같은 폭(최대 1328px)으로 둔다.
   회원 화면(wb-member-page)의 틀은 회원 스킨 CSS(2026-08 개편본) 그대로 둔다. */
.wb-site:not(.wb-member-page) #sub_container {
  width: var(--wb-site-width);
  margin: 32px auto 56px;
}
.wb-site:not(.wb-member-page) #sub_content {
  float: none;
  width: auto;
  margin: 0;
}
@media (min-width: 860px) {
  .wb-site .wb-page-head {
    padding-top: 64px;
    padding-bottom: 48px;
  }
  .wb-site .wb-eyebrow {
    margin-bottom: 16px;
  }
  .wb-site .wb-page-head h1 {
    font-size: 40px;
    line-height: 48px;
  }
  .wb-site .wb-breadcrumb {
    margin-top: 24px;
  }
  /* 860 이상: 줄은 본문 폭(양옆 6px은 초점 점선 자리)이고 넘치면 옆으로 넘긴다(화살표는 JS가 연다).
     JS가 없으면 화살표가 없으니 줄을 바꿔 모든 알약(현재 항목 포함)이 보인다. */
  .wb-site .wb-section-tabs__toggle {
    display: none;
  }
  .wb-site .wb-section-tabs__list {
    box-sizing: border-box;
    width: calc(var(--wb-site-width) + 12px);
    margin: 0 auto;
    padding: 24px 6px;
  }
  .wb-site:not(.wb-js) .wb-section-tabs__list {
    flex-wrap: wrap;
  }
  .wb-site .wb-section-tabs__link {
    padding: 8px 24px;
  }
  .wb-site:not(.wb-member-page) #sub_container {
    margin: 48px auto 96px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-page-head h1 {
    font-size: 48px;
    line-height: 56px;
  }
}

/* ── 하위 정적 페이지(sub/*.php): 옛 글 이미지를 옮긴 글(docs/redesign/transcripts/) 그대로 HTML 글로 다시 썼다 ──
   본문은 #sub_content 안의 .wb-sub 하나다. 덩이 사이는 48/72, 덩이 제목(h2)은 참고 표의 h3 단계(24/32 · 24/32 · 32/40),
   글은 16/26이고 글 단은 한 줄 46rem까지다. 강조(strong)는 원본의 색 글씨처럼 강조색 600이다.
   덩이: 인용 띠(.wb-quote), 글과 사진 두 칸(.wb-sub__split), 카드 격자(.wb-sub__cards, 카드는 위 컴포넌트), 단계(.wb-steps),
   시설 타일(.wb-facilities), 장점(.wb-merits)과 관계도(.wb-relation), 연혁(.wb-history), 조직도(.wb-org), 지도와 교통 카드
   (카카오 지도 퍼가기, .wb-transit), 인재상(.wb-values), 문의 띠(.wb-cta), 사이트맵(.wb-sitemap).
   문의하기(sub/contact.php)의 카드는 메인 '문의'와 같은 .wb-contact-cards다. */

/* 바탕: 옛 요소 규칙(a 12px, p break-all, h2·h3 17px)을 덮는다. 점수 낮은 :where로 둔다. */
.wb-site :where(.wb-sub) {
  font-family: var(--wb-font-body);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--wb-c-text);
}
.wb-site :where(.wb-sub) :where(a, p, h2, h3, li, dt, dd, figure) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(.wb-sub) :where(a):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
.wb-site .wb-sub {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3xl);
}
.wb-site .wb-sub strong {
  color: var(--wb-c-accent);
  font-weight: 600;
}

/* 덩이 머리: 영문 눈썹 글(.wb-eyebrow) → 8 → 제목 → 16 → 리드, 머리 아래 24/32 */
.wb-site .wb-sub__head {
  margin-bottom: var(--wb-space-xl);
}
.wb-site .wb-sub__head:last-child {
  margin-bottom: 0;
}
.wb-site .wb-sub__head .wb-eyebrow {
  margin-bottom: 8px;
}
.wb-site .wb-sub__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.015em;
}
/* 원본에서 두 줄인 제목: 줄마다 span이라 좁은 화면에서도 원본 줄 단위로 꺾인다. */
.wb-site .wb-sub__title > span {
  display: inline-block;
}
.wb-site .wb-sub__statement {
  margin: 16px 0 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.015em;
}
.wb-site .wb-sub__lead {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 28px;
}
.wb-site .wb-sub__text {
  max-width: 46rem;
}
.wb-site .wb-sub__text > * {
  margin: 0;
}
.wb-site .wb-sub__text > * + * {
  margin-top: 16px;
}
.wb-site .wb-sub__text a,
.wb-site .wb-cta__text a {
  color: var(--wb-c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 대표 서명 줄(웰브릿지 소개): 오른쪽 끝에 '대표'와 이름 */
.wb-site .wb-sub__text > .wb-sub__sign {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  color: var(--wb-c-muted);
}
.wb-site .wb-sub__signature {
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .12em;
}
/* 한 줄 강조 글(시공 거품제거): 카드 격자 아래 */
.wb-site .wb-sub__note {
  margin: 32px 0 0;
  color: var(--wb-c-text-strong);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
/* 이름과 설명 두 열(핵심가치): 줄 사이 선, 540 이상은 이름 칸 128px */
.wb-site .wb-sub__terms {
  margin: 0;
}
.wb-site .wb-sub__terms > div {
  display: grid;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wb-c-divider);
}
.wb-site .wb-sub__terms > div:first-child {
  border-top: 1px solid var(--wb-c-divider);
}
.wb-site .wb-sub__terms dt {
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
}
.wb-site .wb-sub__terms dd {
  margin: 0;
}
/* 점 목록 */
.wb-site .wb-sub__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-sub__list li {
  position: relative;
  padding-left: 20px;
}
.wb-site .wb-sub__list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wb-c-teal);
}

/* 인용 띠: 원본의 가운데 정렬 큰 글 띠. 하늘 그라데이션 면 */
.wb-site .wb-quote {
  margin: 0;
  padding: 24px;
  border-radius: var(--wb-r-l);
  background: var(--wb-g-sky);
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.015em;
  text-align: center;
}

/* 글과 사진 두 칸: 860 미만은 한 줄로 쌓고, 860 이상은 반씩. flip은 860 이상에서 사진을 왼쪽에 둔다. */
.wb-site .wb-sub__split {
  display: grid;
  gap: 32px;
  align-items: center;
}
/* 사진: 옛 사진을 잘라 쓴 작은 그림(가로 148~730px)이라 540px까지만 키운다. */
.wb-site .wb-sub__photo {
  justify-self: center;
  width: 100%;
  max-width: 540px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--wb-r-l);
}
.wb-site .wb-sub__photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* 흰 바탕째 자른 사진(원형 사진, 오린 사람 사진): 테두리 없이 흰 바탕을 바탕색에 곱해 오린 듯 보인다. */
.wb-site .wb-sub__photo--cutout {
  max-width: 288px;
  overflow: visible;
  border-radius: 0;
}
.wb-site .wb-sub__photo--cutout img {
  mix-blend-mode: multiply;
}
.wb-site .wb-sub__gallery {
  display: grid;
  gap: 16px;
}
.wb-site .wb-sub__gallery + .wb-sub__text {
  margin-top: 32px;
}

/* 카드 격자(카드는 위 .wb-card): 기본 1열. --2는 860 이상 2열, --3은 860 이상 3열, --4(사진만 있는 작은 카드)는 2열·860 이상 4열 */
.wb-site .wb-sub__cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-sub__cards--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wb-site .wb-sub__cards .wb-card__body > * {
  margin: 0;
}
.wb-site .wb-sub__cards .wb-sub__head {
  margin: 0;
}
/* 가로 사진(3:2)을 자르지 않는다 */
.wb-site .wb-card__media--wide img {
  aspect-ratio: 3 / 2;
}
/* 원형 사진 카드(사업영역): 파스텔 면 가운데의 원. 사진만 있는 카드는 아래도 8px 띄운다. 올리면 카드 컴포넌트대로 커진다. */
.wb-site .wb-card__media--round {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--wb-g-lavender-mint);
}
.wb-site .wb-card__media--round:last-child {
  margin-bottom: 8px;
}
.wb-site .wb-card__media--round img {
  width: min(100%, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* 단계(위탁운영 및 컨설팅): 원형 사진 148px과 글. 540 이상 2열, 860 이상 4열이고 단계 사이에 꺾쇠(장식). */
.wb-site .wb-steps {
  display: grid;
  gap: 32px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.wb-site .wb-steps__item img {
  display: block;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  box-shadow: var(--wb-depth-8);
}
.wb-site .wb-steps__label {
  margin: 0;
  color: var(--wb-c-muted);
  font-size: 17px;
}
.wb-site .wb-steps__label > span {
  display: block;
}
.wb-site .wb-steps__label strong {
  color: var(--wb-c-text-strong);
  font-weight: 700;
}

/* 시설 타일(기타 커뮤니티시설·커뮤니티 위탁운영): 타일 일곱(2 · 540 이상 4 · 860 이상 7열), 양쪽 선 사이 글, 아래 화살표와 남색 상자 */
.wb-site .wb-facilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-sub__text + .wb-facilities {
  margin-top: 32px;
}
.wb-site .wb-facilities li {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--wb-c-border-card);
  border-radius: var(--wb-r-m);
  background: var(--wb-c-tint);
  color: var(--wb-c-text-strong);
  font-weight: 600;
  text-align: center;
}
.wb-site .wb-facilities__flow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
  text-align: center;
}
.wb-site .wb-facilities__flow::before,
.wb-site .wb-facilities__flow::after {
  content: "";
  flex: 1 1 24px;
  height: 2px;
  background: var(--wb-c-teal);
}
.wb-site .wb-facilities__result {
  position: relative;
  margin: 56px 0 0;
  padding: 20px 24px;
  border-radius: var(--wb-r-m);
  background: var(--wb-c-navy);
  color: #fff;
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}
.wb-site .wb-facilities__result::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -16px;
  border: 16px solid transparent;
  border-top: 20px solid var(--wb-c-divider);
}

/* 장점(위탁운영의 장점): 가운데 '코스트절감' 원과 장점 넷. 540 미만은 원 아래 2열 타일, 540 이상은 원이 2×2 타일 한가운데에 겹친다. */
.wb-site .wb-merits {
  position: relative;
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.wb-site .wb-merits__hub {
  display: grid;
  place-items: center;
  justify-self: center;
  box-sizing: border-box;
  width: 136px;
  height: 136px;
  margin: 0;
  border: 8px solid var(--wb-c-tint-2);
  border-radius: 50%;
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-8);
  color: var(--wb-c-accent);
  font-family: var(--wb-font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}
.wb-site .wb-merits__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-merits__list li {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 16px;
  border-radius: var(--wb-r-l);
  background: var(--wb-g-lavender-mint);
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* 관계도(아웃소싱 활용업체 셋): 위 하나·아래 둘인 3열 격자, 업체 사이에 두 낱말과 양쪽 화살표(장식, 선 방향으로 돌린다) */
.wb-site .wb-relation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ". top ."
    "left-link . right-link"
    "left bottom-link right";
  align-items: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.wb-site .wb-relation__party {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: min(100%, 152px);
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 8px;
  border: 8px solid var(--wb-c-accent);
  border-radius: 50%;
  background: var(--wb-c-surface);
  color: var(--wb-c-text-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.wb-site .wb-relation__party--top {
  grid-area: top;
}
.wb-site .wb-relation__party--left {
  grid-area: left;
}
.wb-site .wb-relation__party--right {
  grid-area: right;
}
.wb-site .wb-relation__link {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
  color: var(--wb-c-muted);
  font-size: 14px; /* 폰에서도 본문 문단 14px 이상 */
  line-height: 20px;
  text-align: center;
}
.wb-site .wb-relation__link .wb-icon {
  width: 28px;
  height: 28px;
  color: var(--wb-c-accent);
}
.wb-site .wb-relation__link--left {
  grid-area: left-link;
  justify-self: end;
}
.wb-site .wb-relation__link--left .wb-icon {
  transform: rotate(-55deg);
}
.wb-site .wb-relation__link--right {
  grid-area: right-link;
  justify-self: start;
}
.wb-site .wb-relation__link--right .wb-icon {
  transform: rotate(55deg);
}
.wb-site .wb-relation__link--bottom {
  grid-area: bottom-link;
}

/* 연혁: 연대 원(남색)과 세로 선 위의 해마다 일. 540 이상은 해와 일이 두 칸, 860 이상은 연대 원이 왼쪽 칸에 붙어 따라온다. */
.wb-site .wb-history {
  display: grid;
  gap: 48px;
}
.wb-site .wb-history__decade {
  display: grid;
  gap: 24px;
}
.wb-site .wb-history__decade-title {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: 50%;
  background: var(--wb-c-navy);
  color: #fff;
  font-family: var(--wb-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}
.wb-site .wb-history__years {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--wb-c-divider);
  list-style: none;
}
.wb-site .wb-history__years > li {
  position: relative;
  display: grid;
  gap: 4px 24px;
}
.wb-site .wb-history__years > li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -31px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wb-c-accent);
  border-radius: 50%;
  background: var(--wb-c-bg);
}
.wb-site .wb-history__year {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.wb-site .wb-history__events {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-history__events li {
  padding: 1px 0;
}

/* 조직도: 대표 원(남색)과 감사, 그 아래 사업부 셋(860 미만은 한 줄로 쌓고, 860 이상은 3열을 선으로 잇는다) */
.wb-site .wb-org {
  display: grid;
  gap: 32px;
}
.wb-site .wb-org__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
}
.wb-site .wb-org__ceo {
  display: grid;
  place-content: center;
  width: 136px;
  height: 136px;
  margin: 0;
  border-radius: 50%;
  background: var(--wb-c-navy);
  box-shadow: var(--wb-depth-8);
  color: #fff;
  font-family: var(--wb-font-heading);
  text-align: center;
}
.wb-site .wb-org__ceo > span {
  display: block;
}
.wb-site .wb-org__role {
  color: var(--wb-c-on-navy);
  font-size: 15px;
  line-height: 22px;
}
.wb-site .wb-org__name {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: .08em;
}
.wb-site .wb-org__audit {
  position: relative;
  margin: 0;
  padding: 8px 28px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-teal);
  color: #fff;
  font-weight: 600;
}
.wb-site .wb-org__divisions {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-org__division {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
}
.wb-site .wb-org__title {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-accent);
  color: #fff;
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.wb-site .wb-org__units {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-org__units li {
  padding: 9px 16px;
  border: 1px solid var(--wb-c-border-soft);
  border-radius: var(--wb-r-m);
  background: var(--wb-c-surface);
  color: var(--wb-c-text-strong);
  text-align: center;
}

/* 찾아오시는 길: 카카오 지도 퍼가기는 본문 폭 전체이고 원래 비율(730×469)이다. 퍼가기가 넣는 고정 폭·높이(style)를 덮는다.
   지도가 그려진 뒤에만 둥근 모서리와 그림자를 단다(JS가 없으면 빈 자리라 아무것도 보이지 않는다). */
.wb-site .wb-map .root_daum_roughmap {
  width: 100% !important;
}
.wb-site .wb-map .root_daum_roughmap:not(:empty) {
  overflow: hidden;
  border-radius: var(--wb-r-l);
  box-shadow: var(--wb-depth-4);
}
.wb-site .wb-map .root_daum_roughmap .wrap_map {
  height: auto !important;
  aspect-ratio: 730 / 469;
}
/* 교통·연락처 글 카드: 지하철(호선 고리 둘), 버스(번호와 방면), 문의전화. 860 이상은 왼쪽에 지하철·전화, 오른쪽에 버스. */
.wb-site .wb-transit {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-transit__card {
  gap: 16px;
  padding: 24px;
}
.wb-site .wb-transit__card > * {
  margin: 0;
}
.wb-site .wb-transit__title {
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.wb-site .wb-transit__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 고리: 원본처럼 호선 색(서울 지하철 2호선 초록, 8호선 분홍)과 버스 파랑 */
.wb-site .wb-transit__mark {
  display: grid;
  place-content: center;
  box-sizing: border-box;
  width: 104px;
  height: 104px;
  margin: 0;
  border: 7px solid var(--wb-c-link);
  border-radius: 50%;
  color: var(--wb-c-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.wb-site .wb-transit__mark--line2 {
  border-color: #00a84d;
}
.wb-site .wb-transit__mark--line8 {
  border-color: #e6186c;
}
.wb-site .wb-transit__line {
  display: block;
  font-size: 20px;
  line-height: 24px;
}
.wb-site .wb-transit__mark small {
  display: block;
  color: var(--wb-c-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.wb-site .wb-transit__buses {
  margin: 0;
}
.wb-site .wb-transit__buses > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--wb-c-border-card);
}
.wb-site .wb-transit__buses dt {
  font-weight: 700;
}
.wb-site .wb-transit__buses dd {
  margin: 0;
}
/* 버스 번호 색: 원본처럼 초록과 파랑(흰 바탕에서 읽히게 짙게) */
.wb-site .wb-transit__buses .wb-bus--green {
  color: #1d7a3a;
}
.wb-site .wb-transit__buses .wb-bus--blue {
  color: var(--wb-c-link);
}
.wb-site .wb-transit__tel a {
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 인재상(채용안내): 고리 원 다섯(2 · 540 이상 3 · 860 이상 5열) */
.wb-site .wb-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-values li {
  display: grid;
  place-items: center;
  justify-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  padding: 16px;
  border: 6px solid var(--wb-c-tint-2);
  border-radius: 50%;
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-2);
  color: var(--wb-c-text-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

/* 문의 띠: 원본의 문의·지원 권유 글과 글 버튼. 860 이상은 글 왼쪽, 버튼 오른쪽 */
.wb-site .wb-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  border-radius: var(--wb-r-l);
  background: var(--wb-g-lavender-mint);
}
.wb-site .wb-cta__text {
  max-width: 46rem;
  margin: 0;
  color: var(--wb-c-text-strong);
  font-size: 18px;
  line-height: 28px;
}
.wb-site .wb-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 사이트맵: 메뉴 섹션마다 카드 하나(540 이상 2 · 860 이상 3 · 1440 이상 4열). 링크 줄은 44px, 지금 화면은 강조색 */
.wb-site .wb-sub.wb-sitemap {
  display: grid;
  gap: 16px;
}
.wb-site .wb-sitemap__section {
  padding: 16px 24px 12px;
}
.wb-site .wb-sitemap__title {
  margin: 0 0 4px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--wb-c-divider);
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}
.wb-site .wb-sitemap__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site .wb-sitemap__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--wb-c-text);
  text-decoration: none;
}
.wb-site .wb-sitemap__links a:hover {
  color: var(--wb-c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-sitemap__links a[aria-current="page"] {
  color: var(--wb-c-accent);
  font-weight: 600;
}
/* 개인정보 보호정책 줄(스펙 12절): 메뉴 카드 뒤에서 격자 한 줄을 다 쓴다. 링크는 글자 폭만 누른다 */
.wb-site .wb-sitemap__legal {
  grid-column: 1 / -1;
}
.wb-site .wb-sitemap__legal a {
  display: inline-flex;
}

@media (min-width: 540px) {
  .wb-site .wb-sub.wb-sitemap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb-site .wb-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb-site .wb-facilities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wb-site .wb-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wb-site .wb-history__years > li {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .wb-site .wb-sub__terms > div {
    grid-template-columns: 128px minmax(0, 1fr);
  }
  /* 장점: 원이 2×2 타일 한가운데에 겹치고, 타일 글은 원을 비켜 바깥쪽에 선다 */
  .wb-site .wb-merits__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
  }
  .wb-site .wb-merits__list {
    gap: 24px;
  }
  .wb-site .wb-merits__list li {
    min-height: 184px;
  }
  .wb-site .wb-merits__list li:nth-child(odd) {
    padding-right: 88px;
  }
  .wb-site .wb-merits__list li:nth-child(even) {
    padding-left: 88px;
  }
}
@media (min-width: 860px) {
  .wb-site .wb-quote {
    padding: 40px 48px;
    font-size: 24px;
    line-height: 36px;
  }
  .wb-site .wb-sub__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
  .wb-site .wb-sub__split--top {
    align-items: start;
  }
  .wb-site .wb-sub__split--flip > .wb-sub__photo {
    order: -1;
  }
  .wb-site .wb-sub__gallery,
  .wb-site .wb-sub__cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb-site .wb-sub__cards--3,
  .wb-site .wb-sub.wb-sitemap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wb-site .wb-sub__cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wb-site .wb-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
  /* 단계 사이 꺾쇠(장식): 사진 높이 가운데, 칸 사이 32px 한가운데 */
  .wb-site .wb-steps__item + .wb-steps__item::before {
    content: "";
    position: absolute;
    top: 68px;
    left: -22px;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--wb-c-accent);
    border-right: 2px solid var(--wb-c-accent);
    transform: rotate(45deg);
  }
  .wb-site .wb-facilities {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
  }
  .wb-site .wb-facilities li {
    min-height: 96px;
  }
  .wb-site .wb-values {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .wb-site .wb-relation__party {
    font-size: 16px;
    line-height: 22px;
  }
  .wb-site .wb-history__decade {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
    gap: 48px;
  }
  .wb-site .wb-history__decade-title {
    position: sticky;
    top: 24px;
    width: 120px;
    height: 120px;
    font-size: 32px;
    line-height: 40px;
  }
  /* 조직도 선: 대표에서 내려온 줄기, 사업부 셋을 잇는 가로선, 사업부마다 내려가는 짧은 선. 감사는 대표 오른쪽에 가로선으로 붙는다. */
  .wb-site .wb-org__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
  }
  .wb-site .wb-org__ceo {
    grid-column: 2;
  }
  .wb-site .wb-org__audit {
    justify-self: start;
    margin-left: 40px;
  }
  .wb-site .wb-org__audit::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 40px;
    height: 2px;
    background: var(--wb-c-divider);
  }
  .wb-site .wb-org__divisions {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 32px;
  }
  .wb-site .wb-org__divisions::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((100% - 48px) / 6);
    right: calc((100% - 48px) / 6);
    height: 2px;
    background: var(--wb-c-divider);
  }
  .wb-site .wb-org__divisions::after {
    content: "";
    position: absolute;
    top: -32px;
    left: calc(50% - 1px);
    width: 2px;
    height: 32px;
    background: var(--wb-c-divider);
  }
  .wb-site .wb-org__division::before {
    content: "";
    position: absolute;
    top: -32px;
    left: calc(50% - 1px);
    width: 2px;
    height: 32px;
    background: var(--wb-c-divider);
  }
  /* 버스 카드가 두 줄을 차지한다. 남는 높이는 둘째 줄이 받아서 전화 카드가 지하철 카드 바로 아래에 붙는다. */
  .wb-site .wb-transit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "subway bus"
      "phone bus";
    align-items: start;
  }
  .wb-site .wb-transit__card {
    padding: 32px;
  }
  .wb-site .wb-transit__card--subway {
    grid-area: subway;
  }
  .wb-site .wb-transit__card--bus {
    grid-area: bus;
  }
  .wb-site .wb-transit__card--phone {
    grid-area: phone;
  }
  .wb-site .wb-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 32px 40px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-sub__title {
    font-size: 32px;
    line-height: 40px;
  }
  .wb-site .wb-sub__statement {
    font-size: 40px;
    line-height: 48px;
  }
  .wb-site .wb-sub__lead {
    font-size: 20px;
    line-height: 32px;
  }
  .wb-site .wb-sub.wb-sitemap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 공개 게시판 스킨 7종(skin/board/*): 표 목록 · 갤러리 격자 · 지점 미디어 목록 · 보기 · 쓰기 ──
   스킨 PHP는 이미지 버튼과 깨진 마크업만 고쳤다(데이터·권한 로직 그대로). 모양은 스킨이 단 갈고리 클래스(.wb-board와
   --table·--gallery·--branch·--search·--view·--write, .wb-board__bar·__search, td의 __num·__subject·__author·__hit)와
   그누보드 기본 이름(#bo_cate, .pg_wrap, .btn_b01·btn_b02·btn_admin·btn_submit·btn_cancel, #bo_v_con …)으로 그린다.
   옛 style.css·스킨 style.css·인라인 style(폭 730px, float, 여백)은 고치지 않고 이 범위에서 덮는다. 인라인 style은 !important로만 덮인다.
   basic_inquiry 스킨은 인트라넷 '제안 및 건의'(intra_forward)도 쓴다. 인트라넷은 이 파일을 부르지 않으니 거기서는 그누보드 기본 단추 모양이다.
   표는 860 이상 표(칸 아래 1px 선), 860 미만 카드 행. 갤러리는 1 · 540 이상 2 · 860 이상 3열 카드. 지점은 사진이 왼쪽인 미디어 카드.
   보기 본문은 16/26. 쓰기 폼은 860 이상 칸 이름이 왼쪽, 860 미만 위. */

/* 바탕: 옛 요소 규칙(a 12px, p break-all, li 여백, 입력칸 5px 여백)을 덮는다. 점수 낮은 :where로 둔다. 강조(strong)와 글 본문의 꾸밈은 그대로 둔다. */
.wb-site :where(.wb-board) {
  font-family: var(--wb-font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--wb-c-text);
}
.wb-site :where(.wb-board) :where(a, p, li, th, td, dt, dd, label, legend, button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(.wb-board) :where(a, button):focus,
.wb-site :where(.wb-board) :where(input, select, textarea):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
.wb-site .wb-board :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 글 단추: 그누보드 이름 그대로 남색 계열로. btn_b02·btn_submit(글쓰기·저장·제출)은 기본(남색), 나머지(검색·목록·취소·닫기·이전글…)는
   보조(외곽선). 높이 44px(참고 md), 15/22 600, 2px 테두리, 모서리 8, 125ms. 게시판 스킨과 공개 셸 bbs 화면(검색 결과, 회원가입 약관,
   회원정보 찾기·재설정, 새글과 관리자의 새글 선택삭제(btn_b01), 메일 인증)이 같은 규칙을 쓴다. 쓰기 폼의 단추는 스킨 style.css의 #bo_w
   규칙보다 앞서야 해서 id를 함께 쓴다.
   회원 스킨이 단추에 주는 float·폭·높이(약관 단추 50px !important)·그림자는 끈다. */
.wb-site .wb-board :is(a.btn_b01, a.btn_b02, a.btn_admin, a.btn_cancel, button.btn_b01, .btn_submit),
.wb-site #bo_w.wb-board :is(.btn_submit, .btn_cancel),
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) :is(.btn_submit, .btn_close, .btn_cancel, .btn_b01) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  float: none;
  box-sizing: border-box;
  width: auto;
  height: auto !important;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 2px solid var(--wb-c-navy);
  border-radius: var(--wb-r-s);
  background: transparent;
  box-shadow: none;
  color: var(--wb-c-navy-pressed);
  font-family: var(--wb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--wb-dur-pill) ease-in-out, border-color var(--wb-dur-pill) ease-in-out,
    color var(--wb-dur-pill) ease-in-out;
}
.wb-site .wb-board :is(a.btn_b01, a.btn_admin, a.btn_cancel, button.btn_b01):hover,
.wb-site .wb-board :is(a.btn_b01, a.btn_admin, a.btn_cancel, button.btn_b01):active,
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) :is(.btn_close, .btn_cancel, .btn_b01):hover,
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) :is(.btn_close, .btn_cancel, .btn_b01):active {
  background: var(--wb-c-fill);
  color: var(--wb-c-navy-pressed);
  text-decoration: none;
}
.wb-site .wb-board :is(a.btn_b02, .btn_submit),
.wb-site #bo_w.wb-board .btn_submit,
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) .btn_submit {
  background: var(--wb-c-navy);
  color: #fff;
}
.wb-site .wb-board :is(a.btn_b02, .btn_submit):hover,
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) .btn_submit:hover {
  border-color: var(--wb-c-navy-hover);
  background: var(--wb-c-navy-hover);
  color: #fff;
  text-decoration: none;
}
.wb-site .wb-board :is(a.btn_b02, .btn_submit):active,
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) .btn_submit:active {
  border-color: var(--wb-c-navy-pressed);
  background: var(--wb-c-navy-pressed);
}
.wb-site .wb-board :is(a.btn_b02, .btn_submit):focus,
.wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) .btn_submit:focus {
  outline-color: var(--wb-c-navy-pressed);
}
.wb-site .wb-board .btn_submit:disabled {
  opacity: .2;
  cursor: default;
}

/* 입력칸: 높이 44, 1px #878ea0(흰 바탕에서 3:1 이상, 설계 7절 입력칸 테두리), 모서리 8. 글자 16px(폰이 확대하지 않는다). 게시판 스킨과
   bbs 화면이 같은 규칙을 쓴다. 필수 칸 표시(그누보드 wrest.gif, default.css의 !important)는 그대로 두고 회색 바탕만 흰색으로 맞춘다. */
.wb-site .wb-board :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], select, textarea),
.wb-site :is(#sch_res_detail, #find_info, #pw_reset, #new_sch, form[name="fregister_email"]) :is(input[type="text"], input[type="password"], input[type="email"], select) {
  box-sizing: border-box;
  max-width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #878ea0;
  border-radius: var(--wb-r-s);
  background-color: #fff;
  color: var(--wb-c-text);
  font-size: 16px;
  line-height: 24px;
  vertical-align: middle;
}
.wb-site .wb-board textarea {
  height: auto;
  min-height: 220px;
  padding: 10px 12px;
}
.wb-site .wb-board .required,
.wb-site :is(#sch_res_detail, #find_info, #pw_reset, #new_sch, form[name="fregister_email"]) .required {
  background-color: #fff !important;
}
.wb-site .wb-board input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--wb-c-navy);
  vertical-align: middle;
}
.wb-site .wb-board input[type="file"] {
  max-width: 100%;
  font-size: 15px;
  line-height: 22px;
}

/* 분류: #bo_cate 안의 알약 탭(40px, 125ms). 현재 분류(#bo_cate_on, 그누보드 bbs/list.php가 단다)는 남색. 줄이 넘치면 다음 줄로. */
.wb-site #bo_cate {
  margin: 0 0 24px;
}
.wb-site #bo_cate ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site #bo_cate ul::after {
  content: none;
}
.wb-site #bo_cate li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}
.wb-site #bo_cate a {
  position: static;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-fill);
  box-shadow: none;
  color: var(--wb-c-navy-pressed);
  font-family: var(--wb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--wb-dur-pill) ease-in-out, color var(--wb-dur-pill) ease-in-out;
}
.wb-site #bo_cate a:hover {
  background: var(--wb-c-fill-hover);
  color: var(--wb-c-navy-pressed);
}
.wb-site #bo_cate a:active {
  background: #5a6972;
  color: #fff;
}
.wb-site #bo_cate a:focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
.wb-site #bo_cate #bo_cate_on {
  border: 0;
  background: var(--wb-c-navy-selected);
  box-shadow: none;
  color: #fff;
  font-weight: 600;
}
.wb-site #bo_cate #bo_cate_on:focus {
  outline-color: var(--wb-c-navy-pressed);
}

/* 검색 줄(목록 위 또는 아래): 검색 대상, 검색어 칸, 글 단추 '검색'이 한 줄이고 글쓰기·관리자 단추는 오른쪽 끝 */
.wb-site .wb-board__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
  margin: 0 0 24px;
}
.wb-site .wb-board__bar::after {
  content: none;
}
.wb-site .wb-board__bar > li {
  float: none !important;
  margin: 0;
  padding: 0;
}
.wb-site .wb-board__bar > .wb-board__search {
  flex: 1 1 320px;
  min-width: 0;
}
.wb-site .wb-board__search fieldset,
.wb-site .wb-board--search .sub0303_search ul {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 560px;
  margin: 0;
  padding: 0;
  border: 0;
}
.wb-site .wb-board :is(.wb-board__search, .sub0303_search) :is(select, input[type="text"]) {
  float: none;
  width: auto;
  margin: 0;
}
.wb-site .wb-board .wb-board__search select {
  flex: none;
  max-width: 40%;
}
.wb-site .wb-board .sub0303_search select {
  max-width: 160px;
}
@media (max-width: 539.98px) {
  .wb-site .wb-board .wb-board__search select,
  .wb-site .wb-board .sub0303_search li:first-child {
    max-width: 30%;
  }
  .wb-site .wb-board .sub0303_search li:first-child select {
    width: 100%;
  }
}
.wb-site .wb-board :is(.wb-board__search, .sub0303_search) input[type="text"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.wb-site .wb-board :is(.wb-board__search, .sub0303_search) button {
  flex: none;
}

/* 페이지 번호: 40px 원(현재 쪽은 남색), 처음·이전·다음·맨끝은 40px 알약. 공개 화면의 그누보드 쪽 번호(get_paging) 모두에 쓴다. */
.wb-site .pg_wrap {
  clear: both;
  margin: 32px 0 0;
  padding: 0;
  text-align: center;
}
.wb-site .pg_wrap .pg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.wb-site .pg_wrap :is(.pg_page, .pg_current) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wb-c-navy-pressed);
  font-family: var(--wb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  transition: background-color var(--wb-dur-pill) ease-in-out, color var(--wb-dur-pill) ease-in-out;
}
.wb-site .pg_wrap .pg_page:hover {
  background: var(--wb-c-fill);
  text-decoration: none;
}
.wb-site .pg_wrap .pg_page:focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
.wb-site .pg_wrap .pg_current {
  background: var(--wb-c-navy-selected);
  color: #fff;
}
.wb-site .pg_wrap :is(.pg_start, .pg_prev, .pg_next, .pg_end) {
  padding: 0 16px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-fill);
  text-indent: 0;
}
.wb-site .pg_wrap :is(.pg_start, .pg_prev, .pg_next, .pg_end):hover {
  background: var(--wb-c-fill-hover);
}

/* 분류 이름표(제목 앞 분류 링크) */
.wb-site .wb-board .bo_cate_link {
  display: inline-flex;
  float: none;
  height: auto;
  margin: 0 8px 0 0;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--wb-r-xs);
  background: var(--wb-c-tint-2);
  color: var(--wb-c-accent) !important; /* 옛 스킨 style.css가 회색(#999)을 !important로 준다 */
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  vertical-align: 2px;
}

/* ── 표 목록(basic·qna·basic_inquiry·recruit·gongo) ── */
.wb-site .wb-board--table {
  margin-top: 0 !important;
  padding-bottom: 0;
}
.wb-site .wb-board--table table {
  float: none !important; /* basic 스킨의 table.floatleft(style.css가 float:left !important) */
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.wb-site .wb-board--table tr {
  height: auto;
  border: 0;
  font-size: inherit;
}
.wb-site .wb-board--table thead th {
  padding: 12px 16px;
  border-bottom: 2px solid var(--wb-c-navy);
  background: transparent;
  color: var(--wb-c-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.wb-site .wb-board--table thead th:nth-child(2) {
  text-align: left;
}
.wb-site .wb-board--table thead th a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.wb-site .wb-board--table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--wb-c-divider);
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.wb-site .wb-board--table tbody td.wb-board__subject {
  padding: 16px !important;
  color: var(--wb-c-text-strong);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left !important;
  white-space: normal;
}
.wb-site .wb-board--table td.wb-board__subject > a:not(.bo_cate_link) {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.wb-site .wb-board--table td.wb-board__subject > a:not(.bo_cate_link):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site .wb-board--table tbody tr:hover > td {
  background: var(--wb-c-tint);
}
/* 공지 줄(그누보드 tr.newblue, style.css가 파란 글자를 !important로 준다): 옅은 하늘 바탕과 남색 '공지' 이름표 */
.wb-site .wb-board--table tbody tr.newblue,
.wb-site .wb-board--table tbody tr.newblue a:not(.bo_cate_link) {
  color: var(--wb-c-text-strong) !important;
  font-weight: inherit !important;
}
.wb-site .wb-board--table tbody tr.newblue > td {
  background: var(--wb-c-tint);
}
.wb-site .wb-board--table td.wb-board__num strong {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.wb-site .wb-board--table .bo_current {
  color: var(--wb-c-accent);
  font-weight: 600;
}
.wb-site .wb-board--table td.empty_table {
  padding: 48px 16px;
  text-align: center;
  white-space: normal;
}
/* 860 미만: 카드 행. 머리 줄과 목록 번호는 숨기고(공지·열람중 표시는 남긴다) 제목이 한 줄을 다 쓴 뒤 작성자·날짜·조회가 따라온다. */
@media (max-width: 859.98px) {
  .wb-site .wb-board--table :is(table, tbody) {
    display: block;
    width: 100%;
  }
  .wb-site .wb-board--table :is(thead, colgroup) {
    display: none;
  }
  .wb-site .wb-board--table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--wb-c-divider);
  }
  .wb-site .wb-board--table tbody tr:hover > td,
  .wb-site .wb-board--table tbody tr.newblue > td {
    background: none;
  }
  .wb-site .wb-board--table tbody td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }
  .wb-site .wb-board--table tbody td.wb-board__subject {
    flex: 1 0 100%;
    order: -1;
    padding: 0 !important;
  }
  .wb-site .wb-board--table td.wb-board__num:not(:has(strong, .bo_current)) {
    display: none;
  }
  .wb-site .wb-board--table td.wb-board__hit::before {
    content: "조회 ";
  }
  .wb-site .wb-board--table td.empty_table {
    flex: 1 0 100%;
    padding: 32px 0;
    text-align: center;
  }
}

/* ── 갤러리 목록(gallery: photo·photobuild): 카드 격자. 카드는 참고 카드(사진 안쪽 8px, 모서리 16/24, depth-4 → 올리면 depth-8). ── */
.wb-site #bo_gall.wb-board--gallery #gall_ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.wb-site #bo_gall.wb-board--gallery #gall_ul::after {
  content: none;
}
.wb-site #bo_gall.wb-board--gallery #gall_ul > .gall_li {
  position: relative;
  float: none;
  width: auto !important;
  margin: 0 !important;
  padding: 8px;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-4);
  transition: box-shadow var(--wb-dur-indicator) ease-in-out;
}
.wb-site #bo_gall.wb-board--gallery #gall_ul > .gall_li:hover {
  box-shadow: var(--wb-depth-8);
}
.wb-site #bo_gall.wb-board--gallery #gall_ul > .empty_list {
  grid-column: 1 / -1;
  padding: 48px 0 !important;
  color: var(--wb-c-muted);
  text-align: center;
}
.wb-site #bo_gall.wb-board--gallery .gall_con > li {
  float: none;
  margin: 0;
  padding: 0;
}
.wb-site #bo_gall.wb-board--gallery .gall_href a {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--wb-r-m);
}
.wb-site #bo_gall.wb-board--gallery .gall_href :is(img, span, strong) {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.wb-site #bo_gall.wb-board--gallery .gall_href .wb-media-fallback {
  background: var(--wb-g-lavender-mint);
}
.wb-site #bo_gall.wb-board--gallery .gall_href strong {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wb-g-sky);
  color: var(--wb-c-accent);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.wb-site #bo_gall.wb-board--gallery .gall_text_href {
  width: auto !important;
  margin: 0 !important;
  padding: 16px 8px 8px !important;
  color: var(--wb-c-text-strong);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}
.wb-site #bo_gall.wb-board--gallery .gall_text_href > a:not(.bo_cate_link) {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.wb-site #bo_gall.wb-board--gallery .gall_text_href > a:not(.bo_cate_link)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.wb-site #bo_gall.wb-board--gallery .gall_text_href > a:not(.bo_cate_link):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site #bo_gall.wb-board--gallery .gall_text_href > .bo_cate_link {
  position: relative;
  z-index: 1;
}
.wb-site #bo_gall.wb-board--gallery .bo_fx {
  float: none;
  margin: 24px 0 0;
}
.wb-site #bo_gall.wb-board--gallery .btn_bo_user {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  float: none;
}
.wb-site #bo_gall.wb-board--gallery .btn_bo_user li {
  float: none;
  width: auto;
  margin: 0;
  background: none;
}
/* 갤러리 검색(목록 아래 fieldset#bo_sch) */
.wb-site .wb-board--search {
  min-width: 0;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}
.wb-site .wb-board--search .sub0303_search {
  width: auto;
  margin: 0;
}
.wb-site .wb-board--search .sub0303_search ul {
  margin: 0 auto;
}
.wb-site .wb-board--search .sub0303_search li {
  display: flex;
  flex: none;
  float: none;
}
.wb-site .wb-board--search .sub0303_search li:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 540px) {
  .wb-site #bo_gall.wb-board--gallery #gall_ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 860px) {
  .wb-site #bo_gall.wb-board--gallery #gall_ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .wb-site #bo_gall.wb-board--gallery .gall_href img {
    transition: transform var(--wb-dur-zoom) ease-in-out;
  }
  .wb-site #bo_gall.wb-board--gallery .gall_li:hover .gall_href img {
    transform: scale(1.15);
  }
}

/* 사진이 없는 글: 면 구성(.wb-media-fallback)만 보이고 'no image' 글은 링크 이름으로만 남는다 */
.wb-site .wb-board .wb-media-fallback {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* ── 지점 목록(branch): 미디어 목록 카드. 사진(142×93 썸네일) 칸 112 · 540 이상 142px이 글 칸 왼쪽에 선다. ── */
.wb-site .sub_content_a:has(> .sub_content_a > .wb-board--branch) {
  padding-top: 0;
}
.wb-site .wb-board--branch {
  margin-top: 0 !important;
  padding-bottom: 0;
}
.wb-site .wb-board--branch .sub0206list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 32px;
  border: 0;
}
.wb-site .wb-board--branch .sub0206list_a {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px;
  border: 0;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-4);
  transition: box-shadow var(--wb-dur-indicator) ease-in-out;
}
.wb-site .wb-board--branch .sub0206list_a:hover {
  box-shadow: var(--wb-depth-8);
}
.wb-site .wb-board--branch .sub0206list_a::after {
  content: none;
}
.wb-site .wb-board--branch .sub0206list_a > a {
  display: block;
  overflow: hidden;
  aspect-ratio: 142 / 93;
  border-radius: var(--wb-r-s);
}
.wb-site .wb-board--branch .sub0206list_a > a > :is(img, span) {
  display: block;
  float: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.wb-site .wb-board--branch .sub0206list_a > ul {
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
}
.wb-site .wb-board--branch .sub0206list_a li {
  float: none;
  padding: 0;
}
.wb-site .wb-board--branch .sub0206list_a li + li {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.wb-site .wb-board--branch .sub0206list_a ul a:not(.bo_cate_link) {
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
}
.wb-site .wb-board--branch .sub0206list_a ul a strong {
  color: var(--wb-c-text-strong);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.wb-site .wb-board--branch .sub0206list_a ul a:not(.bo_cate_link):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 빈 목록: 글이 없으면 스킨은 '게시물이 없습니다.' 글만 든 .sub0206list_a 하나를 그린다(자식 요소 없음). 사진 칸 없이 카드 폭 전체, 가운데. */
.wb-site .wb-board--branch .sub0206list_a:not(:has(> *)) {
  display: block;
  color: var(--wb-c-muted);
  text-align: center;
}
@media (min-width: 540px) {
  .wb-site .wb-board--branch .sub0206list_a {
    grid-template-columns: 142px minmax(0, 1fr);
  }
}
@media (min-width: 860px) {
  .wb-site .wb-board--branch .sub0206list_a {
    gap: 24px;
    padding: 24px;
  }
}

/* ── 보기(#bo_v, 지점은 .wb-board--view 묶음): 글 제목(h2) → 작성자·날짜·조회 → 본문 16/26 → 첨부 → 이전·다음과 글 단추 ── */
.wb-site .wb-board--view {
  margin: 0;
  padding: 0;
  background: none;
}
.wb-site .wb-board--view .view_top {
  margin: 0 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--wb-c-divider);
}
.wb-site .wb-board--view .wb-board-view__title {
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.015em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.wb-site .wb-board--view .view_top ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 12px 0 0;
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
}
.wb-site .wb-board--view .view_top li {
  float: none;
  margin: 0 16px 0 0;
}
.wb-site .wb-board--view .view_top li:first-child {
  margin-right: 6px;
}
.wb-site .wb-board--view .view_top strong {
  color: var(--wb-c-text);
  font-weight: 600;
}
.wb-site .wb-board--view .view_top > div {
  display: none;
}
/* 글 단추 묶음(그누보드 #bo_v_top·#bo_v_bot): 왼쪽 이전글·다음글, 오른쪽 목록·글쓰기 등. 표 스킨은 글 위와 아래에 같은 묶음이 있다. */
.wb-site .wb-board--view :is(#bo_v_top, #bo_v_bot) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}
.wb-site .wb-board--view #bo_v_bot {
  margin: 32px 0 0;
}
.wb-site .wb-board--view :is(#bo_v_top, #bo_v_bot)::after {
  content: none;
}
.wb-site .wb-board--view :is(.bo_v_nb, .bo_v_com) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  float: none;
  margin: 0;
  padding: 0;
  background: none;
}
.wb-site .wb-board--view .bo_v_com {
  margin-left: auto;
}
.wb-site .wb-board--view :is(.bo_v_nb, .bo_v_com) > li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.wb-site .wb-board--view #bo_v_atc {
  min-height: 0;
}
/* 본문: 16/26, 링크는 밑줄, 사진·표는 본문 폭 안. 넓은 표는 본문 칸 안에서 옆으로 넘긴다. */
.wb-site #bo_v_con {
  width: auto;
  min-height: 0;
  margin: 0 0 32px;
  overflow-x: auto;
  color: var(--wb-c-text);
  font-size: 16px;
  line-height: 26px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.wb-site #bo_v_con a {
  color: var(--wb-c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site #bo_v_con :is(img, video, iframe) {
  max-width: 100%;
}
.wb-site #bo_v_con img {
  height: auto;
}
.wb-site .wb-board--view #bo_v_img img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 16px;
  border-radius: var(--wb-r-m);
}
/* 첨부 파일·관련 링크: 옅은 하늘 줄. 파일 이름은 링크 색 밑줄, 내려받은 수·날짜는 회색 */
.wb-site .wb-board--view :is(#bo_v_file, #bo_v_link) {
  margin: 0 0 24px;
}
.wb-site .wb-board--view :is(#bo_v_file, #bo_v_link) ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wb-site .wb-board--view :is(#bo_v_file, #bo_v_link) li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--wb-c-border-soft);
  border-radius: var(--wb-r-s);
  background: var(--wb-c-tint);
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
}
.wb-site .wb-board--view :is(#bo_v_file, #bo_v_link) a {
  display: inline;
  float: none;
  width: auto;
  padding: 0;
  color: var(--wb-c-link);
  font-size: 15px;
  line-height: 22px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 옛 첨부·링크 아이콘 그림(basic·gallery 스킨에는 파일이 없어 깨져 보였다)은 숨긴다. 링크 이름은 파일 이름이다. */
.wb-site .wb-board--view :is(#bo_v_file, #bo_v_link) img {
  display: none;
}
.wb-site .wb-board--view :is(#bo_v_file, #bo_v_link) :is(.bo_v_file_cnt, .bo_v_link_cnt) {
  margin: 0;
  color: var(--wb-c-muted);
  font-size: inherit;
}
/* 보기 안의 칸 표(채용공고 요강, 입사지원·문의 정보, 지점 정보): 칸 이름은 옅은 하늘 바탕. 860 미만은 이름·내용 두 칸씩 줄을 바꾼다. */
.wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) {
  width: auto;
  margin: 0 0 32px;
  border: 0;
}
.wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--wb-c-divider);
  font-size: 15px;
  line-height: 22px;
  text-align: left;
}
.wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) tr {
  height: auto;
  border: 0;
}
.wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) :is(th, td) {
  height: auto;
  padding: 12px 16px !important;
  border: 0;
  border-bottom: 1px solid var(--wb-c-divider);
  font-size: 15px;
  line-height: 22px;
  text-align: left;
  vertical-align: top;
}
.wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) th {
  background: var(--wb-c-tint);
  color: var(--wb-c-text-strong);
  font-weight: 600;
  white-space: nowrap;
}
.wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) td {
  background: none;
  color: var(--wb-c-text);
}
.wb-site .wb-board--view :is(.simple_table, .sub02table) td #bo_v_con {
  margin: 0;
}
@media (max-width: 859.98px) {
  .wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) :is(table, tbody) {
    display: block;
  }
  .wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) colgroup {
    display: none;
  }
  .wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) tr {
    display: grid;
    grid-template-columns: minmax(88px, 30%) minmax(0, 1fr);
  }
  .wb-site .wb-board--view :is(.simple_table, .tbl_frm01, .sub02table) th {
    white-space: normal;
  }
}
/* 사진 게시판의 큰 사진(가로 730 고정)과 썸네일 줄(갤러리·지점 보기) */
.wb-site .wb-board--view .sub05viewtable {
  margin: 0 0 24px;
}
.wb-site .wb-board--view .sub05viewtable p {
  margin: 0 0 12px;
  padding: 0;
}
.wb-site .wb-board--view .sub05viewtable p img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--wb-r-m);
}
.wb-site .wb-board--view .sub05-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wb-site .wb-board--view .sub05-2 li {
  float: none;
  margin: 0;
}
.wb-site .wb-board--view .sub05-2 img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--wb-r-s);
}
/* 지점 보기의 제목 줄: '단지명' 눈썹 글과 글 제목 h2 */
.wb-site .wb-board--view .sub05-1 {
  height: auto;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid var(--wb-c-divider);
}
.wb-site .wb-board--view .sub05-1 li {
  float: none;
  width: auto;
  padding: 0;
  background: none;
  line-height: inherit;
}
.wb-site .wb-board--view .sub05-1 li:first-child {
  margin: 0 0 8px;
  color: var(--wb-c-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .08em;
}
.wb-site .wb-board--view .wb-board-view__actions {
  margin: 24px 0 0 !important;
}
/* 댓글 목록(basic 스킨의 법규·운동정보 글): '댓글 N' 줄(누르면 목록을 접고 편다, 스킨 JS) 아래 선과 회색 안내 글 */
.wb-site .wb-board--view .cmt_btn {
  display: block;
  width: 100%;
  margin: 32px 0 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--wb-c-divider);
  background: none;
  color: var(--wb-c-text-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}
.wb-site .wb-board--view .cmt_btn b {
  color: inherit;
  font-size: inherit;
}
.wb-site .wb-board--view .cmt_btn span.total {
  color: var(--wb-c-accent);
}
.wb-site .wb-board--view .cmt_btn span.total::after {
  bottom: -13px;
  background: var(--wb-c-navy);
}
.wb-site .wb-board--view #bo_vc {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: none;
}
.wb-site .wb-board--view #bo_vc_empty {
  margin: 0;
  padding: 16px 0 !important;
  color: var(--wb-c-muted);
  text-align: left;
  font-size: 15px;
  line-height: 22px;
}
@media (min-width: 1440px) {
  .wb-site .wb-board--view .wb-board-view__title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ── 쓰기(#bo_w): 칸 이름이 붙은 칸. 860 이상은 이름(th)이 왼쪽 칸, 860 미만은 이름이 칸 위. 저장·취소는 가운데 한 줄. ── */
.wb-site .wb-board--write {
  margin: 0;
}
.wb-site .wb-board--write .sub0205ul {
  margin: 0 0 24px;
  padding: 0;
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) {
  width: auto;
  margin: 0;
  border: 0;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-top: 2px solid var(--wb-c-navy);
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) tr {
  height: auto;
  border: 0;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) :is(th, td) {
  height: auto;
  padding: 12px 16px !important;
  border: 0;
  border-bottom: 1px solid var(--wb-c-divider);
  color: var(--wb-c-text);
  font-size: 15px;
  line-height: 22px;
  text-align: left !important;
  vertical-align: middle;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) th {
  background: var(--wb-c-tint);
  color: var(--wb-c-text-strong);
  font-weight: 600;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) :is(th, td) label {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit;
  cursor: default;
}
/* 칸이 하나인 줄만 칸이 줄 폭을 채운다. 칸이 여럿인 줄(채용공고 근무시간: 평일 : 칸 ~ 칸 · 주말 : 칸 ~ 칸, 지점 관리기간: 칸 ~ 칸)은
   칸이 스킨 폭(100px) 그대로 글자와 마크업 차례대로 한 줄에 선다. 옛 float(스킨 인라인 style, style.css의 .etc1 label)와 여백은 끈다.
   860 미만에서는 두 묶음 사이의 빈 label(바로 뒤에 label이 오는 것)이 줄을 바꿔, 이름표와 '~'가 제 칸과 같은 줄에 남는다. */
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01)
  td:not(:has(:is(input[type="text"], input[type="password"], select, textarea) ~ :is(input[type="text"], input[type="password"], select, textarea)))
  :is(input[type="text"], input[type="password"], select, textarea) {
  width: 100% !important;
  max-width: 100%;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01)
  td:has(:is(input[type="text"], input[type="password"], select, textarea) ~ :is(input[type="text"], input[type="password"], select, textarea)) > * {
  float: none !important;
  max-width: 100%;
  vertical-align: middle;
}
.wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01)
  td:has(:is(input[type="text"], input[type="password"], select, textarea) ~ :is(input[type="text"], input[type="password"], select, textarea))
  > :is(input[type="text"], input[type="password"], select, textarea) {
  margin: 0 !important;
}
.wb-site .wb-board--write #captcha {
  max-width: 100%;
}
.wb-site .wb-board--write #captcha #captcha_key {
  width: 120px !important;
}
.wb-site .wb-board--write :is(.sub0205a, .writebtn) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin: 32px 0 0;
}
.wb-site .wb-board--write :is(.sub0205a, .writebtn)::after {
  content: none;
}
.wb-site .wb-board--write :is(.sub0205a, .writebtn) li {
  float: none;
  margin: 0 !important;
}
/* 입사지원 안내 줄(※ 이력서 …)과 기본이력서 다운로드 단추 */
.wb-site .wb-board--write #fwrite > div:not([class]) {
  margin: 24px 0 0;
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
}
.wb-site .wb-board--write #fwrite > div:not([class]) > br:first-child {
  display: none;
}
.wb-site .wb-board--write #fwrite > div:not([class]) .btn_b01 {
  margin-top: 12px;
}
@media (max-width: 859.98px) {
  .wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) :is(table, tbody, tr, th, td) {
    display: block;
    width: auto !important;
  }
  .wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) colgroup {
    display: none;
  }
  .wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) th {
    padding: 16px 0 6px !important;
    border: 0;
    background: none;
  }
  .wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01) td {
    padding: 0 0 16px !important;
  }
  .wb-site .wb-board--write :is(.sub02table, .sub05viewtable, .tbl_frm01)
    td:has(:is(input[type="text"], input[type="password"], select, textarea) ~ :is(input[type="text"], input[type="password"], select, textarea))
    > label:has(+ label) {
    display: block;
    height: 8px;
    overflow: hidden;
  }
}

/* ── 공개 셸을 쓰는 bbs 화면: 검색 결과 · 내용(개인정보 처리방침) · 회원가입 약관 · 회원정보 찾기·재설정 · 새글 · 현재접속자 · 메일 인증 ──
   스킨 PHP는 그대로다(이미지 버튼도 잘못된 중첩도 없었다). 모양은 스킨의 id(#sch_res_detail·#sch_result, #ctt, #fregister,
   #find_info·#pw_reset, #new_sch·#fnewlist, #current_connect)와 메일 인증 폼(form[name="fregister_email"])으로 그린다.
   스킨 style.css는 add_stylesheet로 이 파일보다 뒤에 붙으므로 그 선택자 앞에 .wb-site를 더해 이긴다. default.css의 !important는 !important로만 덮인다.
   검색·내용·새글·현재접속자는 페이지 머리(화면 제목) 아래 본문 폭이다. 회원 화면(약관·찾기·재설정·메일 인증)은 회원 집중 화면
   (body.wb-member-page, 2026-08 가입 폼과 같은 960px 틀)이고 본문 묶음이 가운데에 선다(약관은 가입 폼과 같은 760px, 나머지는 560px).
   글 단추와 입력칸은 게시판 부분의 같은 규칙(글 단추·입력칸)이 그린다. 아이콘 글꼴(Font Awesome)은 공개 화면에 없어서 그 빈 <i>는 숨긴다. */

/* 바탕: 옛 요소 규칙(a 12px, p break-all, h2 17px, 입력칸 5px 여백)을 덮는다. 점수 낮은 :where로 둔다.
   내용 화면(#ctt)의 본문은 관리자가 쓴 HTML이라 자손을 한꺼번에 덮지 않는다(제목·목록·표의 위계를 남긴다, 아래 '내용'). */
.wb-site :where(#sch_res_detail, #sch_result, #ctt, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, #current_connect, .rg_em_p,
  form[name="fregister_email"]) {
  font-family: var(--wb-font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--wb-c-text);
}
.wb-site :where(#sch_res_detail, #sch_result, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, #current_connect, .rg_em_p,
  form[name="fregister_email"]) :where(a, p, li, th, td, h2, h3, label, legend, button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-break: inherit;
}
.wb-site :where(#sch_res_detail, #sch_result, #ctt, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, #current_connect,
  form[name="fregister_email"]) :where(a, button, input, select, textarea):focus {
  outline: 3px dotted currentColor;
  outline-offset: 2px;
}
.wb-site :where(#sch_res_detail, #sch_result, #fregister, #new_sch, #fnewlist) i.fa {
  display: none;
}

/* 회원 집중 화면의 화면 제목(h1.wb-member-title: inc/wb_site_page_head.php가 집중 틀 #sub_content 맨 위에 그린다. 가입 폼은 폼 머리에
   h1이 있다): 머리 띠·경로 없이 가운데. 글자 단계 h3(24/32, 1440 이상 32/40). 본문 묶음(약관·찾기·재설정·메일 인증)은 제목 아래 24px. */
.wb-site .wb-member-title {
  margin: 38px 0 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.015em;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (max-width: 539.98px) {
  .wb-site .wb-member-title {
    margin-top: 24px;
  }
}
@media (min-width: 1440px) {
  .wb-site .wb-member-title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* 자동등록방지(kcaptcha, 회원 화면): 그림(100×44) 오른쪽에 듣기·새로고침 그림 단추(그누보드 자리 그대로), 그 옆에 숫자 칸(120px), 아래 안내 글 */
.wb-site :is(#find_info, #pw_reset, form[name="fregister_email"]) #captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
.wb-site :is(#find_info, #pw_reset, form[name="fregister_email"]) #captcha #captcha_img {
  box-sizing: border-box;
  width: 100px;
  height: 44px;
  border: 1px solid var(--wb-c-divider);
  border-radius: var(--wb-r-xs);
}
.wb-site :is(#find_info, #pw_reset, form[name="fregister_email"]) #captcha #captcha_key {
  box-sizing: border-box;
  width: 120px;
  height: 44px;
  margin: 0 0 0 32px;
  padding: 0 12px;
  border: 1px solid #878ea0;
  border-radius: var(--wb-r-s);
  background-color: #fff !important;
  color: var(--wb-c-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.wb-site :is(#find_info, #pw_reset, form[name="fregister_email"]) #captcha #captcha_info {
  flex: 1 0 100%;
  margin: 0;
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
}

/* 검색 결과(bbs/search.php): 옅은 하늘 판의 검색 줄(분류·검색 조건, 검색어 칸과 '검색', AND·OR 알약) → 결과 요약(검색어와 수) →
   게시판 알약(40px, 현재 게시판은 남색) → 게시판마다 결과(제목 h2와 더보기, 글마다 제목·새창·본문 일부·작성자와 날짜, 줄 사이 1px 선) → 쪽 번호 */
.wb-site #sch_res_detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
  min-width: 0; /* fieldset은 기본으로 내용의 최소 폭보다 좁아지지 않는다 */
  margin: 0 0 40px;
  padding: 24px;
  border: 0;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-tint);
  text-align: left;
}
.wb-site #sch_res_detail select {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}
.wb-site #sch_res_detail .sch_wr {
  display: flex;
  flex: 1 1 320px;
  gap: 8px;
  min-width: 0;
  max-width: 560px;
}
.wb-site #sch_res_detail .sch_wr .frm_input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.wb-site #sch_res_detail .sch_wr .btn_submit {
  flex: none;
}
/* AND·OR: 숨긴 라디오의 label 알약 둘(40px). 고른 것은 남색, 라디오에 키보드 포커스가 있으면 label에 점선. */
.wb-site #sch_res_detail .switch_field {
  display: inline-flex;
  gap: 4px;
  padding: 0;
}
.wb-site #sch_res_detail .switch_field label {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  box-sizing: border-box;
  width: auto;
  min-width: 56px;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-fill);
  box-shadow: none;
  color: var(--wb-c-navy-pressed);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--wb-dur-pill) ease-in-out, color var(--wb-dur-pill) ease-in-out;
}
.wb-site #sch_res_detail .switch_field label:hover {
  background: var(--wb-c-fill-hover);
}
.wb-site #sch_res_detail .switch_field input:checked + label {
  background: var(--wb-c-navy-selected);
  color: #fff;
}
.wb-site #sch_res_detail .switch_field input:focus-visible + label {
  outline: 3px dotted var(--wb-c-navy-pressed);
  outline-offset: 2px;
}
.wb-site #sch_res_ov {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  height: auto;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: inherit;
  text-align: left;
}
.wb-site #sch_res_ov::after {
  content: none;
}
.wb-site #sch_res_ov h2 {
  display: block;
  float: none;
  margin: 0;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.wb-site #sch_res_ov h2 strong {
  color: var(--wb-c-accent);
  font-weight: inherit;
}
.wb-site #sch_res_ov ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  float: none;
  margin: 0;
  padding: 0;
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
  list-style: none;
}
.wb-site #sch_res_ov ul::after {
  content: none;
}
.wb-site #sch_res_ov li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.wb-site #sch_res_ov li + li {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--wb-c-divider);
}
.wb-site #sch_res_board {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.wb-site #sch_res_board li {
  display: block;
  margin: 0;
  padding: 0;
}
.wb-site #sch_res_board a {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--wb-r-pill);
  background: var(--wb-c-fill);
  box-shadow: none;
  color: var(--wb-c-navy-pressed);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--wb-dur-pill) ease-in-out, color var(--wb-dur-pill) ease-in-out;
}
.wb-site #sch_res_board a:hover,
.wb-site #sch_res_board a:focus {
  background: var(--wb-c-fill-hover);
  color: var(--wb-c-navy-pressed);
}
.wb-site #sch_res_board a.sch_on {
  background: var(--wb-c-navy-selected);
  box-shadow: none;
  color: #fff;
}
.wb-site #sch_res_board a.sch_on:focus {
  outline-color: var(--wb-c-navy-pressed);
}
.wb-site #sch_res_board a strong {
  font-weight: 600;
}
.wb-site #sch_res_board li a .cnt_cmt {
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
}
.wb-site #sch_result > hr {
  display: none;
}
.wb-site #sch_result .search_board_result {
  position: relative;
  margin: 0 0 48px;
}
.wb-site #sch_result .sch_res_list h2 {
  margin: 0 0 16px;
  padding-right: 88px;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.wb-site #sch_result .sch_res_list h2 a {
  color: inherit;
  text-decoration: none;
}
.wb-site #sch_result .sch_res_list h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site #sch_result .sch_more {
  position: absolute;
  top: 3px;
  right: 0;
  color: var(--wb-c-accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site #sch_result .sch_res_list ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wb-c-divider);
  list-style: none;
}
.wb-site #sch_result .sch_res_list li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--wb-c-divider);
  background: none;
}
.wb-site #sch_result .sch_tit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 0;
}
.wb-site #sch_result .sch_res_title {
  display: inline;
  margin: 0;
  color: var(--wb-c-text-strong);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-decoration: none;
}
.wb-site #sch_result .sch_res_title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 새창 링크: 아이콘 글꼴이 없어 빈 원이었다. 링크 안에 숨겨 둔 글('새창')을 작은 글 링크로 보인다. */
.wb-site #sch_result .pop_a {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--wb-c-accent);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site #sch_result .pop_a .sound_only {
  position: static;
  font-size: inherit;
  line-height: inherit;
  overflow: visible !important;
}
.wb-site #sch_result .sch_res_list p {
  margin: 8px 0 0;
  padding: 0;
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
}
.wb-site #sch_result .sch_word {
  color: var(--wb-c-text-strong);
  font-weight: 600;
}
.wb-site #sch_result .sch_info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 8px 0 0;
  padding: 0;
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
}
.wb-site #sch_result .sch_info .sv_member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wb-c-text);
  font-weight: 600;
}
.wb-site #sch_result .sch_info .profile_img img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.wb-site #sch_result .sch_datetime {
  margin: 0;
}
.wb-site #sch_result .empty_list {
  margin: 0 0 24px;
  padding: 48px 24px !important;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-tint);
  color: var(--wb-c-muted);
  text-align: center;
}

/* 내용(bbs/content.php: 개인정보 처리방침 등): 제목은 페이지 머리의 H1이라 스킨의 숨은 h1 머리는 감춘다. 본문은 16/26, 한 줄 46rem까지. */
.wb-site #ctt {
  max-width: 46rem;
  margin: 0;
  padding: 0;
  background: none;
}
.wb-site #ctt > header {
  display: none;
}
.wb-site #ctt_con {
  padding: 0;
  font-size: 16px;
  line-height: 26px;
}
.wb-site #ctt_con a {
  color: var(--wb-c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 본문은 관리자가 쓴 HTML이다. 옛 요소 규칙(a 12px, p 21px·break-all, li 표시 없음, h 17px 보통 굵기)은 본문에 맞추고 위계는 남긴다:
   글은 본문 16/26을 따르고, 목록은 표시(원·숫자)와 들여쓰기, 표의 머리 칸(th)은 굵게(브라우저 기본) 둔다.
   제목은 글자 단계에서 페이지 머리 H1(h2 단계) 아래 단계다: h2 = h3 단계(24/32, 1440 이상 32/40), h3 = h4 단계(20/28, 860 이상 22/28,
   1440 이상 24/32), h4 = h5 단계(18/24, 1440 이상 20/28, 600, 자간 normal). */
.wb-site #ctt_con :where(p, li, dt, dd, th, td, a) {
  font-size: inherit;
  line-height: inherit;
  word-break: inherit;
}
.wb-site #ctt_con :where(ul, ol) {
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.wb-site #ctt_con :where(ul, ol) :where(ul, ol) {
  margin: 4px 0 0;
}
.wb-site #ctt_con ul {
  list-style: disc;
}
.wb-site #ctt_con ol {
  list-style: decimal;
}
.wb-site #ctt_con li {
  list-style: inherit;
}
.wb-site #ctt_con :is(h2, h3, h4) {
  margin: 32px 0 12px;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-weight: 500;
}
.wb-site #ctt_con :is(h2, h3, h4):first-child {
  margin-top: 0;
}
.wb-site #ctt_con h2 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.015em;
}
.wb-site #ctt_con h3 {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.wb-site #ctt_con h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: normal;
}
@media (min-width: 860px) {
  .wb-site #ctt_con h3 {
    font-size: 22px;
  }
}
@media (min-width: 1440px) {
  .wb-site #ctt_con h2 {
    font-size: 32px;
    line-height: 40px;
  }
  .wb-site #ctt_con h3 {
    font-size: 24px;
    line-height: 32px;
  }
  .wb-site #ctt_con h4 {
    font-size: 20px;
    line-height: 28px;
  }
}

/* 회원가입 약관(bbs/register.php, 회원 집중 화면): 가입 폼과 같은 가운데 760px. 안내 띠 → 약관·개인정보 카드(제목 줄 오른쪽에 동의 체크,
   약관 글상자, 표) → 모두 동의 줄 → 취소·회원가입 단추 반씩(가입 폼처럼 52px). 체크 상자는 숨긴 체크박스 label 안의 span이다(누르는 자리 44px). */
.wb-site #fregister {
  max-width: 760px;
  margin: 24px auto 0;
}
.wb-site #fregister > p {
  height: auto;
  margin: 0 0 24px;
  padding: 14px 20px;
  border-left: 4px solid var(--wb-c-accent);
  border-radius: var(--wb-r-s);
  background: var(--wb-c-tint-2);
  color: var(--wb-c-accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}
.wb-site #fregister > p::before {
  content: none;
}
.wb-site #fregister section {
  position: relative;
  margin: 0 0 16px;
  border: 0;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-4);
}
.wb-site #fregister section h2 {
  margin: 0;
  padding: 20px 72px 20px 24px;
  border-bottom: 1px solid var(--wb-c-border-card);
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
}
.wb-site #fregister textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 240px;
  margin: 0;
  padding: 16px 24px;
  border: 0;
  border-radius: 0 0 var(--wb-r-l) var(--wb-r-l);
  background: transparent;
  color: var(--wb-c-text);
  font-size: 15px;
  line-height: 24px;
  resize: vertical;
}
.wb-site #fregister textarea:focus {
  outline-offset: -3px;
}
.wb-site #fregister .fregister_terms div {
  padding: 16px 24px 24px;
  background: none;
}
.wb-site #fregister .fregister_terms table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 22px;
}
.wb-site #fregister .fregister_terms :is(th, td) {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--wb-c-divider);
  background: transparent;
  color: var(--wb-c-text);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.wb-site #fregister .fregister_terms th {
  width: 33.33%;
  border-bottom: 2px solid var(--wb-c-navy);
  color: var(--wb-c-text-strong);
  font-weight: 600;
}
.wb-site #fregister section .fregister_agree {
  position: absolute;
  top: 11px;
  right: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
.wb-site #fregister .fregister_agree label {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.wb-site #fregister .fregister_agree label span {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 2px solid #878ea0;
  border-radius: var(--wb-r-xs);
  background: #fff;
}
.wb-site #fregister .selec_chk:checked + label span {
  border-color: var(--wb-c-navy);
  background: var(--wb-c-navy);
}
.wb-site #fregister .selec_chk:checked + label span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wb-site #fregister .selec_chk:focus-visible + label span {
  outline: 3px dotted var(--wb-c-navy-pressed);
  outline-offset: 2px;
}
.wb-site #fregister #fregister_chkall {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-tint);
  line-height: inherit;
  text-align: left;
}
.wb-site #fregister #fregister_chkall label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  height: auto;
  min-height: 56px;
  padding: 12px 22px 12px 24px;
  color: var(--wb-c-text-strong);
  font-weight: 600;
}
.wb-site #fregister #fregister_chkall label span {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
  order: 1;
}
.wb-site #fregister .btn_confirm {
  display: flex;
  gap: 8px;
  margin: 32px 0 0;
  text-align: center;
}
.wb-site #fregister .btn_confirm :is(.btn_close, .btn_submit) {
  flex: 1 1 0;
  min-height: 52px;
}

/* 회원정보 찾기·비밀번호 재설정(회원 집중 화면): 가운데 560px 흰 카드(depth-4). 제목(h3) → 안내 글 → 입력칸 → 자동등록방지 → 전체 폭 기본 단추 */
.wb-site :is(#find_info, #pw_reset) {
  max-width: 560px;
  margin: 24px auto 0;
}
.wb-site :is(#find_info, #pw_reset) div.new_win_con {
  float: none; /* 본인인증 찾기를 켜면 회원 스킨이 카드를 460px로 띄운다 */
  width: auto;
  margin: 0;
  padding: 24px;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-surface);
  box-shadow: var(--wb-depth-4);
}
.wb-site :is(#find_info, #pw_reset) div.new_win_con + div.new_win_con {
  margin-top: 16px;
}
.wb-site #find_info h3 {
  display: block;
  margin: 0 0 12px;
  color: var(--wb-c-text-strong);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: left;
}
.wb-site :is(#find_info, #pw_reset) #info_fs {
  margin: 0;
  padding: 0;
  border: 0;
}
.wb-site :is(#find_info, #pw_reset) #info_fs p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 24px;
}
.wb-site :is(#find_info, #pw_reset) #info_fs b {
  display: block;
  color: var(--wb-c-text-strong);
  font-weight: 600;
}
.wb-site #pw_reset #info_fs br {
  display: none; /* 숨긴 '아이디' label 뒤의 줄바꿈: 블록인 회원 아이디 줄 앞에 빈 줄을 만든다 */
}
.wb-site :is(#find_info, #pw_reset) #info_fs .full_input {
  display: block;
  width: 100%;
  margin: 12px 0 0;
}
.wb-site :is(#find_info, #pw_reset) .win_btn {
  margin: 24px 0 0;
  padding: 0;
}
.wb-site :is(#find_info, #pw_reset) .win_btn .btn_submit {
  width: 100%;
}

/* 새글(bbs/new.php): 검색 판(그룹·글 종류, 회원 아이디 칸, '검색', 안내 글) → 표. 860 이상은 머리 줄 아래 2px 남색 선과 행 사이 1px 선,
   860 미만은 머리 줄 없이 제목이 맨 위인 카드 행. 그룹·게시판 이름은 작은 이름표다. */
.wb-site #new_sch {
  min-width: 0; /* fieldset은 기본으로 내용의 최소 폭보다 좁아지지 않는다 */
  margin: 0 0 32px;
  padding: 24px;
  border: 0;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-tint);
  text-align: left;
}
.wb-site #new_sch form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
}
.wb-site #new_sch select {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}
.wb-site #new_sch #mb_id {
  flex: 1 1 160px;
  width: auto;
  min-width: 0;
  max-width: 320px;
}
.wb-site #new_sch .btn_submit {
  flex: none;
}
.wb-site #new_sch p {
  flex: 1 0 100%;
  margin: 0;
  padding: 0;
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-align: left;
}
/* 관리자의 선택삭제(div.admin_new_btn, 표 위·아래): 글 단추 보조 모양(위 '글 단추'). 아이콘 글꼴이 없으므로 그누보드가 숨겨 둔
   글(span.sound_only '선택삭제')을 단추 글로 보인다. */
.wb-site #fnewlist .admin_new_btn .sound_only {
  position: static;
  font-size: inherit;
  line-height: inherit;
  overflow: visible !important;
}
.wb-site #fnewlist .tbl_head01 {
  margin: 0;
}
.wb-site #fnewlist table {
  width: 100%;
  table-layout: auto; /* style.css의 fixed(첫 줄 칸 폭이 모든 칸)를 풀어 제목 칸이 남는 폭을 쓴다 */
  border-collapse: collapse;
}
.wb-site #fnewlist thead th {
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid var(--wb-c-navy);
  background: transparent;
  color: var(--wb-c-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
}
.wb-site #fnewlist tbody td {
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--wb-c-divider);
  color: var(--wb-c-muted);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
}
.wb-site #fnewlist .new_tit {
  color: var(--wb-c-text-strong);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}
.wb-site #fnewlist .new_tit:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-site #fnewlist :is(.td_group, .td_board) a {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--wb-r-xs);
  background: var(--wb-c-tint-2);
  color: var(--wb-c-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}
.wb-site #fnewlist :is(td.td_group, td.td_board, td.td_name, td.td_date) {
  width: 1%; /* 짧은 칸은 글 폭만, 나머지는 제목 칸 */
  white-space: nowrap;
}
.wb-site #fnewlist td.empty_table {
  padding: 48px 16px !important;
  text-align: center;
}
@media (max-width: 859.98px) {
  .wb-site #fnewlist :is(table, tbody) {
    display: block;
    width: 100%;
  }
  .wb-site #fnewlist thead {
    display: none;
  }
  .wb-site #fnewlist tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--wb-c-divider);
  }
  .wb-site #fnewlist tbody td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 20px;
  }
  .wb-site #fnewlist :is(td.td_group, td.td_board, td.td_name, td.td_date) {
    width: auto;
  }
  .wb-site #fnewlist tbody td:not([class]) {
    flex: 1 0 100%;
    order: -1;
  }
  .wb-site #fnewlist td.empty_table {
    flex: 1 0 100%;
    padding: 32px 0 !important;
  }
}

/* 현재접속자(bbs/current_connect.php): 줄마다 번호, 프로필 사진 원(40px), 이름과 있는 곳. 줄 사이 1px 선. 없으면 옅은 하늘 판의 안내 글. */
.wb-site #current_connect ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-site #current_connect ul::after,
.wb-site #current_connect li::after {
  content: none;
}
.wb-site #current_connect li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--wb-c-divider);
}
.wb-site #current_connect li:first-child {
  border-top: 1px solid var(--wb-c-divider);
}
.wb-site #current_connect .crt_num {
  flex: none;
  float: none;
  min-width: 32px;
  margin: 0;
  color: var(--wb-c-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.wb-site #current_connect .crt_profile {
  flex: none;
  float: none;
  margin: 0;
  line-height: 0;
}
.wb-site #current_connect .crt_profile > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.wb-site #current_connect .crt_info {
  float: none;
  min-width: 0;
  margin: 0;
}
.wb-site #current_connect .crt_name,
.wb-site #current_connect .crt_name .sv_member {
  color: var(--wb-c-text-strong);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.wb-site #current_connect .crt_lct {
  color: var(--wb-c-muted);
  font-size: 14px;
  line-height: 20px;
}
.wb-site #current_connect .crt_lct a {
  color: inherit;
}
.wb-site #current_connect li.empty_li {
  display: block;
  padding: 48px 24px;
  border: 0;
  border-radius: var(--wb-r-l);
  background: var(--wb-c-tint);
  color: var(--wb-c-muted);
  text-align: center;
}

/* 메일인증 메일주소 변경(bbs/register_email.php, 회원 집중 화면): 가운데 560px. 안내 글 → 칸 이름이 위인 E-mail·자동등록방지 → 단추 줄 */
.wb-site .rg_em_p {
  max-width: 560px;
  margin: 24px auto 16px;
  font-size: 15px;
  line-height: 24px;
}
.wb-site form[name="fregister_email"] {
  max-width: 560px;
  margin: 0 auto;
}
.wb-site form[name="fregister_email"] .rg_em {
  margin: 0;
}
.wb-site form[name="fregister_email"] .rg_em :is(table, tbody, tr, th, td) {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.wb-site form[name="fregister_email"] .rg_em th {
  margin: 16px 0 8px;
  color: var(--wb-c-text-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.wb-site form[name="fregister_email"] .rg_em #reg_mb_email {
  width: 100%;
}
.wb-site form[name="fregister_email"] .btn_confirm {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
}

@media (max-width: 539.98px) {
  .wb-site :is(#sch_res_detail, #new_sch) {
    padding: 16px;
  }
  .wb-site #fregister section h2 {
    padding: 16px 64px 16px 20px;
  }
  .wb-site #fregister section .fregister_agree {
    top: 7px;
    right: 8px;
  }
  .wb-site #fregister textarea {
    height: 200px;
    padding: 16px 20px;
  }
  .wb-site #fregister .fregister_terms div {
    padding: 12px 16px 20px;
  }
  .wb-site #fregister .fregister_terms :is(th, td) {
    padding: 10px 8px;
    font-size: 14px;
    line-height: 20px;
  }
}
@media (min-width: 860px) {
  .wb-site :is(#find_info, #pw_reset) div.new_win_con {
    padding: 32px;
  }
}

/* ── 움직임 줄이기: 전환 없이 바로 바뀐다(애니메이션은 위에서 no-preference일 때만 건다). 인쇄: 떠 있는 것과 열린 서랍은 찍지 않는다. ── */
@media (prefers-reduced-motion: reduce) {
  .wb-site .wb-gnb__button,
  .wb-site .wb-gnb__chevron,
  .wb-site .wb-drawer__toggle .wb-icon,
  .wb-site .wb-drawer__items,
  .wb-site .wb-site-footer__toggle .wb-icon,
  .wb-site .wb-btn,
  .wb-site .wb-tabs__tab,
  .wb-site .wb-accordion__item::before,
  .wb-site .wb-accordion__chevron,
  .wb-site .wb-accordion__panel,
  .wb-site .wb-carousel__arrow,
  .wb-site .wb-section-nav,
  .wb-site .wb-section-nav__chevron,
  .wb-site .wb-section-nav__list a::after,
  .wb-site .wb-card,
  .wb-site .wb-card__media img,
  .wb-site .wb-icon-link__mark,
  .wb-site .wb-section-tabs__link,
  .wb-site .wb-section-tabs__chevron,
  .wb-site .wb-section-tabs::before,
  .wb-site .wb-section-tabs::after,
  .wb-site .wb-section-tabs__arrow,
  .wb-site .wb-to-top,
  .wb-site .wb-float__contact,
  .wb-site .wb-board :is(a.btn_b01, a.btn_b02, a.btn_admin, a.btn_cancel, button.btn_b01, .btn_submit),
  .wb-site #bo_w.wb-board :is(.btn_submit, .btn_cancel),
  .wb-site :is(#sch_res_detail, #fregister, #find_info, #pw_reset, #new_sch, #fnewlist, form[name="fregister_email"]) :is(.btn_submit, .btn_close, .btn_cancel, .btn_b01),
  .wb-site #bo_cate a,
  .wb-site .pg_wrap :is(.pg_page, .pg_current),
  .wb-site #bo_gall.wb-board--gallery #gall_ul > .gall_li,
  .wb-site .wb-board--branch .sub0206list_a,
  .wb-site #sch_res_detail .switch_field label,
  .wb-site #sch_res_board a {
    transition: none;
  }
}
@media print {
  .wb-site .wb-promo,
  .wb-site .wb-search-panel,
  .wb-site .wb-drawer,
  .wb-site .wb-float {
    display: none;
  }
}