@charset "utf-8";
/* ============================================================
   sub.css — 서브 페이지 전부

   서브 페이지 스타일은 파일을 쪼개지 않고 여기 한 곳에 모은다.
   페이지별로 파일을 나누면 지금 화면에 없는 CSS 가 눈에 안 보여서
   급하게 클래스를 하나 추가할 때 이름이 겹치는지 알 방법이 없다.
   한 파일에 있으면 검색 한 번으로 전부 걸린다.

   ── 목차 ────────────────────────────────────────────────
   [0] 서브 공통      타이틀 밴드 · 본문 여백            .sub-*
   [1] 수강신청 목록    lecture/list.html                .lec-*
   [2] 과정 상세      lecture/view.html                .view-*
   [3] 독학학위제 소개  haksa/haksa.html                 .hak-*
   [4] 수험정보       haksa/exam_info.html             .exam-*
   [5] 약관          company/policy.html              .policy-*
   [6] 회사소개       company/about.html               .company-*
   [7] 게시판         bbs/*.html                       .bbs-*
   [8] 합격후기       review/list.html                 .review-*
   [9] 나의강의실     mypage/*.html                    .my-* · .pay-*
   [10] 장바구니     lecture/cart.html                .cart-*
   [11] TESAT      tesat/tesat.html                 .tesat-*
   [12] 결제하기     settlement/order.html            .order-*
   [13] 결제완료     settlement/done.html             .done-*

   ── 규칙 ────────────────────────────────────────────────
   · 클래스 접두어는 페이지 파일명을 줄여서 붙인다.
       list.html → lec-  /  view.html → view-
       haksa.html → hak-  /  exam_info.html → exam-
     접두어 없는 이름(.hero .sec .steps 같은)은 다른 페이지와 겹치므로 쓰지 않는다.
   · 새 블록은 반드시 [n] 구역 안, 그 페이지 자리에 넣는다.
   · 두 페이지 이상에서 쓰이게 되면 common.css 로 옮기고 접두어를 뗀다.
   · 반응형(@media)은 그 블록의 규칙이 전부 끝난 '뒤'에 붙인다.
     @media 는 명시도를 더하지 않아서 순서가 곧 우선순위다 —
     기본 규칙보다 위에 두면 그대로 덮여 아무 일도 일어나지 않는다.
   ============================================================ */

/* ############################################################
   [0] 서브 공통
   ############################################################ */

/* ------------------------------------------------------------
   서브 타이틀 밴드 — 높이 120 / 서피스 배경
   타이틀은 그리드 왼쪽 정렬, 부제는 그 오른쪽에 같은 줄
   ------------------------------------------------------------ */
/* 인디고 → 블루 → 시안 → 바이올렛 네 색이 아주 느리게 흘러간다.
   버튼(--acc 평면)과 같은 색 한 겹으로 채우면, 화면에서 가장 넓은 액센트 면적이
   아무것도 아닌 배경이 되어 정작 눌러야 할 단추가 덜 특별해 보인다.
   표면을 달리해 두면 둘이 서로 싸우지 않는다.

   움직이는 방법은 배경 위치만 옮기는 것이다 — 색을 매 프레임 다시 계산하는
   방식(background-color 애니메이션)과 달리 그리기 부담이 거의 없다.
   방향을 번갈아(alternate) 두는 이유는, 한 방향으로만 돌리면 끝과 처음이
   만나는 순간 색이 튀기 때문이다. 한 번 훑는 데 10초라 보고 있으면
   움직이는 줄 모르고, 눈을 돌렸다 오면 색이 달라져 있다. */
.sub-visual {
    position: relative;
    height: 120px;
    background: linear-gradient(100deg, #4F46E5 0%, #3B82F6 34%, #06B6D4 62%, #8B5CF6 100%);
    background-size: 220% 100%;
    animation: sub-visual-flow 10s ease-in-out infinite alternate;
}
@keyframes sub-visual-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .sub-visual {
        animation: none;
    }
}
/* 글자가 앉는 왼쪽만 아주 옅게 어둡게 깐다.
   네 색 중 시안(#06B6D4)은 밝아서 흰 글자와 붙으면 대비가 2:1 근처까지 떨어진다.
   색을 어둡게 고르는 대신 이 막을 한 겹 두면, 띠는 그대로 밝게 두고
   글자만 어느 색이 지나가든 읽힌다. */
.sub-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17,24,39,.40) 0%, rgba(17,24,39,.22) 40%, rgba(17,24,39,0) 78%);
}
.sub-visual__inner {
    position: relative;
    /* 위 막보다 앞에 둔다 */
    display: flex;
    align-items: center;
    gap: 41px;
    height: 100%;
}
.sub-visual__title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 30px;
    color: var(--white);
    letter-spacing: -.04em;
    line-height: 1;
}
/* 부제는 흰색을 조금 덜어 낸다 — 둘 다 100% 흰색이면 위계가 사라진다 */
.sub-visual__desc {
    font-size: 16px;
    color: var(--white);
    letter-spacing: -.04em;
    opacity: .85;
}

/* 서브 본문 */
.sub-content {
    padding: 60px 0 100px;
}

/* ############################################################
   [1] 수강신청 목록  ·  lecture/list.html  ·  .lec-*
       패키지/단과 탭 · 검색 필터 · 과정 카드 · 선택 과정 바
   ############################################################ */

/* ------------------------------------------------------------
   탭 — 600 + 600 (그리드의 50%씩), 높이 64
   활성 탭이 아래 필터 패널과 한 덩어리로 이어진다
   ------------------------------------------------------------ */
.lec-tab {
    display: flex;
    position: relative;
    z-index: 1;
}
.lec-tab__btn {
    position: relative;
    flex: 1 1 50%;
    height: 64px;
    border: 1px solid var(--line);
    border-radius: var(--r-card) var(--r-card) 0 0;
    background: var(--surf);
    color: var(--mute);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: var(--ls-base);
    transition: background-color .15s,color .15s;
}
.lec-tab__btn + .lec-tab__btn {
    margin-left: -1px;
}
/* 맞닿는 테두리 겹치기 */
.lec-tab__btn:hover {
    color: var(--body);
}

/* 탭과 패널 사이 가로선은 '패널의 윗변'이 아니라 '탭의 아랫변'이 그린다.
   (.lec-filter 에서 border-top 을 뺐다)
   그래서 열린 탭은 제 아랫변만 지우면 아래 패널과 그대로 이어진다.
   transparent 로 두면 탭 자신의 흰 배경이 테두리 자리까지 비쳐 배경색이 바뀌어도 안전하다. */
.lec-tab__btn.is-on {
    background: var(--white);
    color: var(--ink);
    border-bottom-color: transparent;
    z-index: 2;
}

/* ------------------------------------------------------------
   검색 필터 패널
   ------------------------------------------------------------ */
.lec-filter {
    /* 윗변은 탭이 그린다 — 여기서 그리면 열린 탭 아래에도 회색선이 남는다 */
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--r-card) var(--r-card);
    background: var(--white);
    padding: 28px 32px;
}
.lec-filter__row {
    display: flex;
    align-items: flex-start;
    min-height: 36px;
}
.lec-filter__row + .lec-filter__row {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}
/* 라벨 열 — 104px 고정. 칩 첫 줄과 세로 중앙이 맞는다 */
.lec-filter__label {
    flex: none;
    width: 104px;
    line-height: 36px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.lec-filter__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 키워드 입력 */
.lec-filter__search {
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.lec-filter__search::placeholder {
    color: var(--placeholder);
}
.lec-filter__search:focus {
    outline: none;
    border-color: var(--acc);
}

/* 액션 줄 — 초기화 / 검색하기 */
.lec-filter__action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
}
.lec-filter__action .btn--line {
    width: 122px;
    height: 48px;
    font-size: 15px;
}
.lec-filter__action .btn--ink {
    width: 176px;
    height: 48px;
    font-size: 16px;
    gap: 20px;
}

/* 좁은 화면의 검색 필터

   라벨 열(104px)을 옆에 세워 두면 360px 화면에서 칩이 쓸 폭이 190px 밖에
   안 남아 '국어국문학과' 한 알에 한 줄씩 차지한다.
   라벨을 윗줄로 올려 칩이 가로폭을 다 쓰게 한다.

   초기화 122 + 검색하기 176 = 298px 도 안쪽 폭(296px)을 넘겨서,
   폭 고정을 풀고 둘이 반씩 나눠 갖게 한다. */
@media (max-width: 767px) {
    .lec-filter {
        padding: 20px 16px;
    }
    .lec-filter__row {
        display: block;
        min-height: 0;
    }
    .lec-filter__row + .lec-filter__row {
        margin-top: 18px;
        padding-top: 18px;
    }
    .lec-filter__label {
        display: block;
        width: auto;
        margin-bottom: 10px;
        line-height: 1.4;
    }
    .lec-filter__action {
        gap: 8px;
        margin-top: 18px;
        padding-top: 18px;
    }
    .lec-filter__action .btn--line,
    .lec-filter__action .btn--ink {
        flex: 1;
        width: auto;
        height: 44px;
        font-size: 15px;
        gap: 8px;
    }
}

/* ------------------------------------------------------------
   검색 결과 수
   ------------------------------------------------------------ */
.lec-result {
    margin-top: 32px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 결과 수는 포인트색 — 소개 페이지의 숫자 요약(.hak-figures__num)과 같은 어법 */
.lec-result b {
    font-family: var(--font-num);
    font-weight: 900;
    margin: 0 3px 0 6px;
    color: var(--acc);
}
.lec-result span {
    font-weight: 400;
}

/* ------------------------------------------------------------
   과정 카드 — 390 x 330, 3열 (간격 15 / 행 간격 20)
   ------------------------------------------------------------ */
.lec-list {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3,390px);
    gap: 20px 15px;
}
.lec-card {
    display: flex;
    flex-direction: column;
    height: 330px;
    padding: 40px 40px 30px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    background: var(--white);
    cursor: pointer;
    /* 카드 아무 데나 눌러 선택 — 글자를 끌면 선택이 되면서 손을 떼는 순간
       클릭으로 잡혀 카드가 담기거나 빠진다. 드래그 자체를 막는다 */
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .15s;
}
/* hover 는 테두리만 한 단계 진하게. 선택된 카드는 이미 제 테두리가 있으니 제외한다
   — 안 그러면 마우스를 올릴 때 선택 표시가 흐려진다 */
.lec-card:not(.is-selected):hover {
    border-color: var(--hair-hover);
}
.lec-card.is-selected {
    border-color: var(--body);
}
/* 선택된 카드 */
/* 탭에 안 맞는 카드는 감춘다 — display:flex 라 hidden 속성만으론 안 먹는다 */
.lec-card[hidden] {
    display: none;
}

/* 카드 머리 — 체크 · 학과 · 단계 · BEST */
.lec-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 26px;
}
/* 공용 체크박스(.chk)는 18px 이지만 이 카드에서만 24px 로 키운다.
   카드 전체가 누르는 자리라 머리줄에서 담김/안담김이 멀리서도 보여야 한다. */
.lec-card .chk {
    width: 24px;
    height: 24px;
    background-size: 12px 9px;
}
/* 학과명(.dept) · BEST(.best) 배지 자체는 상세 페이지와 함께 쓰므로
   common.css 에 있다. 여기서는 카드 안에서의 자리만 잡는다. */
.lec-card__head .best {
    margin-left: auto;
}

/* 제목 · 부가정보 */
.lec-card__title {
    margin-top: 23px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -.04em;
}
.lec-card__body {
    flex: 1;
    display: flex;
    align-items: center;
    /* 1줄이든 2줄이든 세로 중앙 */
    font-size: 15px;
    line-height: 23px;
    color: var(--mute);
    letter-spacing: -.04em;
}
.lec-card__meta i {
    display: inline-block;
    margin: 0 8px;
    font-style: normal;
    font-weight: 300;
    color: var(--mute);
}

.lec-card__foot {
    margin-top: auto;
}
.lec-card__divider {
    margin-top: 15px;
    border-top: 1px solid var(--line-card);
}
.lec-card__btn {
    margin-top: 19px;
    width: 100%;
    height: 40px;
    font-size: 16px;
    letter-spacing: -.04em;
}

/* 좁아지면 2열, 더 좁아지면 1열.
   카드 폭을 390px 에 묶어 두면 화면이 줄어도 카드가 안 줄어 가로로 넘친다.
   1fr 로 바꿔 남는 폭을 나눠 갖게 한다.

   높이도 330px 고정을 푼다 — 카드가 좁아지면 제목과 설명이 더 접히는데
   높이를 붙잡아 두면 글자가 상자 밖으로 밀린다.
   대신 min-height 로 바닥을 받쳐 카드끼리 들쭉날쭉해지는 건 막는다
   (한 줄 안에서는 grid 가 어차피 제일 큰 카드에 높이를 맞춘다). */
@media (max-width: 1239px) {
    .lec-list {
        grid-template-columns: repeat(2,1fr);
    }
    .lec-card {
        height: auto;
        min-height: 300px;
        padding: 32px 32px 26px;
    }
}
@media (max-width: 767px) {
    .lec-list {
        grid-template-columns: 1fr;
    }
    .lec-card {
        min-height: 0;
        padding: 24px 22px 22px;
    }
    /* 머리줄(체크 · 학과 · 단계 · BEST)은 다 합쳐 287px 이라 좁은 화면에서 넘친다.
       높이 고정을 풀고 넘치면 아랫줄로 내린다 */
    .lec-card__head {
        flex-wrap: wrap;
        height: auto;
        row-gap: 8px;
    }
    .lec-card__head .dept {
        font-size: 16px;
    }
    /* 제목이 좁아져 두세 줄로 접히므로 줄 간격을 조금 벌린다 */
    .lec-card__title {
        margin-top: 18px;
        font-size: 19px;
        line-height: 1.25;
    }
}

