/*
 * 사이트 모양 — 섹션 위아래 여백(App\Helpers\SiteShape, docs/archive/history/design-settings.md I5).
 *
 * Tailwind py-* 대신 이 클래스로 여백을 칠하는 섹션(표·절차·가격표·게시판·문의·오시는 길)이 쓴다.
 * 읽는 순서: 섹션이 고른 여백(--sec-pad) → 사이트 여백(--site-sec-pad, :root) → 그 섹션의 예전 여백(--sec-pad-base).
 * 섹션도 사이트도 고르지 않으면 예전 여백 그대로다. .cs-section 섹션은 css/content-sections.css 가 같은 순서로 읽는다.
 */
.sec-pad {
    padding-top: var(--sec-pad, var(--site-sec-pad, var(--sec-pad-base)));
    padding-bottom: var(--sec-pad, var(--site-sec-pad, var(--sec-pad-base)));
}

@media (min-width: 768px) {
    .sec-pad {
        padding-top: var(--sec-pad-md, var(--site-sec-pad-md, var(--sec-pad-base-md)));
        padding-bottom: var(--sec-pad-md, var(--site-sec-pad-md, var(--sec-pad-base-md)));
    }
}

@media (min-width: 1024px) {
    .sec-pad {
        padding-top: var(--sec-pad-md, var(--site-sec-pad-md, var(--sec-pad-base-lg, var(--sec-pad-base-md))));
        padding-bottom: var(--sec-pad-md, var(--site-sec-pad-md, var(--sec-pad-base-lg, var(--sec-pad-base-md))));
    }
}

/* 섹션 제목 — 절차·표·문의(.sec-title, font-bold 였다). 사이트 설정의 제목 글자 간격·굵기(--site-heading-*)가 있으면 그것,
   없으면 예전 값(굵기 700, 자간 보통). 새 섹션의 .cs-title 은 css/content-sections.css 가 같은 변수를 읽는다. */
.sec-title {
    font-weight: var(--site-heading-weight, 700);
    letter-spacing: var(--site-heading-tracking, normal);
}

/*
 * 공용 버튼(.site-btn) — 섹션 색 구성이 없는 화면(게시판 글·목록 아래·로그인 안내·문의·404 등)의 강조·테두리 버튼.
 * 2026-10-01 버튼 전수 조사: 검정·회색 고정 버튼을 테마 강조색으로 모으고, 사이트 버튼 모양(--site-btn-radius)과
 * "마우스를 올리면 강조 ↔ 테두리가 뒤바뀐다" 규칙을 한 곳에서 지킨다. 5색 사이트의 회색 덮어쓰기(css/site-themed.css)가
 * 걸리지 않게 Tailwind 색 클래스를 함께 쓰지 않는다. 크기(padding·글자)는 템플릿의 Tailwind 클래스가 정한다.
 *   site-btn--primary    강조(테마 강조색 채움) → 마우스를 올리면 투명 + 강조색 테두리·글자
 *   site-btn--secondary  테두리(글자색 35% 테두리 + 글자색) → 마우스를 올리면 강조색 채움
 *   site-btn--on-dark    어두운 바탕 위(게시판 섹션 color_mode=dark) — 테두리형·투명 상태의 글자·테두리를 흰색으로
 */
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--sb-edge);
    border-radius: var(--site-btn-radius, 9999px);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.site-btn--primary {
    --sb-edge: var(--theme-brand, #3b82f6);
    background-color: var(--theme-brand, #3b82f6);
    color: var(--theme-on-brand, #ffffff);
}

.site-btn--primary:hover {
    background-color: transparent;
    color: var(--sb-ink, var(--theme-brand, #3b82f6));
}

.site-btn--secondary {
    --sb-edge: var(--sb-line, color-mix(in srgb, var(--theme-text, #111827) 35%, transparent));
    background-color: transparent;
    color: var(--sb-ink, var(--theme-text, #111827));
}

.site-btn--secondary:hover {
    --sb-edge: var(--theme-brand, #3b82f6);
    background-color: var(--theme-brand, #3b82f6);
    color: var(--theme-on-brand, #ffffff);
}

.site-btn--on-dark {
    --sb-ink: #ffffff;
    --sb-line: rgba(255, 255, 255, 0.7);
}

.site-btn:focus-visible {
    outline: 2px solid var(--theme-brand, #3b82f6);
    outline-offset: 2px;
}

/* 조작 단추의 선택 표시(게시판 분류 칩·FAQ 칩·현재 쪽 번호·펼친 FAQ 원) — 검정·회색 고정 대신 테마 강조색 */
.site-chip-active {
    border-color: var(--theme-brand, #3b82f6) !important;
    background-color: var(--theme-brand, #3b82f6) !important;
    color: var(--theme-on-brand, #ffffff) !important;
}

/* 직접 지정 색 버튼의 마우스 오버(행동 유도·숫자·이미지와 글·옛 이미지와 글) — 색이 인라인이라 템플릿이 변수로 함께 적는다.
   btn-swap-fill: 채운 버튼 → 투명 + 채움 색(--btn-fill) 테두리·글자.
   btn-swap-edge: 테두리 버튼 → 테두리 색(--btn-edge)으로 채우고 그 위에서 읽히는 글자(--btn-on). */
.btn-swap-fill:hover {
    background-color: transparent !important;
    border-color: var(--btn-fill) !important;
    color: var(--btn-fill) !important;
}

.btn-swap-edge:hover {
    background-color: var(--btn-edge) !important;
    border-color: var(--btn-edge) !important;
    color: var(--btn-on) !important;
}

/* 펼친 FAQ 질문의 원 — 검정·흰색 고정 대신 테마 강조색 */
.faq-indicator--open {
    border-color: var(--theme-brand, #3b82f6) !important;
    color: var(--theme-brand, #3b82f6) !important;
}