/*
 * 30종 스킨 공통 기본 스타일. tokens.css 다음, 각 스킨 skin.css 앞에 실린다.
 *
 * 래퍼 규칙
 *   .afs-skin.afs-frame  헤더·푸터 래퍼 — display: contents (고정 헤더가 페이지 전체를 기준으로 붙도록)
 *   .afs-skin.afs-page   목록·상세·메인 섹션 래퍼 — 시안의 <body> 역할
 *   스킨 CSS 는 모두 .sk-{id} 로 한정되어 있어 래퍼 밖(게시판 본문·회원 화면)에는 영향이 없다.
 *
 * 리셋은 :where() 로 감싸 우선순위 0 — 스킨 CSS 가 언제나 이긴다.
 */
.afs-skin.afs-frame { display: contents; }
.afs-skin {
  font-family: var(--sk-font);
  color: var(--sk-text, #16181d);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body:has(.afs-skin) { background: var(--sk-bg, #fff); }

:where(.afs-skin) *, :where(.afs-skin) *::before, :where(.afs-skin) *::after { box-sizing: border-box; }
:where(.afs-skin) :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.afs-skin) :where(ul, ol) { padding: 0; list-style: none; }
:where(.afs-skin) img { display: block; max-width: 100%; }
:where(.afs-skin) a { color: inherit; }
:where(.afs-skin) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.afs-skin) :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 레이아웃: 스킨 화면은 전체 폭(각 스킨 .wrap 이 폭을 정함), 그 밖의 코어 화면은 가운데 정렬 컨테이너 */
.afs-main { display: block; }
.afs-content { width: 100%; }
.afs-content:not(:has(.afs-page)) { max-width: var(--sk-content-max, 1240px); margin-inline: auto; padding: 24px 16px 48px; }

/* GNB 하위 메뉴 (커뮤니티 ▾ 등) — 스킨이 따로 정의하지 않으면 이 모양을 쓴다 */
.afs-has-sub { position: relative; }
.afs-sub {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 160px; padding: 6px;
  border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; background: #fff; color: #1a1c20;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.afs-has-sub:hover > .afs-sub, .afs-has-sub:focus-within > .afs-sub { opacity: 1; visibility: visible; transform: none; }
.afs-sub a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; color: inherit; }
.afs-sub a:hover, .afs-sub a[aria-current] { background: var(--brand-50); color: var(--brand-700); }

/* 사업자 정보 등 코어 컴포넌트를 스킨 푸터 안에 넣을 때 */
.afs-business { font-size: 12px; line-height: 1.7; opacity: .85; }
.afs-business :where(dl, dt, dd) { display: inline; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  :where(.afs-skin) *, :where(.afs-skin) *::before, :where(.afs-skin) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}