@charset "utf-8";
/* ===========================================================
   랜딩 페이지 전용 스타일 (독립형)
   - 기존 Site_*.css 를 쓰지 않는다. 클래스 접두사 lp- 로 격리.
   - 모바일 우선(mobile first)으로 작성하고 min-width 로 확장한다.
   - 브레이크포인트: 640(작은태블릿) / 1024(태블릿) / 1200(데스크톱)
   =========================================================== */

/* ---------- 토큰 ---------- */
:root {
    --lp-navy: #12275c;
    --lp-navy-d: #0c1b42;
    --lp-blue: #1a4fd6;
    --lp-red: #e03127;
    --lp-red-d: #a8241d;
    --lp-yellow: #fae100;
    --lp-ink: #1a1a1a;
    --lp-gray: #5f6673;
    --lp-line: #e3e6ec;
    --lp-bg: #f5f7fa;
    --lp-radius: 12px;
    --lp-shadow: 0 2px 10px rgba(18, 39, 92, .06);
    --lp-max: 1340px;
    /* 좌우 여백 30 포함. 실제 콘텐츠 폭은 1280 */
    --lp-pad: 20px;
    /* 좌우 공통 여백. 배너와 본문이 같은 선에 맞도록 한곳에서 관리한다 */
    --lp-hero-pad: 16px;
    /* 배너 이미지 안쪽에서 카피가 들어오는 여백 */
}

/* 영문·숫자가 중심인 요소는 Inter 를 먼저 적용한다 */
.lp-logo,
.lp-sec__title .brand,
.lp-prog__t,
.lp-rtdw__t,
.lp-footer__brand {
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
}

/* ---------- 리셋 ---------- */
.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box
}

.lp {
    margin: 0;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', '맑은 고딕', Malgun Gothic, sans-serif;
    /* 숫자·영문은 Inter 가 먼저 잡히도록 폰트 스택 앞에 둔다 */
    font-feature-settings: 'tnum' 1;
    color: var(--lp-ink);
    font-size: 15px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    word-break: keep-all;
    /* 한글 단어 단위 줄바꿈 */
}

.lp img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0
}

/* 버튼은 자체 색을 갖는다. :not() 으로 제외하지 않으면 .lp a 가 특이도에서 이겨 색이 무시된다 */
.lp a:not(.lp-btn) {
    color: inherit;
}

.lp a {
    text-decoration: none
}

.lp ul,
.lp ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.lp h1,
.lp h2,
.lp h3,
.lp h4,
.lp p {
    margin: 0
}

.lp button {
    font: inherit;
    cursor: pointer
}

.lp-inner {
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 var(--lp-pad)
}

@media (min-width:1024px) {
    :root {
        --lp-pad: 30px;
        --lp-hero-pad: 32px
    }
}

/* ---------- 버튼 ---------- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity .15s ease, background-color .15s ease;
}

.lp-btn:hover {
    opacity: .88
}

.lp-btn--navy {
    background: var(--lp-navy);
    color: #fff
}

.lp-btn--ghost {
    background: #fff;
    color: var(--lp-navy);
    border-color: #c9d2e4
}

.lp-btn--red {
    background: var(--lp-red);
    color: #fff
}

.lp-btn--kakao {
    background: var(--lp-yellow);
    color: #3c1e1e
}

/* 히어로 / 하단 CTA 처럼 주목도가 필요한 버튼 */
.lp-btn--lg {
    padding: 14px 30px;
    font-size: 17px;
    border-radius: 10px;
}

.lp-btn--sm {
    padding: 10px 16px;
    font-size: 14px
}

.lp-btn .lp-ico {
    width: 21px;
    height: 21px;
    flex: none
}

/* 기본 규칙보다 뒤에 와야 적용된다 (특이도가 같으므로 순서가 승패를 가른다) */
.lp-btn--lg .lp-ico {
    width: 30px;
    height: 30px;
}

/* ---------- 헤더 ---------- */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--lp-line);
}

.lp-header .lp-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.lp-logo img {
    height: 34px;
    width: auto
}

/* ---------- 히어로 ----------
   배너 이미지 위에 카피와 RTDW 카드를 얹는다. 폭은 본문과 동일하게 --lp-max 를 따른다.
   모바일에서는 배경 위 텍스트가 읽히지 않으므로 이미지를 위쪽 블록으로 분리한다. */
