/* ===========================================================================
 * app.css — 개발팀이 만든 블록의 CSS  (2026-08-28)
 * ===========================================================================
 *
 * 디자이너님께: **이 파일 하나만 개발팀 것입니다.** 나머지 CSS 는 그대로
 * 디자이너님 파일입니다.
 *
 * 왜 이 폴더에 있나 —
 * 시안에 자리가 없어서 개발팀이 임시로 만든 블록이 몇 개 있습니다. 그 블록들이
 * 실제 서비스에서는 보이는데 `public/design/**` 의 HTML 에는 없으면, 디자이너님이
 * **이미 없어진 화면을 기준으로** 작업하시게 됩니다. 그래서 마크업을 시안 HTML 에도
 * 넣었고, 그 마크업이 모양을 갖추려면 이 CSS 가 같은 폴더에 있어야 합니다.
 *
 * **여기 있는 블록은 전부 "정식 시안을 받으면 지울 것" 입니다.**
 * 디자이너님이 그 자리를 그려 주시면, 개발팀이 해당 블록을 통째로 지우고
 * 주신 클래스로 갈아 끼웁니다. 아래 각 절의 머리말에 무엇을 요청드리는지 적어
 * 두었습니다.
 *
 * 값은 새로 만들지 않았습니다 — 색·간격·둥글기 전부 `base.css` 의 토큰과
 * 이웃 블록의 치수를 그대로 가져다 썼습니다.
 *
 * ---------------------------------------------------------------------------
 * 개발팀 메모
 *
 * 이 파일은 **디자이너 CSS 다음, 맨 마지막**에 실린다
 * (`src/config/design.js` 의 `resolveShell()` 이 언제나 끝에 붙인다).
 * 그래서 명시도가 같으면 이 파일이 이긴다 — `src/app/overrides.css` 와 반대다.
 *
 * 무엇을 어디에 두나:
 *   여기(app.css)          시안 HTML 에도 있어야 하는 블록. 디자이너가 볼 수 있어야 한다
 *   src/app/overrides.css  디자이너 CSS 덮어쓰기 + 정적 HTML 에 있을 수 없는 런타임 상태
 *                          (페이지 이동 로딩, 알림 팝업, 결제창 iframe, 메인 팝업 …)
 * =========================================================================== */

/* ===========================================================================
 * 1. 입력칸 아래 확인 결과 한 줄 (.app-field-msg) — 회원가입 · 내정보보기
 * ---------------------------------------------------------------------------
 * 디자이너님께 요청: **입력칸 바로 아래에 결과 한 줄이 들어갈 자리**를 시안에
 * 넣어 주세요. 회원가입 아이디 칸이 타이핑 중에 "사용 가능 / 이미 등록된 아이디"
 * 를 바로 알려 주고, 비밀번호 확인 칸도 일치 여부를 같은 자리에 적습니다.
 * (시안의 [중복확인] 버튼 + alert 방식은 쓰지 않기로 했습니다 — 2026-08-12)
 *
 * 색은 원본 토큰 그대로입니다 (--step3 초록 / --step1 빨강).
 * =========================================================================== */
.app-field-msg {
    flex: 0 0 100%;
    margin-top: -2px;
    font-size: 14px;
    line-height: 22px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.app-field-msg.is-ok {
    color: var(--step3);
}
.app-field-msg.is-bad {
    color: var(--step1);
}

/* ===========================================================================
 * 2. 결제 금액 박스의 주문 과정 이름 줄 (.app-order-names) — settlement/order
 * ---------------------------------------------------------------------------
 * 디자이너님께 요청: **결제 금액 박스 안에 "무엇을 사는지" 를 적는 줄**을 넣어
 * 주세요. 왼쪽 주문정보는 첫 과정만 펼쳐 두고 나머지를 [주문과정 더보기] 로
 * 접기 때문에, 담긴 것 전체를 한눈에 보는 자리가 없습니다 — 금액만 보고 결제하게
 * 됩니다. (2026-08-25)
 *
 * 자리는 `.order-sum__title` 과 `.order-sum__list` 사이입니다. 위 칸의 실선과
 * 아래 칸의 여백 사이에 끼므로 같은 리듬(18px + 실선)을 따랐습니다.
 * =========================================================================== */
.app-order-names {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
}
.app-order-names__list {
    font-size: 14px;
    line-height: 22px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    /* 과정명 안에서 낱말이 쪼개지지 않게 — 이름이 길어도 뜻 단위로 접힌다 */
    word-break: keep-all;
}
.app-order-names__count {
    margin-top: 6px;
    font-size: 13px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.app-order-names__count b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--ink);
}

