@charset "utf-8";
/* ============================================================
   main.css — 메인 페이지(main/main.html) 전용

   클래스 접두어는 페이지 파일명을 줄여 .main-* 를 쓴다.
   (서브는 sub.css 에서 .lec- / .hak- / .exam- 로 나뉜다)

   헤더·푸터·버튼·단계배지(.step)·금액(.price)은 common.css 것을 그대로 쓴다.
   ── 목차 ────────────────────────────────────────────────
   [1] 히어로            .main-hero  .main-sched
   [2] 섹션 공통·과정 카드  .main-sec  .main-card  .main-more
   [3] 프로모션 띠        .main-promo__bar (전공 학과 섹션 안)
   [4] 전공 학과 사진 카드  .main-majors  .main-major
   [5] 배너              .main-band
   [6] 공지사항 · 1:1 문의  .main-notice  .main-qna
   ============================================================ */

/* ############################################################
   [1] 히어로 — 좌: 카피 + 버튼 2개 / 우: 시험일정 카드
   ############################################################ */
/* 배경 사진은 위쪽을 보여준다(center top).
   가운데/아래로 내리면 책더미가 왼쪽 카피 자리까지 올라와 글자가 안 읽힌다.
   사진이 안 뜰 때를 대비해 사진의 하늘색을 배경색으로 깔아둔다. */
.main-hero {
    height: 640px;
    background: #59AABA url("../../images/main/main-hero-bg.jpg") center top/cover no-repeat;
}
/* 카피 덩어리는 세로 중앙에 둔다 — 고정 padding 으로 밀면 문구가 바뀔 때마다 어긋난다.
   오른쪽 시험일정 카드는 absolute 라 이 정렬에 영향받지 않고, 결과적으로 둘의 중심이 맞는다. */