.lp-hero {
    position: relative;
    background: #fff;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 var(--lp-pad);
    /* 배너 이미지가 본문과 같은 선에서 시작하도록 동일 여백을 준다 */
}

/* .lp-hero 가 이미 좌우 여백을 가지므로 안쪽 .lp-inner 는 여백을 빼서 이중 적용을 막는다 */
/* 배너 안쪽 여백. 카피가 이미지 가장자리에 붙지 않도록 띄운다 */
.lp-hero>.lp-inner {
    padding-left: var(--lp-hero-pad);
    padding-right: var(--lp-hero-pad);
}

.lp-hero__bg {
    background: linear-gradient(135deg, #dbe4f5 0%, #eef2f9 100%);
}

.lp-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.lp-hero>.lp-inner {
    position: relative;
    z-index: 1;
    padding-top: 32px;
    padding-bottom: 32px;
}

.lp-hero__grid {
    display: grid;
    gap: 28px
}

.lp-hero__title {
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--lp-navy);
}

/* 시안: 윗줄은 검정 계열·작게, 아랫줄은 네이비·크게 */
.lp-hero__l1,
.lp-hero__l2 {
    display: block;
}

.lp-hero__l1 {
    font-size: .9em;
    color: var(--lp-ink);
}

.lp-hero__l2 {
    font-size: 1em;
    color: var(--lp-navy);
    margin-top: 2px;
}

.lp-hero__title .accent {
    color: var(--lp-red)
}

.lp-hero__lead {
    margin-top: 16px;
    color: var(--lp-gray);
    font-size: 16px
}

.lp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px
}

/* 모바일: 이미지를 카피 위에 블록으로 노출.
   min-height 를 쓰면 이미지(2.5:1)가 그 높이를 못 채워 아래에 빈 배경이 드러난다.
   비율을 고정하고 object-fit:cover 로 채운다. */
.lp-hero__bg {
    position: relative;
    aspect-ratio: 2 / 1;
    margin-bottom: 4px;
}

/* 히어로 우측 Read/Think/Discuss/Write */
.lp-rtdw {
    display: grid;
    gap: 10px
}

.lp-rtdw__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--lp-shadow);
}

.lp-rtdw__ico {
    width: 40px;
    height: 40px;
    flex: none;
    margin-top: 1px
}

.lp-rtdw__t {
    font-weight: 600;
    font-size: 17px;
    color: var(--lp-navy)
}

.lp-rtdw__d {
    font-size: 14px;
    color: var(--lp-gray)
}

/* ---------- 이벤트 배너 (슬라이드) ---------- */
.lp-promo {
    margin: 32px 0
}

/* 스크롤 스냅으로 스와이프를 구현한다. 외부 라이브러리를 쓰지 않는다. */
.lp-promo__slider {
    position: relative;
}

.lp-promo__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.lp-promo__track::-webkit-scrollbar {
    display: none;
}

.lp-promo__slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
}

/* 좌우 이동 버튼. 배너 바깥에 두어 본문 글자를 가리지 않게 한다 */
.lp-promo__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--lp-navy);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(18, 39, 92, .12);
}

.lp-promo__nav:hover {
    background: #fff;
}

.lp-promo__nav svg {
    width: 20px;
    height: 20px;
}

.lp-promo__nav--prev {
    left: -50px;
}

.lp-promo__nav--next {
    right: -50px;
}

/* 인디케이터 */
.lp-promo__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

/* 동그라미 대신 얇은 막대. 활성 항목이 길어지면서 게이지가 차오른다 */
.lp-promo__dot {
    position: relative;
    width: 22px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #d9dee8;
    cursor: pointer;
    transition: width .3s ease, background .2s ease;
}

/* 막대가 얇아 그대로는 누르기 어렵다. 보이는 크기는 두고 클릭 영역만 넓힌다 */
.lp-promo__dot::after {
    content: '';
    position: absolute;
    top: -9px;
    right: -3px;
    bottom: -9px;
    left: -3px;
}

.lp-promo__dot:hover {
    background: #b7c0d2;
}

.lp-promo__dot.is-on {
    width: 56px;
    background: var(--lp-navy);
}

/* 다음 배너까지 남은 시간을 채워서 보여주는 게이지.
   자동 전환이 켜져 있을 때만(is-auto) 동작한다.
   채우는 시간은 JS 의 DELAY 값을 --lp-gauge-dur 로 받아 쓴다. */
