/* ============================================================
   ft-pages-common.css — 신규 디자인 페이지 공용 (2026-06-11)
   기준: 어학원 상세페이지 u-* 컴포넌트 (버튼·칩은 상세 값 그대로)
   + v4 신규분 (밴드·다크CTA·신뢰스트립·소프트섀도·고정CTA)
   규칙: 이 파일 수정 = 신규 페이지 전체 영향. docs/디자인.md 확인 후 변경.
   적용법: 페이지 본문을 <div class="ftn ..."> 로 감싸고 본 파일 link.
   ============================================================ */

/* 신규 토큰 (기존 토큰은 custom/css/style.css :root 사용) */
:root {
    --u-shadow-soft: 0 6px 20px rgba(26, 26, 26, 0.07);
    --u-chart-red: #EF5350; --u-chart-orange: #FF9800; --u-chart-yellow: #FBC02D;
    --u-chart-green: #66BB6A; --u-chart-blue: #42A5F5;
}

/* 베이스 (래퍼 스코프 리셋) */
.ftn, .ftn * { margin: 0; padding: 0; box-sizing: border-box; }
.ftn {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Sans KR", sans-serif;
    color: var(--u-color-text-secondary);
    line-height: 1.6; letter-spacing: -0.32px;
    -webkit-font-smoothing: antialiased;
}
.ftn img { max-width: 100%; display: block; }
.ftn a { text-decoration: none; color: inherit; }
.ftn ul { list-style: none; }

/* 밴드 (풀블리드 — 테마 customify-container 안에서 배경만 화면 끝까지) */
.ftn .u-band { width: 100%; }
.ftn .u-band.is-gray { background: var(--u-color-bg-secondary); box-shadow: 0 0 0 100vmax var(--u-color-bg-secondary); clip-path: inset(0 -100vmax); }
.ftn .u-band.is-dark { background: var(--u-color-text-primary); box-shadow: 0 0 0 100vmax var(--u-color-text-primary); clip-path: inset(0 -100vmax); }

/* 컨테이너 (테마 학원페이지용 .u-content-container 카드 스타일 무력화 포함) */
.ftn .u-content-container {
    max-width: 1080px; margin: 0 auto; padding: var(--u-space-40) var(--u-space-24);
    border: 0; border-radius: 0; overflow: visible; background: transparent;
}

/* 섹션 헤더 + 오버라인 */
.ftn .u-container-header { padding-bottom: var(--u-space-24); border: 0; } /* 테마 학원페이지용 밑줄 무력화 */
.ftn .u-container-header .u-overline {
    display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em;
    color: var(--u-color-point); margin-bottom: var(--u-space-8); text-transform: uppercase;
}
.ftn .u-container-header h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--u-color-text-primary); line-height: 1.3; }
.ftn .u-container-header p { margin-top: var(--u-space-8); font-size: clamp(13px, 1.6vw, 15px); color: var(--u-color-text-support); }
.ftn .u-band.is-dark .u-container-header h2 { color: #fff; }
.ftn .u-band.is-dark .u-container-header p { color: rgba(255,255,255,0.65); }

/* 버튼 — 일반(마케팅) 페이지용: 크기·굵기는 v4, 색·모양은 상세 계승 (2026-06-11 사용자 결정) */
.ftn .u-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    word-break: keep-all; border-radius: var(--u-radius-13); border: 1px solid transparent;
    cursor: pointer; font-weight: 700; transition: background-color 0.2s ease;
}
.ftn .u-btn-lg { padding: var(--u-space-12) var(--u-space-24); font-size: clamp(13px, 1.5vw, 15px); line-height: 1.6; letter-spacing: -0.02em; }
.ftn .u-btn-fill { background-color: var(--u-color-point); color: var(--u-color-bg-primary); border-color: var(--u-color-point); }
.ftn .u-btn-fill:hover { background-color: var(--u-color-point-text); border-color: var(--u-color-point-text); }
.ftn .u-btn-outline { background: var(--u-color-bg-primary); color: var(--u-color-text-secondary); border-color: var(--u-color-border); }
.ftn .u-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }

/* 칩/탭 — 크기는 v4, 선택 색은 어학원 상세 계승 (2026-06-11) */
.ftn .u-chip-row { display: flex; flex-wrap: wrap; gap: var(--u-space-8); }
.ftn .u-chip-row li {
    padding: 6px var(--u-space-12);
    background-color: var(--u-color-bg-primary); color: var(--u-color-text-support);
    border: 0.5px solid var(--u-color-border); border-radius: var(--u-radius-13);
    font-size: clamp(12.5px, 1.4vw, 13.5px); cursor: pointer; user-select: none;
}
.ftn .u-chip-row .is-active { background-color: var(--u-color-bg-secondary); color: var(--u-color-text-secondary); }

