@charset "utf-8";
/* ============================================================
   common.css — 전 페이지 공통: 헤더 · 푸터 · 버튼 · 칩 · 체크박스 · 페이징
   두 개 이상의 화면에서 쓰이는 것만 여기 둔다.
   한 화면에서만 쓰는 건 페이지 CSS(lecture.css 등)로 뺀다.
   ============================================================ */

/* ------------------------------------------------------------
   헤더 — 높이 80 / 로고 · GNB · 로그인
   ------------------------------------------------------------ */
.header {
    height: var(--header-h);
    background: var(--white);
}
/* 로고 · GNB · 로그인 세 덩어리를 양끝 기준으로 벌린다.
   → .gnb 와 .header__util 에 따로 마진을 줄 필요가 없다 */
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}

/* ---------- 스크롤을 따라 붙는 헤더 ----------
   제자리를 지나가면 script.js(initStickyHeader)가 .is-fixed 를 붙이고,
   헤더가 위에서 미끄러져 내려와 화면에 남는다.

   왜 처음부터 sticky 로 두지 않았나. 첫 화면에서는 헤더가 본문 위에 겹칠
   이유가 없고, 겹치지 않는 동안에는 아래 sticky 들(탭 띠 · 구매 박스)이
   여백을 두고 자리를 잡을 수 있다. 지나간 뒤에 나타나면 '따라온다' 는 것도
   움직임으로 한 번 알려 주게 된다.

   고정되는 순간 헤더가 흐름에서 빠져 본문이 그 높이만큼 위로 튄다.
   같은 높이를 body 위에 채워 상쇄한다 — 붙은 헤더가 얇아져도 이 값은
   원래 높이 그대로다. 흐름에서 빠진 자리가 원래 높이만큼이기 때문이다. */