.lp-promo__gauge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 99px;
    background: var(--lp-navy);
}

/* 자동 전환 중에는 활성 막대를 트랙으로 쓰고 그 위를 게이지가 채운다 */
.lp-promo__slider.is-auto .lp-promo__dot.is-on {
    background: #d9dee8;
}

.lp-promo__slider.is-auto .lp-promo__dot.is-on:hover {
    background: #ccd3e0;
}

.lp-promo__slider.is-auto .lp-promo__dot.is-on .lp-promo__gauge {
    animation: lp-gauge var(--lp-gauge-dur, 5000ms) linear forwards;
}

/* 마우스를 올리거나 다른 탭에 가 있는 동안은 게이지도 함께 멈춘다 */
.lp-promo__slider.is-paused .lp-promo__dot.is-on .lp-promo__gauge {
    animation-play-state: paused;
}

@keyframes lp-gauge {
    from { width: 0 }
    to   { width: 100% }
}

/* 이벤트가 하나뿐이면 슬라이드 장치를 감춘다 */
.lp-promo__slider.is-single .lp-promo__track {
    overflow: visible;
}

.lp-promo__box {
    background: linear-gradient(90deg, #fff6e8 0%, #fdf0e0 100%);
    border: 1px solid #f2dfc4;
    border-radius: var(--lp-radius);
    padding: 22px 20px;
    display: grid;
    gap: 16px;
    align-items: center;
}

/* 배너 이미지를 등록하면 박스 배경으로 깔린다. 이미지 위에 아무것도 덮지 않는다.
   높이를 고정해야 이미지 비율(6:1)이 예측 가능해진다.
   고정하지 않으면 텍스트 줄 수에 따라 박스 높이가 달라져 이미지가 제각각 잘린다. */
.lp-promo__box--bg {
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border-color: rgba(0, 0, 0, .06);
    min-height: 200px;
    align-content: center;
}

.lp-promo__tag {
    display: inline-block;
    background: var(--lp-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 99px;
}

.lp-promo__t {
    margin-top: 10px;
    font-size: 21px;
    font-weight: 700;
    color: #3d2a12
}

.lp-promo__s {
    margin-top: 6px;
    font-size: 14px;
    color: #6b5334
}

/* 굵게는 굵기만. 색은 관리자가 고른 값이 인라인으로 들어온다.
   여기서 색을 강제하면 B 만 눌러도 빨갛게 보인다. */

/* ---------- 공통 섹션 ---------- */
.lp-sec {
    padding: 44px 0
}

.lp-sec--gray {
    background: var(--lp-bg)
}

.lp-sec__head {
    text-align: center;
    margin-bottom: 26px
}

.lp-sec__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--lp-ink);
    letter-spacing: -.02em
}

.lp-sec__title .brand {
    color: var(--lp-navy)
}

.lp-sec__title .brand em {
    font-style: normal;
    color: var(--lp-red)
}

/* ---------- 주요 프로그램 ---------- */
.lp-prog {
    display: grid;
    gap: 14px
}

.lp-prog__card {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--lp-shadow);
    display: flex;
    flex-direction: column;
}

.lp-prog__ico {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px
}

.lp-prog__t {
    font-size: 17.5px;
    font-weight: 600;
    color: var(--lp-ink)
}

.lp-prog__d {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--lp-gray);
    flex: 1
}

.lp-prog__more {
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lp-blue)
}

/* ---------- 왜 NewsTalk ---------- */
.lp-why {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    box-shadow: var(--lp-shadow);
    padding: 8px 24px;
    display: grid;
}

.lp-why__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 0;
}

/* 항목 사이 구분선 — 모바일은 가로선 */
.lp-why__item+.lp-why__item {
    border-top: 1px solid var(--lp-line);
}

/* 아이콘: 옅은 컬러 원형 배경 */
.lp-why__ico {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-why__ico svg {
    width: 32px;
    height: 32px;
}

.lp-why__ico--red {
    background: #fdeceb
}

.lp-why__ico--green {
    background: #e8f6ef
}

.lp-why__ico--orange {
    background: #fdf0e4
}

.lp-why__ico--blue {
    background: #e9effc
}

.lp-why__t {
    font-weight: 600;
    font-size: 17px;
    color: var(--lp-ink);
    letter-spacing: -.01em;
}

.lp-why__d {
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--lp-gray);
    line-height: 1.65;
}

