/* ============================================================
   밝은빛 타이치 문화학교 — 서브페이지 공용 콘텐츠 컴포넌트
   css/style.css(토큰·chrome)에 얹어 쓴다. 54개 서브페이지에
   거의 동일하게 반복되던 인라인 <style> 패턴을 여기로 모았다.
   전부 var(--...) 토큰만 쓴다 — raw hex 금지(DESIGN.md).
   ============================================================ */

/* ── 브레드크럼 / 서브페이지 상단 ──────────────────────────── */
.page-header {
    margin-top: var(--header-h);
    padding: var(--space-7) 0;
    background: var(--bg-subtle);
    text-align: center;
    transition: background .3s;
}
.breadcrumb { color: var(--text-faint); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.breadcrumb a { color: var(--text-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.page-title { font-size: var(--text-3xl); color: var(--text); margin: 0; }

/* 로고/이미지를 제목 옆에 두는 변형(태극권 레거시 페이지들) */
.page-title-area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
    padding: var(--space-7) 0 var(--space-6);
}
.page-title-area h1 { font-size: var(--text-2xl); }
.page-title-area .title-logo {
    width: 280px;
    height: auto;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .page-title-area { flex-direction: column; }
    .page-title-area .title-logo { width: 100%; }
}

/* 배경색으로 채운 라벨(섹션 안 소제목). 텍스트만 강조할 땐 .eyebrow를 쓴다 */
.section-label {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 6px var(--space-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
}
.section-divider { border: none; border-top: 1px dashed var(--border-strong); margin: var(--space-7) 0; }

/* ── 본문 블록 ─────────────────────────────────────────────── */
.content-block { max-width: var(--container-narrow); margin: 0 auto var(--space-8); }
.content-block:last-child { margin-bottom: 0; }
.content-block h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); color: var(--text); text-align: center; }
/* > 직계 자식만 — content-block 안에 중첩된 .wa-card 같은 컴포넌트의 h3까지 덮어쓰지 않도록 */
.content-block > h3 { font-size: var(--text-xl); margin: var(--space-7) 0 var(--space-4); color: var(--accent); }
.content-block p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-muted); margin-bottom: var(--space-4); }
.section-body p { line-height: var(--leading-relaxed); color: var(--text); margin-bottom: var(--space-3); }

/* 액센트로 꽉 채운 CTA 밴드(문의 유도 등). 불릿 목록은 .wa-list를 재사용 */
.cta-banner { padding: var(--space-9) 0; background: var(--accent); color: #fff; text-align: center; }
.cta-banner h2 { color: #fff; margin-bottom: var(--space-4); }
.cta-banner p { margin-bottom: var(--space-6); font-size: var(--text-lg); opacity: .95; }
.cta-banner .btn { background: #fff; color: var(--accent); border-color: #fff; }
.cta-banner .btn:hover { background: var(--bg-subtle); border-color: var(--bg-subtle); }

.content-image { margin: var(--space-6) auto; text-align: center; }
.content-image img { max-width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.content-image figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }

/* 꽉 채운 작은 라벨 뱃지(투로 종류 등). 더 옅은 강조는 .wa-mark를 쓴다 */
.badge { display: inline-block; padding: 4px var(--space-4); background: var(--accent); color: #fff; font-size: var(--text-xs); border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
/* 틀린 예/비교 대상 등 액센트를 쓰면 안 되는 중립 라벨 */
.badge--muted { background: var(--text-faint); }

/* 사진 + 태그 + 설명의 비교 카드(올바른 예 / 틀린 예 등) */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin: var(--space-7) 0; }
.compare-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border-top: 4px solid var(--accent); }
.compare-card.wrong { border-top-color: var(--text-faint); }
.compare-card img { width: 100%; height: auto; display: block; }
.compare-card .card-body { padding: var(--space-5); text-align: center; }
.compare-card p { margin: 0; color: var(--text); font-size: var(--text-sm); line-height: var(--leading-normal); }
/* 래퍼 없이 본문에 바로 놓이는 단독 이미지(그림자 없이, 설명 사진류) */
.img-inline { display: block; margin: var(--space-6) 0; max-width: 100%; height: auto; border-radius: var(--radius); }

/* 옅은 배경 박스로 묶은 설명 블록(정의·목적·요점 나열 등) */
.callout-box { background: var(--surface-2); padding: var(--space-5); margin: var(--space-5) 0; border-radius: var(--radius); }
.callout-box > * + * { margin-top: var(--space-4); }

/* 고정폭 이미지 + 가변폭 텍스트가 나란히(비전 소개 등). 모바일은 1단으로 쌓임 */
.media-row { display: flex; gap: var(--space-7); align-items: flex-start; }
.media-row img { max-width: 320px; flex-shrink: 0; }
.media-row .media-row-text { padding-top: var(--space-2); }
.media-row .media-row-text p { line-height: var(--leading-relaxed); }
@media (max-width: 768px) {
    .media-row { flex-direction: column; }
    .media-row img { max-width: 100%; }
}

/* 2단 레이아웃(지도+시설목록 등). 모바일은 1단으로 쌓임 */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.two-col--narrow { max-width: var(--container-narrow); margin: 0 auto; }
/* 칸 안에 중첩된 섹션은 위 여백을 빼서 옆 칸(지도 등)과 윗선을 맞춘다 */
.two-col .content-section { padding-top: 0; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }

/* 지도·영상 등 iframe 임베드 래퍼 */
.media-frame { width: 100%; border-radius: var(--radius); overflow: hidden; }
.media-frame iframe, .media-frame video { width: 100%; height: 400px; border: 0; display: block; }

/* 영상 카드 여러 개를 그리드로(증상별 간편 운동법 등) */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); margin: var(--space-7) 0; }
.video-grid .video-card { max-width: none; margin: 0; height: 100%; display: flex; flex-direction: column; }

