@charset "UTF-8";
/* ==========================================================================
   StudyFlex 공통 레이아웃 토큰  (Release 2 · R2-a)

   ⚠️ 이 단계(R2-a)는 "동작 변화 0" 이 목표다.
      아래는 값(토큰) 선언만 하고, 어떤 요소에도 적용하지 않는다.
      실제 적용은 R2-b(분기점) → R2-c(헤더/푸터) → R2-d(여백) 에서 단계적으로 한다.

   ── 분기점 정책 (확정, 오너 승인 2026-08-29) ─────────────────────────────
     mobile    ~  767px    단일 컬럼, 햄버거 GNB
     tablet    768 ~ 1023  단일 컬럼 유지, 축약 데스크톱 헤더
     desktop  1024 ~ 1279  기본 데스크톱   (1024 포함 — 기존 1025 경계의 역전 제거 대상)
     wide     1280px ~     최대폭 1240px 고정, 좌우 자동 여백

   ── 헤더 정책 (확정) ───────────────────────────────────────────────────
     "홈만 큰 헤더(277px 유지), 나머지 전 페이지 251px 로 통일"
     교재목록(278/264)도 251 통일 대상에 포함한다.
     홈도 전환점·1024 역전 규칙은 동일하게 적용받는다(높이만 예외).
   ========================================================================== */

:root {
    /* 분기점 (문서화용 — 미디어쿼리에는 리터럴을 쓴다. CSS 변수는 @media 에서 못 쓴다) */
    --sf-bp-tablet: 768px;
    --sf-bp-desktop: 1024px;
    --sf-bp-wide: 1280px;

    /* 콘텐츠 최대 폭 */
    --sf-max: 1240px;

    /* 페이지 좌우 여백 (밴드별) — R2-d 에서 적용 */
    --sf-gutter: 16px;

    /* 헤더 높이 (밴드별) — R2-c 에서 적용 */
    --sf-header-h: 121px;
    /* 홈 전용 헤더 높이 (예외 유지) */
    --sf-header-h-home: 121px;

    /* 푸터 상/하 여백 — R2-c 에서 적용 */
    --sf-footer-pt: 60px;
    --sf-footer-pb: 40px;
}

@media (min-width: 768px) {
    :root {
        --sf-gutter: 20px;
        --sf-header-h: 238px;
        --sf-header-h-home: 238px;
        --sf-footer-pt: 72px;
        --sf-footer-pb: 48px;
    }
}

@media (min-width: 1024px) {
    :root {
        --sf-gutter: 24px;
        --sf-header-h: 251px;   /* 서브 전 페이지 통일값 */
        --sf-header-h-home: 277px;  /* 홈만 예외로 크게 유지 */
    }
}

@media (min-width: 1280px) {
    :root {
        --sf-gutter: 32px;
        --sf-footer-pt: 80px;
        --sf-footer-pb: 56px;
    }
}

/* ==========================================================================
   R2-c · 헤더/푸터 정규화 (활성 규칙)

   목표: "홈만 큰 헤더(277), 나머지 서브 전부 251(데스크톱)/238(태블릿)".
   예외 메커니즘: 홈(퍼블리셔 레이아웃)은 system.css 를 로드하지 않는다 —
   따라서 이 파일의 규칙은 구조적으로 홈에 닿을 수 없다(홈 변경 0 보장).

   방식: 헤더/푸터 구성요소 치수를 px 로 고정한다.
   현재 페이지 간 편차는 페이지별로 로드되는 CSS(base.css 의 *{font-size},
   bootstrap, main.css 유무)가 html font-size·rem 캐스케이드를 흔들어 생긴다.
   px 고정으로 이 결합을 끊는다 — "rem 의존 풀기"의 실행이다.
   기준값은 표준 서브(로그인 페이지)의 computed 값: 표준 서브는 변화 0에
   수렴하고, 어긋나 있던 교재(278/264)·채널(277)만 표준으로 이동한다.
   모바일(≤767)은 이미 121 로 통일돼 있어 손대지 않는다.
   ========================================================================== */