/* ===========================================================================
 * 3. 결제 대기내역 칸 (.app-pay-wait) — mypage/payment
 * ---------------------------------------------------------------------------
 * 디자이너님께 요청: **가상계좌 입금 대기 칸**을 시안에 넣어 주세요.
 *
 * 시안의 대기 칸(`.pay-item`)은 [과정명 · 신청일][결제금액][결제하기] 가 한 줄로
 * 서는 가로 배치입니다. 여기에는 **입금 계좌**(은행 · 계좌번호 · 입금할 금액)가 더
 * 들어가야 합니다 — 가상계좌는 그 셋을 못 보면 입금을 할 수가 없습니다.
 * 그래서 이 칸만 세로로 세웠습니다. 완료내역 칸은 시안 그대로 가로입니다.
 * (2026-08-26)
 *
 * ⚠️ 안에 들어가는 것은 전부 디자이너님 CSS 입니다. 계좌 상자는 결제완료 화면의
 *    `.done-vbank`, 배지 줄은 마이페이지의 `.my-course__head` 를 그대로 씁니다.
 *    여기서 새로 정하는 것은 **자리뿐**입니다.
 * =========================================================================== */
.pay-item.app-pay-wait {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
/* 첫 줄 — 왼쪽에 결제수단, 오른쪽 끝에 신청일 */
.app-pay-wait__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* .pay-item__date 는 과정명 아래에 붙는 자리라 margin-top 이 있다.
   여기서는 같은 줄에 서므로 뗀다 */
.app-pay-wait__head .pay-item__date {
    margin-top: 0;
}
/* 결제수단 알약. 이 목록은 KISPG 가상계좌만 서므로 값은 늘 '가상계좌결제' 다.
   색은 계좌 상자(.done-vbank)와 같은 --sale 계열로 맞춰 둘을 한 덩어리로 읽게 한다 */
.app-pay-way {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 13px;
    background: var(--sale-tint);
    font-size: 13px;
    font-weight: 700;
    color: var(--sale);
    letter-spacing: var(--ls-base);
}
/* 한 주문에 담긴 과정들. 계좌가 주문 하나에 하나라 이 목록이 여러 줄이 된다.
 *
 * 과정 하나가 **한 줄**이다 — 배지(카테고리·단계)와 과정명을 옆으로 눕힌다
 * (2026-08-26 사용자 지정). 마이페이지 다른 화면(.my-course)처럼 배지를 위에
 * 얹으면 과정 하나가 두 줄을 먹어, 여러 과정을 담은 주문에서 계좌가 한참
 * 아래로 밀린다. 이 칸에서 가장 급한 것은 계좌다. */
.app-pay-wait__courses {
    margin: 16px 0 20px;
}
.app-pay-wait__courses > li {
    display: flex;
    align-items: center;
    /* 좁아지면 과정명이 배지 아래로 접힌다 — 잘리는 것보다 낫다 */
    flex-wrap: wrap;
    gap: 6px 14px;
}
.app-pay-wait__courses > li + li {
    margin-top: 10px;
}
/* .my-course__head 는 이름 위에 놓이는 자리라 아래 여백을 갖는다. 옆으로 누웠으니 뗀다 */
.app-pay-wait__courses .my-course__head {
    margin-bottom: 0;
}
/* .done-vbank 는 영수증 화면에서 아래 블록과 떨어지려고 아래 여백을 갖는다.
   여기서는 칸의 마지막이라 그 여백이 그대로 남으면 아래가 비어 보인다 */
.app-pay-wait .done-vbank {
    margin-bottom: 0;
}
/* 좁은 화면 — 계좌 상자(.done-vbank__list)가 1열로 접히는 폭에 맞춘다 */
@media (max-width: 767px) {
    .app-pay-wait__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ===========================================================================
 * 4. 과정 상세 [교재 안내] 탭 (.app-book) — lecture/view
 * ---------------------------------------------------------------------------
 * 디자이너님께 요청: **교재를 표지와 함께 보여 주는 자리**를 시안에 넣어 주세요.
 *
 * 과정에 교재를 붙일 수 있게 된 것이 관리자 쪽에서 나중에 생긴 기능이라 시안이
 * 그 뒤를 따라오지 못했습니다. 교재가 붙어 있는 과정에서만 탭이 하나 더 뜹니다.
 * (2026-08-27)
 *
 * 값은 이웃 블록(`.view-spec` · `.tbl`)의 치수를 따랐습니다.
 * =========================================================================== */
.app-book {
    margin-top: 24px;
    border-top: 1px solid var(--line);
}
.app-book__item {
    display: flex;
    gap: 28px;
    padding: 24px 2px;
    border-bottom: 1px solid var(--line-soft);
}
/* 표지 — 세로로 긴 책 비율(3:4). 파일마다 크기가 제각각이라 칸을 고정하고
   contain 으로 담는다. cover 로 채우면 제목이 잘려 나간다 */
.app-book__cover {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 176px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--surf);
    overflow: hidden;
}
.app-book__cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 표지를 아직 올리지 않은 교재 — 칸을 비워 두면 카드가 무너져 보인다 */
.app-book__nocover {
    font-size: 14px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.app-book__info {
    flex: 1 1 auto;
    min-width: 0;
}
.app-book__name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -.04em;
}
/* 항목 표 — 위 요약(.view-spec)과 같은 어법이되, 카드 안이라 선 없이 촘촘하게 */
.app-book__spec {
    margin-top: 14px;
}
.app-book__spec > div {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
}
.app-book__spec dt {
    flex: none;
    width: 68px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.app-book__spec dd {
    font-size: 16px;
    line-height: 26px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
/* 좁은 화면 — 표지를 줄이고 그대로 옆에 둔다. 아래로 내리면 한 화면에 한 권만 남는다 */
@media (max-width: 767px) {
    .app-book__item {
        gap: 18px;
        padding: 20px 0;
    }
    .app-book__cover {
        width: 96px;
        height: 128px;
    }
    .app-book__name {
        font-size: 17px;
    }
    .app-book__spec dt {
        width: 56px;
        font-size: 14px;
    }
    .app-book__spec dd {
        font-size: 15px;
        line-height: 24px;
    }
}

/* ===========================================================================
 * 5. 학습하기의 정렬 · 보기방식 · 페이징 — mypage/learn
 * ---------------------------------------------------------------------------
 * 디자이너님께 요청: **목록 위의 조절 줄(정렬 · 보기방식)과 페이징**을 시안에
 * 넣어 주세요. 패키지 하나에 과정이 100개 넘게 딸려 올 수 있어, 시안처럼 넓은
 * 줄만 있으면 한 화면에 열 개를 넘기기 어렵습니다. (2026-08-28)
 *
 * 지금은 새 모양을 지어내지 않으려고 있는 부품만 다시 앉혔습니다 —
 *   · 조절 줄의 칩은 수강신청 필터의 `.chip` (common.css) 그대로
 *   · 작은 카드는 넓은 줄(`.my-course__item`)과 **같은 부품**을 세로로 세운 것
 *   · 페이징은 게시판의 `.paging` 그대로
 * 이 파일에서 정하는 것은 **자리와 격자뿐**입니다.
 * =========================================================================== */

/* ---------- 목록과 페이징 사이 ---------- */
/* 시안에 페이징 블록이 아예 없어서 이 여백을 잡아 줄 규칙도 없다. 디자이너 CSS 의
   여백 규칙은 게시판·합격후기 목록에만 걸려 있다(sub.css `.bbs-list + .paging` ·
   `.review-list + .paging`). 값은 그 셋과 같은 40px 을 그대로 쓴다 */
.my-course + .paging,
.app-course-grid + .paging {
    margin-top: 40px;
}

/* ---------- 조절 줄 — 왼쪽 정렬 칩, 오른쪽 보기방식 ---------- */
/* 탭(.my-tabs)과 목록 사이에 낀다. 좁아지면 두 묶음이 위아래로 접힌다. */
.app-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.app-listbar__sort,
.app-listbar__view {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* 보기방식 칩의 그림은 글자보다 흐리게 — 고른 칩에서는 글자색을 따라간다 */
.app-listbar__view .ico {
    color: var(--hair-hover);
}
.app-listbar__view .chip.is-on .ico {
    color: currentColor;
}

/* ---------- 작은 카드 ---------- */
/* 한 줄 4개 × 10줄 = 40개 (2026-08-28 사용자 지정).
   테두리·둥글기·바탕은 넓은 줄(.my-course__item)에서 그대로 가져왔고,
   줄 사이 간격도 그쪽의 10px 을 쓴다 — 두 보기가 같은 화면으로 보여야 한다. */
.app-course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.app-course-card {
    /* 단추의 링크를 카드 전체로 늘리는 기준점 (아래 __btn::after) */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}

/* ---------- 줄·카드 어디를 눌러도 [학습하기] 로 간다 ----------
   (2026-08-28 사용자 지정 — 작은 카드 먼저, 그 다음 넓은 줄)

   손 모양·hover·드래그 막기는 **디자이너가 수강신청 카드(.lec-card)에 이미 써 둔
   규칙 그대로다** — 그쪽도 "카드 아무 데나 눌러 선택" 이라 같은 문제를 푼다.
   새 값을 만들지 않으려고 전이 시간(.15s)과 hover 색(--hair-hover)까지 맞췄다.

   넓은 줄에는 표를 **우리 클래스에** 붙인다. `.my-course__item` 은 나의강의실
   (/mypage/study)도 쓰는데 그 화면에는 단추가 없어, 전역에 걸면 갈 곳 없는 줄에
   손 모양이 뜬다. 수강종료 줄·카드에도 붙지 않는다 — 같은 이유다. */
.app-course-row--link {
    /* 단추의 링크를 줄 전체로 늘리는 기준점 */
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .15s;
}
.app-course-row--link:hover {
    border-color: var(--hair-hover);
}
.app-course-row--link .pay-item__btn::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* 작은 카드도 같다. 기준점(position:relative)은 .app-course-card 가 이미 갖고 있다 */
.app-course-card--link {
    cursor: pointer;
    /* 글자를 끌면 선택이 되면서 손을 떼는 순간 클릭으로 잡힌다 (.lec-card 주석) */
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .15s;
}
.app-course-card--link:hover {
    border-color: var(--hair-hover);
}
/* 단추의 링크를 카드 전체로 늘린다. 카드를 <a> 로 감싸면 안쪽 단추와 겹쳐
   못 쓰는 마크업이 되므로, 있는 링크를 넓히는 쪽을 쓴다.
   카드 안에 다른 링크가 없어 이 덮개가 가리는 것은 없다 — 링크를 더 놓게 되면
   그때는 그 링크에 position:relative 를 줘 이 덮개 위로 올려야 한다. */
.app-course-card__btn::after {
    content: '';
    position: absolute;
    inset: 0;
}
/* 과정명은 두 줄까지. 카드마다 높이가 들쭉날쭉하면 격자가 어긋나 보인다 */
.app-course-card .my-course__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 52px;
    font-size: 16px;
    line-height: 26px;
}
/* 수치 묶음은 넓은 줄에서 오른쪽 200px 칸이었다. 카드에서는 폭을 다 쓴다.
   margin-top:auto 로 바닥에 붙여 카드마다 같은 높이에 선다. */
.app-course-card .my-course__stat {
    width: auto;
    margin-top: auto;
    padding-top: 14px;
}
.app-course-card .my-course__meta {
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 13px;
}
/* 넓은 줄의 단추(.pay-item__btn)는 48px 인데 이쪽은 .btn 에 높이가 없어 22.5px 로
   눌렸다. 카드가 작으니 그만큼은 두지 않고 36px 로 올린다 (2026-08-28 사용자 지정) */
.app-course-card__btn {
    width: 100%;
    height: 36px;
    margin-top: 12px;
    font-size: 14px;
}

/* 좁은 화면 — 4열이 무너지는 폭에서 2열, 더 좁으면 1열.
   기준값은 sub.css 가 쓰는 1024 / 767 과 같다. 새 중단점을 만들지 않는다.
   (1024px 에서 카드 폭은 (984-30)/4 = 238px — 두 줄짜리 과정명이 아직 들어간다) */
@media (max-width: 1024px) {
    .app-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .app-course-grid {
        grid-template-columns: 1fr;
    }
    .app-course-card .my-course__name {
        min-height: 0;
    }
}