.main-hero__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.main-hero__eyebrow {
    font-size: 28px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.main-hero__title {
    margin-top: 22px;
    font-family: var(--font-title);
    font-size: 60px;
    font-weight: 900;
    line-height: 80px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.main-hero__btns {
    display: flex;
    gap: 16px;
    margin-top: 38px;
}
.main-hero__btns .btn {
    width: 200px;
    height: 62px;
    font-size: 18px;
    border-radius: var(--r-btn);
}

/* 오른쪽 시험일정 카드 — 560x380, 히어로 안에 띄운다 */
.main-sched {
    position: absolute;
    left: 640px;
    top: 130px;
    width: 560px;
    height: 380px;
    padding: 36px 44px;
    background: var(--white);
    border-radius: var(--r-card);
    box-shadow: 0 8px 28px rgba(0,0,0,.10);
    /* 사진 위에 얹히므로 조금 더 세게 */
}
.main-sched__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.main-sched__label {
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.main-sched__year {
    font-size: 13px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.main-sched__item {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 62px;
    border-bottom: 1px solid #EEEFF1;
}
.main-sched__item:last-child {
    border-bottom: 0;
}
.main-sched__name {
    flex: 1;
    font-size: 19px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.main-sched__date {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}

/* 분기점은 수강신청(.lec-*)과 같은 1239 / 1023 / 767 을 쓴다.

   시험일정 카드는 1200 그리드를 전제한 절대 위치(left:640)라, 폭이 줄면
   그대로 화면 밖으로 나간다. 좁아지면 카피 아래로 내려 세로로 쌓는다.
   히어로 높이 640 고정도 같이 푼다 — 쌓이면 카드 높이만큼 더 필요하다. */
@media (max-width: 1239px) {
    .main-hero {
        height: auto;
        padding: 72px 0 80px;
    }
    .main-hero__inner {
        height: auto;
    }
    .main-hero__title {
        font-size: 50px;
        line-height: 68px;
    }
    .main-sched {
        position: static;
        width: 100%;
        max-width: 560px;
        height: auto;
        margin-top: 44px;
        padding: 30px 34px;
    }
}
@media (max-width: 1023px) {
    .main-hero {
        padding: 56px 0 64px;
    }
    .main-hero__eyebrow {
        font-size: 22px;
    }
    .main-hero__title {
        margin-top: 16px;
        font-size: 40px;
        line-height: 56px;
    }
    .main-hero__btns {
        margin-top: 30px;
    }
    .main-hero__btns .btn {
        width: 180px;
        height: 56px;
        font-size: 17px;
    }
}
@media (max-width: 767px) {
    .main-hero {
        padding: 40px 0 48px;
    }
    .main-hero__eyebrow {
        font-size: 17px;
    }
    .main-hero__title {
        font-size: 30px;
        line-height: 42px;
    }
    .main-hero__btns {
        width: 100%;
    }
    .main-hero__btns .btn {
        width: 100%;
        height: 52px;
        font-size: 16px;
    }
    .main-sched {
        margin-top: 32px;
        padding: 22px 20px;
    }
    /* 한 줄(단계배지 + 시험명 + 날짜)이 320px 안에 안 들어간다.
       높이 62 고정을 풀고 날짜만 아랫줄로 내린다 */
    .main-sched__item {
        flex-wrap: wrap;
        gap: 6px 12px;
        height: auto;
        padding: 14px 0;
    }
    .main-sched__name {
        flex: 1 1 auto;
        font-size: 16px;
    }
    .main-sched__date {
        flex: none;
        width: 100%;
        font-size: 14px;
        color: var(--body);
    }
}

/* ############################################################
   [2] 섹션 공통 · 과정 카드
   ############################################################ */
.main-sec {
    padding: 110px 0;
}
.main-sec--surf {
    background: var(--surf);
}
.main-sec__title {
    font-family: var(--font-title);
    font-size: 36px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    text-align: center;
}
.main-sec__desc {
    margin-top: 22px;
    font-size: 20px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    text-align: center;
}

/* 카드 그리드 — 390 x (특강 260 / 단과 200), 3열 간격 15

   ⚠ 아래 .main-list · .main-card · .main-more 는 지금 메인에서 쓰지 않는다.
   '1단계 스타트 패키지 특강' · '단과 신청' 두 섹션을 빼면서 같이 놀게 됐다.
   지우지 않고 두는 이유는 다시 살릴 수 있어서다 — 그때 마크업을 새로 짜지
   않아도 된다. (.main-sec · .main-sec__title · .main-sec__desc 는 계속 쓴다) */
.main-list {
    margin-top: 54px;
    display: grid;
    grid-template-columns: repeat(3,390px);
    gap: 15px;
}
.main-card {
    display: flex;
    flex-direction: column;
    padding: 40px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    background: var(--white);
    transition: border-color .15s;
}
.main-card:hover {
    border-color: var(--hair-hover);
}
.main-list--pkg .main-card {
    height: 260px;
}
.main-list--unit .main-card {
    height: 200px;
}

/* 카드 머리 — 학과 · 단계 · BEST */
.main-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 24px;
}
.main-card__dept {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
    white-space: nowrap;
}
.main-card__best {
    margin-left: auto;
    font-family: var(--font-num);
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -.02em;
}
.main-card__title {
    margin-top: 26px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -.04em;
}
.main-card__body {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 23px;
    color: var(--mute);
    letter-spacing: -.04em;
}
.main-card__meta i {
    display: inline-block;
    margin: 0 8px;
    font-style: normal;
    font-weight: 300;
    color: var(--mute);
}
.main-card .price {
    margin-top: auto;
}

/* 더 보기 — 1200x70 아웃라인 바 */
.main-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    height: 70px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    background: var(--white);
    font-size: 16px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: border-color .15s,color .15s;
}
.main-more:hover {
    border-color: var(--body);
    color: var(--ink);
}

/* 카드 폭 390px 3열은 1200 그리드 전용이다. 폭을 1fr 로 풀어 남는 자리를
   나눠 갖게 하고 1239 에서 2열, 767 에서 1열로 접는다.
   높이 260/200 고정도 같이 푼다 — 카드가 좁아지면 제목이 두 줄이 되어
   글자가 상자 밖으로 밀린다. min-height 로 바닥만 받쳐 둔다. */
@media (max-width: 1239px) {
    .main-sec {
        padding: 80px 0;
    }
    .main-sec__title {
        font-size: 32px;
    }
    .main-sec__desc {
        margin-top: 18px;
        font-size: 18px;
    }
    .main-list {
        margin-top: 40px;
        grid-template-columns: repeat(2,1fr);
    }
    .main-card {
        padding: 32px;
    }
    .main-list--pkg .main-card,
    .main-list--unit .main-card {
        height: auto;
        min-height: 220px;
    }
}
@media (max-width: 1023px) {
    .main-sec {
        padding: 64px 0;
    }
    .main-sec__title {
        font-size: 28px;
    }
    .main-sec__desc {
        font-size: 17px;
    }
}
@media (max-width: 767px) {
    .main-sec {
        padding: 48px 0;
    }
    .main-sec__title {
        font-size: 24px;
    }
    .main-sec__desc {
        margin-top: 14px;
        font-size: 15px;
        line-height: 24px;
    }
    .main-list {
        margin-top: 28px;
        grid-template-columns: 1fr;
    }
    .main-card {
        padding: 24px 22px;
    }
    .main-list--pkg .main-card,
    .main-list--unit .main-card {
        min-height: 0;
    }
    /* 머리줄(학과 · 단계 · BEST)이 한 줄에 안 들어간다 — 넘치면 아랫줄로 */
    .main-card__head {
        flex-wrap: wrap;
        height: auto;
        row-gap: 8px;
    }
    .main-card__title {
        margin-top: 18px;
        font-size: 19px;
    }
    .main-more {
        margin-top: 28px;
        height: 56px;
        font-size: 15px;
    }
}

/* ############################################################
   [3] 프로모션 띠 — "단과보다 패키지"

   전공 학과 섹션 안, 설명문과 카드 아홉 장 사이에 끼워 넣는다
   (main.html 의 .main-sec__desc 와 .main-majors 사이).

   이벤트 배너라 사이트의 기본 색(인디고)에서 일부러 벗어난다. 어두운 바탕에
   라임 네온 한 가지만 쓰는 방식이라 흰 바탕 위에서 한 번 시선이 끊긴다.

   높이는 100px 한 줄로 묶는다 — 배너가 커지면 바로 아래 학과 카드와
   무게가 겹쳐 둘 다 죽는다. 모바일에서만 세로로 쌓는다.
   ############################################################ */
/* 작은 서브타이틀 — 띠 위아래에 하나씩. 섹션 제목(가운데)과 달리 왼쪽에 붙여
   바로 아래 덩어리(띠 · 카드판)를 이끄는 머리글처럼 보이게 한다.
   앞의 짧은 막대는 학과 카드의 포인트 막대와 같은 색이다 */
.main-subtit {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 44px;
}
.main-subtit::before {
    content: "";
    flex: none;
    align-self: center;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--acc) 0%, #A78BFA 100%);
}
.main-subtit b {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
}
.main-subtit span {
    font-size: 15px;
    color: var(--mute);
    letter-spacing: -.03em;
}
.main-promo__bar {
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 100px;
    padding: 18px 26px;
    border-radius: var(--r-card);
    background: #0E1124;
}
/* 네온 번짐 — 왼쪽 아래 라임, 오른쪽 위 보라, 가운데 시안.
   아주 느리게 좌우로 흔들려 배너가 살아 있는 느낌만 준다 (12초) */
.main-promo__bar::before {
    content: "";
    position: absolute;
    inset: -20% -8%;
    background:
        radial-gradient(600px 220px at 10% 120%, rgba(198,242,78,.32), transparent 62%),
        radial-gradient(560px 240px at 88% -25%, rgba(139,92,246,.42), transparent 64%),
        radial-gradient(380px 200px at 58% 130%, rgba(34,211,238,.22), transparent 60%);
    animation: promo-drift 12s ease-in-out infinite alternate;
}
@keyframes promo-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(3%); }
}
@media (prefers-reduced-motion: reduce) {
    .main-promo__bar::before {
        animation: none;
    }
}
.main-promo__chip {
    position: relative;   /* 번짐 위로 */
    flex: none;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: #C6F24E;
    font-size: 14px;
    font-weight: 700;
    color: #0E1124;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.main-promo__text {
    position: relative;
    flex: 1;
    min-width: 0;         /* 좁아지면 두 줄로 접히게 (넘치지 않게) */
    font-size: 21px;
    line-height: 30px;
    color: rgba(255,255,255,.86);
    letter-spacing: var(--ls-base);
}
.main-promo__text b {
    font-weight: 700;
    color: var(--white);
}
.main-promo__text em {
    font-style: normal;
    font-weight: 800;
    color: #C6F24E;
}
.main-promo__btn {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 46px;
    padding: 0 18px 0 22px;
    border-radius: 999px;
    background: #C6F24E;
    font-size: 16px;
    font-weight: 700;
    color: #0E1124;
    letter-spacing: -.03em;
    white-space: nowrap;
    transition: background-color .2s ease;
}
/* 올리고 있는 동안 앞뒤로 흔들리는 것은 script.js 의 initPromoNudge 가 맡는다.
   CSS animation 으로는 마우스를 뗄 때 부드럽게 멎게 할 수 없어서다 —
   animation 이 빠지는 순간 브라우저가 '애니메이션이 없었을 때의 값'에서
   다시 계산하므로 transition 이 걸리지 않고 제자리로 팍 튄다.
   (폭을 변수로 두고 줄이는 방법도 해 봤지만, 돌고 있는 keyframes 는
   변수가 바뀌어도 다시 읽지 않아 아예 움직이지 않았다)
   여기서는 색만 바꾼다 */