/* 유튜브 등 16:9 영상 + 설명이 붙은 카드(수련 영상 등) */
.video-card { max-width: 700px; margin: var(--space-7) auto; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.video-card .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-card .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card .video-body { padding: var(--space-6); }
.video-card .video-body h3 { margin-bottom: var(--space-3); }
.video-card .video-body p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: var(--space-2) 0; }

/* 연락처 정보 텍스트 블록(지도 카드와 나란히, .two-col 왼쪽 칸 등) */
.info-block h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); color: var(--text); }
.info-block h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); color: var(--accent); }
.info-block p { color: var(--text-muted); line-height: var(--leading-normal); margin-bottom: var(--space-2); }
.info-block a { color: var(--accent); text-decoration: none; transition: color .25s; }
.info-block a:hover { color: var(--accent-hover); }
.info-block .btn-row { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.info-block .btn-row a {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: background .25s, transform .25s, box-shadow .25s;
}
.info-block .btn-row a:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow); }

/* 카카오맵 약도 — 로더가 넣는 고정 폭(640px)을 칸 폭에 맞춘다 */
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-embed .root_daum_roughmap { width: 100% !important; }

/* 작은 정보 칩 그리드(시설/편의시설, 파트너 로고/텍스트 나열 등) */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.info-item { padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius); text-align: center; font-weight: 500; }
.info-item strong { display: block; margin-bottom: var(--space-1); color: var(--accent); }

/* 사진 여러 장을 나란히(캡션 포함 가능) */
.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin: var(--space-6) 0; }
.image-grid figure { margin: 0; text-align: center; }
.image-grid img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.image-grid figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

/* 인용구(고전 원문 등) */
.quote-block {
    border-left: 3px solid var(--accent);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
    background: var(--surface-2);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}
/* 원문(고전 인용 등) + 번역을 함께 둘 때는 기울임 없이, 원문은 진하게 */
.quote-block .original { font-style: normal; font-weight: 500; color: var(--text); margin-bottom: var(--space-2); }
.quote-block .translation { font-style: normal; color: var(--text-muted); line-height: var(--leading-relaxed); }