/* ---------- 후기 ----------
   좌우로 끊김 없이 흘러간다. JS 없이 CSS 애니메이션만 쓴다.
   같은 목록을 두 벌 이어 붙이고 정확히 절반만큼 밀면, 되돌아온 지점이 시작과 같아 이음매가 보이지 않는다. */
.lp-voice__flow {
    overflow: hidden;
    /* 카드 그림자가 위아래로 잘리지 않게 */
    padding: 4px 0;
}

.lp-voice__track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: lp-voice-flow 80s linear infinite;
}

/* 읽는 중에는 그 자리에 멈춘다. 벗어나면 멈춘 지점부터 이어서 흐른다 */
.lp-voice__flow:hover .lp-voice__track {
    animation-play-state: paused;
}

@keyframes lp-voice-flow {
    from { transform: translateX(0) }
    /* 두 벌 중 한 벌 + 그 뒤에 붙은 gap 하나만큼 이동한다 */
    to   { transform: translateX(calc(-50% - 7px)) }
}

.lp-voice__slide {
    display: flex;
    flex: 0 0 clamp(280px, 78vw, 380px);
}

.lp-voice__card {
    width: 100%;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 28px 26px;
    box-shadow: var(--lp-shadow);
    /* [따옴표][본문] 2열 x [인용문][작성자] 2행.
       1행을 1fr 로 두면 남는 높이를 인용문이 흡수해 작성자가 카드 바닥에 고정된다. */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 14px;
}

.lp-voice__mark {
    grid-column: 1;
    grid-row: 1;
    font-size: 40px;
    font-weight: 600;
    color: #c8d0e0;
}

.lp-voice__q {
    grid-column: 2;
    grid-row: 1;
    font-size: 16.5px;
    line-height: 1.7;
    color: #333;
}

.lp-voice__by {
    grid-column: 2;
    grid-row: 2;
    padding-top: 18px;
    font-size: 14px;
    color: var(--lp-gray)
}

/* ---------- 수업 소개 ---------- */
.lp-about {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 26px 22px;
    display: grid;
    gap: 20px;
    align-items: center;
}

.lp-about__t {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--lp-navy)
}

.lp-about__p {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--lp-gray)
}

.lp-about__p b {
    color: var(--lp-ink)
}

.lp-about__visual {
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #e6ecf7 0%, #f4f6fa 100%);
}

.lp-about__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* ---------- 하단 CTA ---------- */
.lp-cta {
    background: var(--lp-navy);
    color: #fff;
    padding: 30px 0
}

.lp-cta__row {
    display: grid;
    gap: 18px;
    align-items: center
}

.lp-cta__t {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.02em;
}

/* 두 줄의 강조 차이 — 색은 같게 두고 아랫줄만 크기로 강조한다 */
.lp-cta__t1,
.lp-cta__t2 {
    display: block;
}

.lp-cta__t1 {
    font-size: .8em;
}

.lp-cta__t2 {
    font-size: 1.12em;
    margin-top: 3px;
}

.lp-cta__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

/* ---------- 하단 특징 4종 (네이비 밖, 밝은 영역) ---------- */
.lp-featsec {
    background: #fff;
    padding: 34px 0;
}

.lp-feat {
    display: grid;
    gap: 20px;
}

.lp-feat li {
    display: flex;
    gap: 14px;
    align-items: center;
}

.lp-feat__ico {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #f5f7fa;
    color: rgb(26, 79, 214);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-feat__ico svg {
    width: 28px;
    height: 28px;
}

/* 태그 선택자(.lp-feat span)는 아이콘 래퍼까지 잡으므로 쓰지 않는다 */
.lp-feat__t {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--lp-ink);
}

.lp-feat__d {
    display: block;
    font-size: 13.5px;
    color: var(--lp-gray);
    /* .lp 의 1.6 상속을 끊고 브라우저 기본값을 쓴다 */
    line-height: normal;
}

/* ---------- 푸터 ---------- */
.lp-footer {
    background: #fff;
    border-top: 1px solid var(--lp-line);
    padding: 22px 0;
}

.lp-footer__row {
    display: grid;
    gap: 12px;
}

.lp-footer__brand {
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-ink);
    letter-spacing: -.01em;
}