.main-promo__bar:hover .main-promo__btn,
.main-promo__bar:focus-visible .main-promo__btn {
    background: #D6FF6B;
}
@media (max-width: 1239px) {
    .main-subtit {
        margin-top: 34px;
    }
    .main-promo__bar {
        margin-top: 14px;
    }
    .main-promo__text {
        font-size: 19px;
        line-height: 28px;
    }
}
@media (max-width: 1023px) {
    .main-promo__text {
        font-size: 17px;
        line-height: 26px;
    }
    .main-promo__btn {
        height: 44px;
        font-size: 15px;
    }
}
/* 한 줄에 셋을 세울 폭이 안 나온다 — 칩·문구·버튼을 세로로 쌓고
   버튼은 손가락으로 누르기 쉽게 폭을 다 준다 */
@media (max-width: 767px) {
    /* 한 줄에 안 들어간다 — 이름 아래로 설명을 내린다 (막대 자리만큼 들여쓴다) */
    .main-subtit {
        flex-wrap: wrap;
        gap: 4px 10px;
        margin-top: 26px;
    }
    .main-subtit b {
        font-size: 17px;
    }
    .main-subtit span {
        width: 100%;
        padding-left: 13px;
        font-size: 14px;
        line-height: 21px;
    }
    .main-promo__bar {
        margin-top: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: 0;
        padding: 20px;
    }
    .main-promo__chip {
        height: 27px;
        padding: 0 12px;
        font-size: 13px;
    }
    .main-promo__text {
        flex: none;
        font-size: 16px;
        line-height: 25px;
    }
    .main-promo__btn {
        width: 100%;
        justify-content: center;
        height: 48px;
        padding: 0;
        font-size: 15px;
    }
}