.has-fixed-header {
    padding-top: var(--header-h);
}
.header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    /* 팝업(200)보다는 아래, 퀵메뉴(90)보다는 위 */
    height: var(--header-fix-h);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    animation: header-drop .28s cubic-bezier(.4,0,.2,1);
}
.header.is-fixed .header__inner {
    height: var(--header-fix-h);
}
@keyframes header-drop {
    from {
        transform: translateY(-100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .header.is-fixed {
        animation: none;
    }
}

.header__logo {
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.header__logo:hover {
    color: var(--acc);
}

/* 메뉴 묶음(.gnb + .header__util).
   데스크탑에서는 display:contents 라 이 상자 자체가 없는 셈이 되고,
   자식 둘이 그대로 .header__inner 의 flex 항목이 된다 —
   즉 위의 space-between 이 시안 그대로 동작한다.
   좁아지면 아래 미디어 쿼리에서 이 상자가 오른쪽 서랍으로 바뀐다. */
.header__nav {
    display: contents;
}

/* 서랍 뒤를 덮는 막 — 좁은 화면에서만 쓴다 */
.header__dim {
    display: none;
}

/* 메뉴 단추 — 넓을 땐 없다 */
.header__toggle {
    display: none;
}

/* GNB — 항목 간 46px (시안 간격). 좌우 위치는 위 space-between 이 잡는다 */
.gnb {
    display: flex;
    gap: 46px;
}
/* 대메뉴 한 칸(1차 링크 + 펼침 단추 + 2차 메뉴).
   넓은 화면에서는 .header__nav 와 같은 어법으로 이 상자를 없는 셈 치므로
   .gnb__link 가 그대로 .gnb 의 flex 항목이 된다 — 시안의 한 줄 배치가 그대로다.
   2차 메뉴는 좁은 화면의 서랍에서만 쓰기 때문에 여기서는 감춘다
   (넓은 화면의 2차 메뉴는 헤더 아래 .lnb 가 맡는다). */
.gnb__item {
    display: contents;
}
.gnb__more,
.gnb__sub {
    display: none;
}
.gnb__link {
    position: relative;
    font-weight: 500;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -.08em;
    white-space: nowrap;
    transition: color .2s;
}
/* 액센트 밑줄.
   transform 만 움직이므로 글자 폭/위치가 흔들리지 않는다
   (font-weight 를 바꾸면 글자 폭이 변해 옆 메뉴가 밀린다) */
.gnb__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    background: var(--acc);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.gnb__link:hover {
    color: var(--acc);
}
/* 들어올 땐 왼→오, 나갈 땐 오른쪽으로 빠진다 (되감기는 느낌이 안 나게) */
.gnb__link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* 현재 보고 있는 메뉴는 밑줄이 그대로 남는다 (script.js 가 .is-current 를 붙인다).
   굵기는 페이지가 열릴 때 한 번 정해지는 값이라 hover 처럼 폭이 흔들리지 않는다 */
.gnb__link.is-current {
    color: var(--acc);
    font-weight: 700;
}
.gnb__link.is-current::after {
    transform: scaleX(1);
}

/* 메뉴 6개 + 로그인 버튼(163px)이 한 줄에 들어가는 하한이 1024 근처다.
   그 아래로는 아무리 줄여도 로고와 부딪히므로 햄버거로 넘긴다 */
@media (max-width: 1239px) {
    .gnb {
        gap: 24px;
    }
    .gnb__link {
        font-size: 16px;
    }
}

/* 로그인 자리 — 로그인 전에는 단추 하나, 로그인 뒤에는 이름 + 로그아웃 두 개가 온다
   (script.js 의 initAuth 가 갈아 끼운다) */
.header__util {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* 내 아이디 — 눌러서 내정보보기로 간다.
   로그인한 사람이 자기 이름을 눌러 보는 건 거의 반사적인 동작이라,
   그 자리에 아무 일도 일어나지 않으면 메뉴를 다시 뒤지게 된다. */
.header__user {
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
    transition: color .15s;
}
.header__user b {
    font-weight: 500;
    color: var(--ink);
    transition: color .15s;
}
.header__user:hover b {
    color: var(--acc);
}

/* 로그인 / 회원가입 — 163x40 필 */
.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 163px;
    height: 40px;
    border-radius: 20px;
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: var(--ls-base);
    transition: background-color .15s;
}
.btn-login:hover {
    background: var(--acc);
}
/* 로그아웃 — 로그인만큼 눈에 띌 필요가 없다. 테두리만 두르고 폭도 줄인다 */
.btn-login--out {
    width: auto;
    padding: 0 20px;
    border: 1px solid var(--hair);
    background: var(--white);
    color: var(--body);
    transition: border-color .15s,color .15s;
}
.btn-login--out:hover {
    border-color: var(--body);
    background: var(--white);
    color: var(--ink);
}
/* 검색하기 · 잉크 버튼과 같은 어법 */
.btn-login .ico {
    flex: none;
}

/* ------------------------------------------------------------
   좁은 화면의 메뉴 — 오른쪽에서 열리는 서랍

   메뉴를 따로 복사해 두지 않는다. 위의 .header__nav 가 데스크탑에서는
   display:contents 로 투명하게 있다가, 여기서 상자로 살아나 그대로 서랍이 된다.
   같은 링크가 마크업에 두 번 들어가면 한쪽만 고치는 실수가 난다.

   전체화면 대신 서랍인 이유: 교육 사이트라 대메뉴 아래 2차 메뉴가 붙고,
   전체화면에서 아코디언을 펼치면 뒤 본문이 완전히 가려져 지금 어디에 있었는지
   감이 끊긴다. 서랍은 뒤가 비쳐 맥락이 남고, 아래로 길어져도 자연스럽다.

   1023 에서 넘기는 이유: 메뉴 6개 + 로그인 버튼(163px) + 로고가
   한 줄에 들어가는 하한이 그 근처다. 더 줄이면 글자가 서로 붙는다.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    /* 로고와 단추는 서랍 위에 남는다 */
    .header__logo,
    .header__toggle {
        position: relative;
        z-index: 110;
    }
    /* 다만 서랍이 열리면 로고는 막(z-index 99) 아래로 내린다.
       위에 남겨 두면 화면 전체가 어두워진 가운데 로고만 환하게 떠 보인다.
       단추는 X 로 바뀌어 닫는 자리를 맡으므로 그대로 위에 둔다. */
    .header.is-open .header__logo {
        z-index: 98;
    }
    .header__toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-right: -10px;
    }
    .header__bar {
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: var(--ink);
        transition: transform .25s,opacity .15s;
    }
    /* 막대 세 개가 X 로 접힌다 — 가운데를 지우고 위아래를 가운데(7px)로 모아 돌린다 */
    .header.is-open .header__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .header.is-open .header__bar:nth-child(2) {
        opacity: 0;
    }
    .header.is-open .header__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 서랍 뒤를 덮는 막 — 눌러서 닫는다 */
    .header__dim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(0,0,0,.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s,visibility .28s;
    }
    .header.is-open .header__dim {
        opacity: 1;
        visibility: visible;
    }

    /* 서랍 본체 — 오른쪽에서 밀려 들어온다.
       위쪽을 헤더 높이만큼 비워 두는 이유: 닫기(X)로 바뀐 단추가 서랍 위에 겹쳐
       떠 있으므로, 그 자리에 메뉴가 깔리면 서로 가린다. */
    .header__nav {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        flex-direction: column;
        width: min(320px,84vw);
        padding-top: var(--header-h);
        padding-bottom: 24px;
        background: var(--white);
        box-shadow: -4px 0 20px rgba(0,0,0,.12);
        /* 2차 메뉴를 다 펼치면 세로로 길어질 수 있다 */
        overflow-y: auto;
        overscroll-behavior: contain;
        /* visibility 를 같이 다뤄야 닫힌 서랍이 링크를 가로채지 않는다 */
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;
    }
    .header.is-open .header__nav {
        visibility: visible;
        transform: translateX(0);
    }
    /* 붙은 헤더는 얇으므로 서랍이 비워 두는 윗자리도 같이 줄인다 —
       안 줄이면 X 단추와 첫 메뉴 사이가 20px 만큼 허전하게 뜬다 */
    .header.is-fixed .header__nav {
        padding-top: var(--header-fix-h);
    }

    /* 대메뉴 — 세로로 쌓고 줄마다 구분선 */
    .header__nav .gnb {
        flex-direction: column;
        gap: 0;
    }
    .header__nav .gnb__item {
        display: block;
        border-bottom: 1px solid var(--line-soft);
    }
    /* 자간은 한 줄 배치용 -.08em 보다 조금 벌린다. 세로로 쌓이면 글자가
       한 줄에 다 들어와 좁힐 이유가 없고, 좁힌 채로 두면 빽빽해 보인다 */
    .header__nav .gnb__link {
        display: block;
        padding: 16px 20px;
        font-size: 17px;
        letter-spacing: -.06em;
    }
    /* 밑줄 애니메이션은 한 줄 배치용이다. 세로로 쌓인 서랍에서는
       글자 아래에 선이 떠 보여 구분선과 겹친다 */
    .header__nav .gnb__link::after {
        display: none;
    }
    .header__nav .gnb__link.is-current {
        color: var(--acc);
    }

    /* 2차 메뉴가 있는 칸 — 링크(왼쪽)와 펼침 단추(오른쪽)를 한 줄에 놓고
       2차 메뉴는 그 아래 줄을 통째로 쓴다.
       링크와 단추를 나눠 둔 이유: 링크를 펼침 겸용으로 만들면
       대메뉴 자기 페이지로 갈 방법이 사라진다. */
    .header__nav .gnb__item--has-sub {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .header__nav .gnb__item--has-sub .gnb__sub {
        grid-column: 1 / -1;
    }
    .header__nav .gnb__more {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        color: var(--mute);
    }
    /* 꺾쇠 — 아래를 향하다가 펼치면 위로 돈다 */
    .header__nav .gnb__more::before {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .25s;
    }
    .header__nav .gnb__item.is-open .gnb__more::before {
        transform: translateY(2px) rotate(-135deg);
    }

    /* 2차 메뉴 — 접힘/펼침.

       격자 한 칸의 높이를 0fr↔1fr 로 옮긴다. 1fr 은 '내용이 필요한 만큼'이라
       항목이 2개든 3개든 딱 그 높이까지만 움직인다.
       (max-height 로 하면 넉넉한 값을 넣어야 해서, 여는 순간 실제 높이를
        지나쳐 튀고 닫을 때는 남은 값을 소진하느라 멈칫한다.)

       칸이 하나여야 이 방식이 성립하므로 링크들은 .gnb__sublist 로 묶여 있고,
       접히는 동안 글자가 삐져나오지 않게 그쪽이 overflow 를 맡는다. */
    .header__nav .gnb__sub {
        display: grid;
        grid-template-rows: 0fr;
        background: var(--surf);
        transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1);
    }
    .header__nav .gnb__item.is-open .gnb__sub {
        grid-template-rows: 1fr;
    }
    .header__nav .gnb__sublist {
        overflow: hidden;
        /* 격자 항목의 기본 최소 높이(auto)가 0fr 을 이겨 안 접힌다 */
        min-height: 0;
        /* 접혔을 때는 여백도 0 이라 띠가 남지 않는다.
           여백을 펼침 상태에만 주고 전환을 안 걸면, 클래스가 붙는 순간
           20px 이 통째로 생겨 높이가 거기서부터 출발해 덜컹거린다.
           높이와 같은 시간·같은 곡선으로 같이 자라게 해서 계단을 없앤다. */
        padding: 0;
        opacity: 0;
        transition: opacity .2s,padding .28s cubic-bezier(.4,0,.2,1);
    }
    .header__nav .gnb__item.is-open .gnb__sublist {
        padding: 10px 0;
    }
    .header__nav .gnb__item.is-open .gnb__sublist {
        opacity: 1;
    }
    .header__nav .gnb__sublink {
        position: relative;
        display: block;
        padding: 13px 20px 13px 44px;
        font-size: 15px;
        color: var(--body);
        letter-spacing: -.06em;
        transition: color .15s;
    }
    /* 불릿 — 4x2 짧은 막대. 들여쓰기만으로는 1차와 2차의 층이 잘 안 읽힌다 */
    .header__nav .gnb__sublink::before {
        content: "";
        position: absolute;
        left: 32px;
        top: 50%;
        width: 4px;
        height: 2px;
        margin-top: -1px;
        background: var(--hair-hover);
    }
    .header__nav .gnb__sublink:hover {
        color: var(--acc);
    }
    /* 보고 있는 페이지는 글자를 8px 안으로 들인다.
       이때 불릿을 같이 옮기지 않고 그 8px 만큼 오른쪽으로 늘려(4→12px)
       빈자리를 채운다. 왼쪽 시작점이 그대로라 목록의 세로선이 흔들리지 않고,
       길어진 막대가 곧 '여기' 표시가 된다. 글자 끝과의 간격(8px)도 그대로다 */
    .header__nav .gnb__sublink.is-current {
        padding-left: 52px;
        color: var(--acc);
        font-weight: 500;
    }
    .header__nav .gnb__sublink.is-current::before {
        width: 12px;
        background: var(--acc);
    }

    /* 로그인은 서랍 맨 아래에 붙인다 (메뉴가 짧아도 자리가 흔들리지 않게) */
    .header__nav .header__util {
        margin-top: auto;
        padding: 24px 20px 0;
    }
    .header__nav .btn-login {
        width: 100%;
        height: 48px;
        font-size: 15px;
    }

    /* 서랍이 떠 있는 동안 뒤 본문이 따라 움직이지 않게 */
    body.is-nav-open {
        overflow: hidden;
    }
}

/* ------------------------------------------------------------
   2차 메뉴 (LNB) — 헤더 바로 아래, 서브 타이틀 밴드 위
   같은 대메뉴 안의 '페이지 이동' 이다.
   밴드 아래에 있는 '한 페이지 안의 탭'(수험정보 5개 탭 등)과
   구분되도록 밴드를 사이에 두고 위에 놓는다.
   ------------------------------------------------------------ */
/* 아랫변 선을 두는 이유가 하나 더 있다 — 바로 아래 오는 타이틀 밴드가
   액센트 그라데이션이라, 흰 경계가 없으면 현재 메뉴의 액센트 밑줄이 그 색에 먹힌다 */
.lnb {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.lnb__inner {
    display: flex;
    gap: 40px;
    height: 56px;
}
.lnb__link {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 17px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: color .2s;
}
.lnb__link:hover {
    color: var(--ink);
}
.lnb__link.is-current {
    color: var(--acc);
    font-weight: 700;
}
/* 밑줄이 바의 아래 테두리 위에 겹쳐 앉는다 */
.lnb__link.is-current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--acc);
}
@media (max-width: 767px) {
    .lnb__inner {
        gap: 24px;
        height: 48px;
    }
    .lnb__link {
        font-size: 15px;
    }
}