.lp-footer__brand span {
    font-weight: 500;
    color: var(--lp-gray);
    margin-left: 4px;
}

.lp-footer__links {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--lp-gray);
}

.lp-footer__links a:hover {
    text-decoration: underline;
}

.lp-footer__info {
    font-size: 12.5px;
    color: #8a909c;
    line-height: 1.7;
}


/* ===========================================================
   640px 이상
   =========================================================== */
@media (min-width:640px) {
    .lp {
        font-size: 16px
    }

    .lp-hero__bg {
        aspect-ratio: 5 / 2
    }

    .lp-hero__title {
        font-size: 36px
    }

    .lp-sec__title {
        font-size: 28px
    }

    .lp-prog {
        grid-template-columns: repeat(2, 1fr)
    }

    .lp-why {
        grid-template-columns: repeat(2, 1fr);
        padding: 8px 26px;
    }

    /* 2열: 오른쪽 칸에 세로 구분선, 3번째부터 위쪽 가로 구분선 */
    .lp-why__item+.lp-why__item {
        border-top: 0
    }

    .lp-why__item {
        padding: 24px 26px
    }

    .lp-why__item:nth-child(2n) {
        border-left: 1px solid var(--lp-line)
    }

    .lp-why__item:nth-child(n+3) {
        border-top: 1px solid var(--lp-line)
    }

    .lp-feat {
        grid-template-columns: repeat(2, 1fr)
    }

    .lp-footer__row {
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 30px;
    }

    /* 회사 정보는 오른쪽 끝으로 */
    .lp-footer__info {
        text-align: right;
    }

    .lp-promo__t {
        font-size: 24px
    }
}

/* ===========================================================
   1024px 이상 — 시안 레이아웃
   =========================================================== */
@media (min-width:1024px) {
    .lp-header .lp-inner {
        height: 74px
    }

    .lp-logo img {
        height: 40px
    }

    /* 데스크톱: 배너 이미지를 배경으로 깔고 그 위에 카피 + RTDW 를 얹는다 */
    .lp-hero {
        min-height: 460px;
        display: flex;
        align-items: center;
    }

    .lp-hero__bg {
        position: absolute;
        /* 좌우는 여백만큼 안쪽으로 — 본문 콘텐츠와 같은 선에 맞춘다 */
        inset: 0 var(--lp-pad);
        aspect-ratio: auto;
        margin: 0;
        z-index: 0;
    }

    .lp-hero>.lp-inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .lp-hero__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 40px;
        align-items: center;
    }

    .lp-hero__title {
        font-size: 42px
    }

    .lp-promo__box {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        padding: 26px 30px;
        align-items: center;
    }


    /* 버튼은 자리는 그대로(오른쪽 열) 두고 세로만 아래로 내린다 */
    .lp-promo__btn {
        align-self: end;
    }

    /* 좌우 이동 버튼은 마우스가 있는 화면에서만. 모바일은 스와이프로 넘긴다.
       화면이 좁아 버튼 자리가 안 나오면 감춘다 (스와이프로 넘길 수 있다) */
    .lp-promo__nav {
        display: flex;
    }

    .lp-sec {
        padding: 60px 0
    }

    .lp-prog {
        grid-template-columns: repeat(5, 1fr)
    }

    .lp-why {
        grid-template-columns: repeat(4, 1fr);
        padding: 10px 20px;
    }

    /* 4열: 첫 칸 제외하고 세로 구분선만 */
    .lp-why__item {
        padding: 26px 22px
    }

    .lp-why__item:nth-child(n+2) {
        border-left: 1px solid var(--lp-line);
        border-top: 0
    }

    .lp-about {
        grid-template-columns: 1fr 360px;
        padding: 32px 34px;
        gap: 34px
    }

    .lp-cta {
        padding: 40px 0
    }

    .lp-cta__row {
        grid-template-columns: 1fr auto;
        gap: 30px
    }

    .lp-cta__t {
        font-size: 28px
    }

    .lp-feat {
        grid-template-columns: repeat(4, 1fr)
    }
}

/* ===========================================================
   1200px 이상
   =========================================================== */
/* 배너 바깥 여백이 부족한 폭에서는 좌우 버튼을 감추고,
   대신 인디케이터를 배너 위에 얹어 슬라이드가 있다는 것을 드러낸다. */