/* ############################################################
   [4] 전공 학과 — 사진 카드 3×3 (학과가 9개라 3열이 정확히 맞아떨어진다)

   평소   : 사진 + 아래쪽만 옅게 어둡게 + 학과명
   올리면 : 사진이 살짝 확대되고 전체가 어두워지면서
            학과명이 위로 올라가고 그 아래로 학과 소개가 밀려 올라온다

   소개가 '올라오는' 것은 따로 애니메이션을 준 것이 아니다. 글자 묶음이
   카드 바닥에 붙어 있어서(align-items:flex-end) 소개 칸이 자라면 그만큼
   위로 밀린다. 움직이는 값이 하나뿐이라 학과명과 소개가 어긋날 일이 없다.

   자라는 값이 height 가 아니라 max-height 인 이유: 같은 문구가 글꼴과
   화면 폭에 따라 한 줄이 되기도 두 줄이 되기도 한다(맑은고딕 기준
   데스크탑은 아홉 개 모두 두 줄, 태블릿은 다섯 개가 한 줄이었다).
   height 를 못 박으면 한 줄일 때 아래에 빈 칸이 남는다. max-height 는
   글자 높이에서 멈추므로 줄 수가 달라져도 딱 맞게 열린다.
   ############################################################ */
.main-majors {
    margin-top: 20px;   /* 바로 위 서브타이틀에 붙인다 */
    display: grid;
    grid-template-columns: repeat(3,390px);
    gap: 15px;
}
.main-major {
    /* 열릴 수 있는 최대 = 소개 윗여백 12 + 두 줄(24×2).
       소개는 두 줄에서 자르므로(아래 line-clamp) 이보다 커질 일이 없다 */
    --desc-max: 60px;
    position: relative;
    display: flex;
    align-items: flex-end;
    /* 3:4 세로 카드 — 1200 그리드에서 390×520.
       사진이 들어갈 자리라 가로로 납작하면 무엇을 찍었는지 잘 안 읽힌다.
       비율을 바꾸려면 이 한 줄만 고치면 된다 (4/5 면 조금 낮아진다) */
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: var(--r-card);
}
/* 사진 층 — HTML 의 --shot 이 위, CSS 의 --tone 이 아래에 깔린다.
   배경 이미지는 파일이 없으면 조용히 넘어가므로, 사진을 아직 못 받은
   학과는 색 바탕만 보인다 (<img> 였다면 깨진 아이콘이 떴을 자리다) */