/* 조건에 맞는 카드가 하나도 없을 때 */
.lec-empty {
    margin-top: 24px;
    padding: 90px 0;
    text-align: center;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    font-size: 16px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* 페이징 위치 */
.lec-paging {
    margin-top: 40px;
}

/* ------------------------------------------------------------
   선택 과정 바 — 요약 헤더 + 펼친 목록을 한 컨테이너로
   ------------------------------------------------------------ */
/* 스크롤 중에는 화면 아래에서 20px 띄워 붙어 있다가,
   제자리(카드 목록 아래)까지 스크롤이 내려오면 그 자리에 앉는다.
   position:sticky + bottom 조합이 그 동작 그대로다.
   → 조상에 overflow:hidden/auto 가 생기면 sticky 가 죽으니 주의. */
.lec-tray {
    position: sticky;
    bottom: 20px;
    z-index: 20;
    /* 트레이는 읽고 누르는 영역이라 글자를 끌어 선택할 일이 없다.
       user-select 로 선택을 막고, cursor 도 같이 눕혀야 I 빔이 안 뜬다
       (I 빔은 user-select 가 아니라 cursor:auto 가 만든다).
       안의 버튼·링크는 각자 cursor:pointer 를 갖고 있어 영향받지 않는다. */
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    margin-top: 60px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}
/* 떠 있는 동안만 그림자를 세게 — 목록 위에 겹쳐 있다는 걸 알려준다 */
.lec-tray.is-stuck {
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
/* 요약 헤더 */
.lec-tray__head {
    display: flex;
    align-items: center;
    height: 92px;
    padding: 0 32px;
}
.lec-tray__count {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
}
.lec-tray__toggle {
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 18px;
    border: 1px solid var(--hair);
    border-radius: 15px;
    background: var(--white);
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: border-color .15s,color .15s;
}
.lec-tray__toggle:hover {
    border-color: var(--body);
    color: var(--ink);
}
.lec-tray__toggle .ico {
    transition: transform .28s ease;
}
.lec-tray.is-folded .lec-tray__toggle .ico {
    transform: rotate(180deg);
}

/* 비우기 — 되돌리는 동작이라 조용하게. 옆의 '리스트 열기' 필 버튼과 형태를 달리해
   실수로 누르지 않게 한다 */
.lec-tray__clear {
    font-size: 13px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.lec-tray__clear:hover {
    color: var(--ink);
    text-decoration: underline;
}

.lec-tray__sum {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.lec-tray__sum .price__old {
    font-size: 14px;
}
.lec-tray__sum .btn {
    margin-left: 30px;
    width: 158px;
    height: 46px;
    font-size: 15px;
    color: var(--ink);
}
/* 트레이의 전진 동작 버튼 — hover 에서 테두리·글자가 포인트 컬러로.
   같은 .btn--line 을 쓰는 '초기화'(되돌리는 동작)에는 일부러 안 건다.
   아이콘은 SVG 가 currentColor 라 글자색을 따라 저절로 같이 바뀐다 */
.lec-tray__sum .btn--line:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* 펼친 목록 —
   높이를 auto 에서 0 으로 부드럽게 줄이려고 grid 행을 1fr↔0fr 로 전환한다.
   (max-height 방식과 달리 내용이 몇 줄이든 정확한 높이로 움직인다)
   감싸는 쪽에도 overflow:hidden 을 줘야 접혔을 때 목록의 윗 테두리 1px 이 안 남는다. */
.lec-tray__body {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    border-radius: 0 0 var(--r-card) var(--r-card);
    transition: grid-template-rows .28s ease;
}
.lec-tray.is-folded .lec-tray__body {
    grid-template-rows: 0fr;
}

/* 접힘 애니메이션(grid 0fr↔1fr)의 자식은 하나여야 해서
   목록과 아래 버튼줄을 이 panel 이 함께 감싼다 */
.lec-tray__panel {
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
    background: var(--surf);
    border-radius: 0 0 var(--r-card) var(--r-card);
}

/* 펼친 목록 아래 버튼줄 — 목록을 열어야 보이므로
   무엇을 비우는지 눈으로 확인한 뒤 누르게 된다 */
.lec-tray__foot {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 52px;
    padding: 0 32px;
}
.lec-tray__foot::before {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 0;
    border-top: 1px solid var(--line);
}
/* 담은 개수가 많아져도 트레이가 화면보다 커지지 않게 목록에만 최대 높이를 준다.
   제한이 없으면 22개일 때 1,552px 가 되는데, sticky 는 아래를 기준으로 붙으므로
   머리줄(합계 금액 · 장바구니로 이동)이 화면 위로 밀려 나간다.
   6줄까지 보여주고 그 뒤는 목록 안에서만 스크롤 — 아래 '리스트 비우기' 는 늘 같은 자리다. */
.lec-tray__list {
    max-height: 384px;
    /* 64px x 6줄 */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hair) transparent;
}
.lec-tray__list::-webkit-scrollbar {
    width: 6px;
}
.lec-tray__list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--hair);
}

.lec-tray__item {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 32px;
}
.lec-tray__item + .lec-tray__item::before {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 0;
    border-top: 1px solid var(--line);
}
/* 어느 탭에서 담은 건지 — 패키지·단과가 한 목록에 섞이므로 표시한다.
   상자 없이 텍스트로 두고 | 로만 경계를 준다. 옆의 단계 배지가 주인공이라 힘을 뺀다.
   폭을 고정하고 space-between 으로 | 를 오른쪽 끝에 붙여, 글자 수가 달라도
   ('패키지' 3자 / '단과' 2자) | 와 단계 배지가 세로로 줄맞춤된다 */
.lec-tray__type {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 52px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.lec-tray__type::after {
    content: "|";
    font-weight: 300;
    color: var(--hair);
}
.lec-tray__item .step {
    margin-left: 12px;
}

.lec-tray__name {
    margin-left: 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.lec-tray__info {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.lec-tray__amount {
    font-family: var(--font-num);
    font-size: 16px;
    font-weight: 700;
}
.lec-tray__won {
    font-size: 16px;
    margin-left: 2px;
}
.lec-tray__info i {
    margin: 0 12px;
    font-style: normal;
    font-weight: 300;
}
.lec-tray__del {
    margin-left: 109px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--ink);
    transition: background-color .15s;
}
.lec-tray__del:hover {
    background: rgba(0,0,0,.05);
}

/* 좁은 화면의 선택 과정 바

   요약 헤더는 한 줄에 개수 · 리스트 버튼 · 금액 · 장바구니까지 넷이 서는데
   360px 화면에는 안 들어간다. 두 줄로 나눈다.
     첫 줄 : 담은 개수 ↔ 리스트 열기      (양끝)
     둘째 줄 : 합계 금액 ↔ 장바구니로 이동  (양끝)
   flex-wrap 을 켜고 둘째 줄이 될 .lec-tray__sum 만 width:100% 로 밀어 내린다.

   목록 한 줄도 다섯 칸(탭명 · 단계 · 과정명 · 금액 · 삭제)이라 같은 이유로
   접는다. order 로 자리를 정해 위에 [탭명 단계 … X], 아래에 과정명과 금액을 둔다. */
@media (max-width: 767px) {
    .lec-tray {
        margin-top: 40px;
        bottom: 12px;
    }

    /* ── 요약 헤더 ── */
    .lec-tray__head {
        flex-wrap: wrap;
        height: auto;
        padding: 16px 18px;
        row-gap: 14px;
    }
    /* 남는 폭을 개수가 먹어 리스트 버튼이 오른쪽 끝으로 밀린다 */
    .lec-tray__count {
        flex: 1;
    }
    .lec-tray__toggle {
        margin-left: 0;
    }
    .lec-tray__sum {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        padding-top: 14px;
        border-top: 1px solid var(--line-soft);
    }
    .lec-tray__sum .btn {
        margin-left: 0;
        width: 148px;
        height: 42px;
        font-size: 14px;
    }

    /* ── 펼친 목록 ── */
    .lec-tray__list {
        max-height: 40vh;
    }
    .lec-tray__item {
        flex-wrap: wrap;
        height: auto;
        padding: 14px 18px;
        row-gap: 6px;
    }
    .lec-tray__item + .lec-tray__item::before {
        left: 18px;
        right: 18px;
    }
    .lec-tray__del {
        order: 2;
        margin-left: auto;
    }
    .lec-tray__name {
        order: 3;
        width: 100%;
        margin-left: 0;
    }
    .lec-tray__info {
        order: 4;
        width: 100%;
        margin-left: 0;
    }
    .lec-tray__foot {
        height: 46px;
        padding: 0 18px;
    }
    .lec-tray__foot::before {
        left: 18px;
        right: 18px;
    }
}

/* ############################################################
   [2] 과정 상세  ·  lecture/view.html  ·  .view-*
       왼쪽 본문(요약 + 탭 전체) / 오른쪽 따라다니는 구매 박스
       탭 띠(.tabs) · 표(.tbl) · 안내 목록(.list) 은 common.css
   ############################################################ */

/* ------------------------------------------------------------
   두 단 레이아웃 — 본문 810 + 구매 박스 340 (간격 50)

   그리드를 요약 영역이 아니라 페이지 전체에 건다.
   요약 영역에만 걸면 그 행이 끝나는 순간 sticky 가 멈춰,
   탭 본문을 읽는 동안에는 구매 박스가 따라오지 않는다.
   sticky 가 움직일 수 있는 거리는 '박스의 높이'가 아니라
   '박스가 놓인 그리드 칸의 높이'라서, 칸을 페이지만큼 키워야 한다.
   ------------------------------------------------------------ */
.view-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 50px;
    /* 구매 박스가 칸 높이만큼 늘어나면 sticky 가 붙을 자리가 없다 */
    align-items: start;
}
/* 1fr 열의 기본 최소 너비는 '내용 크기'라, 안 끊기는 긴 글자가 하나라도
   있으면 열이 밀려 구매 박스를 침범한다. 0 으로 낮춰 막는다 */
.view-main {
    min-width: 0;
}

/* ------------------------------------------------------------
   과정 요약 — 탭 위쪽
   ------------------------------------------------------------ */
.view-hero {
    padding-bottom: 32px;
}

/* ------------------------------------------------------------
   탭 띠 — 화면 위쪽에 붙는다

   커리큘럼처럼 긴 탭에서는 내용을 읽다가 다른 탭으로 가려면 맨 위까지
   되돌아가야 했다. 띠가 따라오면 어느 높이에서든 바로 옮길 수 있다.
   붙었을 때 글자가 화면 끝에 닿지 않게 위 여백을 띠 쪽으로 옮겼다
   (.view-hero 의 아래 여백에서 18px 을 덜어 왔다 — 합은 그대로 50px).
   ------------------------------------------------------------ */
.view-tabs {
    position: sticky;
    /* 헤더도 위에 붙으므로 그 아래에 선다 — 0 으로 두면 헤더 뒤로 들어간다 */
    top: var(--header-fix-h);
    z-index: 10;
    padding-top: 18px;
    /* 아래를 지나가는 본문이 비쳐 보이지 않게 바탕을 깐다 */
    background: var(--white);
}
.view-hero__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.view-hero__title {
    margin-top: 20px;
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 34px;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.04em;
}
.view-hero__lead {
    margin-top: 14px;
    font-size: 17px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* 요약 정보 — 라벨 열 120px 고정 */
.view-spec {
    margin-top: 34px;
    border-top: 1px solid var(--line);
}
.view-spec > div {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line-soft);
}
.view-spec dt {
    flex: none;
    width: 120px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.view-spec dd {
    font-size: 16px;
    line-height: 26px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   구매 박스 — 스크롤을 따라 붙는다.
   붙은 헤더 아래에서 20px 을 띄운다
   ------------------------------------------------------------ */
.view-buy {
    position: sticky;
    top: calc(var(--header-fix-h) + 20px);
    padding: 28px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    background: var(--white);
}
/* 박스 머리 — 어떤 과정을 담는 중인지.
   박스가 페이지 끝까지 따라다녀서, 커리큘럼을 한참 내려간 자리에서는
   여기 말고 과정명을 알려 주는 곳이 없다.
   왼쪽 제목과 내용이 겹치므로 글자를 낮춰 '제목'이 아니라 '요약'으로 읽히게 한다 */
.view-buy__head {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
}
.view-buy__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
/* 학과명 배지는 목록 카드 기준(17px)이라 340px 박스에서는 크다 */
.view-buy__badges .dept {
    font-size: 15px;
}
.view-buy__name {
    margin-top: 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -.04em;
}
/* '수강료' 글자는 .blind 로 화면에서만 감췄다 (base.css).
   보이게 되돌릴 땐 HTML 에서 blind 만 떼면 이 모양으로 돌아온다 */
.view-buy__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 위 라벨이 자리를 차지하지 않으므로 간격은 머리의 아래 여백이 맡는다.
   .price 는 오른쪽 정렬이 기본이라 그대로 쓴다 */
.view-buy__price {
    margin-top: 0;
}
.view-buy__save {
    margin-top: 8px;
    text-align: right;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.view-buy__save b {
    font-weight: 700;
    color: var(--acc);
}
.view-buy__meta {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}
.view-buy__meta li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.view-buy__meta li + li {
    margin-top: 10px;
}
.view-buy__meta b {
    flex: none;
    font-weight: 700;
    color: var(--ink);
}
.view-buy__btns {
    margin-top: 26px;
    display: grid;
    gap: 8px;
}
.view-buy__btns .btn {
    height: 52px;
    font-size: 16px;
}
.view-buy__note {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   탭 본문
   ------------------------------------------------------------ */
.view-panel {
    padding-top: 50px;
}
.view-block + .view-block {
    margin-top: 60px;
}
.view-block__title {
    margin-bottom: 20px;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
}
/* 제목 옆 보조 수치 — 제목과 같은 줄에서 힘을 뺀다 */
.view-block__count {
    margin-left: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.view-block__text {
    font-size: 16px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.view-block__note {
    margin-top: 14px;
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* 이런 분께 권합니다 — 2열 */
.view-recommend {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px 12px;
}
.view-recommend li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 24px;
    border-radius: var(--r-btn);
    background: var(--surf);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.view-recommend svg {
    flex: none;
    color: var(--acc);
}

/* 학습 구성 — 본문이 810px 이라 4열로 늘어놓으면 한 칸이 190px 이 되어
   설명이 다섯 줄로 접힌다. 2열로 두 줄에 나눈다 */
.view-flow {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}
.view-flow li {
    padding: 24px 26px 26px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
}
.view-flow__num {
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: .04em;
}
.view-flow__name {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.view-flow__desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   커리큘럼 — 과목별 목록

   표가 아니라 목록으로 짠다. 열이 '회차 · 강의명 · 시간' 셋뿐이고
   강의명만 길이가 들쭉날쭉이라, 표로 두면 머리행이 하는 일 없이
   자리만 차지하고 강의명 열도 좁아진다.
   ------------------------------------------------------------ */
.view-curri + .view-curri {
    margin-top: 44px;
}
/* 과목 머리줄 — 테두리로 감싼다. 아래 강의 목록은 선으로만 나뉘어 있어서,
   머리줄까지 선 하나로 두면 과목이 어디서 시작하는지 눈에 안 들어온다.
   패키지·단과 모두 같은 모양이다 (패키지는 여기에 펼치기 단추가 더 붙는다) */
.view-curri__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    margin-bottom: 14px;
    padding: 12px 20px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
}
.view-curri__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.view-curri__meta {
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.view-curri__list {
    border-top: 1px solid var(--hair);
}
.view-curri__item {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 62px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
}
.view-curri__item[hidden] {
    display: none;
}
.view-curri__no {
    flex: none;
    width: 46px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.view-curri__name {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
/* 재생 시간 — 숫자 폭이 흔들리지 않게 숫자 폰트로 */
.view-curri__time {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-num);
    font-size: 14px;
    color: var(--mute);
}

/* ---- 패키지의 접히는 과목 줄 ----
   패키지는 과목이 여럿이라(최대 6) 목록을 다 펼쳐 두면 커리큘럼 탭 하나가
   수십 줄이 된다. 과목 줄만 세워 두고 누른 것만 연다 (view.js 가 --fold 를
   붙인다). 단과는 과목이 하나뿐이라 접을 것이 없어 그대로 펼쳐 둔다.

   접힌 줄끼리는 촘촘하게 둔다 — 기본 44 는 과목마다 목록이 펼쳐져 있을 때의
   값이라, 한 줄짜리가 줄줄이 설 때는 너무 벌어진다 */
.view-curri--fold + .view-curri--fold {
    margin-top: 10px;
}
/* 닫혀 있으면 머리줄 하나뿐이라 아래 여백이 필요 없다 (펼치면 패널이 낸다).
   단추만이 아니라 줄 전체가 눌린다(view.js) — 커서와 배경으로 그걸 알려준다 */
.view-curri--fold .view-curri__head {
    margin-bottom: 0;
    cursor: pointer;
    transition: background-color .15s;
}
.view-curri--fold .view-curri__head:hover {
    background: var(--surf);
}
.view-curri--fold .view-curri__head:hover .view-curri__open {
    color: var(--acc);
}
/* 알약 테두리 없이 글자와 화살표만 — 줄 오른쪽 끝에 놓는다 */
.view-curri__open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
    transition: color .15s;
}
.view-curri__open:hover {
    color: var(--acc);
}
.view-curri__open svg {
    transition: transform .2s;
}
.view-curri__open.is-open svg {
    transform: rotate(180deg);
}
.view-curri__open.is-open {
    color: var(--acc);
}
.view-curri__panel[hidden] {
    display: none;
}
/* 위: 머리줄 상자와 목록을 띄운다 (단과의 margin-bottom 과 같은 값).
   아래: 붙여 두면 더보기 단추(회색 면)와 다음 과목 제목이 맞닿아
         어디까지가 이 과목인지 흐려진다 */
.view-curri__panel {
    padding: 14px 0 24px;
}

/* 더보기 단추는 결제하기와 같이 써서 common.css 의 .more 로 옮겼다 */

/* ------------------------------------------------------------
   강사 소개
   ------------------------------------------------------------ */
/* 열 수는 강사 인원에 맞춰 view.js 가 --cols 로 넣는다 (최대 3).
   3열로 못박으면 강사가 한 명인 단과 강의에서 오른쪽 두 칸이 빈다 */
.view-teacher {
    display: grid;
    grid-template-columns: repeat(var(--cols,3),1fr);
    gap: 15px;
}
/* > 로 좁힌다 — 안쪽 약력 목록의 li 까지 카드가 되면 안 된다 */
.view-teacher > li {
    padding: 26px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
}
.view-teacher__part {
    font-size: 14px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: var(--ls-base);
}
.view-teacher__name {
    margin-top: 8px;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
}
.view-teacher__career {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.view-teacher__career > li {
    font-size: 15px;
    line-height: 26px;
}
/* 강사가 한 명이면 카드가 본문 폭을 다 쓰므로 세로로 쌓으면 아래가 텅 빈다.
   이름 묶음을 왼쪽에 두고 약력을 오른쪽에 두 단으로 눕힌다.

   세 요소(담당 · 이름 · 약력)를 자동 배치에 맡기면 담당과 이름이 좌우로
   갈라지고 약력이 그 아래로 떨어진다. 자리를 하나씩 지정한다. */
.view-teacher--solo > li {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
}
.view-teacher--solo .view-teacher__part {
    grid-column: 1;
    grid-row: 1;
}
.view-teacher--solo .view-teacher__name {
    grid-column: 1;
    grid-row: 2;
}
.view-teacher--solo .view-teacher__career {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding: 0 0 0 36px;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
    columns: 2;
    column-gap: 36px;
}

/* 목록으로 */
.view-foot {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}
.view-foot .btn {
    width: 200px;
    height: 52px;
    font-size: 16px;
}

/* 좁은 화면의 과정 상세

   1024~1239 : 두 단은 유지하되 구매 박스를 340 → 300 으로 줄인다.
               1024 에서도 본문이 648px 남아 커리큘럼 줄과 표가 안 찌그러진다.
   1023 이하 : 두 단을 푼다. 여기서 구매 박스를 그냥 아래로 흘리면
               스크롤을 끝까지 내려야 가격이 보이고, 위로 올리면 제목보다
               가격이 먼저 나온다. 그래서 화면 아래 고정 바로 바꾼다.
               바에는 금액과 버튼만 남기고 나머지(과정명 · 요약 수치)는
               본문 머리와 .view-spec 에 이미 있으므로 감춘다.
               바가 푸터 마지막 줄을 가리지 않게 body.has-buybar 로 아래 여백을 준다. */
@media (max-width: 1239px) {
    .view-layout {
        grid-template-columns: 1fr 300px;
        gap: 36px;
    }
}
@media (max-width: 1023px) {
    .view-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .has-buybar {
        padding-bottom: 78px;
    }

    /* ── 구매 박스 → 화면 아래 고정 바 ── */
    .view-buy {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: 0;
        border-top: 1px solid var(--hair);
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    }
    .view-buy__head,
    .view-buy__save,
    .view-buy__meta,
    .view-buy__note {
        display: none;
    }
    .view-buy__price {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
    }
    .view-buy__btns {
        flex: none;
        display: flex;
        gap: 8px;
        margin-top: 0;
    }
    .view-buy__btns .btn {
        width: 124px;
        height: 46px;
        font-size: 15px;
    }
    /* 바 안에서는 장바구니 글자를 빼고 아이콘만 남긴다 — 폭이 안 나온다 */
    .view-buy__btns .btn--line {
        width: 52px;
        font-size: 0;
        gap: 0;
    }

    /* ── 본문 ── */
    .view-hero {
        padding-bottom: 28px;
    }
    .view-hero__title {
        font-size: 28px;
    }
    .view-flow {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 767px) {
    .view-hero__title {
        margin-top: 16px;
        font-size: 24px;
    }
    .view-hero__lead {
        font-size: 16px;
        line-height: 26px;
    }
    /* 라벨 열(120px)을 빼고 위아래로 쌓는다 — 값이 들어갈 폭이 안 남는다 */
    .view-spec > div {
        display: block;
        padding: 12px 2px;
    }
    .view-spec dt {
        width: auto;
        margin-bottom: 4px;
    }
    .view-spec dd {
        font-size: 15px;
        line-height: 24px;
    }

    .view-panel {
        padding-top: 34px;
    }
    .view-block + .view-block {
        margin-top: 40px;
    }
    .view-recommend,
    .view-flow {
        grid-template-columns: 1fr;
    }
    .view-recommend li {
        min-height: 52px;
        padding: 10px 16px;
        font-size: 15px;
    }

    /* 과목 머리줄 — 좁으면 펼치기 단추가 아랫줄로 내려가되 오른쪽 끝은 지킨다 */
    .view-curri__head {
        flex-wrap: wrap;
        gap: 6px 10px;
        min-height: 56px;
        margin-bottom: 12px;
        padding: 12px;
    }
    .view-curri__open {
        font-size: 13px;
    }
    .view-curri__panel {
        padding-bottom: 18px;
    }

    /* 커리큘럼 한 줄 — 회차와 시간은 그대로 두고 여백만 줄여 강의명 폭을 번다 */
    .view-curri__item {
        gap: 12px;
        min-height: 56px;
        padding: 10px 12px;
    }
    .view-curri__no {
        width: 38px;
        font-size: 15px;
    }
    .view-curri__name {
        font-size: 15px;
        line-height: 22px;
    }
    .view-curri__time {
        font-size: 13px;
    }

    /* 강사 카드 — 인원이 몇이든 한 열, 가로형(solo)도 위아래로 편다 */
    .view-teacher {
        grid-template-columns: 1fr;
    }
    .view-teacher > li {
        padding: 22px;
    }
    .view-teacher--solo > li {
        display: block;
    }
    .view-teacher--solo .view-teacher__career {
        margin-top: 16px;
        padding: 16px 0 0;
        border-top: 1px solid var(--line-soft);
        border-left: 0;
        columns: auto;
    }

    .view-foot {
        margin-top: 40px;
    }
}

/* ############################################################
   [3] 독학학위제 소개  ·  haksa/haksa.html  ·  .hak-*
       섹션 구조: 왼쪽 380px 라벨 열(번호 + 제목) + 오른쪽 본문
   ############################################################ */

/* ------------------------------------------------------------
   섹션 공통 — 라벨 열 / 본문 열
   ------------------------------------------------------------ */
.hak-sec {
    padding: 100px 0;
}
.hak-sec--surf {
    background: var(--surf);
}
.hak-sec--dark {
    background: var(--ink);
}
.hak-sec__inner {
    display: flex;
}
.hak-sec__head {
    flex: none;
    width: 380px;
}
.hak-sec__no {
    display: block;
    font-family: var(--font-num);
    font-size: 14px;
    color: #C4C4C4;
    letter-spacing: 0;
}
.hak-sec__title {
    margin-top: 26px;
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -.04em;
}
.hak-sec__body {
    flex: 1;
    min-width: 0;
}
.hak-sec--dark .hak-sec__no {
    color: #5A5A5A;
}
.hak-sec--dark .hak-sec__title {
    color: var(--white);
}

/* ------------------------------------------------------------
   히어로 — 좌: 카피 + CTA / 우: 학위취득 4단계 타임라인(오른쪽 풀블리드)
   ------------------------------------------------------------ */
.hak-hero {
    position: relative;
    height: 760px;
    overflow: hidden;
}
/* 시안에서 패널이 x=1120(화면 중앙 +160)부터 오른쪽 끝까지 깔린다 */
.hak-hero__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + 160px);
    right: 0;
    background: var(--surf);
}
.hak-hero__inner {
    position: relative;
    z-index: 1;
    height: 100%;
}
/* 상단의 '독학학위제 안내' 아이브로는 뺐다 — 2차 메뉴가 같은 역할을 한다.
   그래서 히어로 상단 여백은 제목의 padding-top 이 혼자 책임진다. */
.hak-hero__title {
    padding-top: 200px;
    font-family: var(--font-title);
    font-size: 66px;
    font-weight: 900;
    line-height: 90px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.hak-hero__desc {
    margin-top: 36px;
    font-size: 19px;
    line-height: 32px;
    color: #666666;
    letter-spacing: var(--ls-base);
}
.hak-hero__cta {
    margin-top: 44px;
    width: 230px;
    height: 58px;
    border-radius: 12px;
    font-size: 17px;
}

/* 타임라인 */
.hak-timeline {
    position: absolute;
    left: 896px;
    top: 90px;
    width: 420px;
}
.hak-timeline__item {
    position: relative;
    padding: 0 0 46px 43px;
}
.hak-timeline__item:last-child {
    padding-bottom: 0;
}
/* 점과 점을 잇는 세로선 */
.hak-timeline__item::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: -16px;
    width: 1px;
    background: #D8DEE4;
}
.hak-timeline__item:last-child::before {
    display: none;
}
.hak-timeline__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dot,#222);
}
.hak-timeline__step {
    font-size: 14px;
    font-weight: 700;
    color: var(--dot);
    letter-spacing: var(--ls-base);
}
.hak-timeline__name {
    margin-top: 8px;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.hak-timeline__when {
    margin-top: 8px;
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.hak-timeline__item--goal .hak-timeline__name {
    font-size: 21px;
    font-weight: 700;
}

/* ------------------------------------------------------------
   숫자 요약 — 4단계 / 최단 1년 / 9개
   ------------------------------------------------------------ */
.hak-figures {
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}
.hak-figures__list {
    display: flex;
}
.hak-figures__item {
    flex: 1;
    padding: 66px 0 70px;
}
.hak-figures__item + .hak-figures__item {
    border-left: 1px solid var(--hair);
    padding-left: 40px;
}
.hak-figures__num {
    font-family: var(--font-title);
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    color: var(--acc);
    letter-spacing: -.04em;
}
.hak-figures__label {
    margin-top: 22px;
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   01 독학학위제란? — 본문 문단
   ------------------------------------------------------------ */
.hak-lead p {
    font-size: 18px;
    line-height: 32px;
    color: #444444;
    letter-spacing: var(--ls-base);
}
.hak-lead p + p {
    margin-top: 22px;
}

/* ------------------------------------------------------------
   02 학위취득 4단계 — 표 형태 목록
   ------------------------------------------------------------ */
.hak-steps {
    border-top: 1px solid #D8DEE4;
}
.hak-steps__item {
    display: flex;
    align-items: flex-start;
    padding: 26px 0;
    border-bottom: 1px solid #D8DEE4;
}
.hak-steps__badge {
    flex: none;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 96px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dot);
    letter-spacing: var(--ls-base);
}
.hak-steps__badge::before {
    content: "";
    width: 3px;
    height: 18px;
    background: var(--dot);
}
.hak-steps__body {
    flex: 1;
    min-width: 0;
}
.hak-steps__name {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.hak-steps__sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.hak-steps__when {
    flex: none;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    text-align: right;
}

/* 표 아래 주석 */
.hak-notes {
    margin-top: 36px;
}
.hak-notes li {
    position: relative;
    padding-left: 14px;
    font-size: 15px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.hak-notes li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--mute);
}

/* ------------------------------------------------------------
   03 이런 분께 권합니다 — 2열 리스트
   ------------------------------------------------------------ */
.hak-recommend {
    display: grid;
    grid-template-columns: repeat(2,400px);
    gap: 0 20px;
}
.hak-recommend__item {
    padding: 26px 0 22px;
    border-bottom: 1px solid var(--hair);
}
.hak-recommend__no {
    font-family: var(--font-num);
    font-size: 12px;
    color: #C4C4C4;
    letter-spacing: 0;
}
.hak-recommend__cond {
    margin-top: 4px;
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.hak-recommend__who {
    margin-top: 10px;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   04 개설 전공 9개
   ------------------------------------------------------------ */
.hak-majors {
    display: grid;
    grid-template-columns: repeat(3,253px);
    gap: 0 20px;
}
.hak-majors__item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 58px;
    border-bottom: 1px solid #D8DEE4;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.hak-majors__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--step1);
}

.hak-caution {
    margin-top: 46px;
}
.hak-caution__title {
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.hak-caution__item {
    display: flex;
    gap: 20px;
    margin-top: 24px;
}
.hak-caution__name {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 164px;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.hak-caution__name::before {
    content: "";
    width: 3px;
    height: 16px;
    background: var(--step1);
}
.hak-caution__desc {
    flex: 1;
    font-size: 14px;
    line-height: 24px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   05 독학사의 장점 (다크)
   ------------------------------------------------------------ */
.hak-compare {
    display: flex;
    padding-bottom: 34px;
}
.hak-compare__item {
    flex: 1;
}
.hak-compare__label {
    font-size: 14px;
    color: #8A8A8A;
    letter-spacing: var(--ls-base);
}
.hak-compare__num {
    margin-top: 30px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #8A8A8A;
    letter-spacing: -.04em;
}
.hak-compare__item--me .hak-compare__num {
    color: var(--white);
}
.hak-compare__note {
    margin-bottom: 60px;
    font-size: 13px;
    color: #7D7D7D;
    letter-spacing: var(--ls-base);
}

.hak-merits {
    border-top: 1px solid #3A3A3A;
}
.hak-merits__item {
    display: flex;
    gap: 14px;
    padding: 28px 0;
    border-bottom: 1px solid #3A3A3A;
}
.hak-merits__no {
    flex: none;
    width: 40px;
    font-family: var(--font-num);
    font-size: 14px;
    color: #5A5A5A;
    letter-spacing: 0;
}
.hak-merits__title {
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: var(--ls-base);
}
.hak-merits__desc {
    margin-top: 10px;
    font-size: 15px;
    color: #8A8A8A;
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   맺음 CTA
   ------------------------------------------------------------ */
.hak-closing {
    padding: 122px 0 140px;
    text-align: center;
}
.hak-closing__title {
    font-family: var(--font-title);
    font-size: 44px;
    font-weight: 900;
    line-height: 60px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.hak-closing__desc {
    margin-top: 32px;
    font-size: 18px;
    color: #666666;
    letter-spacing: var(--ls-base);
}
.hak-closing__cta {
    margin-top: 50px;
    width: 230px;
    height: 58px;
    border-radius: 12px;
    font-size: 17px;
}
.hak-closing__contact {
    margin-top: 42px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   독학학위제 소개 — 반응형

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

   이 페이지에서 폭에 가장 먼저 깨지는 곳은 둘이다.
   ① 히어로의 타임라인 — 1200 그리드를 전제한 절대 좌표(left:896)라
      폭이 줄면 카피 위로 올라타고 이내 화면 밖으로 나간다.
   ② 섹션의 라벨 열(380px) — 본문 열이 같이 줄어 글줄이 너무 짧아진다.
   → 타임라인은 카피 아래로 내리고, 라벨 열은 본문 위로 올린다.
   ------------------------------------------------------------ */
@media (max-width: 1239px) {
    .hak-sec {
        padding: 76px 0;
    }
    .hak-hero {
        height: auto;
        padding-bottom: 80px;
    }
    /* 오른쪽 풀블리드 패널은 '화면 중앙 +160' 에 걸려 있어 좁아지면 카피를 덮는다.
       패널은 지우고, 아래로 내려온 타임라인에 같은 서피스 배경을 입혀
       '카피 / 일정' 두 덩어리로 나뉜 시안의 구획을 그대로 살린다. */
    .hak-hero__panel {
        display: none;
    }
    .hak-hero__title {
        padding-top: 84px;
        font-size: 48px;
        line-height: 66px;
    }
    .hak-timeline {
        position: static;
        width: auto;
        margin-top: 52px;
        padding: 34px 30px;
        background: var(--surf);
        border-radius: var(--r-card);
    }
    .hak-recommend {
        grid-template-columns: repeat(2,1fr);
    }
    .hak-majors {
        grid-template-columns: repeat(3,1fr);
    }
}
@media (max-width: 1023px) {
    .hak-sec {
        padding: 60px 0;
    }
    .hak-sec__inner {
        display: block;
    }
    .hak-sec__head {
        width: auto;
    }
    .hak-sec__title {
        margin-top: 14px;
        font-size: 27px;
    }
    .hak-sec__body {
        margin-top: 30px;
    }
    .hak-hero__title {
        padding-top: 64px;
        font-size: 40px;
        line-height: 56px;
    }
    .hak-hero__desc {
        margin-top: 28px;
        font-size: 17px;
        line-height: 29px;
    }
    .hak-figures__item {
        padding: 44px 0 46px;
    }
    .hak-figures__num {
        font-size: 38px;
    }
    .hak-majors {
        grid-template-columns: repeat(2,1fr);
    }
    .hak-closing {
        padding: 84px 0 92px;
    }
    .hak-closing__title {
        font-size: 34px;
        line-height: 48px;
    }
}
@media (max-width: 767px) {
    .hak-sec {
        padding: 44px 0;
    }
    .hak-sec__title {
        font-size: 23px;
    }
    .hak-sec__body {
        margin-top: 24px;
    }
    .hak-hero {
        padding-bottom: 52px;
    }
    .hak-hero__title {
        padding-top: 44px;
        font-size: 30px;
        line-height: 42px;
    }
    .hak-hero__desc {
        margin-top: 20px;
        font-size: 15px;
        line-height: 26px;
    }
    /* 230px 고정 버튼은 좁은 화면에서 어중간하게 뜬다 — 한 줄을 다 쓰게 한다 */
    .hak-hero__cta,
    .hak-closing__cta {
        width: 100%;
    }
    .hak-timeline {
        margin-top: 36px;
        padding: 24px 20px;
    }
    .hak-timeline__item {
        padding: 0 0 34px 34px;
    }
    .hak-timeline__name {
        font-size: 17px;
    }
    /* 숫자 요약 3칸을 세로로 — 한 칸이 100px 밑으로 내려가 '최단 1년'이 접힌다 */
    .hak-figures__list {
        display: block;
    }
    .hak-figures__item {
        padding: 24px 0;
    }
    .hak-figures__item + .hak-figures__item {
        border-left: 0;
        border-top: 1px solid var(--hair);
        padding-left: 0;
    }
    .hak-figures__num {
        font-size: 30px;
    }
    .hak-figures__label {
        margin-top: 12px;
    }
    .hak-lead p {
        font-size: 16px;
        line-height: 28px;
    }
    /* 4단계 목록 — 배지(96) + 시험명 + 시기가 한 줄에 안 들어간다.
       배지를 윗줄로 올리고 시기는 이름 아래로 내린다 */
    .hak-steps__item {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 20px 0;
    }
    .hak-steps__badge {
        width: 100%;
    }
    /* 배지와 시기만 100% 로 두면 flex:1 인 이 칸이 남은 줄에서 폭 0 으로 눌려
       시험명이 상자 밖으로 샌다. 이 칸도 한 줄을 통째로 쓰게 한다 */
    .hak-steps__body {
        flex-basis: 100%;
    }
    .hak-steps__name {
        font-size: 18px;
    }
    .hak-steps__when {
        width: 100%;
        text-align: left;
        font-size: 14px;
        color: var(--body);
    }
    .hak-recommend {
        grid-template-columns: 1fr;
    }
    .hak-recommend__who {
        font-size: 18px;
    }
    .hak-majors {
        grid-template-columns: 1fr;
    }
    .hak-majors__item {
        height: 52px;
        font-size: 16px;
    }
    /* 학과명(164) 과 설명을 세로로 — 나란히 두면 설명이 세 글자마다 접힌다 */
    .hak-caution__item {
        display: block;
    }
    .hak-caution__name {
        width: auto;
        margin-bottom: 8px;
    }
    .hak-compare__num {
        margin-top: 20px;
        font-size: 30px;
    }
    .hak-merits__item {
        gap: 10px;
        padding: 22px 0;
    }
    .hak-merits__no {
        width: 28px;
    }
    .hak-merits__title {
        font-size: 18px;
    }
    .hak-merits__desc {
        font-size: 14px;
    }
    .hak-closing {
        padding: 56px 0 64px;
    }
    .hak-closing__title {
        font-size: 26px;
        line-height: 38px;
    }
    .hak-closing__desc {
        margin-top: 22px;
        font-size: 16px;
    }
    .hak-closing__cta {
        margin-top: 34px;
    }
}

/* ############################################################
   [4] 수험정보  ·  haksa/exam_info.html  ·  .exam-*
       5개 아트보드(시험안내·전공분야·시험면제·출제방향·합격결정)를
       한 페이지 안에서 탭으로 전환한다.
   ############################################################ */

/* ------------------------------------------------------------
   상단 5개 탭 — 높이 60 · 라운드 12 · 활성은 액센트 솔리드
   ------------------------------------------------------------ */
.exam-tab {
    display: flex;
    gap: 4px;
}
.exam-tab__btn {
    flex: 1 1 0;
    height: 60px;
    border-radius: var(--r-card);
    background: var(--surf);
    color: var(--mute);
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.08em;
    transition: background-color .15s,color .15s;
}
.exam-tab__btn:hover {
    color: var(--body);
}
.exam-tab__btn.is-on {
    background: var(--acc);
    color: var(--white);
}
.exam-tab__btn.is-on:hover {
    color: var(--white);
}

/* 탭 5개를 한 줄에 두는 건 1200 그리드에서만 된다.

   flex:1 1 0 이라 폭은 나눠 갖지만, 칸이 제 글자의 최소 폭(min-content)보다
   작아지지는 않는다. 그래서 좁아지면 '합격결정' 이 마지막에 화면 밖으로 밀린다.
   높이 60 고정도 같이 푼다 — 좁아지면 '전공분야/과정별 시험과목' 이 두세 줄로
   접히는데 높이를 붙잡아 두면 글자가 단추 밖으로 넘친다.

   767 부터는 한 줄에 둘씩 앉힌다. 이때 flex 로 두면 홀로 남는 다섯 번째가
   flex-grow 로 줄을 다 채워 저 혼자 커진다. 다섯 칸이 같은 크기로 보여야 하므로
   grid 로 바꿔 열 폭(1fr)과 행 높이(auto-rows:1fr)를 모두 고정한다.
   마지막 줄 오른쪽 한 칸은 비워 둔다 — 칸을 늘려 채우는 쪽이 더 어색하다. */
@media (max-width: 1239px) {
    .exam-tab__btn {
        min-width: 0;
        height: auto;
        min-height: 60px;
        padding: 8px 10px;
        font-size: 16px;
        line-height: 1.3;
    }
}
@media (max-width: 1023px) {
    .exam-tab__btn {
        min-height: 56px;
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    .exam-tab {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 1fr;
        gap: 6px;
    }
    .exam-tab__btn {
        min-height: 48px;
        padding: 8px;
        font-size: 14px;
        letter-spacing: -.06em;
    }
}

/* ------------------------------------------------------------
   탭 패널
   ------------------------------------------------------------ */
.exam-panel {
    padding-top: 60px;
}
.exam-panel[hidden] {
    display: none;
}
/* hidden 속성이 확실히 먹도록 */

/* 패널 안 블록 사이 간격 */
.exam-block + .exam-block {
    margin-top: 80px;
}
.exam-block__title {
    margin-bottom: 24px;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 제목 아래가 '글'인 블록에만 구분선을 넣는다 (약관 페이지의 .policy__chapter 와 같은 어법).
   제목 바로 밑에 표나 2차 탭(.tabs)이 붙는 블록만 뺀다 —
   둘 다 제 윗변에 선을 갖고 있어서 여기서 또 그으면 줄이 두 겹으로 겹친다.
   글이 먼저 오고 그 아래에 표가 있는 블록(학위취득자 성적평점)은 선을 긋는다.

   표는 .tbl-wrap 뿐 아니라 .tbl-hint 도 함께 본다 — script.js 의 initTableHint 가
   '좌우로 밀어서 보세요' 안내를 표 바로 앞에 끼워 넣어서, 제목의 다음 형제가
   .tbl-wrap 이 아니라 .tbl-hint 가 된다 (좁은 화면에서만 보이지만 항상 들어간다).

   블록마다 클래스를 달지 않고 :has() 로 바로 뒤에 오는 것을 보고 판단한다 —
   나중에 블록을 새로 넣을 때 표시를 붙이는 걸 잊어도 알아서 맞는다.
   (:has() 를 모르는 옛 브라우저에서는 선이 안 그어질 뿐 지금과 같은 모습이다) */
.exam-block__title:not(:has(+ .tbl-wrap)):not(:has(+ .tbl-hint)):not(:has(+ .tabs)) {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.exam-block__lead {
    margin-bottom: 36px;
    font-size: 16px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   번호·불릿 목록 (응시원서 접수, 출제방향, 합격결정 등)
   ------------------------------------------------------------ */
/* 안내 목록(.list)은 과정 상세와 함께 쓰므로 common.css 로 옮겼다. */

/* ------------------------------------------------------------
   전공분야 — 개설 전공 박스
   9칸을 한 줄에 고정한다. 리드 문구가 '총 9개 전공'이라
   눈으로 그대로 세어지는 편이 낫고, .inner 가 1200px 고정 폭이라
   칸이 눌릴 일도 없다 (한 칸 129px — 여섯 글자까지 안 넘친다).
   ------------------------------------------------------------ */
/* 다섯 칸씩 — 지금 10개라 두 줄로 딱 떨어진다. 아홉이었을 때는 한 줄로
   다 몰아넣었지만(repeat(9,…)) 그때도 이미 폭이 빠듯해 학과명이 줄바꿈
   직전까지 갔었다. 전공이 늘어난 지금은 한 줄에 더 못 담는다 */
.exam-major {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 4px;
}
.exam-major li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 6px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    text-align: center;
    white-space: nowrap;
}
/* 아이콘까지 먹색이면 학과명과 무게가 같아져 서로 경쟁한다.
   포인트색을 얹어 아이콘 → 학과명 순으로 읽히게 한다. */
.exam-major__icon {
    flex: none;
    width: 30px;
    height: 30px;
    color: var(--acc);
}
/* 1200 그리드를 벗어나면 다섯 칸을 한 줄에 두기에도 자리가 모자란다.
   3열로 더 좁힌다 — 전공 10개는 3열로 나누면 마지막 줄에 하나가 남지만,
   가로로 우겨넣어 학과명이 잘리는 것보다는 낫다.

   1fr 이 아니라 minmax(0,1fr) 인 이유. 1fr 의 최소값은 auto(=내용 크기)라
   학과명이 긴 칸이 저 혼자 넓어진다 — '컴퓨터공학과' 와 '법학과' 칸의 폭이
   달라지는 게 그래서다. 최소값을 0 으로 못 박아야 셋이 정확히 같아진다. */
@media (max-width: 1239px) {
    .exam-major {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

/* ------------------------------------------------------------
   과정별 시험과목 — 2차 탭 (탭 띠 자체는 common.css 의 .tabs)
   ------------------------------------------------------------ */
.exam-course-panel {
    padding-top: 44px;
}
/* 2~3과정·4과정에만 붙는 단서 — 학과 구성이 교육원마다 달라서, 이 표가
   "우리 교육원 기준" 임을 제목보다 먼저 밝혀 둔다. 1과정(교양)은 학과를
   타지 않는 공통 시험이라 이 줄이 필요 없다 */
.exam-course-panel__note {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.exam-course-panel__title {
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.exam-course-panel .tbl-wrap {
    margin-top: 32px;
}

/* 교시별 과목 — 표 칸 안에서 '1교시 | 과목들' 로 열을 맞춘다.
   .tbl ul 의 가운뎃점 불릿은 여기선 끈다 (교시 라벨이 그 역할을 한다) */
.exam-periods {
    text-align: left;
}
.tbl .exam-periods > li {
    display: flex;
    gap: 12px;
    padding-left: 0;
}
.tbl .exam-periods > li::before {
    content: none;
}
.tbl .exam-periods > li + li {
    margin-top: 6px;
}
.exam-periods b {
    flex: none;
    width: 40px;
    font-weight: 700;
    color: var(--ink);
}

/* ############################################################
   [5] 약관  ·  company/policy.html  ·  .policy-*
       이용약관 · 개인정보처리방침 · 환불정책이 한 페이지에 있고
       주소의 #terms · #privacy · #refund 로 갈린다 (policy.js)
   ############################################################ */
.policy-tabs {
    max-width: 640px;
    margin: 0 auto;
}
/* 본문은 .inner 폭을 그대로 쓴다.
   위 여백은 따로 주지 않는다 — 첫 덩어리(.policy__chapter)의 margin-top 이 맡는다.
   장 제목이 아니라 문단으로 시작하는 문서(개인정보처리방침)만 아래에서 따로 띄운다. */
.policy-panel {
    padding-top: 0;
}
.policy__title + .policy__text {
    margin-top: 56px;
}
.policy__title {
    margin-bottom: 32px;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
    text-align: center;
}
/* 지금은 화면에서 감춘다 — 바로 위 탭 버튼에 같은 이름이 이미 있어서
   한 번 더 나오면 문서 시작이 그만큼 아래로 밀린다.
   마크업은 그대로 두고 낭독기에는 남긴다(.blind 와 같은 방식) —
   나중에 탭 없이 문서 하나만 따로 보여줄 일이 생기면 이 블록만 지우면 된다. */
.policy__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* 장 제목 (■ 제 1 장 총 칙) — 위쪽에 여백을 크게 두어 덩어리를 가른다 */
.policy__chapter {
    margin: 56px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.policy__chapter:first-child {
    margin-top: 0;
}
/* 조 제목 (제 1 조 (목적)) */
.policy__article {
    margin: 32px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.policy__text,
.policy__item {
    font-size: 15px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.policy__text + .policy__text,
.policy__item + .policy__item,
.policy__text + .policy__item,
.policy__item + .policy__text {
    margin-top: 8px;
}
/* 번호는 왼쪽에 걸어 두고 본문은 한 줄로 흐르게 한다 (내어쓰기) */
.policy__item {
    position: relative;
    padding-left: 24px;
}
.policy__no {
    position: absolute;
    left: 0;
    font-family: var(--font-num);
    color: var(--ink);
}
/* 약관 원문은 번호가 1. → (1) → 1) → ① 네 단계까지 내려간다.
   단계마다 들여쓰기를 한 칸씩 더 주고, 번호는 그 앞칸에 걸어 둔다. */
.policy__item--l2 {
    padding-left: 50px;
}
.policy__item--l2 .policy__no {
    left: 24px;
}
.policy__item--l3 {
    padding-left: 74px;
}
.policy__item--l3 .policy__no {
    left: 50px;
}
.policy__item--l4 {
    padding-left: 96px;
}
.policy__item--l4 .policy__no {
    left: 74px;
}
.policy__list {
    margin-top: 12px;
}

/* 표 — 환불 기준처럼 칸이 적은 표는 가운데 정렬이 읽기 좋다 */
.policy__tbl {
    margin-top: 20px;
}
/* 두 칸짜리라 좁은 화면에도 그대로 들어간다 — 공용 표의 최소폭(640)을 푼다.
   그래야 가로로 밀지 않아도 되고 '좌우로 밀어서 보세요' 안내도 뜨지 않는다 */
@media (max-width: 1023px) {
    .policy__tbl .tbl {
        min-width: 0;
    }
}
.policy__note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

@media (max-width: 767px) {
    /* 탭이 셋이라 '개인정보처리방침' 여덟 글자가 한 칸에 안 들어간다 —
       글자를 한 단계 줄이고 자간을 더 좁힌다 */
    .policy-tabs .tabs__btn {
        font-size: 13px;
        letter-spacing: -.09em;
    }
    .policy__title + .policy__text {
        margin-top: 40px;
    }
    .policy__title {
        margin-bottom: 24px;
        font-size: 20px;
    }
    .policy__chapter {
        margin: 40px 0 16px;
        font-size: 16px;
    }
    .policy__article {
        margin: 26px 0 8px;
        font-size: 15px;
    }
    .policy__text,
    .policy__item {
        font-size: 14px;
        line-height: 26px;
    }
    .policy__item {
        padding-left: 20px;
    }
    /* 좁은 화면에서는 단계 간격을 줄인다 — 네 단계를 그대로 두면
       가장 깊은 항목의 글자 폭이 화면의 절반도 안 남는다 */
    .policy__item--l2 {
        padding-left: 40px;
    }
    .policy__item--l2 .policy__no {
        left: 20px;
    }
    .policy__item--l3 {
        padding-left: 60px;
    }
    .policy__item--l3 .policy__no {
        left: 40px;
    }
    .policy__item--l4 {
        padding-left: 78px;
    }
    .policy__item--l4 .policy__no {
        left: 60px;
    }
}

/* ############################################################
   [6] 회사소개  ·  company/about.html  ·  .company-*
       인사말 · 회사 정보 · 연혁 · 오시는 길
       (클래스 앞자리를 about- 이 아니라 company- 로 둔 이유:
        haksa/ 는 독학학위제 안내, company/ 는 회사 문서로 폴더가 갈려 있다)
   ############################################################ */
.company {
    max-width: 900px;
    margin: 0 auto;
}
.company-sec + .company-sec {
    margin-top: 90px;
}
.company-sec__title {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
}

/* ---------- 인사말 ---------- */
.company-lead {
    margin-bottom: 26px;
    font-family: var(--font-title);
    font-size: 26px;
    font-weight: 800;
    line-height: 40px;
    color: var(--ink);
    letter-spacing: -.04em;
}
.company-text {
    font-size: 16px;
    line-height: 30px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.company-text + .company-text {
    margin-top: 18px;
}
.company-sign {
    margin-top: 32px;
    font-size: 16px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-align: right;
}
.company-sign b {
    margin-left: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- 연혁 ----------
   왼쪽에 연도, 오른쪽에 그 해의 일들. 연도는 줄이 늘어도 위에 붙어 있어야 한다 */
.company-history {
    display: grid;
    grid-template-columns: 140px 1fr;
}
.company-history__year {
    padding: 22px 0;
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.02em;
}
.company-history__body {
    padding: 22px 0;
}
.company-history__year + .company-history__body {
    border-top: 1px solid var(--line-soft);
}
.company-history__year:first-child,
.company-history__year:first-child + .company-history__body {
    border-top: 0;
}
.company-history__year:not(:first-child) {
    border-top: 1px solid var(--line-soft);
}
.company-history__body li {
    display: flex;
    gap: 14px;
    font-size: 16px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.company-history__body li + li {
    margin-top: 6px;
}
.company-history__body b {
    flex: none;
    width: 38px;
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--ink);
}

/* ---------- 오시는 길 ----------
   지도는 아직 넣지 않았다. 실제 지도가 들어올 자리만 잡아 둔 것이다. */
.company-map {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px;
    border: 1px dashed var(--hair);
    border-radius: var(--r-card);
    background: var(--surf);
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.company-place {
    margin-top: 24px;
}
.company-place__addr {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.company-place__row {
    margin-top: 10px;
    font-size: 16px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.company-place__row b {
    display: inline-block;
    width: 78px;
    font-weight: 700;
    color: var(--ink);
}

@media (max-width: 767px) {
    .company-sec + .company-sec {
        margin-top: 56px;
    }
    .company-sec__title {
        margin-bottom: 20px;
        padding-bottom: 12px;
        font-size: 18px;
    }
    .company-lead {
        margin-bottom: 18px;
        font-size: 20px;
        line-height: 32px;
    }
    .company-text {
        font-size: 15px;
        line-height: 27px;
    }
    /* 연혁은 연도를 윗줄로 올린다 — 140px 을 떼면 본문이 너무 좁다 */
    .company-history {
        display: block;
    }
    .company-history__year {
        padding: 20px 0 4px;
        font-size: 18px;
        border-top: 1px solid var(--line-soft);
    }
    .company-history__year:first-child {
        padding-top: 0;
        border-top: 0;
    }
    .company-history__body {
        padding: 0 0 4px;
        border-top: 0;
    }
    .company-history__body li {
        font-size: 15px;
        line-height: 26px;
    }
    .company-map {
        height: 220px;
        font-size: 14px;
    }
    .company-place__addr {
        font-size: 16px;
    }
    .company-place__row {
        font-size: 15px;
        line-height: 26px;
    }
}

/* ############################################################
   [7] 게시판  ·  bbs/*.html  ·  .bbs-*
       공지사항 · 1:1문의가 같이 쓴다 — 목록 · 검색 · 상세 · 글쓰기
   ############################################################ */

/* ---------- 목록 표 ----------
   .tbl 을 쓰지 않는다. 그쪽은 자료를 빽빽하게 담는 표라 칸마다 선이 있는데,
   게시판은 줄 사이 가로선만 있는 목록이라 어법이 다르다. */
.bbs-list {
    width: 100%;
    border-top: 2px solid var(--ink);
}
.bbs-list th {
    padding: 16px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surf);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-list td {
    padding: 18px 8px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    text-align: center;
}
.bbs-list__no,
.bbs-list__date,
.bbs-list__hit {
    font-family: var(--font-num);
    letter-spacing: -.02em;
}
/* 제목만 왼쪽 정렬 — .bbs-list td 의 가운데 정렬을 이겨야 해서 두 겹으로 잡는다 */
.bbs-list .bbs-list__title {
    text-align: left;
}
.bbs-list__title a {
    color: var(--ink);
    transition: color .15s;
}
.bbs-list__title a:hover {
    color: var(--acc);
    text-decoration: underline;
}
/* 맨 위에 고정되는 공지 줄 — 배경을 한 겹 깔아 일반 글과 구분한다 */
.bbs-list tr.is-notice td {
    background: var(--acc-tint);
}
.bbs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--acc);
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: var(--ls-base);
}
/* 새 글 표시 — 제목 옆에 붙는 작은 원 */
.bbs-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--step1);
    font-family: var(--font-num);
    font-size: 10px;
    font-weight: 700;
    color: var(--white);
    vertical-align: 1px;
}
/* 답변 상태 — 1:1문의 */
.bbs-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    border: 1px solid var(--hair);
    font-size: 13px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.bbs-state--done {
    border-color: var(--acc);
    background: var(--acc-tint);
    color: var(--acc);
    font-weight: 700;
}
/* 글이 하나도 없을 때 */
.bbs-list__empty {
    padding: 80px 0 !important;
    color: var(--mute);
}

/* 목록과 페이징 사이 — 수강신청(.lec-paging)과 같은 40px.
   1:1문의는 사이에 '문의하기' 단추 줄이 끼어 여백이 있어 보였을 뿐,
   단추가 없는 공지사항·합격후기는 목록에 바로 붙는다. 셋 다 여기서 띄운다. */
.bbs-list + .paging,
.bbs-btns + .paging,
.review-list + .paging {
    margin-top: 40px;
}

/* ---------- 목록 아래 줄 — 글쓰기 단추 ---------- */
.bbs-btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}
.bbs-btns .btn {
    height: 46px;
    padding: 0 24px;
    font-size: 15px;
}

/* ---------- 검색 ---------- */
.bbs-search {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}
/* 기본 화살표 대신 같은 꺾쇠를 그린다 (회원가입의 .join__select 와 같은 어법) */
.bbs-search__sel {
    flex: none;
    width: 120px;
    height: 46px;
    padding: 0 32px 0 14px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background-color: var(--white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23757575' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.bbs-search__input {
    width: 280px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-search__input::placeholder {
    color: var(--placeholder);
}
.bbs-search__input:focus,
.bbs-search__sel:focus {
    outline: none;
    border-color: var(--acc);
}
.bbs-search__btn {
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
}

/* ---------- 상세 ---------- */
.bbs-view {
    border-top: 2px solid var(--ink);
}
/* 배경은 깔지 않는다 — 색을 채우면 제목과 글쓴이가 왼쪽 모서리에 붙어 보인다.
   아랫변 선만으로도 본문과 충분히 갈린다. */
.bbs-view__head {
    padding: 26px 8px;
    border-bottom: 1px solid var(--line);
}
.bbs-view__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-view__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
/* ---------- 첨부파일 ----------
   제목과 본문 사이에 따로 띠를 둔다. 본문에 섞으면 끝까지 읽어야 파일이 보이고,
   맨 아래에 두면 긴 공지에서는 스크롤을 다 내려야 한다. */
.bbs-files {
    display: flex;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surf);
}
.bbs-files__label {
    flex: none;
    padding-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-files__list {
    flex: 1;
    min-width: 0;
}
.bbs-files__list li + li {
    margin-top: 6px;
}
.bbs-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.bbs-file:hover {
    color: var(--acc);
}
.bbs-file:hover .bbs-file__name {
    text-decoration: underline;
}
.bbs-file .ico {
    flex: none;
    color: var(--mute);
}
.bbs-file:hover .ico {
    color: var(--acc);
}
/* 파일명이 길면 줄바꿈 대신 말줄임 — 용량은 항상 보여야 한다 */
.bbs-file__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbs-file__size {
    flex: none;
    font-family: var(--font-num);
    font-size: 13px;
    color: var(--mute);
    letter-spacing: -.02em;
}

/* 목록에서 '첨부 있음'을 알리는 클립 — 열기 전에 알 수 있어야 한다 */
.bbs-clip {
    margin-left: 6px;
    color: var(--mute);
    vertical-align: -2px;
}

.bbs-view__body {
    padding: 40px 8px 60px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 30px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.bbs-view__body p + p {
    margin-top: 18px;
}

/* 1:1문의의 답변 — 질문과 한눈에 갈리도록 왼쪽에 액센트 선을 세운다 */
.bbs-answer {
    margin-top: 30px;
    padding: 28px 30px;
    border-left: 3px solid var(--acc);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    background: var(--surf);
}
.bbs-answer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.bbs-answer__label {
    font-size: 16px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: var(--ls-base);
}
.bbs-answer__date {
    font-family: var(--font-num);
    font-size: 13px;
    color: var(--mute);
    letter-spacing: -.02em;
}
.bbs-answer__body {
    font-size: 15px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* 이전글 / 다음글 */
.bbs-nav {
    border-bottom: 1px solid var(--line);
}
.bbs-nav__row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 8px;
}
.bbs-nav__row + .bbs-nav__row {
    border-top: 1px solid var(--line-soft);
}
.bbs-nav__label {
    flex: none;
    width: 70px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-nav__row a {
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.bbs-nav__row a:hover {
    color: var(--acc);
    text-decoration: underline;
}
.bbs-nav__none {
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* 상세 · 글쓰기 아래 단추 줄 */
.bbs-foot {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.bbs-foot .btn {
    min-width: 140px;
    height: 52px;
    padding: 0 24px;
    font-size: 16px;
}

/* ---------- 글쓰기 ---------- */
.bbs-form {
    border-top: 2px solid var(--ink);
}
.bbs-form__row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 8px;
    border-bottom: 1px solid var(--line-soft);
}
/* 내용처럼 세로로 긴 칸은 라벨을 위쪽에 붙인다 */
.bbs-form__row--top {
    align-items: start;
}
.bbs-form__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-form__req {
    color: var(--step1);
}
.bbs-form__input,
.bbs-form__textarea {
    width: 100%;
    padding: 0 16px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.bbs-form__input {
    height: 48px;
}
/* 셀렉트도 같은 칸을 쓴다. 다만 브라우저 기본 화살표는 칸 오른쪽 끝에 딱 붙어서
   입력칸의 좌우 여백(16px)과 어긋나 보인다 — 꺾쇠를 직접 그려 여백을 맞춘다
   (회원가입의 .join__select · 게시판 검색의 .bbs-search__sel 과 같은 어법) */
select.bbs-form__input {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23757575' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.bbs-form__textarea {
    height: 260px;
    padding: 14px 16px;
    line-height: 26px;
    resize: vertical;
}
.bbs-form__input::placeholder,
.bbs-form__textarea::placeholder {
    color: var(--placeholder);
}
.bbs-form__input:focus,
.bbs-form__textarea:focus {
    outline: none;
    border-color: var(--acc);
}
.bbs-form__hint {
    margin-top: 8px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.bbs-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}

@media (max-width: 1023px) {
    .bbs-form__row {
        grid-template-columns: 120px 1fr;
    }
}
@media (max-width: 767px) {
    /* 표를 줄 단위로 편다 — 좁은 화면에서 네 칸을 유지하면 제목이 두 글자씩 끊긴다.
       번호와 조회수는 목록에서 굳이 필요하지 않아 감춘다. */
    .bbs-list {
        display: block;
    }
    /* 아래 .bbs-list td 의 display:block 을 이겨야 해서 두 겹으로 잡는다 */
    .bbs-list thead,
    .bbs-list colgroup,
    .bbs-list .bbs-list__no,
    .bbs-list .bbs-list__hit {
        display: none;
    }
    .bbs-list tbody,
    .bbs-list tr {
        display: block;
    }
    .bbs-list td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }
    .bbs-list tr {
        padding: 16px 4px;
        border-bottom: 1px solid var(--line-soft);
    }
    .bbs-list tr.is-notice {
        padding-left: 10px;
        padding-right: 10px;
        background: var(--acc-tint);
    }
    .bbs-list tr.is-notice td {
        background: none;
    }
    .bbs-list__title {
        font-size: 15px;
        line-height: 24px;
    }
    /* 글쓴이와 날짜는 제목 아래 한 줄에 나란히 둔다
       (여기도 .bbs-list td 의 display:block 을 이겨야 한다) */
    .bbs-list .bbs-list__writer,
    .bbs-list .bbs-list__date {
        display: inline-block;
        margin-top: 8px;
        font-size: 13px;
        color: var(--mute);
    }
    .bbs-list__writer + .bbs-list__date::before {
        content: "·";
        margin: 0 6px;
    }
    .bbs-list__state {
        margin-top: 10px;
    }

    .bbs-search {
        flex-wrap: wrap;
        margin-top: 28px;
    }
    .bbs-search__sel {
        width: 104px;
    }
    .bbs-search__input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .bbs-search__btn {
        flex-basis: 100%;
    }

    .bbs-view__title {
        font-size: 17px;
        line-height: 26px;
    }
    .bbs-view__body {
        padding: 28px 4px 40px;
        font-size: 15px;
        line-height: 28px;
    }
    /* 좁은 화면에서는 '첨부파일' 딱지를 파일 목록 위로 올린다 */
    .bbs-files {
        display: block;
        padding: 16px;
    }
    .bbs-files__label {
        display: block;
        margin-bottom: 10px;
        padding-top: 0;
        font-size: 14px;
    }
    .bbs-file {
        font-size: 14px;
    }
    .bbs-answer {
        padding: 22px 18px;
    }
    .bbs-nav__row {
        gap: 12px;
        padding: 14px 4px;
    }
    .bbs-nav__label {
        width: 54px;
        font-size: 14px;
    }

    .bbs-form__row {
        display: block;
        padding: 16px 4px;
    }
    .bbs-form__label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .bbs-form__textarea {
        height: 200px;
    }
    .bbs-foot .btn {
        flex: 1 1 0;
        min-width: 0;
        height: 48px;
        padding: 0 12px;
        font-size: 15px;
    }
}

/* ############################################################
   [8] 합격후기  ·  review/list.html  ·  .review-*
       표가 아니라 글 카드가 쌓이는 목록이다 — 제목만 보이는 게시판과 달리
       본문과 사진이 목록에서 바로 읽혀야 고르는 재미가 있다.
   ############################################################ */
.review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding: 26px 30px;
    border-radius: var(--r-card);
    background: var(--surf);
}
.review-top__lead {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.04em;
}
.review-top__btn {
    flex: none;
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
}

/* ---------- 후기 작성 폼 ----------
   목록 위에서 아래로 밀려 열린다 (review.js).
   여닫는 방식은 서랍의 2차 메뉴와 같은 grid-template-rows 0fr↔1fr —
   내용 높이를 미리 몰라도 되고, 닫힐 때 바로 움직이기 시작한다. */
.review-write {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1);
}
.review-write.is-open {
    grid-template-rows: 1fr;
}
/* 닫혀 있는 동안 안쪽을 잘라 내는 칸 */
.review-write__inner {
    min-height: 0;
    overflow: hidden;
}
/* 아래 여백은 잘리는 칸 안에 둔다 — 밖에 두면 닫아도 그만큼 자리가 남는다 */
.review-write__form {
    padding-bottom: 40px;
}

.review-write__notice {
    margin-bottom: 26px;
    padding: 20px 24px;
    border-radius: var(--r-card);
    background: var(--surf);
}
.review-write__notice > li {
    font-size: 15px;
    line-height: 26px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
/* 꼭 지켜야 하는 대목만 빨강 — 시안과 같은 강조 */
.review-write__notice em {
    color: var(--step1);
    font-weight: 700;
}
.review-write__warn {
    color: var(--step1);
    text-align: right;
}

/* 사진 첨부 줄 */
.filepick__row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filepick__row + .filepick__row {
    margin-top: 8px;
}
/* 진짜 input[type=file] 은 .blind 로 숨기고 이 라벨이 단추 노릇을 한다 —
   파일 선택 단추는 브라우저마다 모양이 달라 그대로 두면 화면마다 다르게 보인다.
   합격후기 작성과 게시판 글쓰기가 같이 쓴다 (script.js 의 initFileRows) */
.filepick__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    width: 160px;
    height: 48px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 15px;
    font-weight: 700;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
    transition: border-color .15s,color .15s;
}
.filepick__btn:hover {
    border-color: var(--body);
    color: var(--ink);
}
.filepick__name {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 15px;
    line-height: 46px;
    color: var(--placeholder);
    letter-spacing: var(--ls-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filepick__act {
    flex: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 20px;
    line-height: 1;
    color: var(--body);
    transition: border-color .15s,color .15s;
}
.filepick__act:hover {
    border-color: var(--body);
    color: var(--ink);
}
.filepick__act[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .review-write__notice {
        margin-bottom: 20px;
        padding: 16px 18px;
    }
    .review-write__notice > li {
        font-size: 14px;
        line-height: 24px;
    }
    .review-write__warn {
        text-align: left;
    }
    /* 좁은 화면에서는 고르기 단추와 파일명을 위아래로 쌓고,
       ± 단추만 파일명 오른쪽에 남긴다 */
    .filepick__row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .filepick__btn {
        width: 100%;
        height: 44px;
    }
    .filepick__name {
        height: 44px;
        line-height: 42px;
        font-size: 14px;
    }
    .filepick__act {
        width: 44px;
        height: 44px;
    }
}

.review-list {
    display: grid;
    gap: 14px;
}
/* 후기 한 건이 카드 하나다. 머리(과정·글쓴이)와 본문을 점선으로 나눈다 */
.review-item {
    padding: 24px 26px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}
.review-item__head {
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--hair);
}
.review-item__course {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 글쓴이 · 날짜 — 과정명 아래 한 단 낮게 */
.review-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.review-item__meta .ico {
    color: var(--hair-hover);
}
.review-item__bar {
    color: var(--hair);
}
.review-item__date {
    font-family: var(--font-num);
    letter-spacing: -.02em;
}

/* 본문 — 글이 왼쪽, 첨부 사진이 오른쪽 */
.review-item__body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-top: 18px;
}
.review-item__text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 28px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
/* 첨부 사진 — 실제 이미지가 들어올 자리만 잡아 두었다 */
.review-item__files {
    display: flex;
    flex: none;
    gap: 8px;
}
.review-item__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 132px;
    border: 1px dashed var(--hair);
    border-radius: var(--r-btn);
    background: var(--surf);
    font-size: 12px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-align: center;
}

/* ---------- 이 달의 후기 ----------
   목록에서 한 건만 뽑아 올린다. 배경만 바꾸면 '색이 다른 카드' 로만 보여서
   테두리 · 딱지 · 그림자를 함께 준다. 셋이 모여야 '뽑힌 것' 으로 읽힌다. */
.review-item.is-best {
    border: 2px solid var(--acc);
    box-shadow: 0 6px 20px rgba(77,100,212,.10);
}
.review-item.is-best .review-item__head {
    border-bottom-color: var(--acc);
}
.review-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 12px;
    background: var(--acc);
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .04em;
}

@media (max-width: 767px) {
    .review-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
        padding: 20px 18px;
    }
    .review-top__lead {
        font-size: 17px;
    }
    .review-top__btn {
        width: 100%;
    }
    .review-item {
        padding: 18px 18px 20px;
    }
    .review-item__course {
        font-size: 15px;
    }
    .review-item__meta {
        font-size: 13px;
    }
    /* 글 옆에 사진을 두면 한 줄에 대여섯 글자밖에 못 담는다 — 사진을 아랫줄로 */
    .review-item__body {
        display: block;
        padding-top: 14px;
    }
    .review-item__text {
        font-size: 14px;
        line-height: 26px;
    }
    .review-item__files {
        margin-top: 14px;
    }
    .review-item__thumb {
        width: 96px;
        height: 118px;
    }
}

/* ############################################################
   [9] 나의강의실  ·  mypage/*.html  ·  .my-*
       학습실(요약판) · 수강 과정 목록 · 결제내역 · 내정보보기
       입력 칸은 게시판의 .bbs-form__* 을 그대로 쓴다 — 같은 모양을 두 번
       그리지 않기 위해서다. 게시판 전용이 아니라 폼 공통으로 봐도 된다.
   ############################################################ */

/* ---------- 알림판 — 수강중 / 수강종료 ----------
   학습실에 들어오면 제일 먼저 "지금 몇 개를 듣고 있나"가 보여야 한다.
   숫자를 크게 두고 칸 전체를 누를 수 있게 해서 목록으로 바로 넘어간다. */
.my-alert {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
}
.my-alert__item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
    transition: border-color .15s,box-shadow .15s;
}
.my-alert__item:hover {
    border-color: var(--acc);
    box-shadow: 0 6px 20px rgba(77,100,212,.10);
}
.my-alert__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--acc-tint);
    color: var(--acc);
}
/* 끝난 과정은 힘을 뺀다 — 지금 들어야 할 것과 한눈에 갈려야 한다 */
.my-alert__item--done .my-alert__ico {
    background: var(--surf);
    color: var(--mute);
}
/* 라벨과 숫자는 span 이라 그냥 두면 한 줄에 붙는다 — 위아래로 나눈다 */
.my-alert__label {
    display: block;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.my-alert__count {
    display: block;
    margin-top: 4px;
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -.03em;
}
.my-alert__count b {
    color: var(--acc);
}
.my-alert__item--done .my-alert__count b {
    color: var(--ink);
}
/* 칸 오른쪽 끝의 꺾쇠 — 누를 수 있다는 표시 */
.my-alert__go {
    margin-left: auto;
    color: var(--hair-hover);
    transition: color .15s,transform .15s;
}
.my-alert__item:hover .my-alert__go {
    color: var(--acc);
    transform: translateX(2px);
}

/* ---------- 구획 ---------- */
.my-sec {
    margin-top: 64px;
}
/* 제목 아래 구분선 — 회사소개(.company-sec__title) · 수험정보와 같은 어법이다.
   여백만으로 나누면 화면을 훑을 때 어디까지가 한 덩어리인지 눈이 헷갈린다.
   선을 제목이 아니라 머리줄 전체에 그어야 오른쪽 '더보기' 까지 한 묶음으로 읽힌다. */
.my-sec__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.my-sec__title {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
}
.my-sec__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.my-sec__more:hover {
    color: var(--acc);
}

/* ---------- 최근 수강한 과정 · 수강 과정 목록 ----------
   왼쪽에 과정 이미지, 가운데 이름과 학습기간, 오른쪽에 수강잔여일·진도율.
   학습실 요약판에는 '학습하기' 를 두지 않는다. 여기서 바로 강의를 열면
   목록을 거치지 않게 되어, 과정이 여러 개일 때 어디까지 들었는지를 잃는다. */
/* 과정 하나가 카드 하나다. 한 상자에 줄로 붙여 두면 어디까지가 한 과정인지
   경계가 흐려서, 카드로 떼어 놓고 사이를 띄운다. */
.my-course__item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}
.my-course__item + .my-course__item {
    margin-top: 10px;
}
.my-course__body {
    flex: 1;
    min-width: 0;
}
.my-course__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
/* 학과명은 공용 .dept(17px·700)를 쓰지만 여기서는 한 단계 낮춘다 —
   이 카드에서 제일 큰 글자는 과정명이어야 한다.
   .dept 원본은 건드리지 않는다 — 수강신청 카드가 그대로 쓰고 있다. */
.my-course__head .dept {
    font-size: 15px;
    font-weight: 500;
}
.my-course__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.my-course__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.my-course__meta .num {
    color: var(--body);
    letter-spacing: -.02em;
}

/* 오른쪽 수치 — 이름과 값 사이를 가는 선으로 이어 둘을 한 줄로 묶는다.
   값이 오른쪽 끝에 세로로 줄지어 있어야 과정끼리 비교가 된다. */
.my-course__stat {
    flex: none;
    width: 200px;
}
.my-course__stat > div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.my-course__stat > div + div {
    margin-top: 10px;
}
.my-course__stat dt {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
}
/* 라벨과 값 사이를 채우는 작은 막대그래프.
   전에는 밋밋한 1px 선이었는데, 어차피 남는 자리라면 수치를 한 번 더
   보여 주는 편이 낫다 — 숫자를 읽기 전에 길이로 먼저 짐작할 수 있다.
   잔여일은 '기간 중 얼마가 남았나', 진도율은 그 값 자체를 길이로 삼는다.
   3px 이라 눈에 띄지 않고, 채움만 색을 갖는다. */
.my-course__bar {
    flex: 1;
    min-width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}
.my-course__bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--acc) 0%, #6D5DE7 55%, #A78BFA 100%);
}
.my-course__stat dt .ico {
    flex: none;
    color: var(--hair-hover);
}
.my-course__stat dd {
    flex: none;
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.my-course__stat dd b {
    font-family: var(--font-num);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}
/* 진도율만 액센트 — 학습실에서 제일 먼저 보게 되는 수치다 */
.my-course__stat dd.is-rate b {
    color: var(--acc);
}
/* 남은 날이 얼마 없으면 빨강 */
.my-course__stat dd.is-soon b {
    color: var(--step1);
}

/* ---------- 보유 쿠폰 ----------
   이 구획만 회색 띠를 화면 끝까지 깔아 앞뒤와 확실히 끊는다.
   띠는 .inner 바깥에 두고 안쪽에 다시 .inner 를 넣는다 —
   100vw 로 넓히는 방법은 세로 스크롤바 폭만큼 가로로 넘친다. */
.my-band {
    margin-top: 24px;
    padding: 40px 0;
    background: var(--surf);
}
/* 띠가 경계를 맡으므로 이 머리줄에는 구분선을 긋지 않는다 */
.my-sec__head--plain {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.my-coupon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
/* 티켓 한 장 — 액센트로 채우고 그 위에 흰 판을 얹는다.
   흰 판 아래 가운데를 반원으로 파내야 '카드' 가 아니라 '쿠폰' 으로 읽힌다. */
.my-coupon__item {
    width: 220px;
    padding: 10px 10px 0;
    border-radius: var(--r-card);
    background: var(--acc);
}
/* 기한이 임박한 쿠폰은 티켓째 색을 바꾼다 —
   바탕이 액센트라 글자만 빨갛게 하면 묻힌다.
   왼쪽 위의 1단계 빨강에서 시작해 오른쪽 아래 액센트로 넘어간다. */
.my-coupon__item.is-soon {
    background: linear-gradient(135deg, var(--step1) 0%, var(--acc) 60%);
}
.my-coupon__face {
    position: relative;
    padding: 20px 16px 22px;
    border-radius: 8px;
    background: var(--white);
    text-align: center;
}
/* 흰 판 아래를 파낸 자국 — 티켓 색으로 채워 반원처럼 보인다 */
.my-coupon__face::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: var(--acc);
}
/* 파낸 자국은 흰 판 아래 가운데에 있다 — 그 자리쯤이면 그라데이션이
   거의 액센트로 넘어와 있어서 끝색을 그대로 쓴다 */
.my-coupon__item.is-soon .my-coupon__face::after {
    background: var(--acc);
}
.my-coupon__name {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-coupon__value {
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.my-coupon__value b {
    font-family: var(--font-num);
    font-size: 30px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.03em;
}
/* 아래 띠 — 쓸 수 있는 기간을 여기에 둔다.
   흰 판 안에 넣으면 금액과 같은 칸이라 무게가 비슷해 보이는데,
   기간은 금액을 보고 난 다음에 확인하는 값이라 한 겹 아래가 맞다. */
.my-coupon__foot {
    padding: 13px 0 12px;
    font-family: var(--font-num);
    font-size: 12px;
    color: var(--white);
    letter-spacing: -.02em;
    text-align: center;
}
/* 임박한 쿠폰의 기간만 형광 노랑으로 깜빡인다 — 얼른 쓰라는 신호다.
   완전히 껐다 켜지 않고 흐려졌다 돌아오게 둔 이유는, 글자가 사라지는 구간이
   생기면 하필 그때 보는 사람은 날짜를 읽지 못하기 때문이다.

   이 목록(마이페이지 요약) 안에서만 깜빡인다. 쿠폰함(cp-card)은 같은 티켓을
   쓰지만 아래 띠에 기간이 아니라 'COUPON' 이 들어가 있어서, 거기까지
   깜빡이면 아무 뜻도 없는 글자만 반짝이게 된다. */
.my-coupon > .my-coupon__item.is-soon .my-coupon__foot {
    font-weight: 700;
    color: #FAFF3C;
    animation: coupon-soon 1s ease-in-out infinite;
}
@keyframes coupon-soon {
    50% {
        opacity: .3;
    }
}
/* 움직임을 줄여 달라고 설정해 둔 사람에게는 멈춰 세운다.
   색은 남겨야 하므로 애니메이션만 끈다 */
@media (prefers-reduced-motion: reduce) {
    .my-coupon > .my-coupon__item.is-soon .my-coupon__foot {
        animation: none;
    }
}

/* 가진 쿠폰이 없을 때 */
.my-empty {
    padding: 50px 0;
    border: 1px dashed var(--hair);
    border-radius: var(--r-card);
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-align: center;
}

/* 구획 머리줄 오른쪽의 '돌아가기' — 링크가 아니라 단추로 보여야
   누르면 화면이 바뀐다는 것이 읽힌다 */
.my-back {
    flex: none;
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
}

/* ---------- 내 쿠폰함  ·  mypage/coupon.html  ·  .cp-* ---------- */
.cp-notice {
    margin-bottom: 36px;
    padding: 22px 26px;
    border-radius: var(--r-card);
    background: var(--surf);
}
.cp-notice > li {
    font-size: 15px;
    line-height: 26px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}

/* 쿠폰 한 장을 감싸는 칸 — 이름 · 티켓 · 기간 · 설명이 세로로 쌓인다 */
.cp-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}
.cp-card {
    padding: 28px 24px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
    text-align: center;
}
.cp-card__title {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 티켓은 학습실에서 쓰는 것을 그대로 가져다 가운데 세운다 */
.cp-card .my-coupon__item {
    margin: 0 auto;
}
/* 티켓의 반원 자국은 뒤 배경색으로 파낸다 — 여기 배경은 흰색이다 */
.cp-card .my-coupon__face::after {
    background: var(--acc);
}
.cp-card__date {
    margin-top: 18px;
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 700;
    color: var(--step1);
    letter-spacing: -.02em;
}
.cp-card__desc {
    margin-top: 12px;
    font-size: 14px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* 기간이 지난 쿠폰 — 색을 빼고 흐리게 해서 '쓸 수 없다' 를 한눈에 보인다.
   글자를 지우거나 감추지는 않는다. 어떤 쿠폰이 만료됐는지도 정보다. */
.cp-card.is-off {
    background: var(--surf);
}
.cp-card.is-off .cp-card__title {
    color: var(--mute);
}
.cp-card.is-off .my-coupon__item {
    filter: grayscale(1);
    opacity: .5;
}
.cp-card.is-off .cp-card__date {
    color: var(--mute);
}
.cp-card.is-off .my-coupon__face::after {
    background: var(--acc);
}
/* 만료 딱지 — 채우지 않고 테두리만 두른다.
   회색으로 채우면 흐린 글자가 흐린 바탕에 얹혀 읽기 어렵다. */
.cp-card__off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    margin-top: 16px;
    padding: 0 12px;
    border: 1px solid var(--hair-hover);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

@media (max-width: 1023px) {
    .cp-list {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 767px) {
    .cp-notice {
        margin-bottom: 26px;
        padding: 18px 18px;
    }
    .cp-notice > li {
        font-size: 14px;
        line-height: 24px;
    }
    .cp-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cp-card {
        padding: 24px 20px 22px;
    }
    .cp-card__title {
        font-size: 16px;
    }
}

/* ---------- 아래 두 칸 (공지사항 · 1:1문의) ---------- */
.my-cols {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 44px;
    margin-top: 64px;
}
.my-cols .my-sec {
    margin-top: 0;
}
/* 요약 목록 — 제목과 날짜만. 자세한 건 게시판에서 본다 */
/* 머리줄이 이미 아랫변 선을 갖고 있어 여기서 또 그으면 줄이 두 겹으로 겹친다 */
.my-mini {
    border-top: 0;
}
.my-mini__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line-soft);
}
.my-mini__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    transition: color .15s;
}
.my-mini__item:hover .my-mini__title {
    color: var(--acc);
    text-decoration: underline;
}
.my-mini__date {
    flex: none;
    font-family: var(--font-num);
    font-size: 13px;
    color: var(--mute);
    letter-spacing: -.02em;
}

/* ############################################################
   결제내역  ·  mypage/payment.html  ·  .pay-*
   ############################################################ */
.pay-sec + .pay-sec {
    margin-top: 56px;
}
.pay-sec__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}
.pay-sec__title {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
}
.pay-sec__count {
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.pay-sec__count b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--body);
}
.pay-list > li + li {
    margin-top: 10px;
}
.pay-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}
.pay-item__body {
    flex: 1;
    min-width: 0;
}
.pay-item__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.pay-item__date {
    margin-top: 6px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.pay-item__date .num {
    letter-spacing: -.02em;
}
.pay-item__price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.pay-item__price .ico {
    color: var(--mute);
}
.pay-item__price b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}
/* 상태 딱지 — 단추처럼 보이지만 누르는 것이 아니다 (span 으로 둔다) */
.pay-item__state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 200px;
    height: 48px;
    border-radius: var(--r-btn);
    background: var(--surf);
    font-size: 15px;
    font-weight: 700;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
/* 알약 두 가지 모두 눌러서 자세한 내용을 볼 수 있다(팝업).
   button 으로 온 것만 걸러 손대는 이유는, 나중에 누를 수 없는 상태
   (예: .pay-item__state--wait)가 span 으로 오더라도 hover 가 붙지 않게 하려는 것이다.
   꺾쇠를 하나씩 달아 둔 것도 같은 뜻이다 — 다 똑같이 생긴 알약이 나란히
   있으면 어느 쪽이 눌리는지 알 방법이 없다 */
button.pay-item__state {
    gap: 7px;
    transition: background-color .15s;
}
button.pay-item__state:hover {
    background: #EDEEF0;
}
button.pay-item__state .ico {
    flex: none;
    /* 글자보다 뒤로 물러나 있어야 한다. 또렷하면 꺾쇠가 먼저 읽힌다 */
    opacity: .6;
}
.pay-item__state--done {
    background: var(--acc-tint);
    color: var(--acc);
}
button.pay-item__state--done:hover {
    background: rgba(77,100,212,.16);
}

/* ------------------------------------------------------------
   결제 정보 · 환불 정보 팝업 (payment.html 의 #payModal)
   ------------------------------------------------------------ */
/* 결제 건과 환불 건이 한 팝업을 나눠 쓴다. 감추는 쪽만 적는다 —
   보이는 쪽에 display 를 지정하면 그 요소의 제 성질(블록·인라인)을
   여기서 정해 버리게 된다 (결제완료 화면의 [data-when] 과 같은 어법) */
.pay-modal:not(.pay-modal--refund) [data-only="refund"],
.pay-modal--refund [data-only="done"] {
    display: none;
}

/* 어느 과정의 결제인지. 제목(결제 정보)만으로는 목록에서 무엇을 눌렀는지
   되짚을 수 없다 */
.pay-detail__name {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 팝업 상자는 가운데 정렬이지만 이 표만 왼쪽으로 되돌린다 —
   이름과 값이 두 줄로 접혔을 때 가운데 정렬이면 어느 값이 어느 이름의
   것인지 눈으로 잇기 어렵다 */
.pay-detail {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: var(--surf);
    text-align: left;
}
.pay-detail > div {
    display: flex;
    gap: 14px;
    font-size: 14px;
    letter-spacing: var(--ls-base);
}
.pay-detail > div + div {
    margin-top: 11px;
}
.pay-detail dt {
    flex: 0 0 64px;
    color: var(--mute);
}
.pay-detail dd {
    flex: 1 1 0;
    color: var(--ink);
    word-break: keep-all;
}
.pay-detail__price b {
    font-family: var(--font-num);
    font-size: 17px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.03em;
}
.pay-detail__hint {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.pay-detail__hint a {
    color: var(--acc);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 환불 계산 — 얼마에서 무엇이 빠져 얼마가 돌아왔는지.
   위 표(회색 면)와 달리 테두리만 둘러 성격이 다른 칸임을 보인다 */
.pay-refund {
    margin-top: 12px;
    padding: 16px 20px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    text-align: left;
}
.pay-refund__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.pay-refund__row + .pay-refund__row {
    margin-top: 9px;
}
.pay-refund__row b {
    font-family: var(--font-num);
    font-weight: 500;
    letter-spacing: -.03em;
}
/* 빠져나간 줄은 한 단 들여 쓰고 붉게. 결제완료 화면의 쿠폰 줄과 같은 어법 */
.pay-refund__row--cut {
    padding-left: 10px;
    font-size: 13px;
    color: var(--mute);
}
.pay-refund__row--cut b {
    color: var(--sale);
}
.pay-refund__row--sum {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-card);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.pay-refund__row--sum b {
    font-size: 19px;
    font-weight: 700;
    color: var(--acc);
}

.pay-item__btn {
    flex: none;
    width: 200px;
    height: 48px;
    font-size: 15px;
}

/* ############################################################
   내정보보기  ·  mypage/profile.html
   ############################################################ */
.my-tabs {
    max-width: 480px;
    margin: 0 auto 44px;
}
.my-panel[hidden] {
    display: none;
}
/* 탭 아래에 바로 붙는 폼은 윗변을 기본 회색으로 낮춘다.
   게시판 글쓰기(.bbs-form)의 2px 잉크 선은 위에 아무것도 없을 때를 기준으로 한 것이라,
   탭 띠의 아랫변과 나란히 서면 굵기가 다른 선 두 개가 맞붙어 부딪혀 보인다. */
.my-panel .bbs-form {
    border-top: 1px solid var(--line);
}
/* 바꿀 수 없는 값(아이디·이름)은 칸 없이 글자로 보여 준다 —
   빈 입력칸처럼 보이면 고칠 수 있는 줄 알고 눌러 보게 된다 */
.my-static {
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.my-static__note {
    margin-left: 10px;
    font-size: 13px;
    color: var(--mute);
}
.my-radios {
    display: flex;
    gap: 28px;
}
.my-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
/* 비밀번호 칸은 폭을 맞추려고 늘리지 않는다 — 20자리까지라 이 정도면 넉넉하다 */
.my-panel .pw {
    max-width: 340px;
}
.my-phone {
    display: flex;
    align-items: center;
    gap: 8px;
}
.my-phone .bbs-form__input {
    width: 120px;
    text-align: center;
}
.my-phone__dash {
    color: var(--hair-hover);
}
.my-leave {
    margin-top: 30px;
    text-align: right;
}
.my-leave a {
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-decoration: underline;
    transition: color .15s;
}
.my-leave a:hover {
    color: var(--body);
}

@media (max-width: 1023px) {
    .my-cols {
        gap: 28px;
    }
    .pay-item__state,
    .pay-item__btn {
        width: 150px;
    }
}
@media (max-width: 767px) {
    .my-alert {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .my-alert__item {
        gap: 14px;
        padding: 18px 20px;
    }
    .my-alert__ico {
        width: 44px;
        height: 44px;
    }
    .my-alert__count {
        font-size: 22px;
    }
    .my-sec {
        margin-top: 40px;
    }
    .my-sec__title,
    .pay-sec__title {
        font-size: 17px;
    }
    /* 이름과 수치를 옆으로 늘어놓으면 과정명이 두 글자씩 끊긴다 — 세로로 쌓는다 */
    .my-course__item {
        display: block;
        padding: 18px;
    }
    .my-course__name {
        font-size: 16px;
    }
    .my-course__stat {
        width: auto;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line-soft);
    }
    /* 쿠폰은 아래로 쌓지 않고 옆으로 민다.
       한 장이 220px 이라 세로로 쌓으면 서너 장만 있어도 첫 화면을 다 먹고,
       그 아래 공지·1:1문의가 한참 밀려난다. 옆으로 밀면 자리는 한 장만
       쓰면서 장수는 그대로 보여 줄 수 있다.

       좌우 여백을 밖으로 빼내 화면 끝까지 밀리게 했다 — 마지막 장이
       오른쪽 가장자리에서 잘려 보여야 '더 있다' 가 읽힌다.
       스크롤바는 감춘다. 잘린 카드가 이미 같은 말을 하고 있고,
       안드로이드에서는 그 막대가 기간 위에 겹쳐 그려진다. */
    .my-coupon {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0 -16px;
        padding: 0 16px 2px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }
    .my-coupon::-webkit-scrollbar {
        display: none;
    }
    /* nowrap 이면 남는 자리가 없어 카드가 눌린다 — 눌리지 말고 넘치게 둔다 */
    .my-coupon__item {
        flex: none;
        scroll-snap-align: start;
    }
    .my-cols {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 40px;
    }
    .my-mini__item {
        padding: 10px 4px;
    }
    .my-mini__title {
        font-size: 14px;
    }

    .pay-sec + .pay-sec {
        margin-top: 40px;
    }
    /* 결제 줄도 세로로 쌓고, 금액과 상태를 한 줄에 나란히 둔다 */
    .pay-item {
        display: block;
        padding: 18px 18px 16px;
    }
    .pay-item__name {
        font-size: 16px;
    }
    .pay-item__price {
        margin-top: 14px;
        font-size: 14px;
    }
    .pay-item__state,
    .pay-item__btn {
        width: 100%;
        height: 44px;
        margin-top: 12px;
        font-size: 14px;
    }

    .my-tabs {
        margin-bottom: 32px;
    }
    .my-phone .bbs-form__input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* ############################################################
   [10] 장바구니  ·  lecture/cart.html  ·  .cart-*
        담은 과정마다 쿠폰을 따로 골라 적용한다.
        과정 이미지는 두지 않는다 — 목록·상세와 마찬가지로 글자만으로 고른다.
   ############################################################ */
.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.cart-all {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.cart-all .num {
    font-weight: 400;
    color: var(--mute);
}
.cart-head__del {
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-decoration: underline;
    transition: color .15s;
}
.cart-head__del:hover {
    color: var(--body);
}

/* ---------- 담은 과정 ---------- */
.cart-list {
    margin-top: 16px;
}
.cart-list > li + li {
    margin-top: 12px;
}
.cart-item {
    padding: 20px 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}
/* 머리줄 — 고르기 · 학과/단계 · 삭제 */
.cart-item__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
}
.cart-item__pick {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.cart-item__del {
    margin-left: auto;
    color: var(--hair-hover);
    transition: color .15s;
}
.cart-item__del:hover {
    color: var(--step1);
}

/* 본문 — 과정명·기간(왼쪽) · 금액(오른쪽) */
.cart-item__body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--hair);
}
.cart-item__info {
    flex: 1;
    min-width: 0;
}
.cart-item__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.cart-item__meta {
    margin-top: 6px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.cart-item__meta .num {
    color: var(--body);
    letter-spacing: -.02em;
}
.cart-item__price {
    flex: none;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    text-align: right;
}
.cart-item__price b {
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
}
/* 쿠폰을 적용한 뒤의 원래 금액 */
.cart-item__price s {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-num);
    font-size: 14px;
    color: var(--price-old);
    letter-spacing: -.02em;
}
/* display 를 준 요소라 hidden 만으로는 안 감춰진다 */
.cart-item__price s[hidden] {
    display: none;
}

/* 쿠폰을 적용했을 때 붙는 딱지 — '정가 → 할인가' 와 헷갈리지 않도록
   무엇 때문에 깎였는지(쿠폰)를 글자로 밝힌다 */
.cart-item__tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-top: 6px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--acc-tint);
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.02em;
}
.cart-item__tag[hidden] {
    display: none;
}

/* ---------- 쿠폰 줄 ---------- */
.cart-item__coupon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 16px;
}
.cart-item__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.cart-item__label .ico {
    color: var(--mute);
}
/* 기본 화살표를 지우고 같은 꺾쇠를 그린다 (회원가입·게시판 검색과 같은 어법) */
.cart-item__sel {
    width: 300px;
    height: 46px;
    padding: 0 36px 0 16px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background-color: var(--white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23757575' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.cart-item__sel:focus {
    outline: none;
    border-color: var(--acc);
}
.cart-item__apply {
    flex: none;
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
}
/* 고르기만 해서는 값이 바뀌지 않는다는 안내 — 줄 전체를 쓰고 오른쪽에 붙는다 */
.cart-item__hint {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--step1);
    letter-spacing: var(--ls-base);
    text-align: right;
}

/* ---------- 합계 · 결제 ---------- */
.cart-total {
    margin-top: 36px;
    padding: 30px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.cart-total__text {
    font-size: 20px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.cart-total__text b {
    font-family: var(--font-num);
    font-size: 30px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.03em;
}
.cart-total__save {
    margin-top: 10px;
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.cart-total__save b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--step1);
    letter-spacing: -.02em;
}
.cart-foot {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
}
.cart-foot .btn {
    min-width: 200px;
    height: 60px;
    padding: 0 24px;
    font-size: 17px;
}
/* 담은 과정이 없을 때 — 다른 칸과 같은 실선 테두리를 두른다.
   점선이면 '지우다 만 자리' 처럼 보이고, 테두리가 아예 없으면 글자가 떠 보인다.
   빈 화면에서 할 일이 없으면 안 되므로 목록으로 돌아가는 단추를 함께 둔다. */
.cart-empty {
    padding: 70px 20px 66px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
    text-align: center;
}
.cart-empty__ico {
    color: var(--hair);
}
.cart-empty__text {
    margin-top: 16px;
    font-size: 16px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.cart-empty__btn {
    height: 50px;
    margin-top: 24px;
    padding: 0 28px;
    font-size: 16px;
}

/* hidden 속성이 확실히 먹도록.
   hidden 의 display:none 은 브라우저 기본값이라, CSS 에서 display 를 준
   요소(.cart-foot 는 flex)에서는 밀린다 — 감췄는데 그대로 보인다. */
.cart-foot[hidden],
.cart-head[hidden] {
    display: none;
}

@media (max-width: 1023px) {
    .cart-item__sel {
        width: 240px;
    }
}
@media (max-width: 767px) {
    .cart-item {
        padding: 16px 18px 18px;
    }
    /* 과정명과 금액을 한 줄에 두면 이름이 두 글자씩 끊긴다 — 금액을 아랫줄로 */
    .cart-item__body {
        display: block;
        padding-bottom: 14px;
    }
    .cart-item__name {
        font-size: 16px;
    }
    .cart-item__price {
        margin-top: 12px;
        text-align: left;
    }
    .cart-item__price s {
        display: inline-block;
        margin: 0 6px 0 0;
    }
    /* 쿠폰 줄도 세로로 — 셀렉트가 폭을 다 쓰고 적용 단추가 그 아래 */
    .cart-item__coupon {
        display: block;
        padding-top: 14px;
    }
    .cart-item__label {
        margin-bottom: 8px;
    }
    .cart-item__sel {
        width: 100%;
    }
    .cart-item__apply {
        width: 100%;
        margin-top: 8px;
    }
    .cart-item__hint {
        margin-top: 10px;
        text-align: left;
    }

    .cart-total {
        margin-top: 28px;
        padding: 24px 0;
    }
    .cart-total__text {
        font-size: 17px;
    }
    .cart-total__text b {
        font-size: 24px;
    }
    .cart-foot {
        margin-top: 28px;
    }
    .cart-foot .btn {
        flex: 1 1 0;
        min-width: 0;
        height: 52px;
        padding: 0 12px;
        font-size: 15px;
    }
}

/* ############################################################
   [11] TESAT  ·  tesat/tesat.html  ·  .tesat-*

   한경TESAT 올인원패키지 한 상품을 소개하는 한 장짜리 페이지다.
   상품이 하나뿐이라 목록·필터가 없고, 히어로 → 시험 설명 → 커리큘럼 →
   수강 방법 → 신청 순으로 위에서 아래로 읽힌다.

   두 가지는 다른 화면 것을 그대로 가져다 쓴다.
     · 커리큘럼 카드 = 수강신청 목록의 과정 카드(.lec-card) 그대로
     · 강의 목록    = 확인 팝업(.modal) 그대로, '커리큘럼 보기'가 연다
   ############################################################ */

/* ------------------------------------------------------------
   히어로 — 이 페이지만 서브 타이틀 밴드(.sub-visual)를 쓰지 않는다.
   상품이 하나라 첫 화면이 곧 상품 소개여야 하고, 120px 짜리 띠로는
   그 무게가 나오지 않는다 (독학학위제 소개 페이지도 같은 이유로 히어로다)
   ------------------------------------------------------------ */
/* 바탕은 남색이 아니라 먹빛이다. 남색 판 위에 남색 계열 카드를 올리면
   둘이 서로 묻혀 카드가 떠 보이지 않는다. 바탕에서 색을 빼면 그 색이
   전부 카드 쪽으로 간다 — 아래 가운데 카드가 유일하게 밝은 자리가 된다 */
.tesat-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 88px;
    background: #0A0B10;
    text-align: center;
}
/* 빛 세 덩어리. 타원(radial-gradient 의 기본)이 아니라 정원(circle)이다 —
   타원으로 늘이면 화면 전체에 안개가 낀 것처럼 뭉개지는데, 원으로 두면
   "빛 덩어리가 저기 놓여 있다" 로 읽혀 판에 깊이가 생긴다.
   색은 서브 타이틀 밴드와 같은 계열(인디고·바이올렛·시안)이고, 먹빛 바탕에
   맞춰 진하기를 낮췄다 */
.tesat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 420px at 76% 6%, rgba(99,102,241,.40), transparent 68%),
        radial-gradient(circle 360px at 16% 84%, rgba(124,58,237,.30), transparent 70%),
        radial-gradient(circle 300px at 52% 108%, rgba(6,182,212,.20), transparent 70%);
}
.tesat-hero__inner {
    position: relative;   /* 빛 위로 */
}
.tesat-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    font-size: 14px;
    color: rgba(255,255,255,.72);
    letter-spacing: -.03em;
}
/* 별표와 '국내 1호' 만 밝게 — 이 알약에서 먼저 읽혀야 할 말이다.
   나머지(무슨 시험인지·누가 주관하는지)는 그 말을 받쳐 주는 자리라 한 톤 낮춘다 */
.tesat-hero__eyebrow svg {
    flex: none;
    color: #67E8F9;
}
.tesat-hero__eyebrow b {
    font-weight: 700;
    color: var(--white);
}
.tesat-hero__title {
    margin-top: 26px;
    font-family: var(--font-title);
    font-size: 52px;
    font-weight: 900;
    line-height: 1.28;
    color: var(--white);
    letter-spacing: -.045em;
}
/* 둘째 줄만 그라데이션으로 — 첫 줄이 '무엇을' 이고 둘째 줄이 '얼마만큼' 이다.
   두 줄이 같은 흰색이면 넉 줄짜리 덩어리로 읽혀 어느 쪽도 서지 않는다.
   색은 서브 타이틀 밴드(.sub-visual)의 그것을 어두운 판에 맞게 밝힌 값이다.
   ⚠ 글자에 배경을 오려 넣는 방법이라 color 는 반드시 transparent 여야 한다 */
.tesat-hero__title span {
    background: linear-gradient(100deg, #A5B4FC 0%, #67E8F9 52%, #C4B5FD 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tesat-hero__desc {
    margin-top: 22px;
    /* 한 줄이 길면 눈이 다음 줄 첫 글자를 못 찾는다 — 가운데 정렬일수록 그렇다 */
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    line-height: 28px;
    color: rgba(255,255,255,.76);
    letter-spacing: -.03em;
}
/* 숫자 세 칸 — 20강 · 851분 · 2단계. 히어로 안에 두어
   "얼마짜리 강의인가" 가 첫 화면에서 끝나게 한다.

   석 장을 나란히 두는 대신 부챗살처럼 겹쳐 편다. 가운데 장이 곧추서서 위로
   솟고 양옆이 조금 눕는 모양인데, 셋을 같은 무게로 늘어놓으면 어느 것을
   먼저 봐야 할지 알 수 없기 때문이다. 851분(총 강의 시간)이 이 상품에서
   가장 큰 숫자라 가운데에 두고, 신청 단추가 그 위에 걸린다.

   차례(nth-child)로 잡은 것은 이 세 칸이 고정된 세 값이기 때문이다 —
   늘거나 줄 목록이면 클래스를 따로 줘야 한다.
   아래(flex-end)를 맞추어 가운데 장만 위로 솟게 한다 */
/* 기울이지도 겹치지도 않는다 — 같은 크기의 카드 셋이 같은 간격으로 한 줄에
   선다. 돌려 세우거나 겹치면 어느 한 장이 앞에 서게 되는데, 셋 다 이 상품을
   재는 같은 값어치의 숫자라 앞뒤를 만들 이유가 없다.
   높이를 맞춰(stretch) 세 장의 아래 모서리가 한 선에 떨어지게 한다 */
.tesat-stat {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
    margin-top: 46px;
}
/* 석 장 모두 색을 가진다. 크기·여백·테두리·그림자가 전부 같고 색만 다르다 —
   셋 다 이 상품을 재는 같은 값어치의 숫자라, 하나만 칠하면 나머지 둘은
   그 카드의 그림자처럼 죽어 보인다.

   색은 서브 타이틀 밴드(.sub-visual)의 인디고 → 블루·시안 → 바이올렛을
   셋으로 끊은 것이다. 서로 다르지만 한 줄에서 나온 색이라 따로 놀지 않는다.
   흰 글자를 얹는 자리라 진하기를 맞춰 두었다 — 카드 위쪽(작은 글자 자리)은
   어느 카드든 흰 글자와 5:1 을 넘긴다.

   모서리는 다른 곳(--r-card 12px)보다 크게 굴린다 — 겹쳐 세운 카드는
   모서리가 둥글수록 앞뒤가 또렷하게 갈린다.
   위에서 아래로 옅어지는 흰빛 한 겹은 위쪽 모서리에 빛이 걸린 것처럼
   보이게 하는 것이다(색 한 겹만이면 종이처럼 납작하다) */
.tesat-stat__item {
    /* 폭을 못박는다 — 늘어나는 칸이면 돌려 세웠을 때 셋의 각이 달라진다 */
    flex: none;
    width: 232px;
    min-height: 260px;
    /* 이름표는 왼쪽 위 구석, 숫자는 그 아래 남은 자리를 다 쓰고 한가운데 선다.
       숫자가 이 카드의 그림이다 — 작게 두면 색만 칠한 빈 판이 된다 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    /* 히어로는 가운데 정렬이지만 카드 안은 왼쪽으로 세운다 */
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
        var(--card-face);
    box-shadow: 0 26px 54px rgba(0,0,0,.55);
}
/* 색만 다르다. 크기·여백·테두리·그림자는 셋이 전부 같다 */
.tesat-stat__item:nth-child(1) {
    --card-face: linear-gradient(155deg, #4F46E5 0%, #6366F1 100%);
}
.tesat-stat__item:nth-child(2) {
    --card-face: linear-gradient(155deg, #2563EB 0%, #0891B2 100%);
}
.tesat-stat__item:nth-child(3) {
    --card-face: linear-gradient(155deg, #7C3AED 0%, #9061F9 100%);
}
/* 이름표는 카드 위에 얹힌 작은 알약이다. 그냥 글자로 두면 색이 칠해진 판에
   섞여 읽히지 않는다 — 뒤에 먹빛을 한 겹 깔아 어느 색 카드에서든 같은 만큼
   또렷하다(카드마다 글자색을 따로 잡지 않아도 된다) */
.tesat-stat dt {
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(10,11,16,.34);
    font-size: 12px;
    color: var(--white);
    letter-spacing: -.03em;
    white-space: nowrap;
}
/* 남은 세로를 전부 받아(flex:1) 그 안의 한가운데에 놓는다.
   grid + place-content 를 쓰는 것은 숫자와 단위가 한 줄로 붙어 있어야 하기
   때문이다 — flex 로 하면 둘이 따로 떨어져 가운데 정렬된다 */
.tesat-stat dd {
    flex: 1;
    align-self: stretch;
    display: grid;
    place-content: center;
    margin-top: 0;
    font-family: var(--font-num);
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    text-align: center;
    letter-spacing: -.04em;
}
/* 단위는 숫자보다 작게 — 숫자가 먼저 읽혀야 한다 */
.tesat-stat dd span {
    margin-left: 3px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    color: rgba(255,255,255,.92);
    letter-spacing: -.03em;
}

/* ------------------------------------------------------------
   구획 — 제목 + 부제, 아래 구분선
   (회사소개 · 나의강의실과 같은 어법이다)
   ------------------------------------------------------------ */
/* 구획 사이는 여백(margin)이 아니라 안쪽 여백(padding)으로 벌린다 —
   배경을 까는 구획이 있어서다. margin 으로 벌리면 색이 그 사이에서 끊긴다 */
.tesat-sec {
    padding: 52px 0;
}
/* 배경을 까는 구획 — 위아래와 확실히 갈린다. 안쪽 여백은 조금 더 준다,
   색이 깔린 띠는 같은 여백이어도 좁아 보인다 */
.tesat-sec--surf {
    padding: 76px 0;
    background: var(--surf);
}
.tesat-sec__head {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.tesat-sec__title {
    font-family: var(--font-title);
    font-size: 26px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
}
.tesat-sec__desc {
    margin-top: 10px;
    font-size: 16px;
    color: var(--body);
    letter-spacing: -.03em;
}

/* ------------------------------------------------------------
   TESAT 이란? — 3열 카드
   ------------------------------------------------------------ */
.tesat-about {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.tesat-about__item {
    padding: 32px 30px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    background: var(--white);
}
.tesat-about__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--acc-tint);
    color: var(--acc);
}
.tesat-about__title {
    margin-top: 22px;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
}
.tesat-about__desc {
    margin-top: 12px;
    font-size: 15px;
    line-height: 25px;
    color: var(--mute);
    letter-spacing: -.03em;
}

/* ------------------------------------------------------------
   커리큘럼 — 카드는 수강신청 목록의 .lec-card 를 그대로 쓴다.
   여기서는 두 장뿐이라 3열 그리드(.lec-list) 대신 가운데로 모은다
   ------------------------------------------------------------ */
/* 이 페이지에만 카드가 둘이라 1200 을 반씩 나눠 갖는다 (수강신청은 390 3열).
   카드 안쪽 구조는 .lec-card 그대로라 폭만 달라진다 */
.tesat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}
/* 수강신청에서는 카드를 눌러 고르지만 여기서는 고를 것이 없다.
   손가락 커서를 그대로 두면 카드 전체가 눌리는 줄 알고 헛클릭하게 된다 */
.tesat-list .lec-card {
    cursor: default;
}
/* 과정 카드의 발치는 금액 자리다. 이 페이지에는 금액이 없어
   그 자리에 강의 수를 넣는다 — 발치가 비면 카드가 허전해 보인다 */
.tesat-list .lec-card__foot .lec-card__meta {
    font-size: 15px;
    color: var(--mute);
    letter-spacing: -.04em;
}

/* 팝업 안 강의 목록 — 번호 + 제목 한 줄씩.
   열두 줄이라 화면이 낮으면 넘친다. 목록만 스크롤되게 막아 둔다 */
.tesat-modal__step {
    display: flex;
    justify-content: center;
}
.tesat-curri {
    max-height: 44vh;
    margin-top: 22px;
    overflow-y: auto;
    border-top: 1px solid var(--line-card);
    text-align: left;
}
.tesat-curri__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line-card);
    font-size: 15px;
    color: var(--body);
    letter-spacing: -.03em;
}
/* 번호는 폭을 고정해 제목 시작점을 맞춘다 — 한 자리와 두 자리가 섞여 있다 */
.tesat-curri__no {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--surf);
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 700;
    color: var(--mute);
    letter-spacing: 0;
}
.tesat-curri__name {
    flex: 1;
    min-width: 0;
}

/* ------------------------------------------------------------
   수강 시작 방법 — 4열
   ------------------------------------------------------------ */
.tesat-step {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 다른 곳(15)보다 넓게 벌린다 — 이 사이에 꺾쇠가 들어간다 */
    gap: 30px;
}
/* 사이트 그라데이션(.sub-visual 의 그 색)을 두른 테두리가 01 → 02 → 03 → 04 →
   다시 01 로 한 칸씩 옮겨 다닌다. 네 칸이 '나열' 이 아니라 '차례' 라는 것을,
   사이의 꺾쇠와 함께 한 번 더 말해 주는 자리다.
   넷을 한꺼번에 두르면 그냥 장식이 된다 — 한 번에 한 칸만 켜야 순서가 보인다.

   켜진 칸은 바탕도 회색(--surf)에서 흰색으로 함께 바뀐다. 테두리만 바꾸면
   2px 선 하나에 기대게 되는데, 지금 어느 단계를 말하는지는 멀리서도 읽혀야 한다.
   흰 칸이 회색 칸들 사이에서 한 걸음 앞으로 나온 것처럼 보인다.

   테두리 색에는 그라데이션을 넣을 수 없다. 그래서 칸보다 2px 큰 판을 그라데이션으로
   칠하고 가운데를 마스크로 도려내 가장자리 2px 만 남긴다
   (mask 두 장을 exclude 로 겹치는 것이 '도려내기' 다).

   판은 칸 바깥(inset:-2px)에 있어서 켜지고 꺼져도 칸 크기가 그대로다 —
   테두리를 실제로 넣었다 뺐다 하면 글자가 2px 씩 밀린다 */
.tesat-step__item {
    position: relative;
    padding: 30px 26px;
    border-radius: var(--r-card);
    background: var(--surf);
    animation: tesat-step-lit 8s linear infinite;
}
.tesat-step__item::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: calc(var(--r-card) + 2px);
    background: linear-gradient(100deg, #4F46E5 0%, #3B82F6 34%, #06B6D4 62%, #8B5CF6 100%) border-box;
    /* ⚠ 단축 속성이 composite 를 되돌리므로 둘을 반드시 뒤에 적는다 */
    -webkit-mask: linear-gradient(#000 0 0) padding-box,
                  linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    animation: tesat-step-on 8s linear infinite;
}
/* 한 바퀴 8초, 한 칸이 2초씩 맡는다.
   꺼지는 구간(25%~28%)과 다음 칸이 켜지는 구간(그 칸의 0%~3% = 같은 시각)을
   맞물려 두었다 — 딱 끊어 넘기면 넷이 모두 꺼진 순간이 생겨 흐름이 끊긴다 */
@keyframes tesat-step-on {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    25%  { opacity: 1; }
    28%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes tesat-step-lit {
    0%   { background-color: var(--surf); }
    3%   { background-color: var(--white); }
    25%  { background-color: var(--white); }
    28%  { background-color: var(--surf); }
    100% { background-color: var(--surf); }
}
/* 음수라서 기다리지 않고 각자의 차례에서 시작한다 (-6s = 2초 뒤가 제 차례).
   칸과 그 판이 같은 값이어야 테두리와 바탕이 함께 켜진다 */
.tesat-step__item:nth-child(2),
.tesat-step__item:nth-child(2)::before { animation-delay: -6s; }
.tesat-step__item:nth-child(3),
.tesat-step__item:nth-child(3)::before { animation-delay: -4s; }
.tesat-step__item:nth-child(4),
.tesat-step__item:nth-child(4)::before { animation-delay: -2s; }
/* 움직임을 줄이도록 설정한 사람에게는 넷을 한꺼번에 켜 둔다 —
   차례를 시간으로 말할 수 없으니 테두리만 남기고 바탕은 회색 그대로 둔다 */
@media (prefers-reduced-motion: reduce) {
    .tesat-step__item,
    .tesat-step__item::before {
        animation: none;
    }
    .tesat-step__item::before {
        opacity: 1;
    }
}
/* 칸과 칸 사이의 꺾쇠 — 네 칸이 그냥 나열이 아니라 '순서'라는 걸 알려준다.
   빈자리 한가운데 놓는다(간격 30 → 가운데 15 → 제 폭 절반 5.5 만큼 더 당긴다).
   마지막 칸 뒤에는 갈 곳이 없으니 붙이지 않는다 */
.tesat-step__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -21px;
    width: 11px;
    height: 11px;
    border-top: 2px solid #C9CDD6;
    border-right: 2px solid #C9CDD6;
    border-radius: 1px;
    transform: translateY(-50%) rotate(45deg);
}
/* 번호는 왼쪽, 아이콘은 칸의 오른쪽 끝. 한 줄에 둘을 함께 둔다 —
   번호만으로는 '무엇을 하는 단계인가' 를 말하지 못하고, 아이콘만으로는
   '몇 번째인가' 를 말하지 못한다.
   번호를 왼쪽에 세우는 것은 아래 이름·설명과 같은 줄에서 시작해 왼쪽
   모서리가 하나로 떨어지기 때문이고, 아이콘을 반대편 끝으로 보내면
   네 칸이 같은 자리에 같은 크기로 놓여 눈이 가로로 훑기 좋다 */
.tesat-step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* 칸 바탕이 회색(--surf)이라 아이콘 판은 흰색으로 띄운다.
   'TESAT 이란?' 카드(.tesat-about__ico)는 반대다 — 거기는 흰 바탕 위라
   연한 남색 판을 깐다. 판 색만 다르고 크기·모서리·아이콘 색은 같은 계열이다 */
.tesat-step__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    /* 칸 바탕이 회색과 흰색을 오간다 — 흰 판이면 켜진 칸에서 사라진다.
       'TESAT 이란?' 카드(.tesat-about__ico)와 같은 연한 남색이면 둘 다에서 산다 */
    background: var(--acc-tint);
    color: var(--acc);
}
.tesat-step__no {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: 0;
}
.tesat-step__name {
    margin-top: 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
}
.tesat-step__desc {
    margin-top: 10px;
    font-size: 15px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: -.03em;
}

/* ------------------------------------------------------------
   신청 트레이 — 수강신청의 선택 과정 바(.lec-tray)와 같은 어법이다.
   스크롤 중에는 화면 아래에서 20px 띄워 붙어 있다가, 제자리까지
   내려오면 그 자리에 앉는다. position:sticky + bottom 조합이 그 동작
   그대로다 → 조상에 overflow:hidden/auto 가 생기면 sticky 가 죽으니 주의.
   떠 있는 동안만 그림자를 세게 하는 판정은 script.js(initStickyTray)가 한다
   ------------------------------------------------------------ */
/* sticky 는 부모(포함 블록) 안에서만 움직인다. 구획 안에 넣으면 그 구획
   높이가 곧 제 높이라 움직일 자리가 없어 붙박이가 된다 — 그래서 이 감싸개는
   <main> 의 직계 자식이어야 한다 (HTML 의 주석과 짝) */
.tesat-tray {
    position: sticky;
    bottom: 20px;
    z-index: 20;
    margin: 48px 0 100px;
}
.tesat-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 30px;
    border-radius: 16px;
    /* 히어로와 같은 검정 판이다. 한때 반투명 유리판(backdrop-filter)으로 두어
       봤는데, 유리는 뒤가 비칠수록 유리다워지고 이 바는 읽고 눌러야 하는
       곳이라 둘이 정면으로 부딪혔다 — 흰 본문 위를 지날 때마다 뿌예졌다.
       판은 불투명하게 두고, 대신 히어로 바탕에 쓴 것과 같은 원형 빛을
       두 덩어리 얹는다. 바 모서리에서 잘려 나가 '살짝 걸친' 모양이 된다
       (배경은 border-radius 를 따라 잘리므로 overflow 를 걸 필요가 없다) */
    background-color: #0A0B10;
    background-image:
        radial-gradient(circle 210px at 5% 150%, rgba(99,102,241,.55), transparent 70%),
        radial-gradient(circle 180px at 68% -70%, rgba(124,58,237,.38), transparent 72%);
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    /* 읽고 누르는 영역이라 글자를 끌 일이 없다 (트레이와 같은 처리) */
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow .2s;
}
/* 떠 있는 동안만 그림자를 세게 — 본문 위에 겹쳐 있다는 걸 알려준다.
   판정은 감싸개(sticky 를 가진 쪽)가 받고, 그림자는 안쪽 바가 낸다 */
.tesat-tray.is-stuck .tesat-cta {
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.tesat-cta__text {
    font-size: 17px;
    color: rgba(255,255,255,.68);
    letter-spacing: -.03em;
}
.tesat-cta__text b {
    font-size: 19px;
    font-weight: 700;
    color: var(--white);
}
.tesat-cta__text b::before {
    content: "·";
    margin: 0 10px;
    font-weight: 400;
    opacity: .5;
}
.tesat-cta__btn {
    flex: none;
    width: 220px;
    height: 52px;
    font-size: 16px;
    border-radius: var(--r-btn);
}

/* ------------------------------------------------------------
   반응형 — 분기점은 다른 서브 페이지와 같은 1239 / 1023 / 767
   ------------------------------------------------------------ */
@media (max-width: 1239px) {
    .tesat-hero {
        padding: 76px 0 70px;
    }
    .tesat-hero__title {
        font-size: 42px;
    }
}
@media (max-width: 1023px) {
    .tesat-hero {
        padding: 60px 0 56px;
    }
    .tesat-hero__title {
        font-size: 33px;
    }
    .tesat-hero__desc {
        margin-top: 18px;
        font-size: 16px;
        line-height: 26px;
    }
    /* 카드 배치는 그대로 한 줄이다 — 폭만 좁아지니 카드도 같이 줄인다.
       폭을 못박아 두면(232) 768 에서 세 장 + 간격이 4px 넘친다 */
    .tesat-stat {
        margin-top: 40px;
        gap: 14px;
    }
    .tesat-stat__item {
        flex: 1;
        width: auto;
        max-width: 232px;
        min-height: 220px;
    }
    /* 카드가 남아 있는 폭이므로 숫자도 커야 한다 — 여기서 28px 로 줄이면
       카드는 그대로인데 글자만 작아져 가운데가 텅 빈다 */
    .tesat-stat dd {
        font-size: 64px;
    }
    .tesat-stat dd span {
        font-size: 19px;
    }
    .tesat-sec {
        padding: 40px 0;
    }
    .tesat-sec--surf {
        padding: 60px 0;
    }
    .tesat-sec__title {
        font-size: 23px;
    }
    /* 4열(수강 시작 방법)은 이 폭에서 한 칸이 170px 아래로 좁아져 글자가
       상자를 넘긴다 — 2열로 접는다.
       3열('TESAT이란?')은 그대로 둔다. 한 칸이 232px 이라 아직 읽히고,
       2열로 접으면 셋 중 하나만 아랫줄에 홀로 남아 빈 칸이 생긴다 */
    .tesat-step {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 3열을 유지하는 대신 칸이 좁아진 만큼 안쪽 여백을 줄인다 */
    .tesat-about__item {
        padding: 26px 22px;
    }
    /* 2열이 되면 두 번째 칸은 줄 끝이다 — 그 뒤의 꺾쇠는 다음 줄을 가리키게
       되어 방향이 거짓말이 된다. 줄 끝 칸에서는 뗀다 */
    .tesat-step__item:nth-child(2n)::after {
        content: none;
    }
    .tesat-tray {
        margin: 36px 0 76px;
    }
    .tesat-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
    }
    .tesat-cta__btn {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .tesat-hero {
        padding: 44px 0 40px;
    }
    .tesat-hero__eyebrow {
        height: auto;
        padding: 7px 14px;
        font-size: 13px;
        line-height: 18px;
    }
    .tesat-hero__title {
        margin-top: 20px;
        font-size: 26px;
        line-height: 1.38;
    }
    .tesat-hero__desc {
        font-size: 15px;
        line-height: 24px;
    }
    /* 숫자 세 칸을 가로로 두면 한 칸이 100px 아래로 좁아져 단위가 접힌다.
       한 줄에 한 칸이면 부챗살로 펼 자리도 없다 — 눕힌 것도 겹친 것도 되돌린다 */
    .tesat-stat {
        display: block;
        margin-top: 32px;
    }
    .tesat-stat__item,
    .tesat-stat__item:nth-child(1),
    .tesat-stat__item:nth-child(2),
    .tesat-stat__item:nth-child(3) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: auto;
        min-height: 0;
        max-width: none;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
        padding: 14px 18px;
        transform: none;
        box-shadow: none;
    }
    .tesat-stat__item + .tesat-stat__item {
        margin-top: 8px;
    }
    .tesat-stat dd {
        flex: none;
        align-self: auto;
        display: block;
        font-size: 24px;
    }
    .tesat-stat dd span {
        font-size: 16px;
    }
    .tesat-sec {
        padding: 30px 0;
    }
    .tesat-sec--surf {
        padding: 44px 0;
    }
    .tesat-sec__head {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    .tesat-sec__title {
        font-size: 20px;
    }
    .tesat-sec__desc {
        margin-top: 8px;
        font-size: 15px;
    }
    .tesat-about,
    .tesat-list,
    .tesat-step {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .tesat-about__item {
        padding: 24px 22px;
    }
    .tesat-about__ico {
        width: 46px;
        height: 46px;
    }
    .tesat-about__title {
        margin-top: 18px;
        font-size: 17px;
    }
    .tesat-step__item {
        padding: 22px 20px;
    }
    /* 한 줄에 한 칸이라 다시 이어진다 — 꺾쇠를 되살리고 아래를 가리키게 눕힌다 */
    .tesat-step {
        gap: 26px;
    }
    .tesat-step__item:nth-child(2n):not(:last-child)::after {
        content: "";
    }
    .tesat-step__item:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -19px;
        left: calc(50% - 5.5px);
        transform: rotate(135deg);
    }
    .tesat-step__name {
        font-size: 17px;
    }
    .tesat-tray {
        bottom: 12px;
        margin: 26px 0 56px;
    }
    .tesat-cta {
        gap: 14px;
        padding: 18px 20px;
    }
    .tesat-cta__text {
        font-size: 15px;
    }
    .tesat-cta__text b {
        display: block;
        margin-top: 4px;
        font-size: 17px;
    }
    /* 줄이 바뀌었으니 가운뎃점은 필요 없다 */
    .tesat-cta__text b::before {
        content: none;
    }
    .tesat-cta__btn {
        height: 50px;
    }
    .tesat-curri {
        max-height: 40vh;
    }
}

/* ############################################################
   [12] 결제하기  ·  settlement/order.html  ·  .order-*

   장바구니 다음, 결제창으로 넘어가기 직전의 화면이다.
   왼쪽에 확인할 것(주문 과정 · 주문자 정보 · 결제수단 · 환불 규정)을 쌓고,
   오른쪽에 금액과 결제 단추를 붙여 둔다. 결제수단을 고르느라 아래로
   내려가도 얼마를 내는지는 계속 보여야 해서, 과정 상세의 구매 박스
   (.view-layout / .view-buy)와 같은 어법을 그대로 가져왔다.

   여기서는 아무것도 고를 수 없다 — 과정을 빼거나 쿠폰을 바꾸는 일은
   장바구니에서 끝낸다. 결제 직전 화면에서 금액이 다시 움직이면
   방금 확인한 숫자를 믿을 수 없게 된다.
   ############################################################ */
.order-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 50px;
    /* 결제 박스가 칸 높이만큼 늘어나면 sticky 가 붙을 자리가 없다.
       다만 칸(그리드 영역) 자체는 왼쪽 본문만큼 높은 상태로 남아
       그만큼이 sticky 가 미끄러질 거리가 된다 */
    align-items: start;
}
/* 1fr 열의 기본 최소 너비는 '내용 크기'라, 안 끊기는 긴 글자가 하나라도
   있으면 열이 밀려 결제 박스를 침범한다. 0 으로 낮춰 막는다 */
.order-main {
    min-width: 0;
}

/* ---------- 구획 ---------- */
/* 구획 사이 80px — 수험정보(.exam-block)와 같은 간격이다.
   제목 아래 구분선을 얙게 두었으니 구획을 끊는 일은 여백이 맡는다 —
   선도 얙고 간격도 좁으면 네 구획이 한 덩어리로 이어진다 */
.order-sec + .order-sec {
    margin-top: 80px;
}
/* 제목과 본문 사이는 수험정보의 블록 제목(.exam-block__title)과 같게 둔다 —
   얙은 구분선 하나에 24px 을 띄운다. 2px 잉크 밑줄은 표의 머리행처럼
   '여기서부터 자료가 시작된다' 로 읽혀서, 이처럼 줄글·폼이 오는 블록에서는
   제목보다 선이 더 세게 보인다 */
.order-sec__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.order-sec__count {
    font-size: 15px;
    font-weight: 400;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.order-sec__count b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--ink);
}
.order-sec__hint {
    margin-top: 12px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.order-sec__hint a {
    color: var(--acc);
    text-decoration: underline;
}

/* ---------- 주문 과정 ----------
   장바구니의 과정 칸(.cart-item)과 같은 정보를 담지만 훨씬 낮게 쓴다 —
   여기서는 고르거나 지울 수 없어서 체크박스·삭제 단추가 없고, 남는 것은
   '무엇을 얼마에 사는가' 뿐이다.

   그래도 칸마다 테두리를 두른다. 줄만 그어 목록으로 두면, 제목 아래
   구분선과 24px 여백 때문에 첫 과정 위만 넓게 떨어져, 과정끼리의 간격과
   어긋난다. 테두리를 두르면 네 변이 닫혀 간격이 고르게 보인다.
   대신 hover 나 커서 변화는 주지 않는다 — 누를 수 있는 칸으로 보이면 안 된다. */
.order-goods__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}
.order-goods__item + .order-goods__item {
    margin-top: 12px;
}
/* hidden 이 확실히 먹도록. hidden 의 display:none 은 브라우저 기본값이라,
   CSS 에서 display 를 준 요소(이 칸은 flex)에서는 밀린다 — 감쿼도 그대로 보인다
   (장바구니의 .cart-foot[hidden] 과 같은 이유) */
.order-goods__item[hidden] {
    display: none;
}
.order-goods__info {
    min-width: 0;
}
.order-goods__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.order-goods__name {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -.04em;
}
.order-goods__meta {
    margin-top: 6px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
/* 금액 — 오른쪽에 세로로 쌓는다. 쿠폰을 쓴 과정만 취소선과 태그가 붙는다 */
.order-goods__price {
    flex: none;
    text-align: right;
}
.order-goods__price s {
    font-family: var(--font-num);
    font-size: 14px;
    color: var(--price-old);
    /* 두께를 1px 로 고정한다 — 브라우저가 글자 크기에 맞춰 굵게 그으면
       정가가 결제가보다 눈에 띈다 (.price__old 와 같은 이유) */
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.order-goods__price p {
    margin-top: 4px;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.order-goods__price b {
    font-family: var(--font-num);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
}
/* 쿠폰 태그 — 할인 알약(.price__off)과 같은 붉은 계열이다.
   금액이 왜 줄었는지 이 줄 하나로 끝난다 */
.order-goods__tag {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--sale-tint);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--sale);
    letter-spacing: var(--ls-base);
}

/* 더보기 — 모양은 공용 .more 다. 과정 칸과의 간격만 여기서 준다 */
.order-goods + .more {
    margin-top: 12px;
    border-radius: var(--r-card);
}

/* ---------- 배송지 입력 ----------
   칸 생김새는 게시판 글쓰기 폼(.bbs-form)을 그대로 쓴다.
   윗변이 이미 .order-sec__title 의 2px 잉크라 폼 쪽 윗변은 지운다 */
.order-main .bbs-form {
    border-top: 0;
}
/* 반송되면 착불이 된다는, 돈이 걸린 안내다. 그래서 줄글로 흘리지 않고
   한 덩어리로 띄운다. 바탕도 회색(서피스)이 아니라 할인 알약과 같은
   얙은 붉은색(--sale-tint)으로 깔았다 — 회색은 '거듭다' 로 읽혀서
   지나치기 쉽고, 이 글은 안 읽으면 배송비를 물게 되는 안내다.
   붉게 두는 것은 첫 문장뿐이다 — 전부 붉히면 어디가 요점인지 도로 안 보인다 */
.order-notice {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: var(--sale-tint);
}
/* 본문을 --body 로 둘 수 없다. #757575 는 흰 바탕에서도 4.61:1 로 거의
   걸쳐 있어서, 바탕에 색을 깔면 4.07:1 로 내려가 기준(4.5:1)을 못 넘는다.
   반드시 읽혀야 하는 글이니 한 단계 진한 --ink 로 올린다 */
.order-notice__text {
    font-size: 15px;
    line-height: 25px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 굵기는 500 — 붉은색만으로 이미 구분된다.
   700 까지 가면 바탕·색·굵기 셋이 한꺼번에 소리를 높인다 */
.order-notice__em {
    font-weight: 500;
    color: var(--sale);
}
/* 우편번호 — 칸과 검색 단추가 한 줄.
   칸은 검색으로만 채우므로 좁게 둔다 — 다섯 자리면 끝이라
   더 넓히면 직접 칠 수 있는 칸처럼 보인다 */
.order-zip {
    display: flex;
    align-items: center;
    gap: 8px;
}
.order-zip .bbs-form__input {
    width: 140px;
}
.order-zip .bbs-form__input[readonly] {
    background: var(--surf);
    cursor: default;
}
.order-zip__btn {
    flex: none;
    height: 48px;
    padding: 0 18px;
    font-size: 14px;
}
/* 검색창이 들어오는 자리. 높이를 고정해 둔다 — 다음 우편번호 서비스는
   부모 높이가 0 이면 자기도 0 으로 그려서 팝업이 빈 칸처럼 보인다.
   팝업 안쪽은 가운데 정렬(.modal__box)이라 검색창만 다시 왼쪽으로 돌린다 */
.order-zip__embed {
    width: 100%;
    height: 460px;
    margin-top: 18px;
    text-align: left;
}
.order-zip__fail {
    padding: 60px 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-align: center;
}
/* 검색으로만 채우는 주소 칸도 같은 바탕으로 — 둔 칸이 짝이라는 표시다 */
.order-main .bbs-form__input[readonly] {
    background: var(--surf);
}

/* ---------- 결제수단 ----------
   네 칸을 나란히 둔다. 고른 칸만 테두리와 글자가 진해진다 —
   채우지 않는 이유는 아래 결제 단추가 이 화면의 유일한 솔리드여야 해서다.
   :has() 로 고른 칸을 알아내므로 JS 가 클래스를 붙일 필요가 없다 */
.order-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}
.order-pay__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 62px;
    padding: 0 16px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s;
}
.order-pay__opt:hover {
    border-color: var(--hair-hover);
}
.order-pay__opt:has(.chk:checked) {
    border-color: var(--acc);
}
.order-pay__name {
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.order-pay__opt:has(.chk:checked) .order-pay__name {
    font-weight: 700;
    color: var(--ink);
}
/* 고른 수단의 안내 — 화면이 흔들리지 않도록 늘 같은 자리에 온다 */
.order-pay__panel {
    margin-top: 14px;
    padding: 20px 22px;
    border-radius: var(--r-card);
    background: var(--surf);
}
.order-pay__panel[hidden] {
    display: none;
}
.order-pay__text {
    font-size: 15px;
    line-height: 24px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.order-pay__text b {
    font-weight: 700;
    color: var(--ink);
}
/* 가상계좌만 이 화면에서 더 받는다 — 은행과 입금자명 */
.order-vbank {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.order-vbank__row {
    flex: 1 1 0;
    min-width: 0;
}
.order-vbank__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}

/* ---------- 환불 규정 ----------
   공용 안내 목록(.list--dot)을 그대로 쓰되 한 단계 낮춘다.
   여덟 줄이 넘어가는 규정이라 16px 그대로는 본문보다 무거워진다 —
   읽혀야 하지만 이 화면의 주인공은 아니다 */
.order-rule {
    margin-top: 18px;
}
.order-rule > li {
    font-size: 15px;
    line-height: 26px;
}
.order-rule > li + li {
    margin-top: 2px;
}
.order-rule a {
    color: var(--acc);
    text-decoration: underline;
}

/* ---------- 결제 금액 (오른쪽 박스) ---------- */
/* 테두리는 가장 진한 --ink 다. 여러 칸이 줄마다 헤어라인으로 나뉘는
   화면에서 이 박스도 같은 연한 선을 두르면 '여러 칸 중 하나' 로 섞인다.
   실제로 돈을 내는 칸이라 선 하나만으로 맨 앞으로 끌어낸다 —
   제목줄의 2px 잉크 밑줄과 같은 어법이다 */
.order-sum {
    position: sticky;
    top: calc(var(--header-fix-h) + 20px);
    padding: 25px 23px 23px;
    /* 2px — 어느 높이에서든 이 박스가 먼저 보여야 한다.
       안쪽 여백은 1px 씩 줄여 칸 밖의 크기를 그대로 둔다 */
    border: 2px solid var(--ink);
    border-radius: var(--r-card);
    background: var(--white);
}
.order-sum__title {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
}
.order-sum__list {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
}
.order-sum__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.order-sum__row + .order-sum__row {
    margin-top: 10px;
}
.order-sum__row b {
    font-family: var(--font-num);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
}
/* 깎인 줄은 할인 알약과 같은 붉은 계열로 — 더한 것이 아니라 뺀 것이다 */
.order-sum__minus,
.order-sum__minus b {
    color: var(--sale);
}
.order-sum__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.order-sum__total b {
    font-family: var(--font-num);
    font-size: 26px;
    color: var(--acc);
    letter-spacing: -.03em;
}
.order-sum__total strong {
    font-weight: 700;
}

/* ---------- 동의 ----------
   결제 단추 바로 위에 둔다. 아래에 두면 단추를 누른 뒤에야 보게 되고,
   위 본문에 섞어 두면 스크롤을 올려 찾아야 한다 */
.order-agree {
    padding: 16px 0 18px;
    border-top: 1px solid var(--line-soft);
}
.order-agree__all {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.order-agree__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.order-agree__item span {
    min-width: 0;
}
.order-agree__more {
    margin-left: auto;
    flex: none;
    font-size: 13px;
    color: var(--mute);
    text-decoration: underline;
}
.order-agree__more:hover {
    color: var(--ink);
}

/* 필수 동의가 다 차기 전에는 눌리지 않는다.
   감추지 않고 흐리게만 둔다 — 단추가 사라지면 무엇을 해야 할지 알 수 없다 */
.order-sum__btn {
    width: 100%;
    height: 58px;
    font-size: 17px;
}
.order-sum__btn:disabled {
    background: var(--hair);
    color: var(--white);
    cursor: not-allowed;
}
.order-sum__back {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
    text-align: center;
    text-decoration: underline;
}
.order-sum__back:hover {
    color: var(--body);
}

/* ---------- 반응형 ---------- */
@media (max-width: 1239px) {
    /* 결제 박스를 줄이는 대신 본문을 좁힌다 — 금액과 단추는 더 못 줄인다 */
    .order-layout {
        gap: 30px;
    }
}
@media (max-width: 1023px) {
    /* 한 단으로 내린다. 결제 박스는 본문을 다 읽은 뒤 마지막에 온다 */
    .order-layout {
        display: block;
    }
    .order-sum {
        position: static;
        margin-top: 44px;
    }
}
@media (max-width: 767px) {
    .order-sec__title {
        font-size: 18px;
    }
    /* 과정명과 금액을 한 줄에 두면 이름이 두 글자씩 끊긴다 — 금액을 아랫줄로
       (장바구니의 .cart-item__body 와 같은 처리) */
    .order-goods__item {
        display: block;
        padding: 16px 18px 18px;
    }
    .order-goods__price {
        margin-top: 12px;
        text-align: left;
    }
    .order-goods__price s {
        margin-right: 6px;
    }
    .order-goods__price p {
        display: inline;
    }
    .order-goods__tag {
        display: block;
        width: fit-content;
    }
    /* 세 칸을 나란히 두기엔 좁다 — '가상계좌 (무통장입금)' 가 두 줄로 접힌다 */
    .order-pay {
        grid-template-columns: 1fr;
    }
    .order-zip .bbs-form__input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    /* 은행과 입금자명을 나란히 두기엔 좁다 */
    .order-vbank {
        display: block;
    }
    .order-vbank__row + .order-vbank__row {
        margin-top: 12px;
    }
    .order-sum__total b {
        font-size: 22px;
    }
}

/* ############################################################
   [13] 결제완료  ·  settlement/done.html  ·  .done-*

   결제하기 다음 화면. 파는 일은 끝났고, 여기서 할 일은 셋이다.
     1. 무슨 일이 벌어졌는지 한 문장으로 알린다      (.done-hero)
     2. 무엇을 얼마에 샀는지 남긴다 — 영수증          (.done-receipt)
     3. 다음에 어디로 갈지 길을 낸다                 (.done-act)

   접두어를 done- 으로 한 이유. 파일명대로면 complete- 인데, 그러면
   회사소개(.company-)와 앞 네 글자가 같아져 검색이 서로 섞인다.
   짧고 겹치지 않는 쪽을 골랐다 (파일명도 done.html 로 맞췄다).
   ############################################################ */

/* ------------------------------------------------------------
   카드 결제 화면 ↔ 가상계좌 화면

   같은 '결제하기' 를 눌러도 도착점이 둘이다. 카드·계좌이체는 돈이 이미
   빠져나갔지만, 가상계좌는 계좌만 발급됐을 뿐 아직 아무것도 내지 않았다.
   둘에 같은 말을 쓰면 안 된다 — "결제가 완료되었습니다" 를 읽은 사람은
   입금을 하지 않고 화면을 닫는다.

   그렇다고 페이지를 셋으로 만들면 영수증·배송지·안내가 통째로 복사돼서,
   문구 한 줄을 고칠 때마다 세 곳을 고쳐야 한다. 그래서 다른 부분만
   [data-when] 으로 표시해 두고 <body data-pay> 로 나머지를 감춘다.

   상태는 결제수단을 따라 셋이다 — card · bank(실시간 계좌이체) · vbank.
   앞의 둘은 화면이 거의 같아서 data-when="card bank" 처럼 함께 적는다
   (그래서 = 가 아니라 낱말 단위로 맞추는 ~= 를 쓴다).

   ※ 감추는 쪽만 적는다. 보이는 쪽에 display 를 지정하면 그 요소의 제 성질
      (블록·플렉스·인라인)을 여기서 정해 버리게 된다 — 지금은 span 이지만
      나중에 div 로 바뀌면 조용히 어긋난다
   ------------------------------------------------------------ */
body[data-pay="card"]  [data-when]:not([data-when~="card"]),
body[data-pay="bank"]  [data-when]:not([data-when~="bank"]),
body[data-pay="vbank"] [data-when]:not([data-when~="vbank"]) {
    display: none;
}

/* ------------------------------------------------------------
   결과 — 화면 맨 위, 가운데 한 덩어리
   ------------------------------------------------------------ */
.done-hero {
    padding: 30px 0 50px;
    text-align: center;
}
/* 초록 동그라미에 체크 하나. 글자를 읽기 전에 성패가 먼저 전해진다 */
.done-hero__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(11,191,119,.12);
    color: var(--step3);
}
/* 가상계좌는 아직 끝난 것이 아니다 — 체크(끝) 대신 시계(기다림),
   초록 대신 안내문과 같은 붉은 계열을 쓴다 */
.done-hero__mark--wait {
    background: var(--sale-tint);
    color: var(--sale);
}
.done-hero__title {
    margin-top: 22px;
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.04em;
}
.done-hero__desc {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
/* 문의는 언제나 "주문번호가 어떻게 되세요" 로 시작한다.
   영수증 안에도 있지만, 여기 한 번 더 둬서 찾지 않아도 되게 한다 */
.done-hero__no {
    display: inline-block;
    margin-top: 20px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--surf);
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.done-hero__no b {
    margin-left: 6px;
    font-weight: 700;
    color: var(--ink);
}

/* ------------------------------------------------------------
   가상계좌 안내 — 영수증보다 위에 둔다.
   이 상태에서 해야 할 일은 '입금' 하나뿐이라, 그것이 첫 번째로 읽혀야 한다
   ------------------------------------------------------------ */
.done-vbank {
    margin-bottom: 24px;
    padding: 24px 26px 26px;
    border-radius: var(--r-card);
    background: var(--sale-tint);
}
.done-vbank__title {
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.done-vbank__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
    margin-top: 16px;
}
.done-vbank__list > div {
    display: flex;
    gap: 14px;
    font-size: 15px;
    letter-spacing: var(--ls-base);
}
.done-vbank__list dt {
    flex: 0 0 68px;
    color: var(--body);
}
.done-vbank__list dd {
    color: var(--ink);
    font-weight: 500;
}
/* 계좌번호를 옮겨 적는 사람이 있다 — 한 번에 드래그되게 둔다 */
.done-vbank__list dd.num {
    user-select: all;
}
/* 계좌번호 옆에 붙는 작은 단추. 눌러 보면 글자가 '복사됨' 으로 바뀐다 —
   무언가 일어났다는 것을 알려 주지 않으면 눌렸는지 알 수 없다 (done.js) */
.done-vbank__copy {
    margin-left: 8px;
    padding: 3px 9px;
    border: 1px solid rgba(214,26,77,.32);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--sale);
    letter-spacing: var(--ls-base);
    vertical-align: 1px;
    transition: background-color .15s, border-color .15s;
}
.done-vbank__copy:hover {
    border-color: var(--sale);
    background: rgba(214,26,77,.08);
}
.done-vbank__amt b {
    font-family: var(--font-num);
    font-size: 18px;
    font-weight: 700;
    color: var(--sale);
}
.done-vbank__warn {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(214,26,77,.16);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}

/* ------------------------------------------------------------
   영수증 — 한 장으로 읽히도록 테두리 하나로 묶는다
   ------------------------------------------------------------ */
.done-receipt {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}
/* overflow:hidden 으로 잘라내던 자리다. 그 한 줄을 지운 이유는 아래
   .done-more 의 position:sticky 때문 — overflow 를 준 조상이 하나라도 있으면
   sticky 는 화면이 아니라 그 상자를 기준으로 삼아 붙지 않는다.
   대신 위아래 끝 요소가 자기 모서리를 직접 깎는다 */
.done-receipt__head {
    border-radius: var(--r-card) var(--r-card) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--line);
}
.done-receipt__title {
    font-family: var(--font-title);
    font-size: 19px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.done-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 13px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: border-color .15s, color .15s;
}
.done-print:hover {
    border-color: var(--body);
    color: var(--ink);
}

/* 주문번호 · 일시 · 결제수단 … 두 칸으로 접어 세로를 줄인다 */
.done-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px 32px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
}
.done-meta > div {
    display: flex;
    gap: 14px;
    font-size: 15px;
    letter-spacing: var(--ls-base);
}
.done-meta dt {
    flex: 0 0 68px;
    color: var(--mute);
}
.done-meta dd {
    color: var(--ink);
}
.done-meta__sub {
    color: var(--mute);
}
/* 배송지처럼 한 줄이 긴 항목은 칸을 나누지 않는다 */
.done-meta--wide {
    grid-template-columns: 1fr;
    padding: 0;
    border-bottom: 0;
}
.done-state {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(11,191,119,.12);
    font-size: 13px;
    font-weight: 500;
    color: #089A60;
    letter-spacing: var(--ls-base);
}
/* 초록(끝남)과 구별되는 색이어야 한다. 위 시계 아이콘과 같은 계열로 맞춘다 */
.done-state--wait {
    background: var(--sale-tint);
    color: var(--sale);
}

/* 산 과정 — 결제하기의 카드(.order-goods__item)와 달리 테두리를 두르지 않는다.
   거기서는 '확인하고 고르는 것' 이었지만 여기서는 이미 끝난 목록이라,
   칸마다 상자를 두르면 아직 손댈 수 있는 것처럼 보인다 */
/* 접었다 폈다 — 높이를 재서 잘라 낸다 (done.js).
   max-height 는 인라인으로 들어오므로 여기서는 값을 주지 않는다.
   transition 만 걸어 두면 그 값이 바뀔 때 알아서 부드럽게 움직인다 */
/* 세로 여백을 ul 이 아니라 li(.done-goods__item 의 padding)가 갖는다.
   ul 에 padding 이 남아 있으면 통째로 접었을 때 높이가 0 이 아니라
   그 여백만큼 남아, 빈 줄 하나가 덩그러니 생긴다 */
.done-goods {
    padding: 0 26px;
    overflow: hidden;
    transition: max-height .34s cubic-bezier(.4,0,.2,1);
}
/* 움직임을 줄여 달라고 한 사람에게는 그냥 바뀐다 (스크롤도 마찬가지 — done.js) */
@media (prefers-reduced-motion: reduce) {
    .done-goods {
        transition: none;
    }
}
.done-goods__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
}
.done-goods__item + .done-goods__item {
    border-top: 1px solid var(--line-soft);
}
.done-goods__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.done-goods__name {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -.04em;
}
.done-goods__meta {
    margin-top: 6px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.done-goods__price {
    flex: none;
    padding-top: 2px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
}
.done-goods__price b {
    font-family: var(--font-num);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
}

/* 여닫는 바 — 목록과 금액 사이를 가른다.

   결제하기의 .more 를 쓰지 않은 이유는 짜임새가 달라서다. 저기는 목록의
   끝을 막는 회색 면이라 글자가 가운데 있지만, 여기는 영수증 안의 한 줄이라
   왼쪽(하는 일)과 오른쪽(총 개수)이 양끝으로 갈라져야 한다 */
.done-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 26px;
    /* 펼친 목록을 지나는 동안 헤더 밑에 붙어 따라온다.
       스무 개를 펼쳐 놓고 한가운데에서 마음이 바뀌어도 되접을 수 있어야 한다.
       머무는 범위는 영수증 안이다 — sticky 는 제 부모 상자를 넘지 못해서,
       영수증이 끝나면 알아서 제자리로 돌아가 흘러간다.
       가릴 것이 있어야 하므로 배경은 반드시 불투명(흰색)이어야 한다 */
    position: sticky;
    top: var(--header-fix-h);
    z-index: 2;
    /* 펼쳤을 때만 아랫선이 보인다. 접혀 있으면 바로 위가 주문정보 칸의
       구획선이고 아래는 금액 칸의 구획선이라, 여기에 또 그으면 선만 세 줄이 된다 */
    border-bottom: 1px solid transparent;
    background: var(--white);
    font-size: 14px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    transition: background-color .15s, color .15s, border-color .34s;
}
.done-more.is-open {
    border-bottom-color: var(--line-soft);
}
.done-more:hover {
    background: var(--surf);
    color: var(--ink);
}
.done-more__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.done-more__ico {
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
/* 펼쳐지면 꺾쇠가 뒤집혀 '접기' 로 읽힌다 (.is-open 은 done.js 가 붙인다) */
.done-more.is-open .done-more__ico {
    transform: rotate(180deg);
}
.done-more__count {
    color: var(--mute);
}
.done-more__count b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--body);
}
/* display 를 준 요소는 hidden 속성만으로 감춰지지 않는다 */
.done-more[hidden] {
    display: none;
}

/* 금액 계산 — 회색 면으로 깔아 목록과 갈라 놓는다 */
.done-total {
    padding: 22px 26px 24px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-card) var(--r-card);
    background: var(--surf);
}
.done-total__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.done-total__row + .done-total__row {
    margin-top: 11px;
}
.done-total__row b {
    font-family: var(--font-num);
    font-weight: 500;
    letter-spacing: -.03em;
}
.done-total__minus {
    color: var(--sale);
}
/* 어느 쿠폰이 얼마를 깎았는지 — 합계 줄 아래에 한 단 들여 붙인다 */
.done-total__row--sub {
    margin-top: 7px;
    padding-left: 12px;
    font-size: 13px;
    color: var(--mute);
}
.done-total__row--sub + .done-total__row--sub {
    margin-top: 5px;
}
.done-total__row--sum {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line-card);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}
.done-total__row--sum b {
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: -.03em;
}

/* ------------------------------------------------------------
   영수증 아래 구획 — 배송지 · 이용 안내
   ------------------------------------------------------------ */
.done-sec {
    margin-top: 60px;
}
/* 생김새는 .order-sec__title · .exam-block__title 과 같다.
   셋이 되었으니 접두어를 떼고 common.css 로 올리는 것이 맞다 —
   다만 그 정리는 이미 확정된 두 페이지를 함께 건드리므로 따로 한다 */
.done-sec__title {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.done-sec__hint {
    margin-top: 14px;
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.done-sec__hint a,
.done-guide a {
    color: var(--acc);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.done-guide {
    font-size: 15px;
    line-height: 1.75;
}

/* ------------------------------------------------------------
   다음 걸음 — 액센트 하나만 두고 나머지는 선으로.
   셋 다 채우면 어디로 가야 할지 도로 알 수 없다
   ------------------------------------------------------------ */
.done-act {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 60px;
}
.done-act__btn {
    min-width: 190px;
    height: 58px;
    padding: 0 26px;
    font-size: 16px;
}

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .done-hero__title {
        font-size: 27px;
    }
    .done-act__btn {
        min-width: 0;
        flex: 1 1 0;
    }
}

@media (max-width: 767px) {
    .done-hero {
        padding: 20px 0 40px;
    }
    .done-hero__mark {
        width: 64px;
        height: 64px;
    }
    .done-hero__title {
        font-size: 23px;
    }
    .done-hero__desc {
        font-size: 15px;
    }
    /* 두 칸을 나란히 두기엔 좁다 — 값이 두 줄로 접힌다 */
    .done-vbank__list,
    .done-meta {
        grid-template-columns: 1fr;
    }
    .done-vbank {
        padding: 20px 18px 22px;
    }
    .done-receipt__head,
    .done-meta,
    .done-total {
        padding-right: 18px;
        padding-left: 18px;
    }
    .done-goods {
        padding: 0 18px;
    }
    .done-more {
        padding: 14px 18px;
    }
    /* 과정명과 금액을 한 줄에 두면 이름이 두 글자씩 끊긴다 — 금액을 아랫줄로
       (결제하기의 .order-goods__item 과 같은 처리) */
    .done-goods__item {
        display: block;
    }
    .done-goods__price {
        margin-top: 10px;
        padding-top: 0;
    }
    .done-total__row--sum b {
        font-size: 22px;
    }
    .done-sec {
        margin-top: 48px;
    }
    /* 단추를 옆으로 늘어놓으면 글자가 접힌다 — 세로로 쌓고 폭을 채운다 */
    .done-act {
        flex-direction: column;
        margin-top: 44px;
    }
    .done-act__btn {
        /* 1023 에서 준 flex:1 1 0 을 되돌린다.
           가로로 늘어놓을 때는 '남는 폭을 나눠 가져라' 라는 뜻이지만,
           세로로 쌓으면 같은 값이 '높이 0에서 시작해 늘어나라' 가 된다.
           늘어날 자리(부모의 남는 높이)가 없어서 글자 높이까지 납작해진다 */
        flex: none;
        width: 100%;
        height: 54px;
    }
}

/* ------------------------------------------------------------
   인쇄 — 영수증만 남긴다

   따로 인쇄용 페이지를 만들지 않는다. 화면과 종이가 두 벌이 되면 금액을
   고칠 때 한쪽만 고치게 되고, 그 어긋남은 영수증에서 가장 치명적이다.
   대신 종이에서 뜻이 없는 것(메뉴 · 퀵메뉴 · 푸터 · 이동 단추)만 걷어 낸다.

   sub.css 는 common.css 뒤에 실리므로 !important 없이도 이긴다
   ------------------------------------------------------------ */
@media print {
    .header,
    .sub-visual,
    .quick,
    .footer,
    .done-act,
    .done-print {
        display: none;
    }
    .sub-content {
        padding: 0;
    }
    .done-hero {
        padding: 0 0 24px;
    }
    /* 잉크를 아끼려는 것이 아니다 — 배경색은 기본 설정에서 아예 인쇄되지 않는다.
       회색 면에 기대어 나눠 놓은 자리를 선으로 다시 그어 준다 */
    .done-total {
        background: none;
    }
    .done-receipt,
    .done-vbank {
        border: 1px solid var(--hair);
        break-inside: avoid;
    }
    /* 접어 둔 채 인쇄하면 두 줄만 찍힌 영수증이 나온다.
       max-height 는 done.js 가 인라인으로 넣으므로 !important 로만 이긴다 —
       이 파일에서 !important 를 쓰는 유일한 자리다 */
    .done-goods {
        max-height: none !important;
        overflow: visible;
    }
    .done-more {
        display: none;
    }
}