/* ── 헤더 클램프 (R3-1 개정) ─────────────────────────────────────────
   R3-1 에서 zoom(0.9025)이 제거되어 전 페이지가 100% 배율이 됐다.
   오너 확정: "대문 헤더/푸터 사이즈에 서브가 맞춰진다" —
   데스크톱 목표를 홈 실측값(277 = logo 232 + menu 44 + border 1)으로 통일.
   클램프는 페이지별 CSS(base.css *{font-size}, bootstrap 마진 등)의
   캐스케이드 편차를 계속 차단한다. 홈은 system.css 미로드(구조적 격리). */

@media (min-width: 768px) and (max-width: 1023px) {
    /* 홈 태블릿(238 = logo 201 + menu 36 + 1)과 이미 동일 — 유지 */
    header .logo {
        height: 201px; padding-top: 0; padding-bottom: 0;
        align-items: center; box-sizing: border-box;
    }
    header .logo img { height: 51px !important; width: auto !important; }
    header .header_menu {
        height: 36px; margin-bottom: 0; box-sizing: border-box; overflow: visible;
    }
    header .header_menu .menu_btn,
    header .header_menu .menu_btn a { font-size: 15px; line-height: 1.2; }
    header .header_menu .menu_btn { padding-bottom: 15px; }
}

@media (min-width: 1024px) {
    /* 홈 데스크톱 실측: logo 232(img 51) + menu 44(font 18.125) + 1 = 277 */
    header .logo {
        height: 232px; padding-top: 0; padding-bottom: 0;
        align-items: center; box-sizing: border-box;
    }
    header .logo img { height: 51px !important; width: auto !important; }
    header .header_menu {
        height: 44px; margin-bottom: 0; box-sizing: border-box; overflow: visible;
    }
    header .header_menu .menu_btn,
    header .header_menu .menu_btn a { font-size: 18px; line-height: 1.2; }
    header .header_menu .menu_btn { padding-bottom: 18px; }
}

/* ── 푸터 (R3-1 개정) ──
   zoom 이 사라지면 서브 푸터는 홈과 같은 include·같은 new.css 로 자동 동일해진다.
   R2-c 의 평탄화(글자 단일화·마진 제거)는 홈과 어긋나게 만들므로 제거하고,
   페이지별 CSS 가 끼워 넣는 캐스케이드 소음만 차단한다. */
/* 서브는 common.css 의 직접 li{font-size:16px}, bootstrap 의 마진/행간이
   new.css 저작값을 밀어내 푸터가 홈과 달라진다. 홈이 실제로 쓰는 저작값
   (rem — html fs 를 따라 밴드별로 홈과 동일하게 움직임)을 명시해 되돌린다. */
footer .bx_1200 ul { margin-top: 1.25rem; margin-bottom: 0; }
footer .bx_1200 p { margin-top: 0; margin-bottom: 0; }
footer .bx_1200 li,
footer .bx_1200 li * { font-size: 0.75rem; line-height: normal; }
footer .bx_1200 h2 { margin: 0; font-size: 1.5rem; line-height: normal; }
footer .bx_1200 .foot_logo,
footer .bx_1200 .foot_sns { line-height: normal; }

/* ==========================================================================
   R2-d · 페이지 좌우 여백(gutter) 정책

   확정 밴드값: mobile 16 / tablet 20 / desktop 24 / wide 32  (:root 토큰)
   해소 대상: 같은 폭에서 페이지마다 달랐던 본문 좌우 패딩 (예: 768px 에서
   교재 0px vs 로그인 20px). 대상은 공통 레이아웃의 <main> 래퍼다.

   적용 제외(의도적):
   - 홈: system.css 미로드 (구조적 제외)
   - 채널·subpage10 계열: <main> 없이 DIV.container 로 풀블리드 사이드바를
     붙이는 것이 페이지 정체성 — 여백을 강제하면 리테마가 된다. 제외.
   ========================================================================== */
main {
    padding-left: var(--sf-gutter);
    padding-right: var(--sf-gutter);
    box-sizing: border-box;
}