/* 카드 */
.ftn .u-card {
    background: var(--u-color-bg-primary); border: 0.5px solid var(--u-color-border);
    border-radius: var(--u-radius-13); overflow: hidden; box-shadow: var(--u-shadow-soft);
}

/* 가격 고정 문구 */
.ftn .u-price-disclaimer {
    margin-top: var(--u-space-12); font-size: 12px; color: var(--u-color-text-support);
    display: flex; flex-wrap: wrap; gap: 4px var(--u-space-16);
}
.ftn .u-price-disclaimer span { display: inline-flex; align-items: center; gap: 5px; }
.ftn .u-price-disclaimer span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--u-color-border); }
.ftn .u-price-disclaimer a { color: var(--u-color-point-text); font-weight: 700; }

/* 가로 선반 */
.ftn .u-scroll-row { display: flex; gap: var(--u-space-16); overflow-x: auto; padding: var(--u-space-4) var(--u-space-4) var(--u-space-16); scrollbar-width: none; }
.ftn .u-scroll-row::-webkit-scrollbar { display: none; }
.ftn .u-scroll-row > * { flex: 0 0 auto; }

/* 선반 좌우 슬라이드 버튼 — 어학원 상세 페이지 u-slider-btn 동일 (school-detail.css 이식) */
.ftn .u-shelf { position: relative; }
.ftn button.u-slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important;
    background: rgba(0,0,0,0.6) !important; border: none !important;
    cursor: pointer !important; z-index: 8; border-radius: 50% !important;
    transition: opacity 0.3s !important; box-shadow: none !important;
}
.ftn button.u-slider-btn:disabled { opacity: 0.2 !important; cursor: not-allowed !important; }
.ftn button.u-slider-btn.prev { left: 10px; }
.ftn button.u-slider-btn.next { right: 10px; }
.ftn button.u-slider-btn::before { content: ''; display: block; width: 10px; height: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff; margin: auto; }
.ftn button.u-slider-btn.prev::before { transform: rotate(-45deg) translate(2px, 2px); }
.ftn button.u-slider-btn.next::before { transform: rotate(135deg) translate(2px, 2px); }

/* 신뢰 스트립 */
.ftn .u-trust-strip { max-width: 1080px; margin: var(--u-space-16) auto 0; padding: 0 var(--u-space-24); }
.ftn .u-trust-strip ul {
    display: flex; flex-wrap: wrap; gap: var(--u-space-8) var(--u-space-24);
    align-items: center; justify-content: center;
    font-size: clamp(12px, 1.4vw, 13.5px); color: var(--u-color-text-support);
}
.ftn .u-trust-strip li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ftn .u-trust-strip li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--u-color-point); }
.ftn .u-trust-strip strong { color: var(--u-color-text-primary); font-weight: 800; }

/* 다크 CTA 밴드 */
.ftn .u-dark-cta { text-align: center; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.ftn .u-dark-cta h2 { font-size: clamp(21px, 3vw, 30px); font-weight: 800; color: #fff; line-height: 1.35; }
.ftn .u-dark-cta h2 strong { color: var(--u-color-point); }
.ftn .u-dark-cta p { margin-top: var(--u-space-8); color: rgba(255,255,255,0.6); font-size: clamp(13px, 1.5vw, 15px); }
.ftn .u-dark-cta .u-btn-group { margin-top: var(--u-space-16); display: flex; gap: var(--u-space-8); justify-content: center; flex-wrap: wrap; }

/* 모바일 하단 고정 CTA */
.u-fixed-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: none; gap: var(--u-space-8); padding: var(--u-space-8) var(--u-space-16);
    padding-bottom: calc(var(--u-space-8) + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96); border-top: 1px solid var(--u-color-border);
    backdrop-filter: blur(8px);
}
.u-fixed-cta .u-btn { flex: 1; padding: var(--u-space-12) 0; font-size: 14px; }

/* 공용 반응형 */
@media (max-width: 860px) {
    .ftn .u-trust-strip ul { justify-content: flex-start; }
    .ftn .u-dark-cta .u-btn-group { flex-direction: column; align-items: stretch; }
    .u-fixed-cta { display: flex; }
    .ftn { padding-bottom: 64px; }
}