/*
 * 사이트 모양 — 섹션 위아래 여백(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 가 같은 변수를 읽는다.
   같은 요소에 font-bold 를 함께 달지 않는다 — Tailwind 가 나중에 넣는 .font-bold 가 이겨 굵기 설정이 먹지 않았다(2026-10-04) */
.sec-title {
    font-weight: var(--site-heading-weight, 700);
    letter-spacing: var(--site-heading-tracking, normal);
    text-transform: var(--site-heading-transform, none);
}

/* 페이지 배너 제목(views/home/page.php·약관·개인정보·views/errors/404.php·views/auth/profile.php, 2026-10-04) — 제목 굵기·자간·영문 대소문자는 사이트 설정을 따르고(비면 예전
   700·보통), 크기는 배너 크기(최대 6xl) 그대로다. 제목 글꼴은 SiteFont::headingCss 가 같은 이름에 건다. font-bold 를 함께 달지 않는다 */
.page-banner-title {
    font-weight: var(--site-heading-weight, 700);
    letter-spacing: var(--site-heading-tracking, normal);
    text-transform: var(--site-heading-transform, none);
}

/* 절차 카드(배치 cards)의 사이트 상자 그림자(box_shadow, 2026-10-04). 비면 없음 — 다른 상자 그림자는 각 섹션 CSS 에 */
.st-card {
    box-shadow: var(--site-box-shadow, none);
}

/* 사진 그림자(섹션 content media_shadow, 2026-10-05) — 틀(SectionColorScheme::frame)이 --sec-media-shadow 를 주면 사진 틀에 깐다.
   비면 없음(지금 모양). 사진 틀마다 이 클래스를 단다(SiteShape::MEDIA_SHADOW_TYPES 의 템플릿) */
.sec-media-shadow {
    box-shadow: var(--sec-media-shadow, none);
}

/* 번지는 바탕(섹션 색 구성 light-gradient·brand-gradient) — 틀(views/home/page.php·편집 화면 미리보기, SectionColorScheme::frame)이
   준 그림을 안쪽 section 의 바탕색 위에 겹친다 */
.section-bg-image > section { background-image: var(--section-bg-image); }

/* 섹션 배경 사진(App\Helpers\SectionPhoto, 2026-10-04) — 틀(SectionColorScheme::frame)이 준 사진을 안쪽 section 의 바탕에 깔고,
   그 섹션의 바탕색(색 구성)을 ::before 막으로 얇게(--sec-bg-veil) 덮는다. 막 색이 곧 바탕색이라 글자색은 색 구성이 정한 그대로
   읽힌다. isolation 으로 막(z-index -1)이 바탕 위·내용 아래에 놓인다. 사진이 번지는 바탕 그림보다 앞선다 */
.sec-bg-photo > section {
    position: relative;
    isolation: isolate;
    background-image: var(--sec-bg-photo) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sec-bg-photo > section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: inherit;
    opacity: var(--sec-bg-veil, 0.6);
    pointer-events: none;
}

/* 제목 안 강조 단어 — 제목 칸에 *말* 로 감싼 부분(App\Helpers\TitleMark). 색은 사이트 설정 title_mark_color(--site-title-mark),
   비면 주 색. 글자가 밝은 자리(첫 화면 사진 위·어두운 바탕 섹션 — 틀이 .title-mark-light)에서는 그 색을 흰색 쪽으로 옅게 해 읽히게 */
.title-mark {
    color: var(--site-title-mark, var(--theme-brand, currentColor));
}

.home-hero .title-mark,
.title-mark-light .title-mark {
    color: color-mix(in srgb, var(--site-title-mark, var(--theme-brand, #ffffff)) 45%, #ffffff);
}

/* 섹션 설명 글 — 절차·표·문의(.sec-desc). 사이트 설정의 내용 자간·굵기(--site-body-*), 없으면 예전 값 */
.sec-desc {
    font-weight: var(--site-body-weight, 400);
    letter-spacing: var(--site-body-tracking, normal);
}

/* 제목·내용 크기 — 섹션 크기 단계가 기본인 머리만(css/content-sections.css 의 .cs-title·.cs-desc 와 같은 규칙) */
.sec-title.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--site-heading-size, 1.875rem); }
.sec-desc.text-lg.md\:text-xl { font-size: var(--site-body-size, 1.125rem); }

@media (min-width: 768px) {
    .sec-title.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--site-heading-size-md, 2.25rem); }
    .sec-desc.text-lg.md\:text-xl { font-size: var(--site-body-size-md, 1.25rem); }
}

@media (min-width: 1024px) {
    .sec-title.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--site-heading-size-lg, 3rem); }
}

/*
 * 공용 버튼(.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;
}