/* ------------------------------------------------------------
   버튼
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--r-btn);
    font-weight: 700;
    letter-spacing: var(--ls-base);
    transition: background-color .15s,border-color .15s,color .15s;
}
/* 잉크 솔리드 — 검색하기. hover 에서 포인트 컬러로 넘어간다 */
.btn--ink {
    background: var(--ink);
    color: var(--white);
}
.btn--ink:hover {
    background: var(--acc);
}
/* 액센트 솔리드 — 페이지 대표 CTA */
.btn--acc {
    background: var(--acc);
    color: var(--white);
}
.btn--acc:hover {
    background: #3B51BE;
}
/* 아웃라인 — 초기화 · 장바구니로 이동 */
.btn--line {
    background: var(--white);
    border: 1px solid var(--hair);
    color: var(--body);
}
.btn--line:hover {
    border-color: var(--body);
    color: var(--ink);
}
/* 서브(연한) 아웃라인 — 카드의 '자세히 보기' */
.btn--sub {
    background: var(--white);
    border: 1px solid var(--btn-line);
    color: var(--btn-text);
}
/* 채우지 않고 테두리·글자만 한 단계 진하게 — 카드 hover 와 같은 어법 */
.btn--sub:hover {
    border-color: var(--mute);
    color: var(--body);
}