.main-major__shot {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--shot,none) center/cover no-repeat, var(--tone);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.main-major:hover .main-major__shot,
.main-major:focus-visible .main-major__shot {
    transform: scale(1.08);
}
/* 아래쪽 그늘 — 평소에도 학과명이 사진 위에서 읽히려면 이만큼은 필요하다 */
.main-major::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(17,24,39,.74) 0%, rgba(17,24,39,.20) 46%, rgba(17,24,39,0) 76%);
}
/* 올렸을 때 덧대는 그늘.
   카드 전체를 고르게 덮지 않는다 — 사진을 보러 온 자리인데 균일한 딤을 씌우면
   무엇을 찍었는지가 사라진다. 글자가 앉는 아래쪽만 짙게 깔고 위로 갈수록 걷어
   사진은 계속 보이게 두었다 (위쪽 6%, 글자 자리 90% 안팎) */
.main-major::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(17,24,39,.90) 0%, rgba(17,24,39,.60) 34%,
                                        rgba(17,24,39,.18) 68%, rgba(17,24,39,.06) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}
.main-major:hover::after,
.main-major:focus-visible::after {
    opacity: 1;
}
/* 오른쪽 위 이동 표시 — 사진이 밝든 어둡든 읽히도록 흰 동그라미로 둔다.
   평소에는 없다가 올리면 살짝 내려앉으며 나타난다 */
.main-major__go {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.main-major:hover .main-major__go,
.main-major:focus-visible .main-major__go {
    opacity: 1;
    transform: none;
}
.main-major__body {
    position: relative;   /* 딤 위로 올린다 */
    z-index: 2;
    width: 100%;
    padding: 28px 30px;
}
/* 학과명 위 짧은 막대 — 평소에도 '누를 수 있는 카드'라는 신호가 하나는 있어야
   아홉 장이 그냥 사진 벽처럼 보이지 않는다. 올리면 옆으로 늘어난다.
   색은 진도율 막대와 같은 포인트색 → 연보라 */
.main-major__rule {
    display: block;
    width: 26px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--acc) 0%, #A78BFA 100%);
    transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.main-major:hover .main-major__rule,
.main-major:focus-visible .main-major__rule {
    width: 48px;
}
.main-major__name {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: var(--ls-base);
}
.main-major__desc {
    max-height: 0;        /* 닫힌 상태 — 학과명만 보인다 */
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.22,.61,.36,1);
}
/* 안쪽 한 겹을 더 두는 이유: 바깥은 높이만, 안쪽은 글자만 움직인다.
   글자가 조금 늦게 따라 올라와야 '밀려 올라오는' 느낌이 산다.
   두 줄로 자르는 것은 안전장치다 — 문구가 길어져도 카드 밖으로 넘치지 않는다 */
.main-major__desc > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-top: 12px;
    font-size: 15px;
    line-height: 24px;
    color: rgba(255,255,255,.9);
    letter-spacing: -.03em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease .06s, transform .4s cubic-bezier(.22,.61,.36,1) .06s;
}
.main-major:hover .main-major__desc,
.main-major:focus-visible .main-major__desc {
    max-height: var(--desc-max);
}
.main-major:hover .main-major__desc > span,
.main-major:focus-visible .main-major__desc > span {
    opacity: 1;
    transform: none;
}