@media (max-width:1420px) {
    .lp-promo__nav {
        display: none !important;
    }

    .lp-promo__slider {
        position: relative;
    }

    /* 모바일은 버튼이 하단 전체를 차지하므로 인디케이터를 배너 밖으로 내린다 */
    .lp-promo__dots {
        margin-top: 12px;
    }
}

/* 좁은 화면에서는 배경이 크게 잘려 사진이 글자 뒤를 가득 채운다.
   데스크톱은 원본 그대로 두고, 모바일에서만 흰 덮개를 깔아 글자를 읽히게 한다. */
/* 텍스트가 이미지 아래로 떨어지는 구간에서는 배너를 화면 끝까지 채운다 */
@media (max-width:1023px) {
    .lp-hero {
        padding-left: 0;
        padding-right: 0;
    }

    /* 이미지만 전체폭이고 글자는 원래 여백을 유지한다 */
    .lp-hero>.lp-inner {
        padding-left: var(--lp-pad);
        padding-right: var(--lp-pad);
    }
}

@media (max-width:1023px) {
    .lp-promo__box--bg {
        position: relative;
        background-position: center;
    }

    .lp-promo__box--bg::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(255, 255, 255, .55);
    }

    .lp-promo__box--bg > * {
        position: relative;
        z-index: 1;
    }
}

@media (min-width:1200px) {
    .lp-hero__title {
        font-size: 46px
    }

    .lp-sec__title {
        font-size: 32px
    }
}

/* 큰 화면에서 히어로 이미지가 없을 때 최소 높이 확보용 */
.lp-imgslot {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa6bd;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* ---------- 약관 모달 ---------- */
.lp-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lp-modal[hidden] {
    display: none;
}

.lp-modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 45, .55);
}

.lp-modal__box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 760px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.lp-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-modal__t {
    font-size: 20px;
    font-weight: 600;
    color: var(--lp-ink);
}

.lp-modal__x {
    flex: none;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--lp-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-modal__x:hover {
    background: var(--lp-bg);
    color: var(--lp-ink);
}

.lp-modal__x svg {
    width: 20px;
    height: 20px;
}

/* 약관 원문은 HTML 이 아니라 줄바꿈(\n)만 있는 순수 텍스트다.
   pre-wrap 으로 줄바꿈을 살리되 가로 넘침은 자동 줄바꿈 처리한다. */
.lp-modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 24px 28px;
    font-size: 15.5px;
    line-height: 1.85;
    color: #3a3a3a;
    white-space: pre-wrap;
    word-break: break-word;
}

.lp-modal__body * {
    max-width: 100%;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background: transparent !important;
}

.lp-modal__body table {
    width: 100% !important;
    border-collapse: collapse;
}

.lp-modal__body td,
.lp-modal__body th {
    border: 1px solid var(--lp-line);
    padding: 8px 10px;
}

@media (min-width:1024px) {
    .lp-modal__t {
        font-size: 20px
    }

    .lp-modal__body {
        padding: 26px 30px 34px
    }
}

/* ===========================================================
   모바일 보정 (639px 이하)
   - 네이버 블로그·카페 유입 비중이 커서 모바일을 별도로 손본다.
   - 손가락 터치 영역 확보, 가로 넘침 차단, 과한 여백 축소.
   =========================================================== */