/* ------------------------------------------------------------
   더보기 — 길어서 접어 둔 목록을 펼친다.
   지금 쓰는 곳: 과정 상세의 커리큘럼(view.js) · 결제하기의 주문정보(order.js)

   회색 면으로 막아 목록의 끝을 만든다 — 테두리만 두르면 칸이 하나
   더 있는 것처럼 보이고, 아무것도 안 두면 목록이 그냥 끊긴 것처럼 보인다.
   펼친 뒤에는 꺾쇠를 뒤집어 '접기' 로 읽힌다 (.is-open 은 각 페이지 JS 가 붙인다)
   ------------------------------------------------------------ */
.more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    background: var(--surf);
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: background-color .15s,color .15s;
}
.more:hover {
    background: #EDEEF0;
    color: var(--ink);
}
.more svg {
    transition: transform .2s;
}
.more.is-open svg {
    transform: rotate(180deg);
}
.more[hidden] {
    display: none;
}

/* ------------------------------------------------------------
   체크박스 — 18x18 원형. 배경색만 바뀌고 체크 표시는 동일
   라디오도 모양이 같아 이 클래스를 함께 쓴다 (회원가입의 예/아니오).
   수강신청의 과정 카드만 24px 로 키워 쓴다 — sub.css 의 .lec-card .chk
   ------------------------------------------------------------ */
.chk {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    background-color: #D5D7DA;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.4 8 11 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 7px;
    transition: background-color .15s;
}
.chk:checked {
    background-color: var(--ink);
}
.chk:hover {
    background-color: #BFC2C6;
}
.chk:checked:hover {
    background-color: #000;
}

/* ------------------------------------------------------------
   칩 — 필터의 학과/단계 선택
   ------------------------------------------------------------ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--r-btn);
    background: var(--white);
    border: 1px solid var(--hair);
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
    transition: border-color .15s,color .15s,background-color .15s;
}
.chip:hover {
    border-color: var(--body);
    color: var(--ink);
}
.chip.is-on {
    background: var(--acc-tint);
    border-color: var(--acc);
    color: var(--acc);
    font-weight: 700;
}
@media (max-width: 767px) {
    .chip {
        height: 34px;
        padding: 0 12px;
        font-size: 14px;
    }
}
.chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}
.chip__dot--1 {
    background: var(--step1);
}
.chip__dot--2 {
    background: var(--step2);
}
.chip__dot--3 {
    background: var(--step3);
}
.chip__dot--4 {
    background: var(--step4);
}

/* ------------------------------------------------------------
   단계 배지 — 61x24, 단계색 6% 틴트 + 단계색 1px 테두리
   ------------------------------------------------------------ */