/* 원형 아이콘 + 제목 + 설명 그리드(프로그램 카테고리 등) */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-7);
}
.icon-item { text-align: center; padding: var(--space-4); }
.icon-badge {
    width: 100px; height: 100px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-5);
}
.icon-badge svg { width: 40px; height: 40px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.icon-item h3 { font-size: var(--text-lg); color: var(--text); margin-bottom: var(--space-3); }
.icon-item p { color: var(--text-faint); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* 사진 두 장을 나란히 두는 큰 분할 배너(오프라인/온라인 프로그램 CTA 등) */
.split-banner { display: grid; grid-template-columns: 1fr 1fr; }
.split-banner-item {
    height: 450px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff; position: relative;
}
.split-banner-item .card-subtitle { font-size: var(--text-base); margin-bottom: var(--space-2); letter-spacing: .05em; }
.split-banner-item .card-title { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
.split-banner-item .btn {
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    letter-spacing: .05em;
}
.split-banner-item .btn:hover { background: #fff; color: var(--text); border-color: #fff; }
@media (max-width: 768px) { .split-banner { grid-template-columns: 1fr; } }

/* ── 카드 ─────────────────────────────────────────────────── */
/* 기본 카드 그리드/카드는 .wa-cards/.wa-card(css/style.css)를 사이트 전역에서 재사용한다. */
.card-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}
/* 카드 안에서 아이콘/번호를 글 위에 가운데로 둘 때(연구회 원칙 카드 등) */
.card-icon--center { margin: 0 auto var(--space-5); }

/* content-block 안의 확대된 리드 문단(서론 강조) */
.content-block .lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-muted); margin-bottom: var(--space-8); text-align: center; }

/* 문단 뒤 버튼 하나를 가운데로(섹션 안 보조 CTA) */
.cta-inline { text-align: center; margin-top: var(--space-7); }
/* 카드 상단에 액센트 라인을 얹는 변형(오금희 오금 카드 등) */
.wa-card.wa-card--accent-top { border-top: 3px solid var(--accent); }

/* 카드 안 아이콘 + 제목/부제 가로 배치(오금희 오행 카드 등). .card-icon과 함께 쓴다 */
.card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-header h3 { margin: 0; }
.card-header .sub { font-size: var(--text-sm); color: var(--accent); font-weight: 500; margin-top: 2px; }

/* 후기/인터뷰 카드 상단의 사진 + 이름/소속 (한의사 체험기 등) */
.profile-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); }
.profile-header img { width: 140px; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.profile-header .profile-name { font-size: var(--text-xl); color: var(--text); margin: 0 0 var(--space-1); }
.profile-header .profile-role { font-size: var(--text-sm); color: var(--accent); font-weight: 500; }
.profile-footer { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
.profile-footer strong { color: var(--text); }

/* 액센트 헤더 바 + 번호 매긴 목록(투로 단락별 동작 순서 등) */
.step-group { margin-bottom: var(--space-7); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.step-group h3 { margin: 0; padding: var(--space-4) var(--space-6); background: var(--accent); color: #fff; font-size: var(--text-lg); font-weight: 500; }
.step-group ol { list-style: none; counter-reset: step-group; padding: var(--space-5) var(--space-6); margin: 0; }
.step-group ol li {
    counter-increment: step-group;
    padding: var(--space-2) 0 var(--space-2) var(--space-8);
    position: relative;
    color: var(--text-muted);
    line-height: var(--leading-normal);
    border-bottom: 1px dashed var(--border);
}
.step-group ol li:last-child { border-bottom: none; }
.step-group ol li::before {
    content: counter(step-group);
    position: absolute;
    left: 0; top: var(--space-2);
    width: var(--space-7);
    text-align: right;
    color: var(--accent);
    font-weight: 600;
}

/* ── 연혁 타임라인 ──────────────────────────────────────────── */
.timeline { max-width: 100%; }
.timeline-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.timeline-year { font-weight: 700; color: var(--text); font-size: var(--text-lg); }
.timeline-body { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-muted); }
@media (max-width: 768px) { .timeline-item { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ── 공지 목록 / 상세 (pages/notice) ───────────────────────── */
/* 검색창(알약형) */
.search-box {
    max-width: 600px; margin: 0 auto;
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box input { flex: 1; padding: var(--space-4) var(--space-5); border: none; background: transparent; color: var(--text); font-size: var(--text-base); outline: none; }
.search-box input::placeholder { color: var(--text-faint); }
.search-box button { padding: var(--space-4) var(--space-5); background: transparent; border: none; cursor: pointer; color: var(--text-muted); transition: color .25s; }
.search-box button:hover { color: var(--accent); }

/* 검색 결과 요약 줄 */
.search-info { padding: var(--space-5) 0; color: var(--text-muted); border-bottom: 1px solid var(--border); display: none; }
.search-info .keyword { color: var(--accent); font-weight: 600; }
.search-info .clear-btn { margin-left: var(--space-4); color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.search-info .clear-btn:hover { color: var(--accent); }

/* 썸네일형 목록 아이템(공지사항 등) */
.notice-item {
    display: flex; align-items: center; gap: var(--space-7);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: background .2s;
}
.notice-item:hover { background: var(--surface-2); }
.notice-thumb { width: 200px; height: 130px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.notice-thumb img { width: 100%; height: 100%; object-fit: cover; }
.notice-content { flex: 1; min-width: 0; }
.notice-title { font-size: var(--text-lg); color: var(--text); margin-bottom: var(--space-2); font-weight: 500; }
.notice-item:hover .notice-title { color: var(--accent); }
.notice-date { color: var(--text-muted); font-size: var(--text-sm); }
@media (max-width: 768px) {
    .notice-item { flex-direction: column; align-items: flex-start; }
    .notice-thumb { width: 100%; height: 180px; }
}

/* 결과 없음 */
.no-results { text-align: center; padding: var(--space-8) 0; color: var(--text-faint); }
.no-results svg { margin-bottom: var(--space-5); opacity: .5; }

/* 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-7) 0; }
.pagination a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all .25s;
}
.pagination a:hover, .pagination a.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.article-container { max-width: var(--container-narrow); margin: 0 auto; }
.article-header { text-align: center; padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.article-title { font-size: var(--text-2xl); color: var(--text); margin-bottom: var(--space-4); line-height: var(--leading-tight); }
.article-date { color: var(--text-muted); font-size: var(--text-base); }
.article-content { line-height: var(--leading-relaxed); color: var(--text); font-size: var(--text-base); }
.article-content p { margin-bottom: var(--space-5); }
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--space-6) 0; }
/* 목록으로 버튼(위) + 이전/다음 글(아래) 두 단으로 구성 */
.article-nav { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); text-align: center; }
.article-prevnext { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.article-prevnext a { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); text-decoration: none; max-width: 45%; transition: color .2s; }
.article-prevnext a:hover { color: var(--accent); }
.article-prevnext a.disabled { color: var(--text-faint); pointer-events: none; }
.article-prevnext .label { color: var(--text-faint); font-size: var(--text-xs); }
.article-prevnext .nav-title { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
    .article-prevnext { flex-direction: column; gap: var(--space-5); }
    .article-prevnext a { max-width: 100%; }
}