@media (max-width:639px) {

    /* 가로 스크롤 방지 */
    .lp {
        overflow-x: hidden;
    }

    /* 헤더: 로고와 로그인 버튼이 붙지 않게 */
    .lp-header .lp-inner {
        height: 58px;
    }

    .lp-logo img {
        height: 30px;
    }

    /* 히어로 */
    .lp-hero>.lp-inner {
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .lp-hero__title {
        font-size: 24px;
        line-height: 1.4;
    }

    .lp-hero__lead {
        margin-top: 12px;
        font-size: 14.5px;
    }

    /* CTA 버튼은 한 줄에 하나씩, 손가락으로 누르기 쉬운 크기로 */
    .lp-hero__cta {
        margin-top: 20px;
        gap: 8px;
    }

    .lp-hero__cta .lp-btn,
    .lp-cta__btns .lp-btn,
    .lp-promo__box .lp-btn {
        width: 100%;
        min-height: 52px;
    }

    .lp-btn--lg {
        padding: 15px 20px;
        font-size: 16px;
    }

    /* Read/Think/Discuss/Write */
    .lp-rtdw__item {
        padding: 13px 14px;
    }

    /* 특강 배너 */
    .lp-promo {
        margin: 24px 0;
    }

    .lp-promo__box {
        padding: 20px 18px;
        gap: 14px;
    }

    .lp-promo__t {
        font-size: 18px;
    }

    /* 섹션 여백 축소 */
    .lp-sec {
        padding: 36px 0;
    }

    .lp-sec__head {
        margin-bottom: 20px;
    }

    .lp-sec__title {
        font-size: 20px;
    }

    /* 프로그램 카드: 세로 낭비를 줄이려고 아이콘을 왼쪽으로 */
    .lp-prog__card {
        padding: 18px 16px;
        text-align: left;
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 14px;
        align-items: center;
    }

    .lp-prog__ico {
        grid-row: span 2;
        width: 38px;
        height: 38px;
        margin: 0;
    }

    .lp-prog__d {
        margin-top: 4px;
    }

    /* 왜 NewsTalk */
    .lp-why {
        padding: 4px 18px;
    }

    .lp-why__item {
        padding: 18px 0;
        gap: 14px;
    }

    .lp-why__ico {
        width: 52px;
        height: 52px;
    }

    .lp-why__ico svg {
        width: 26px;
        height: 26px;
    }

    /* 후기 */
    .lp-voice__card {
        padding: 22px 20px;
    }

    .lp-voice__q {
        font-size: 15.5px;
    }

    /* 수업 소개 */
    .lp-about {
        padding: 22px 18px;
    }

    .lp-about__t {
        font-size: 20px;
    }

    /* 하단 CTA */
    .lp-cta {
        padding: 26px 0;
    }

    .lp-cta__t {
        font-size: 21px;
    }

    .lp-cta__btns {
        gap: 8px;
    }

    /* 하단 특징 */
    .lp-featsec {
        padding: 26px 0;
    }

    .lp-feat {
        gap: 16px;
    }

    .lp-feat__ico {
        width: 46px;
        height: 46px;
    }

    .lp-feat__ico svg {
        width: 24px;
        height: 24px;
    }

    /* 푸터 */
    .lp-footer {
        padding: 20px 0 28px;
    }

    .lp-footer__links {
        gap: 16px;
    }

    /* 약관 모달: 화면을 거의 꽉 채우도록 */
    .lp-modal {
        padding: 0;
    }

    .lp-modal__box {
        max-width: none;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .lp-modal__head {
        padding: 16px 18px;
    }

    .lp-modal__body {
        padding: 18px 18px 26px;
        font-size: 15px;
    }
}
/* ===========================================================
   이벤트 상세페이지 (/Event/?key=...)
   =========================================================== */
.lp-ev {
    padding: 34px 0 60px;
}

.lp-ev__head {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-ev__t {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: var(--lp-navy);
}

.lp-ev__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.lp-ev__period {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--lp-bg);
    color: var(--lp-gray);
    font-size: 13.5px;
    font-weight: 600;
}

.lp-ev__period svg {
    width: 16px;
    height: 16px;
}

.lp-ev__notice {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #eef3fc;
    color: #2c4a8f;
    font-size: 14px;
    font-weight: 600;
}

.lp-ev__notice--end {
    background: #f3f4f6;
    color: #6b7280;
}

.lp-ev__visual {
    margin-top: 24px;
    border-radius: var(--lp-radius);
    overflow: hidden;
}

.lp-ev__visual img {
    width: 100%;
}

/* 에디터로 작성한 본문. 관리자가 넣은 태그를 최대한 존중하되 넘침만 막는다 */
.lp-ev__body {
    margin-top: 28px;
    font-size: 15.5px;
    line-height: 1.85;
    color: #3a3a3a;
    word-break: break-word;
}

.lp-ev__body img {
    max-width: 100%;
    height: auto;
}

.lp-ev__body table {
    max-width: 100%;
}

.lp-ev__empty {
    margin-top: 28px;
    padding: 60px 20px;
    text-align: center;
    color: #9aa1ae;
    background: var(--lp-bg);
    border-radius: var(--lp-radius);
}

.lp-ev__back {
    margin-top: 40px;
    text-align: center;
}

@media (min-width:1024px) {
    .lp-ev {
        padding: 46px 0 80px;
    }

    .lp-ev__t {
        font-size: 34px;
    }
}