.step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    height: 24px;
    border-radius: 4px;
    flex: none;
    font-size: 12.6px;
    font-weight: 700;
    letter-spacing: -.03em;
    /* line-height 를 1 로 죽여야 한글 글자가 상자 안에서 실제로 가운데 온다.
     상속된 1.5 를 두면 줄상자에 디센더 여유가 붙어 글자가 위로 떠 보인다.
     text-indent 는 자간(-.03em)이 마지막 글자 뒤에도 붙어 생기는 왼쪽 쏠림 보정. */
    line-height: 1;
    text-indent: .03em;
}
.step--1 {
    color: var(--step1);
    border: 1px solid var(--step1);
    background: rgba(233,72,116,.06);
}
.step--2 {
    color: var(--step2);
    border: 1px solid var(--step2);
    background: rgba(243,174,32,.06);
}
.step--3 {
    color: var(--step3);
    border: 1px solid var(--step3);
    background: rgba(11,191,119,.06);
}
.step--4 {
    color: var(--step4);
    border: 1px solid var(--step4);
    background: rgba(71,111,204,.06);
}

/* ------------------------------------------------------------
   학과명 · BEST 배지 — 단계 배지와 한 줄에 서는 짝이다
   목록 카드와 상세 페이지가 같이 쓰므로 여기 둔다.
   (배치는 쓰는 쪽 몫 — 목록 카드의 'BEST 를 오른쪽 끝으로' 같은
    margin 은 sub.css 에 남긴다)
   ------------------------------------------------------------ */
.dept {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
    white-space: nowrap;
}
.best {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: 13px;
    background: var(--ink);
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .02em;
}

/* ------------------------------------------------------------
   안내 목록 — 유의사항 · 접수방법 등 줄글 나열
   --dot 을 붙이면 가운뎃점 불릿이 달린다
   ------------------------------------------------------------ */
.list > li {
    font-size: 16px;
    line-height: 28px;
    color: #666666;
    letter-spacing: var(--ls-base);
}
.list > li + li {
    margin-top: 4px;
}
.list--dot > li {
    position: relative;
    padding-left: 12px;
}
.list--dot > li::before {
    content: "·";
    position: absolute;
    left: 0;
}
/* 들여쓴 보조 설명 */
.list__sub {
    display: block;
    padding-left: 18px;
    color: var(--body);
}

/* ------------------------------------------------------------
   탭 — 한 페이지 안에서 내용만 갈아 끼우는 언더라인형
   위쪽 .lnb 는 '다른 페이지로 가는' 2차 메뉴이고 이건 제자리 전환이다.
   동작은 script.js 의 makeTabs() 가 맡는다.
   ------------------------------------------------------------ */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--hair);
}
.tabs__btn {
    position: relative;
    flex: 1 1 0;
    padding: 0 0 22px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.tabs__btn:hover {
    color: var(--body);
}
.tabs__btn.is-on {
    color: var(--ink);
}
/* 밑줄은 탭 띠의 회색 선(1px)을 덮어야 하므로 bottom 을 -1px 로 내린다 */
.tabs__btn.is-on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
}
.tab-panel[hidden] {
    display: none;
}
@media (max-width: 767px) {
    .tabs__btn {
        padding: 0 0 16px;
        font-size: 14px;
        letter-spacing: -.08em;
    }
}

/* ------------------------------------------------------------
   페이징 — 40x40 / 화살표는 테두리, 숫자는 민무늬, 현재만 액센트
   ------------------------------------------------------------ */
.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.paging__group {
    display: flex;
    gap: 6px;
}
.paging__group + .paging__num,
.paging__num + .paging__group {
    margin-left: 8px;
}
/* 묶음 사이 14px(6+8) */
.paging__num {
    display: flex;
    gap: 6px;
}

/* 40x40 은 '아이템'에만 준다.
   .paging__group / .paging__num 은 감싸는 span 이라 여기 걸리면 안 된다
   (걸리면 숫자 묶음 전체가 40px 로 눌린다) */