/* 사진이 오기 전까지 보이는 바탕색 — 서브 타이틀 띠와 같은 인디고~바이올렛 계열 */
.main-major:nth-child(1) { --tone: linear-gradient(135deg,#4F46E5,#7C3AED); }
.main-major:nth-child(2) { --tone: linear-gradient(135deg,#6366F1,#A855F7); }
.main-major:nth-child(3) { --tone: linear-gradient(135deg,#3B82F6,#4F46E5); }
.main-major:nth-child(4) { --tone: linear-gradient(135deg,#06B6D4,#3B82F6); }
.main-major:nth-child(5) { --tone: linear-gradient(135deg,#4338CA,#2563EB); }
.main-major:nth-child(6) { --tone: linear-gradient(135deg,#0EA5E9,#6366F1); }
.main-major:nth-child(7) { --tone: linear-gradient(135deg,#7C3AED,#4F46E5); }
.main-major:nth-child(8) { --tone: linear-gradient(135deg,#8B5CF6,#3B82F6); }
.main-major:nth-child(9) { --tone: linear-gradient(135deg,#2563EB,#06B6D4); }

/* 390px 3열은 1200 그리드 전용이다. 폭만 나눠 갖게 풀고 열 수는 3 을 지킨다 —
   학과가 아홉 개(홀수)라 2열로 접으면 마지막 줄에 한 장만 남아 어긋나 보인다.
   대신 태블릿에서는 카드가 235px 까지 좁아져 소개가 세 줄이 되므로,
   글자를 줄이는 대신 세 줄까지 허용한다 (--desc-max 와 line-clamp 를 같이 올린다) */
@media (max-width: 1239px) {
    .main-majors {
        margin-top: 16px;
        grid-template-columns: repeat(3,1fr);
    }
}
@media (max-width: 1023px) {
    .main-major {
        --desc-max: 78px;   /* 12 + 22×3 */
    }
    .main-major__body {
        padding: 20px 20px;
    }
    .main-major__rule {
        width: 22px;
        margin-bottom: 11px;
    }
    .main-major__name {
        font-size: 20px;
    }
    .main-major__desc > span {
        font-size: 14px;
        line-height: 22px;
        -webkit-line-clamp: 3;
    }
    .main-major__go {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
    }
}
@media (max-width: 767px) {
    .main-majors {
        margin-top: 14px;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* 한 장이 화면 폭을 다 쓰므로 세로 비율을 낮춘다 — 세로형 그대로 두면
       아홉 장이 쌓여 스크롤이 너무 길어진다 */
    .main-major {
        --desc-max: 56px;   /* 12 + 22×2 */
        aspect-ratio: 4/3;
    }
    .main-major__body {
        padding: 20px 22px;
    }
    .main-major__rule {
        width: 22px;
        margin-bottom: 11px;
    }
    .main-major__name {
        font-size: 19px;
    }
    /* 한 열이라 폭이 넉넉하다 — 태블릿에서 올려 둔 세 줄을 두 줄로 되돌린다 */
    .main-major__desc > span {
        font-size: 14px;
        line-height: 22px;
        -webkit-line-clamp: 2;
    }
    .main-major__go {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
    }
}
/* 손가락으로 넘기는 기기에는 hover 가 없다 — 그대로 두면 학과 소개를
   영영 볼 수 없으므로 처음부터 펼쳐 둔다 (움직임 없이 그 자리에 있다) */
@media (hover: none) {
    .main-major__desc {
        max-height: var(--desc-max);
    }
    .main-major__desc > span {
        opacity: 1;
        transform: none;
    }
    .main-major::after {
        opacity: .5;
    }
    /* 이동 표시도 같이 보여 준다 — 누를 수 있는 카드라는 신호가 남는다 */
    .main-major__go {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .main-major__shot,
    .main-major::after,
    .main-major__go,
    .main-major__rule,
    .main-major__desc,
    .main-major__desc > span {
        transition: none;
    }
}

/* ############################################################
   [5] 배너 — 배경 사진 + 검정 30% 오버레이
   ############################################################ */
.main-band {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333 url("../../images/main/main-cta-bg.jpg") center/cover no-repeat;
}
/* 사진 위에 글자가 읽히도록 어둡게 덮는다 (시안 검정 30%) */
.main-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
}
.main-band__text {
    position: relative;
    font-size: 28px;
    font-weight: 700;
    line-height: 42px;
    color: var(--white);
    letter-spacing: var(--ls-base);
    text-align: center;
}
/* 모바일에서는 <br> 로 나눈 두 줄이 각각 또 접힌다.
   높이 280 고정을 풀고 위아래 여백으로 받는다 */
@media (max-width: 1023px) {
    .main-band {
        height: 220px;
    }
    .main-band__text {
        font-size: 22px;
        line-height: 34px;
    }
}
@media (max-width: 767px) {
    .main-band {
        height: auto;
        padding: 44px 16px;
    }
    .main-band__text {
        font-size: 17px;
        line-height: 28px;
    }
}

/* ############################################################
   [6] 공지사항 · 1:1 문의
       왼쪽 500px 설명 열 + 오른쪽 700px 본문 열
   ############################################################ */
.main-board {
    padding: 130px 0;
}
/* 공지사항과 1:1 문의는 같은 판이 잇달아 온다. 그대로 두면 사이가
   130(아래) + 130(위) = 260 이 되어 두 판이 남남처럼 떨어져 보인다.
   뒤 판의 위 여백을 지워 앞 판의 아래 여백 하나로만 띄운다.
   (선택자가 클래스 둘이라 아래 미디어쿼리의 padding 축약형보다 우선한다) */
.main-board + .main-board {
    padding-top: 0;
}
.main-board__inner {
    display: flex;
}
.main-board__head {
    flex: none;
    width: 500px;
}
.main-board__title {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.main-board__desc {
    margin-top: 24px;
    font-size: 18px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.main-board__more {
    display: inline-block;
    margin-top: 40px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--body);
    font-size: 16px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: border-color .15s,color .15s;
}
.main-board__more:hover {
    border-bottom-color: var(--ink);
    color: var(--ink);
}
.main-board__body {
    flex: 1;
    min-width: 0;
}

/* 공지 목록 */
.main-notice li {
    border-bottom: 1px solid var(--hair);
}
.main-notice a {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 61px;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.main-notice a::before {
    content: "·";
    flex: none;
    font-size: 16px;
}
.main-notice__subject {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-notice a:hover {
    color: var(--acc);
}
.main-notice a:hover .main-notice__subject {
    text-decoration: underline;
}
.main-notice__date {
    flex: none;
    font-family: var(--font-num);
    font-size: 14px;
    color: var(--mute);
    letter-spacing: -.04em;
}

/* 1:1 문의 */
.main-qna__note {
    margin-top: 42px;
    font-size: 14px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.main-qna__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    padding: 0 40px;
    border-radius: var(--r-card);
    background: var(--acc);
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: var(--ls-base);
    transition: background-color .15s;
}
.main-qna__btn:hover {
    background: #3B51BE;
}
/* 연락처 — 전화 / 이메일 2열 */
.main-contact {
    display: flex;
    margin-top: 56px;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}
.main-contact__item {
    flex: 1;
    padding: 32px 0;
}
.main-contact__item + .main-contact__item {
    border-left: 1px solid var(--hair);
    padding-left: 40px;
}
.main-contact__label {
    font-size: 13px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.main-contact__value {
    margin-top: 22px;
    font-family: var(--font-num);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
}
/* 번호 아래 한 줄 — 다른 방법으로도 물어볼 수 있다는 안내 */
.main-contact__note {
    margin-top: 2px;
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* 왼쪽 500px 설명 열도 1200 그리드 전용이다.
   태블릿부터는 설명을 본문 위로 올려 세로로 쌓는다 */
@media (max-width: 1239px) {
    .main-board {
        padding: 90px 0;
    }
    .main-board__head {
        width: 400px;
    }
}
@media (max-width: 1023px) {
    .main-board {
        padding: 72px 0;
    }
    .main-board__inner {
        display: block;
    }
    .main-board__head {
        width: auto;
    }
    .main-board__more,
    .main-qna__note {
        margin-top: 24px;
    }
    .main-board__body {
        margin-top: 36px;
    }
}
@media (max-width: 767px) {
    .main-board {
        padding: 52px 0;
    }
    .main-board__title {
        font-size: 24px;
    }
    .main-board__desc {
        margin-top: 16px;
        font-size: 16px;
    }
    .main-board__body {
        margin-top: 28px;
    }
    /* 제목이 길어 말줄임이 심해진다 — 높이 61 고정을 풀고 여백으로 받는다 */
    .main-notice a {
        gap: 12px;
        height: auto;
        padding: 16px 0;
        font-size: 15px;
    }
    .main-notice__date {
        font-size: 13px;
    }
    .main-qna__btn {
        height: 76px;
        padding: 0 22px;
        font-size: 18px;
    }
    /* 전화 · 이메일 두 칸을 세로로 — 이메일 주소가 한 칸 폭을 넘긴다 */
    .main-contact {
        display: block;
        margin-top: 36px;
    }
    .main-contact__item {
        padding: 22px 0;
    }
    .main-contact__item + .main-contact__item {
        border-left: 0;
        border-top: 1px solid var(--hair);
        padding-left: 0;
    }
    .main-contact__value {
        margin-top: 12px;
        font-size: 18px;
    }
}