.paging__group > a,
.paging__num > a,
.paging__num > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-btn);
    font-family: var(--font-num);
    font-size: 15px;
    line-height: 1;
    color: var(--body);
    transition: background-color .15s,border-color .15s,color .15s;
}
.paging__arrow {
    background: var(--white);
    border: 1px solid var(--hair);
}
.paging__arrow:hover {
    border-color: var(--body);
}
.paging__num a:hover {
    color: var(--ink);
    background: var(--surf);
}
.paging__num .is-current {
    background: var(--acc);
    color: var(--white);
    font-weight: 700;
}
@media (max-width: 767px) {
    .paging,
    .paging__group,
    .paging__num {
        gap: 4px;
    }
    /* 화살표 묶음과 숫자 묶음 사이 여유(8px)까지 빼야 9칸이 360px 안에 들어온다 */
    .paging__group + .paging__num,
    .paging__num + .paging__group {
        margin-left: 0;
    }
    .paging__group > a,
    .paging__num > a,
    .paging__num > span {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* ------------------------------------------------------------
   금액 표기 — 정가(취소선) + 판매가 + 단위. 오른쪽 정렬.
   과정 카드 · 선택 과정 바가 같이 쓰고, 장바구니·주문에서도 그대로 쓴다.
   ------------------------------------------------------------ */
.price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}
.price__old {
    position: relative;
    top: -5px;
    margin-right: 12px;
    font-family: var(--font-num);
    font-size: 15px;
    color: var(--price-old);
    /* 할인 전 정가 — 두께를 1px 로 고정한다. 안 그러면 브라우저가
     글자 크기에 맞춰 굵게 그어 판매가보다 눈에 띈다. */
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
/* 할인율 — 취소선 정가와 판매가 사이. 정가만 그어 두면 얼마나 깎였는지는
   두 수를 빼 봐야 알 수 있어서, 그 계산을 대신 적어 준다.

   알약으로 감싼 이유. 이 줄은 이미 숫자만 셋(정가·할인율·판매가)이라,
   할인율을 맨숫자로 두면 판매가와 한 덩어리로 읽힌다 — '45 470,000원'.
   알약은 모양만으로 '값이 아니라 딱지' 라고 알려 줘서, 글자를 키우거나
   굵히지 않아도 판매가와 섞이지 않는다.

   색은 1단계 배지와 같은 붉은 계열(--sale). 값이 깎였다는 건 이 줄에서
   유일하게 성격이 다른 정보라, 파랑 포인트색을 쓰면 화면의 다른 포인트
   (활성 탭·선택 칩·검색결과 건수)와 같은 무게로 섞인다.
   --step1 의 색상·채도를 그대로 쓰고 명도만 읽힐 만큼 내린다 —
   원색 #E94874 는 이 알약 바탕에서 3.29:1, --sale 은 4.51:1 이다.

   바탕은 옅게만 깐다. 꽉 채워 흰 글씨로도 해 봤는데, 카드 머리의 단계·BEST
   배지와 같은 무게가 되어 한 카드에 채워진 알약이 셋이 된다. 여기서 제일
   크게 읽혀야 하는 건 판매가다.
   모서리는 완전한 원(999px)이라 4px 인 단계 배지와 헷갈리지 않는다. */
.price__off {
    /* .price 는 baseline 정렬이라, 안쪽 여백이 있는 알약은 밑선에 걸려
       아래로 처져 보인다. 이 칸만 세로 가운데로 맞춘다 */
    align-self: center;
    margin-right: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--sale-tint);
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--sale);
    letter-spacing: -.02em;
}
.price__now {
    font-family: var(--font-num);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
}
.price__unit {
    position: relative;
    top: -2px;
    margin-left: 3px;
    font-size: 19px;
    color: var(--ink);
}

/* ------------------------------------------------------------
   표 — 수험정보 · 게시판 등에서 공통으로 쓴다
   윗변 1px 잉크 / 머리행 서피스 / 칸 구분 1px 헤어라인
   ------------------------------------------------------------ */
/* 세로 구분선은 '모든 칸의 왼쪽'에 둔다.
   :first-child 로 첫 열만 예외를 두면 rowspan 이 걸린 행에서 어긋난다 —
   위 칸이 세로로 이어받은 행에서는 소스상 첫 칸이 실제로는 두 번째 열이라
   그 칸의 왼쪽 선(= 앞 칸의 오른쪽 선)이 사라진다.
   그래서 예외를 없애고, 맨 왼쪽에 생기는 한 줄은 표를 1px 밀어 감싸는 쪽에서 잘라낸다. */
.tbl-wrap {
    overflow: hidden;
}
.tbl {
    width: calc(100% + 1px);
    margin-left: -1px;
    border-top: 1px solid var(--ink);
    border-collapse: collapse;
    table-layout: fixed;
}
.tbl th,
.tbl td {
    border-bottom: 1px solid var(--hair);
    border-left: 1px solid var(--hair);
    padding: 16px 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    line-height: 26px;
    letter-spacing: var(--ls-base);
}
.tbl thead th {
    height: 50px;
    padding: 0 20px;
    background: var(--surf);
    font-weight: 700;
    color: #424242;
}
/* 행 머리(성적 등급표처럼 왼쪽 열이 머리인 표) */
.tbl tbody th {
    background: var(--surf);
    font-weight: 700;
    color: #424242;
}
.tbl td {
    color: #666666;
}
.tbl .ta-l {
    text-align: left;
}
.tbl .ta-c {
    text-align: center;
}
/* 칸 안의 불릿 목록 */
.tbl ul > li {
    position: relative;
    padding-left: 12px;
    text-align: left;
}
.tbl ul > li::before {
    content: "·";
    position: absolute;
    left: 0;
}
.tbl ul > li + li {
    margin-top: 8px;
}
/* 한 단계 더 들어간 줄 (－ 로 시작하는 항목) */
.tbl ul ul > li {
    padding-left: 16px;
}
.tbl ul ul > li::before {
    content: "－";
}

/* 표 아래 주석 */
.tbl-note {
    margin-top: 20px;
    font-size: 15px;
    line-height: 26px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* 좁은 화면에서는 표를 줄이지 않고 손가락으로 밀어 본다.
   열을 접거나 세로로 풀면 rowspan 이 걸린 수험정보 표가 뜻을 잃는다.

   overflow-x 만 auto 로 바꾼다. 왼쪽 1px 을 잘라내던 hidden 은 y 쪽에 그대로
   남고, 가로쓰기에서 왼쪽으로 넘친 부분은 애초에 스크롤로 닿을 수 없어서
   표를 -1px 밀어 선을 잘라내던 방식이 그대로 살아 있다. */
/* 1023 부터 적용하는 이유는 태블릿에서 이미 깨지기 때문이다.
   colgroup 고정 폭의 합(수험정보 시험일정표는 251+250+250=751)이 안쪽 폭을
   넘어서는 지점이 태블릿 구간이다(768 에서 안쪽 713 — 39px 모자란다).
   그러면 fixed 레이아웃이 지정 폭을 비율로 줄이면서 폭을 안 정한 열을 0 으로
   만들고, overflow:hidden 이라 밀어 볼 수도 없어 글자가 겹쳐 보인다.
   → 열 폭은 내용에 맡기고, 넘치는 만큼은 밀어서 보게 한다.
   (col 의 폭은 인라인 style 로 박혀 있어 !important 로만 덮인다) */
@media (max-width: 1023px) {
    .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tbl {
        min-width: 640px;
        table-layout: auto;
    }
    .tbl col {
        width: auto !important;
    }
}
/* 글자 크기까지 줄이는 건 모바일부터 — 태블릿은 아직 자리가 넉넉하다 */
@media (max-width: 767px) {
    .tbl th,
    .tbl td {
        padding: 14px 12px;
        font-size: 14px;
        line-height: 22px;
    }
}

/* 표를 옆으로 밀어 보라는 안내.

   표마다 열 수가 달라 어떤 표가 실제로 넘치는지는 CSS 로 알 수 없다.
   그래서 script.js(initTableHint)가 표 폭을 재서 넘칠 때만 .is-on 을 붙인다.

   한 번 밀었다고 안내를 지우지는 않는다. 표가 여러 개 이어지는 화면이라
   표마다 밀 수 있는지를 매번 다시 판단하게 되기 때문이다.

   안내는 감싸개(.tbl-wrap) 바깥, 표 바로 위에 둔다. 안에 넣으면 표와 같이
   흘러가 정작 밀어야 할 때 화면 밖으로 사라진다. */
.tbl-hint {
    display: none;
}
/* 밀어서 보는 구간(위 .tbl-wrap 과 같은 1023)에서만 띄운다 */
@media (max-width: 1023px) {
    .tbl-hint.is-on {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 10px;
        font-size: 13px;
        color: var(--mute);
        letter-spacing: var(--ls-base);
    }
    .tbl-hint__ico {
        flex: none;
        animation: tbl-hint-nudge 1.6s ease-in-out infinite;
    }
}
/* 좌우로 살짝 흔들어 '미는 것' 임을 알린다.
   OS 에서 움직임 줄이기를 켠 사용자에게는 base.css 가 이 애니메이션을 끈다 */
@keyframes tbl-hint-nudge {
    0%,100% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(2px);
    }
}

/* ------------------------------------------------------------
   푸터
   ------------------------------------------------------------ */
.footer {
    border-top: 1px solid var(--hair);
    padding: 60px 0 84px;
}
.footer__logo {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -.04em;
}
.footer__info {
    margin-top: 26px;
    font-size: 14px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: -.04em;
}
.footer__links {
    margin-top: 0;
    display: flex;
    gap: 0;
    font-size: 14px;
    line-height: 24px;
    color: var(--mute);
}
.footer__links a {
    transition: color .15s;
}
.footer__links a:hover {
    color: var(--ink);
    text-decoration: underline;
}
.footer__links li + li::before {
    content: "·";
    margin: 0 6px;
}
.footer__copy {
    margin-top: 19px;
    font-family: var(--font-num);
    font-size: 14px;
    color: var(--mute);
    letter-spacing: -.04em;
}
@media (max-width: 767px) {
    .footer {
        padding: 44px 0 52px;
    }
    .footer__info,
    .footer__links,
    .footer__copy {
        font-size: 13px;
        line-height: 22px;
    }
    /* 항목이 한 줄에 다 못 들어간다 — 넘치면 다음 줄로 */
    .footer__links {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------
   비밀번호 보기 — 눈 단추를 입력칸 위에 얹는다
   아이콘은 script.js 가 넣는다 (initPasswordToggle — 꺼진 눈 ↔ 뜬 눈)

   여기(common.css)에 두는 이유: 로그인·회원가입(login.css)뿐 아니라
   나의강의실의 비밀번호 변경(sub.css)에서도 쓴다. 한쪽 파일에 두면
   다른 쪽 화면에서는 단추가 칸 밖으로 떨어져 나온다.
   ------------------------------------------------------------ */
.pw {
    position: relative;
}
/* 글자가 눈 아래로 흘러 들어가지 않게 오른쪽을 비워 둔다 */
.pw .login__input,
.pw .join__input,
.pw .bbs-form__input {
    padding-right: 52px;
}
.pw__eye {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    color: var(--placeholder);
    transition: color .15s;
}
.pw__eye:hover {
    color: var(--body);
}
/* 켜진 동안은 글자가 보이는 상태라 아이콘도 진하게 둔다 */
.pw__eye.is-on {
    color: var(--ink);
}

/* ------------------------------------------------------------
   퀵메뉴 — 오른쪽에 붙어 따라다니는 작은 판
   지금 들어 있는 것: 다음 시험까지 남은 날(D-day) · 맨 위로

   z-index 90 은 서랍(99~110)보다 낮다 — 메뉴를 열면 막 아래로 들어가야
   화면이 정리된다. 과정 상세의 구매 바(30)보다는 위에 둔다.
   ------------------------------------------------------------ */
.quick {
    position: fixed;
    right: 20px;
    top: 50%;
    z-index: 90;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 120px;
}

/* ---------- 다음 시험 D-day ---------- */
/* 남은 시험이 없으면 script.js 가 hidden 을 건다 */
.quick__dday[hidden] {
    display: none;
}
.quick__dday {
    padding: 16px 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    text-align: center;
}
.quick__label {
    font-size: 12px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.quick__step {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 숫자는 이 판에서 제일 큰 글자 — 멀리서도 이것만 읽힌다 */
.quick__num {
    margin-top: 8px;
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--acc);
    letter-spacing: -.03em;
}
.quick__date {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-num);
    font-size: 12px;
    color: var(--mute);
    letter-spacing: -.02em;
}

/* ---------- 맨 위로 ---------- */
/* 페이지 맨 위에서는 갈 곳이 없어 감춘다 (script.js 가 .is-on 을 붙인다) */
.quick__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    color: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s,visibility .2s,color .15s,border-color .15s;
}
.quick__top.is-on {
    opacity: 1;
    visibility: visible;
}
.quick__top:hover {
    border-color: var(--body);
    color: var(--ink);
}

@media (max-width: 1239px) {
    .quick {
        right: 12px;
        width: 104px;
    }
    .quick__num {
        font-size: 22px;
    }
}
/* 좁은 화면에서는 본문 폭을 먹지 않도록 D-day 판을 접고 동그란 TOP 만 남긴다.
   D-day 는 메인 히어로의 시험일정 옆에 이미 같은 내용이 있다. */
@media (max-width: 1023px) {
    .quick {
        right: 16px;
        top: auto;
        bottom: 20px;
        width: auto;
        transform: none;
    }
    .quick__dday {
        display: none;
    }
    .quick__top {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        font-size: 10px;
    }
    /* 과정 상세는 아래에 구매 바가 깔린다 — 그 위로 올린다 */
    .has-buybar .quick {
        bottom: 90px;
    }
}
/* 모바일에서는 퀵메뉴를 아예 내린다.
   화면이 좁을수록 떠 있는 단추가 가리는 본문의 비중이 커지고,
   맨 위로 가는 일은 브라우저 제스처(상태바 탭 · 주소창 스와이프)로도 된다. */
@media (max-width: 767px) {
    .quick {
        display: none;
    }
}

/* ------------------------------------------------------------
   확인 팝업 — [data-modal-open="#id"] 로 열고 [data-modal-close] 로 닫는다
   지금 쓰는 곳: 과정 상세의 '장바구니 담기' (script.js 의 initModal)

   페이지 뒤 스크롤은 일부러 잠그지 않았다. 잠그려면 body 의 overflow 를
   꺼야 하는데, 그러면 데스크탑에서 스크롤바가 사라진 만큼 본문과 퀵메뉴가
   오른쪽으로 튄다. 막이 이미 뒤를 다 덮으므로 잠금 없이 둔다.
   ------------------------------------------------------------ */
/* hidden 은 UA 의 display:none 이라 아래 display:flex 에 진다 — 따로 못 박는다 */
.modal[hidden] {
    display: none;
}
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    /* 헤더(110) · 서랍(99~110) · 구매 바(30)보다 위 — 뜬 동안은 가장 앞이다 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}
/* 뜰 때만 살짝 올라온다. display:none 에서 돌아오는 순간 애니메이션이
   다시 시작하므로 여는 클래스를 따로 두지 않아도 된다 */
.modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 34px 28px 28px;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    text-align: center;
    animation: modal-in .18s ease-out;
}
@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}
/* 목록처럼 여러 줄이 들어가는 팝업 — 420 으로는 한 줄이 두 줄로 접힌다
   (TESAT 커리큘럼 팝업이 이걸 쓴다) */
.modal__box--wide {
    max-width: 560px;
}
.modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--mute);
    transition: color .15s;
}
.modal__close:hover {
    color: var(--ink);
}

/* 무슨 일이 일어나는지 글보다 먼저 읽히는 자리 */
.modal__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--acc-tint);
    color: var(--acc);
}
.modal__title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.04em;
}
.modal__text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 24px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* 무엇을 담는지 되짚어 주는 칸 — 목록에서 여러 과정을 오가다 누르면
   어느 과정을 눌렀는지 헷갈린다 */
.modal__item {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--r-btn);
    background: var(--surf);
}
.modal__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.modal__price {
    margin-top: 4px;
    font-family: var(--font-num);
    font-size: 20px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.03em;
}
.modal__won {
    margin-left: 2px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--body);
}

.modal__btns {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}
.modal__btns .btn {
    flex: 1;
    height: 50px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .modal__box {
        padding: 30px 20px 22px;
    }
    /* 좁아지면 두 버튼이 각각 두 줄로 접힌다 — 위아래로 쌓고 중요한 쪽을 위에 둔다 */
    .modal__btns {
        flex-direction: column-reverse;
    }
    /* 세로로 쌓이면 flex:1 이 '높이를 나눠 가지라'는 뜻이 되어 height 를 이긴다.
       그대로 두면 글자 높이까지 눌린다 */
    .modal__btns .btn {
        flex: none;
        height: 48px;
    }
}