/*
 * 청아람 사이트 CSS — 퍼블릭 화면 공통 틀(헤더·푸터·TOP 버튼).
 * config/modules.php options.public-shell.site_css로 붙는다.
 * 값은 피그마(chungaram-design/figma) Global_Header·Global_Footer·Floating_Top_Button 기준.
 *
 * 화면 폭
 *   1440 이상     시안 그대로
 *   1024~1439     여백·간격만 줄임
 *   769~1023      배치 조정
 *   768 이하      위 줄 숨김, 로고 + 햄버거(펼침 패널), 푸터 세로 쌓기
 */

/* ---------- 글꼴 ---------- */

@font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/pretendard/Pretendard-Medium.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/pretendard/Pretendard-ExtraBold.subset.woff2') format('woff2'); }

/* ---------- 토큰 ---------- */

:root {
    --ch-primary: #836B56;
    --ch-secondary: #AB998A;
    --ch-tab-bg: #F4F1ED;
    --ch-text: #222222;
    --ch-text-2: #555555;
    --ch-text-3: #777777;
    --ch-text-dim: rgba(34, 34, 34, 0.7);
    --ch-line: #DDDDDD;
    --ch-line-2: #EEEEEE;
    --ch-footer-bg: #222222;
    --ch-white: #FFFFFF;
    --ch-danger: #D14343;

    --ch-content: 1400px;
    --ch-gutter: 16px;

    /* 흰 카드(로그인 계열·회원가입·결제) — 모서리·그림자·카드 안 칸 모서리 */
    --ch-card-radius: 12px;
    --ch-card-shadow: 0 4px 24px rgba(34, 34, 34, 0.08);
    --ch-card-control-radius: 8px;

    --ch-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ---------- 바탕 ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* 스크롤바 자리를 늘 비워 둔다 — 짧은 화면에서 스크롤바가 사라져 폭이 바뀌며 흔들리지 않게 */
html { scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: var(--ch-font);
    color: var(--ch-text);
    background: var(--ch-white);
    -webkit-font-smoothing: antialiased;
    /* 푸터를 늘 화면 맨 아래에 — 내용이 짧은 화면(로그인 등)은 본문(main#content)이 남는 높이를 채운다 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content { flex: 1; }

img { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--ch-primary);
    outline-offset: 2px;
}

.ch-container {
    width: 100%;
    max-width: calc(var(--ch-content) + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--ch-gutter);
}

.ch-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ch-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--ch-primary);
    color: var(--ch-white);
    font-size: 15px;
    text-decoration: none;
    transform: translateY(-200%);
}

.ch-skip:focus-visible { transform: none; }

/* ---------- 헤더 ---------- */

.ch-header {
    position: relative;
    z-index: 50;
    background: var(--ch-white);
}

.ch-header--shadow { box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); }

/* 위 줄 — 48px, 아래 테두리 */
.ch-util {
    height: 48px;
    border-bottom: 1px solid var(--ch-line);
}

.ch-util__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.ch-util__list {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-util__form { margin: 0; }

.ch-util__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 0;
    border: 0;
    background: none;
    font: 400 15px/18px var(--ch-font);
    letter-spacing: -1px;
    color: var(--ch-text-dim);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.ch-util__link img { width: 16px; height: 16px; }

.ch-util__link:hover { color: var(--ch-text); }

/* 본 줄 — 위 줄과 1px 겹쳐 전체 182px */
.ch-main { height: 134px; }

.ch-main__inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.ch-logo {
    flex: none;
    display: block;
    width: 100.676px;
    height: 86.394px;
    margin-left: 1.45px;
}

.ch-logo img { display: block; width: 100%; height: 100%; }

.ch-panel {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* 메뉴 — 시안은 화면 가운데에서 왼쪽으로 89px. 로고·검색 사이 가운데에서 그만큼 맞추려고 오른쪽에 45px을 둔다 */
.ch-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-right: 45px;
}

.ch-nav__list {
    display: flex;
    align-items: center;
    gap: 72px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-nav__link {
    display: block;
    font: 500 20px/32px var(--ch-font);
    letter-spacing: -0.9px;
    color: var(--ch-text);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.ch-nav__item + .ch-nav__item .ch-nav__link { min-width: 102px; }

.ch-nav__link:hover,
.ch-nav__link[aria-current="page"] { color: var(--ch-primary); }

/* 검색 — 234 × 44 */
.ch-search {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 234px;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--ch-line);
    border-radius: 4px;
    background: var(--ch-white);
}

.ch-search:focus-within { border-color: var(--ch-primary); }

.ch-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: 400 15px/18px var(--ch-font);
    letter-spacing: -1px;
    color: var(--ch-text);
    outline: none;
}

.ch-search__input::placeholder { color: var(--ch-text-dim); opacity: 1; }

.ch-search__input::-webkit-search-cancel-button { display: none; }

.ch-search__button {
    flex: none;
    display: flex;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ch-search__button img { width: 20px; height: 20px; }

/* 패널 안 위 줄 링크·닫기 링크와 햄버거는 768 이하에서만 */
.ch-panel__util,
.ch-panel__close,
.ch-burger { display: none; }

/* ---------- 푸터 ---------- */

.ch-footer {
    background: var(--ch-footer-bg);
    color: rgba(255, 255, 255, 0.6);
    font: 400 16px/27.97px var(--ch-font);
    letter-spacing: -0.72px;
}

.ch-footer__inner { padding-top: 60px; padding-bottom: 60px; }

.ch-footer a { color: inherit; text-decoration: none; transition: color 0.2s; }

.ch-footer a:hover { color: rgba(255, 255, 255, 0.85); }

.ch-footer :focus-visible { outline-color: var(--ch-secondary); }

.ch-footer__links ul,
.ch-footer__social ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-footer__links { min-height: 31px; }

.ch-footer__link { display: inline-block; line-height: 29.88px; }

.ch-footer a.ch-footer__link--strong { font-weight: 700; color: var(--ch-secondary); }

.ch-footer a.ch-footer__link--strong:hover { color: #C9BBAE; }

.ch-footer__company { margin-top: 15px; }

.ch-footer__line {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    margin: 0;
}

.ch-footer__social { margin-top: 8px; }

.ch-footer__copy {
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0;
    text-transform: uppercase;
}

.ch-footer__copy small { font-size: inherit; }

/* ---------- TOP 버튼 ---------- */

.ch-top {
    position: fixed;
    right: max(var(--ch-gutter), calc((100vw - var(--ch-content)) / 2 + 25px));
    bottom: 60px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    height: 60px;
    padding-top: 10px;
    background: var(--ch-text-3);
    color: var(--ch-white);
    text-decoration: none;
    transition: opacity 0.2s, visibility 0.2s;
}

.ch-top img { display: block; width: 24px; height: 24px; }

.ch-top__text { margin-top: 2px; font: 400 14px/14px var(--ch-font); }

.ch-top:focus-visible { outline-color: var(--ch-text); }

/* 기본은 숨김(페이지를 열 때 보였다 사라지지 않게). 스크립트가 300px 넘게 내려가면 .is-visible을 단다.
   스크립트가 없는 브라우저는 아래 (scripting: none) 블록이 늘 보이게 한다 */
.ch-top:not(.is-visible) { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .ch-top { transition: none; }
}

/* ---------- 1024 ~ 1439: 여백·간격만 줄임 ---------- */

@media (max-width: 1439px) {
    :root { --ch-gutter: 40px; }

    .ch-nav { padding-right: 0; }
    .ch-nav__list { gap: 44px; }
    .ch-nav__item + .ch-nav__item .ch-nav__link { min-width: 0; }
    .ch-search { width: 220px; }
}

/* ---------- 769 ~ 1023: 배치 조정 ---------- */

@media (max-width: 1023px) {
    :root { --ch-gutter: 24px; }

    .ch-main { height: 104px; }
    .ch-logo { width: 74px; height: 63.5px; margin-left: 0; }
    .ch-nav__list { gap: 24px; }
    .ch-nav__link { font-size: 17px; letter-spacing: -0.6px; }
    .ch-search { width: 160px; padding: 0 12px; }

    .ch-top { right: var(--ch-gutter); bottom: 24px; }
}

/* ---------- 768 이하: 햄버거 ---------- */

@media (max-width: 768px) {
    :root { --ch-gutter: 16px; }

    .ch-util { display: none; }

    .ch-main { height: auto; }

    .ch-main__inner {
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
    }

    /* 로고 줄 72px — 패널이 펼쳐져도 그대로 */
    .ch-logo { width: 58px; height: 50px; margin: 11px 0; }

    .ch-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .ch-burger__bar,
    .ch-burger__bar::before,
    .ch-burger__bar::after {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--ch-text);
        transition: transform 0.2s, background-color 0.2s;
    }

    .ch-burger__bar { position: relative; }

    .ch-burger__bar::before,
    .ch-burger__bar::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .ch-burger__bar::before { top: -7px; }
    .ch-burger__bar::after { top: 7px; }

    /* 열림 표시 — 스크립트가 단 aria-expanded. 스크립트가 없을 때는 아래 (scripting: none) 블록 */
    .ch-burger[aria-expanded="true"] .ch-burger__bar { background: transparent; }
    .ch-burger[aria-expanded="true"] .ch-burger__bar::before { transform: translateY(7px) rotate(45deg); }
    .ch-burger[aria-expanded="true"] .ch-burger__bar::after { transform: translateY(-7px) rotate(-45deg); }

    /* 패널 — 기본은 닫힘(스크립트를 기다리는 동안 보였다 사라지지 않게). 스크립트가 .is-open으로 연다 */
    .ch-panel {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0 20px;
        border-top: 1px solid var(--ch-line-2);
    }

    .ch-panel.is-open { display: flex; }

    .ch-nav { display: block; }

    .ch-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ch-nav__link {
        padding: 12px 0;
        font-size: 18px;
        text-align: left;
        border-bottom: 1px solid var(--ch-line-2);
    }

    .ch-search { width: 100%; margin-top: 16px; }

    .ch-panel__util {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin: 16px 0 0;
        padding: 0;
        list-style: none;
    }

    .ch-panel__util-link {
        display: inline-block;
        padding: 4px 0;
        border: 0;
        background: none;
        font: 400 15px/20px var(--ch-font);
        letter-spacing: -0.5px;
        color: var(--ch-text-dim);
        text-decoration: none;
        cursor: pointer;
    }

    /* 푸터 — 세로 쌓기 */
    .ch-footer { font-size: 14px; line-height: 24px; }
    .ch-footer__inner { padding-top: 40px; padding-bottom: 96px; }
    .ch-footer__line { flex-direction: column; }
    .ch-footer__links ul { gap: 0 20px; }

    .ch-top { width: 48px; height: 48px; padding-top: 6px; bottom: 16px; }
    .ch-top img { width: 20px; height: 20px; }
    .ch-top__text { font-size: 12px; line-height: 12px; }
}

/* ---------- 스크립트가 없는 브라우저 ----------
   HTML에 <style>을 두지 않는다(킷의 퍼블릭 화면 규칙). 미디어 쿼리 scripting으로 고른다.
   이 블록을 모르는 옛 브라우저는 TOP 버튼이 숨고 메뉴가 열리지 않는다 — 스크립트가 켜져 있으면 해당 없음 */

@media (scripting: none) {
    .ch-top:not(.is-visible) { opacity: 1; visibility: visible; }
}

@media (max-width: 768px) and (scripting: none) {
    /* 햄버거 앵커(#ch-panel)의 :target으로 연다 */
    .ch-panel:target { display: flex; }

    .ch-main__inner:has(.ch-panel:target) .ch-burger__bar { background: transparent; }
    .ch-main__inner:has(.ch-panel:target) .ch-burger__bar::before { transform: translateY(7px) rotate(45deg); }
    .ch-main__inner:has(.ch-panel:target) .ch-burger__bar::after { transform: translateY(-7px) rotate(-45deg); }

    .ch-panel:target .ch-panel__close {
        display: inline-block;
        align-self: flex-start;
        margin-top: 12px;
        padding: 4px 0;
        font: 400 15px/20px var(--ch-font);
        color: var(--ch-text-dim);
    }
}

/* =====================================================================
 * 메인 화면 (resources/views/site/home.blade.php) — 시안 01_Home_PC_1920
 * 시안은 헤더(182px)가 히어로(850px) 위에 겹치고 그 아래 668px만 보인다. 여기서는 헤더 다음에 668px 히어로를 둔다.
 * ===================================================================== */

/* ---------- 히어로 ---------- */

.ch-hero {
    position: relative;
    height: 668px;
    overflow: hidden;
    background: linear-gradient(to left, #FFFAEF 44.95%, #FFFDFA);
}

/* 메인 사진 1062 × 708 — 화면 가운데(50%)에서 시작(1024 이상 같은 기준), 헤더 선 위 20px은 잘린다 */
.ch-hero__photo img {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 1062px;
    height: 708px;
    object-fit: cover;
    /* 시안처럼 사진 왼쪽 끝을 배경으로 부드럽게 — 압축본 사진에는 흐림이 없어 마스크로 준다 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

.ch-hero__inner {
    position: relative;
    padding-top: 100px;
}

.ch-hero__text { margin-left: 60px; }

.ch-hero__title {
    margin: 0;
    font: 800 73px/86px var(--ch-font);
    color: var(--ch-text);
}

.ch-hero__title span { display: block; white-space: nowrap; }

.ch-hero__title-accent { color: var(--ch-primary); }

.ch-hero__sub {
    margin: 16px 0 0;
    font: 500 18px/30px var(--ch-font);
    letter-spacing: -1px;
    color: var(--ch-text-dim);
}

.ch-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 320px;
    height: 60px;
    margin-top: 34px;
    padding: 0 20px;
    border-radius: 8px;
    background: var(--ch-primary);
    color: var(--ch-white);
    font: 600 18px/30px var(--ch-font);
    text-decoration: none;
    transition: background-color 0.2s;
}

.ch-hero__cta:hover { background: #6F5A48; }

.ch-hero__cta img { width: 24px; height: 24px; flex: none; }

/* ---------- 히어로 등장 — 페이지를 열 때 한 번(스크립트 없음) ----------
   제목 세 줄 → 부제 → 버튼이 차례로 36px 아래에서 떠오르고(각 0.6s, 0.15s 간격), 마지막으로 공지 띠가 24px 아래에서 떠오른다.
   사진은 1.08배에서 1배로 2.5s 동안 당겨진다(왼쪽 끝 기준 — 시작선이 가운데에서 움직이지 않게).
   떠오르는 거리는 --ch-rise(기본 36px)로 요소마다 바꾼다.
   움직임 줄이기 설정이면 맨 아래 prefers-reduced-motion 블록이 끈다. */

@keyframes ch-rise {
    from { opacity: 0; transform: translateY(var(--ch-rise, 36px)); }
    to { opacity: 1; transform: none; }
}

@keyframes ch-settle {
    from { transform: scale(var(--ch-settle, 1.08)); }
    to { transform: none; }
}

/* 서서히 나타나기 — ch-settle과 함께 쓴다(소개 사진) */
@keyframes ch-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ch-hero__photo img {
    transform-origin: left center;
    animation: ch-settle 2.5s ease-out both;
}

.ch-hero__title span,
.ch-hero__sub,
.ch-hero__cta { animation: ch-rise 0.6s ease-out both; }

.ch-hero__title span:nth-child(1) { animation-delay: 0.1s; }
.ch-hero__title span:nth-child(2) { animation-delay: 0.25s; }
.ch-hero__title span:nth-child(3) { animation-delay: 0.4s; }
.ch-hero__sub { animation-delay: 0.6s; }
.ch-hero__cta { animation-delay: 0.8s; }

/* 공지 띠 — 히어로 아래쪽에 겹친 띠라 히어로(overflow: hidden) 안에서 아래로 내려갔다 올라온다. 띠 아래 상자를 가리지 않는다 */
.ch-home-band {
    --ch-rise: 24px;
    animation: ch-rise 0.6s ease-out 1s both;
}

/* ---------- 공지 띠 — 히어로 아래쪽 81px에 겹친다 ---------- */

.ch-home-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 81px;
    background: rgba(245, 237, 224, 0.7);
    -webkit-backdrop-filter: blur(1.75px);
    backdrop-filter: blur(1.75px);
}

.ch-home-band__inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.ch-home-band__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
}

.ch-home-band__label {
    margin: 0;
    font: 500 20px/32px var(--ch-font);
    letter-spacing: -0.72px;
    color: var(--ch-text);
}

.ch-home-band__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: 1px solid var(--ch-line);
    border-radius: 50%;
    background: var(--ch-white);
    transition: border-color 0.2s;
}

.ch-home-band__more:hover { border-color: var(--ch-primary); }

.ch-home-band__more img { width: 24px; height: 24px; }

/* 띠 내용 — 자리 home.notice-band의 조각(덮어쓴 notices::partials.home-band: p > 제목 링크 + time) */
.ch-home-band__body {
    flex: 1;
    min-width: 0;
    margin-left: 39px;
}

[data-notice-band] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
}

[data-notice-band] a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font: 500 18px/28px var(--ch-font);
    letter-spacing: -0.72px;
    color: var(--ch-text-2);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

[data-notice-band] a:hover { color: var(--ch-primary); }

[data-notice-band] time {
    flex: none;
    width: 90px;
    font: 400 16px/27.97px var(--ch-font);
    color: var(--ch-text);
    text-align: right;
}

/* ---------- 아래 상자 두 개 — 670 × 350, 사이 20px ---------- */

.ch-home-boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 32px;
    padding-left: calc(var(--ch-gutter) + 20px);
    padding-right: calc(var(--ch-gutter) + 20px);
}

.ch-home-box {
    position: relative;
    display: block;
    height: 350px;
    padding: 30px 20px 0;
    overflow: hidden;
    border: 1px solid var(--ch-line);
    border-radius: 1px;
    background: var(--ch-white);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    color: var(--ch-text);
    text-decoration: none;
}

.ch-home-box__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    height: 44px;
    border-bottom: 1px solid var(--ch-line-2);
}

.ch-home-box__title {
    margin: 0;
    font: 700 20px/33.02px var(--ch-font);
    color: var(--ch-text);
    transition: color 0.2s;
}

.ch-home-box__icon {
    flex: none;
    display: block;
    width: 24px;
    height: 24px;
    margin-top: 4px;
}

.ch-home-box__icon img { display: block; width: 24px; height: 24px; }

/* 공지사항 목록 — 자리 home.notice-box의 조각(덮어쓴 notices::partials.home-box: ul > li > 제목 링크 + time) */
.ch-home-notices__list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.ch-home-notices__empty {
    margin: 20px 0 0;
    padding: 0 8px;
    font: 400 16px/28px var(--ch-font);
    color: var(--ch-text-3);
}

.ch-home-notices__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 58px;
    padding: 0 9px 0 8px;
    border-bottom: 1px solid var(--ch-line);
}

.ch-home-notices__list li:last-child { border-bottom: 0; }

.ch-home-notices__list a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font: 400 17px/28px var(--ch-font);
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.ch-home-notices__list a:hover { color: var(--ch-primary); }

.ch-home-notices__list time {
    flex: none;
    font: 400 14px/23px var(--ch-font);
    color: #000000;
}

/* 병원 홈페이지 상자 — 같은 사진 두 장을 겹친다(시안의 마스크 두 장을 잘라 낸 상자로 대신).
   아래 장: 하늘 포함, 머리 선 아래(위 75px부터 265px)만. 위 장: 하늘 투명, 위 30px부터 309px — 건물 윗부분이 선 위로 나온다.
   두 장의 사진 상자는 상자 기준 같은 자리(위 -45px, 폭 상자 + 62px, 높이 549px)에 놓여 겹쳐 맞는다 */
.ch-home-featured:hover .ch-home-box__title { color: var(--ch-primary); }

.ch-home-featured__layer {
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.ch-home-featured__layer img {
    position: absolute;
    max-width: none;
    height: 549px;
    object-fit: cover;
}

.ch-home-featured__layer--base { top: 75px; left: 9px; right: 9px; height: 265px; }
.ch-home-featured__layer--base img { top: -120px; left: -8px; width: calc(100% + 80px); }

.ch-home-featured__layer--top { top: 30px; left: 10px; right: 8px; height: 309px; }
.ch-home-featured__layer--top img { top: -75px; left: -10px; width: calc(100% + 80px); }

/* 머리(.ch-home-box__head, z-index 2)는 사진 층(z-index 1) 위 — 위 장이 머리 글자·화살표를 덮지 않는다 */

/* ---------- 1024 ~ 1439 ---------- */

@media (max-width: 1439px) {
    .ch-hero__text { margin-left: 0; }
    .ch-hero__title { font-size: 60px; line-height: 72px; }
    .ch-hero__inner { padding-top: 110px; }
    .ch-home-boxes { padding-left: var(--ch-gutter); padding-right: var(--ch-gutter); }
}

/* ---------- 769 ~ 1023 ---------- */

@media (max-width: 1023px) {
    .ch-hero { height: 540px; }
    .ch-hero__inner { padding-top: 80px; }
    .ch-hero__title { font-size: 46px; line-height: 56px; }
    .ch-hero__sub { font-size: 16px; line-height: 26px; }
    .ch-hero__cta { width: 280px; height: 54px; margin-top: 28px; font-size: 17px; }
    .ch-hero__photo img { top: 0; left: 42%; width: auto; height: 100%; aspect-ratio: 1062 / 708; }

    .ch-home-band { height: 68px; }
    .ch-home-band__body { margin-left: 24px; }
    [data-notice-band] a { font-size: 16px; }

    .ch-home-box { height: 330px; }
    .ch-home-box__title { font-size: 18px; }
}

/* ---------- 768 이하: 위아래로 쌓기(글 → 사진 → 공지 띠), 상자도 세로로 ---------- */

@media (max-width: 768px) {
    .ch-hero {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .ch-hero__inner { order: 1; padding-top: 40px; padding-bottom: 32px; }
    .ch-hero__title { font-size: 36px; line-height: 44px; }
    .ch-hero__sub { margin-top: 12px; font-size: 15px; line-height: 24px; letter-spacing: -0.5px; }
    .ch-hero__cta { width: 100%; max-width: 320px; height: 54px; margin-top: 24px; font-size: 16px; }

    /* 등장 때 확대된 사진이 상자 밖으로 나가지 않게 자른다 */
    .ch-hero__photo { order: 2; display: block; overflow: hidden; }
    .ch-hero__photo img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1062 / 708; -webkit-mask-image: none; mask-image: none; transform-origin: center; }

    .ch-home-band {
        order: 3;
        position: static;
        height: auto;
        background: rgba(245, 237, 224, 0.7);
    }

    .ch-home-band__inner { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; row-gap: 8px; }
    .ch-home-band__head { width: auto; gap: 12px; }
    .ch-home-band__label { font-size: 18px; }
    .ch-home-band__body { flex: 0 0 100%; margin-left: 0; }
    [data-notice-band] { gap: 12px; }
    [data-notice-band] a { font-size: 15px; line-height: 24px; }
    [data-notice-band] time { width: auto; font-size: 14px; }

    .ch-home-boxes { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
    .ch-home-box { height: 320px; padding: 24px 16px 0; }
    .ch-home-box__head { height: 40px; }
    .ch-home-box__title { font-size: 17px; line-height: 28px; }
    .ch-home-notices__list { margin-top: 12px; }
    .ch-home-notices__list li { height: 52px; padding: 0 4px; }
    .ch-home-notices__list a { font-size: 15px; }
    .ch-home-notices__list time { font-size: 13px; }

    /* 머리 높이가 줄어든 만큼 사진 층도 올린다 */
    .ch-home-featured__layer--base { top: 65px; left: 8px; right: 8px; height: calc(100% - 74px); }
    .ch-home-featured__layer--base img { top: -110px; }
    .ch-home-featured__layer--top { top: 24px; left: 8px; right: 8px; height: calc(100% - 33px); }
    .ch-home-featured__layer--top img { top: -69px; left: -8px; }
}

/* =====================================================================
 * 전체 강좌 (resources/views/vendor/courses/index.blade.php) — 시안 02_Course_List_PC_1920 · Course_Card
 * 내용 폭 1312px 가운데. 세로 간격은 시안 위치에서 계산(헤더 아래 64 → 제목 → 40 → 탭 → 32 → 도구 줄 → 16 → 카드 → 56 → 쪽 넘김 → 110)
 * ===================================================================== */

.ch-list__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 64px var(--ch-gutter) 110px;
}

.ch-page-title {
    margin: 0;
    font: 700 40px/1.2 var(--ch-font);
    letter-spacing: -0.9px;
    color: var(--ch-text);
    text-align: center;
}

/* ---------- 분류 탭 ---------- */

.ch-tabs { margin-top: 40px; }

.ch-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-tabs__tab {
    display: block;
    padding: 10px 16px;
    background: var(--ch-tab-bg);
    font: 400 18px/1.2 var(--ch-font);
    letter-spacing: -0.9px;
    color: var(--ch-text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.ch-tabs__tab:hover { background: #EAE3DA; color: var(--ch-text); }

.ch-tabs__tab[aria-current="page"] {
    background: var(--ch-primary);
    font-weight: 600;
    color: var(--ch-white);
}

/* ---------- 도구 줄 ---------- */

.ch-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
}

.ch-list-toolbar__count {
    margin: 0;
    font: 500 17px/1.2 var(--ch-font);
    color: var(--ch-text-3);
}

.ch-list-toolbar__count strong { font-weight: 600; color: var(--ch-text); }

.ch-list-toolbar__clear {
    margin-left: 8px;
    font-size: 14px;
    color: var(--ch-primary);
}

.ch-list-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ch-list-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.ch-select {
    height: 42px;
    padding: 0 30px 0 16px;
    border: 1px solid var(--ch-line);
    border-radius: 4px;
    background: var(--ch-white) url('../images/chungaram/icon_select_arrow.svg') no-repeat right 8px center / 18px 18px;
    font: 400 15px/1.2 var(--ch-font);
    letter-spacing: -1px;
    color: var(--ch-text-dim);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ch-select:hover,
.ch-select:focus { border-color: var(--ch-primary); }

.ch-select--category,
.ch-select--sort { width: 112px; }

.ch-select--per-page { width: 73px; }

/* 스크립트가 있으면 고르는 즉시 이동하므로 숨긴다. 없으면 아래 (scripting: none)이 보인다 */
.ch-list-filter__submit { display: none; }

.ch-list-search {
    display: flex;
    align-items: center;
    width: 234px;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--ch-line);
    border-radius: 4px;
    background: var(--ch-white);
}

.ch-list-search:focus-within { border-color: var(--ch-primary); }

.ch-list-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: 400 15px/18px var(--ch-font);
    letter-spacing: -1px;
    color: var(--ch-text);
    outline: none;
}

.ch-list-search__input::placeholder { color: var(--ch-text-dim); opacity: 1; }

.ch-list-search__input::-webkit-search-cancel-button { display: none; }

.ch-list-search__button {
    flex: none;
    display: flex;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ch-list-search__button img { width: 20px; height: 20px; }

/* ---------- 카드 — 1312 × 204 ---------- */

.ch-course-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ch-course-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 204px;
    padding: 20px 32px 20px 20px;
    border: 1px solid var(--ch-line);
    background: var(--ch-white);
    transition: border-color 0.2s, box-shadow 0.3s;
}

/* 마우스를 올리면 테두리·그림자가 진해지고 썸네일이 1.05배(썸네일 칸 안에서 잘린다) */
.ch-course-card:hover { border-color: var(--ch-secondary); box-shadow: 0 8px 20px rgba(34, 34, 34, 0.12); }

.ch-course-card:focus-within { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

.ch-course-card__thumb {
    flex: none;
    align-self: flex-start;
    width: 300px;
    height: 165px;
    overflow: hidden;
    background: var(--ch-tab-bg);
}

.ch-course-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }

.ch-course-card:hover .ch-course-card__thumb img { transform: scale(1.05); }

.ch-course-card__body {
    flex: 1;
    align-self: flex-start;
    min-width: 0;
    margin-left: 32px;
    padding-top: 24px;
}

.ch-course-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font: 500 18px/1.2 var(--ch-font);
    color: var(--ch-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ch-course-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

/* 제목 링크가 카드 전체를 덮는다 — 카드 어디를 눌러도 상세로 */
.ch-course-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.ch-course-card__title a:focus-visible { outline: none; }

.ch-course-card:hover .ch-course-card__title a { color: var(--ch-primary); }

.ch-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font: 400 15px/1.2 var(--ch-font);
    color: var(--ch-text-2);
}

.ch-course-card__meta li + li::before {
    content: '|';
    margin-right: 12px;
    color: var(--ch-line);
}

.ch-course-card__label { font-weight: 500; color: var(--ch-text); }

/* 다른 모듈이 카드 자리에 붙인 조각 — 덮는 링크 위로 올려 누를 수 있게 */
.ch-course-card__extra {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    font-size: 14px;
    color: var(--ch-text-3);
}

.ch-course-card__extra p { margin: 0; }

.ch-course-card__side {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 24px;
}

.ch-course-card__price {
    margin: 0;
    font: 500 15px/1.2 var(--ch-font);
    color: var(--ch-text-2);
    white-space: nowrap;
}

.ch-course-card__button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 7px 16px;
    border-radius: 4px;
    background: var(--ch-primary);
    font: 600 15px/30px var(--ch-font);
    color: var(--ch-white);
    white-space: nowrap;
    transition: background-color 0.2s;
}

.ch-course-card__button img { width: 20px; height: 20px; }

.ch-course-card:hover .ch-course-card__button { background: #6F5A48; }

/* ---------- 빈 상태 ---------- */

.ch-empty {
    margin-top: 16px;
    padding: 80px 20px;
    border: 1px solid var(--ch-line);
    text-align: center;
}

.ch-empty__title { margin: 0; font: 500 18px/1.4 var(--ch-font); color: var(--ch-text); }

.ch-empty__text { margin: 8px 0 0; font: 400 15px/1.4 var(--ch-font); color: var(--ch-text-3); }

.ch-empty__link { display: inline-block; margin-top: 12px; font-size: 15px; color: var(--ch-primary); }

/* ---------- 쪽 넘김 — 버튼 35 × 35, 쪽 번호 사이 24 ---------- */

.ch-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    margin-top: 56px;
}

.ch-pager__group { display: flex; gap: 4px; }

.ch-pager__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid var(--ch-line);
    border-radius: 5px;
    background: var(--ch-white);
    transition: border-color 0.2s;
}

a.ch-pager__button:hover { border-color: var(--ch-primary); }

.ch-pager__button[aria-disabled="true"] { opacity: 0.4; }

.ch-pager__icon { display: block; width: 20px; height: 20px; }

/* 처음·이전 — 시안처럼 끝·다음 아이콘을 좌우로 뒤집는다(받은 SVG는 모두 오른쪽 방향) */
.ch-pager__icon--flip { transform: scaleX(-1); }

.ch-pager__pages {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-pager__page {
    display: block;
    min-width: 12px;
    font: 400 16px/26px var(--ch-font);
    color: rgba(34, 34, 34, 0.3);
    text-align: center;
    text-decoration: none;
    transition: color 0.2s;
}

.ch-pager__page:hover { color: var(--ch-text); }

.ch-pager__page[aria-current="page"] {
    font-weight: 700;
    color: var(--ch-text);
    text-decoration: underline 2px;
    text-underline-offset: 5px;
}

/* ---------- 1024 ~ 1439: 여백만 줄임(--ch-gutter) ---------- */

/* ---------- 769 ~ 1023: 카드 안 배치 조정 ---------- */

@media (max-width: 1023px) {
    .ch-list__inner { padding-top: 48px; padding-bottom: 80px; }
    .ch-page-title { font-size: 32px; }
    .ch-tabs { margin-top: 32px; }
    .ch-tabs__tab { font-size: 16px; }

    .ch-list-toolbar { flex-wrap: wrap; }
    .ch-list-toolbar__controls { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

    .ch-course-card { padding: 16px; }
    .ch-course-card__thumb { width: 220px; height: 121px; }
    .ch-course-card__body { margin-left: 20px; padding-top: 6px; }
    .ch-course-card__meta { margin-top: 16px; font-size: 14px; }
    .ch-course-card__side { flex-direction: column; align-items: flex-end; gap: 8px; margin-left: 16px; }
}

/* ---------- 768 이하: 카드는 썸네일 위·내용 아래, 탭은 가로 스크롤, 도구 줄은 줄바꿈 ---------- */

@media (max-width: 768px) {
    .ch-list__inner { padding-top: 32px; padding-bottom: 64px; }
    .ch-page-title { font-size: 24px; }

    .ch-tabs {
        display: flex;
        margin: 24px calc(var(--ch-gutter) * -1) 0;
        padding: 0 var(--ch-gutter) 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* 오른쪽 끝 흐림 — 옆으로 밀 수 있다는 표시. 목록 뒤에 붙어 오른쪽에 머물다가(sticky) 끝까지 밀면 빈자리로 비켜난다(스크립트 없음) */
    .ch-tabs::after,
    .ch-mypage-tabs::after {
        content: '';
        flex: none;
        position: sticky;
        right: 0;
        width: 40px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--ch-white));
        pointer-events: none;
    }

    .ch-tabs__list { flex: none; flex-wrap: nowrap; gap: 6px; }
    .ch-tabs__tab { padding: 9px 14px; font-size: 15px; }

    .ch-list-toolbar { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
    .ch-list-toolbar__count { font-size: 15px; }
    .ch-list-toolbar__controls { flex-direction: column; align-items: stretch; margin-left: 0; gap: 6px; }
    .ch-list-filter { flex-wrap: wrap; }
    .ch-select { flex: 1 1 0; min-width: 0; width: auto; }
    .ch-select--per-page { flex: 0 0 73px; }
    .ch-list-search { width: 100%; }

    .ch-course-card { flex-direction: column; align-items: stretch; padding: 0; }
    .ch-course-card__thumb { align-self: stretch; width: 100%; height: auto; max-height: 240px; aspect-ratio: 300 / 165; }
    .ch-course-card__body { margin: 0; padding: 16px 16px 0; }
    .ch-course-card__title { font-size: 17px; }
    /* 좁은 폭에서는 줄이 바뀌면 구분자가 줄 머리에 남으므로 빼고 간격으로만 나눈다 */
    .ch-course-card__meta { gap: 4px 14px; margin-top: 12px; font-size: 14px; }
    .ch-course-card__meta li + li::before { content: none; }
    .ch-course-card__side { flex-direction: row; justify-content: space-between; margin: 0; padding: 16px; }
    .ch-course-card__side .ch-course-card__button { margin-left: auto; }
    .ch-course-card__button { padding: 5px 14px; gap: 10px; line-height: 28px; }

    .ch-empty { padding: 56px 16px; }

    .ch-pager { gap: 12px; margin-top: 40px; }
    .ch-pager__pages { gap: 16px; }
}

@media (scripting: none) {
    .ch-list-filter__submit {
        display: inline-flex;
        align-items: center;
        height: 42px;
        padding: 0 14px;
        border: 0;
        border-radius: 4px;
        background: var(--ch-primary);
        font: 600 15px/1 var(--ch-font);
        color: var(--ch-white);
        cursor: pointer;
    }
}

/* =====================================================================
 * 강좌 상세 (resources/views/vendor/courses/show.blade.php · partials/curriculum) — 시안 없음, 전체 강좌와 같은 토큰
 * 내용 폭 1312px 가운데. 위쪽 가로 2단(썸네일 16:9 | 정보), 아래쪽 강좌 소개 · 커리큘럼 · 목록으로
 * ===================================================================== */

.ch-detail__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 40px var(--ch-gutter) 110px;
}

/* ---------- 버튼(상세·구매 폼 공용) ---------- */

.ch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border: 1px solid var(--ch-primary);
    border-radius: 4px;
    font: 600 16px/1 var(--ch-font);
    letter-spacing: -0.3px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ch-button--primary { background: var(--ch-primary); color: var(--ch-white); }

.ch-button--primary:hover { background: #6F5A48; border-color: #6F5A48; }

.ch-button--outline { background: var(--ch-white); color: var(--ch-primary); }

.ch-button--outline:hover { background: var(--ch-tab-bg); }

.ch-button--large { min-width: 240px; height: 56px; font-size: 18px; }

.ch-button:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

/* ---------- 경로 ---------- */

.ch-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 14px/1.4 var(--ch-font);
    color: var(--ch-text-3);
}

.ch-breadcrumb__list li + li::before {
    content: '>';
    margin: 0 8px;
    color: var(--ch-text-3);
}

.ch-breadcrumb__list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.ch-breadcrumb__list a:hover { color: var(--ch-primary); }

.ch-breadcrumb__list li:last-child a { color: var(--ch-text); font-weight: 500; }

/* ---------- 위쪽 2단 ---------- */

.ch-detail__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin-top: 24px;
}

.ch-detail__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ch-tab-bg);
}

.ch-detail__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ch-detail__category {
    margin: 0;
    font: 500 15px/1.2 var(--ch-font);
    color: var(--ch-secondary);
}

.ch-detail__title {
    margin: 12px 0 0;
    font: 700 32px/1.3 var(--ch-font);
    letter-spacing: -0.6px;
    color: var(--ch-text);
    word-break: keep-all;
}

.ch-detail__summary {
    margin: 16px 0 0;
    font: 400 17px/1.6 var(--ch-font);
    color: var(--ch-text-2);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-detail__notice {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--ch-tab-bg);
    font: 400 15px/1.5 var(--ch-font);
    color: var(--ch-text-2);
}

.ch-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ch-line);
    list-style: none;
    font: 400 15px/1.2 var(--ch-font);
    color: var(--ch-text-2);
}

.ch-detail__meta > li { display: flex; align-items: center; gap: 4px; }

.ch-detail__meta > li + li::before {
    content: '|';
    margin-right: 8px;
    color: var(--ch-line);
}

.ch-detail__label { font-weight: 500; color: var(--ch-text); }

/* 좋아요 — 킷 likes.js가 버튼 글자(좋아요 / 좋아요 취소)와 숫자를 바꾼다 */
.ch-like__form { display: inline; margin: 0 0 0 6px; }

.ch-like__button {
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin-left: 6px;
    padding: 0 10px;
    border: 1px solid var(--ch-line);
    border-radius: 4px;
    background: var(--ch-white);
    font: 500 13px/1 var(--ch-font);
    color: var(--ch-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.ch-like__form .ch-like__button { margin-left: 0; }

/* 보이는 버튼은 28px 그대로, 누르는 영역만 위아래 8px씩 넓혀 44px — 커리큘럼 "보기"도 같다 */
.ch-like__button,
.ch-curriculum__links a { position: relative; }

.ch-like__button::before,
.ch-curriculum__links a::before {
    content: '';
    position: absolute;
    inset: -9px -2px;
}

.ch-like__button:hover { border-color: var(--ch-primary); color: var(--ch-primary); }

.ch-like__button[aria-pressed="true"] { border-color: var(--ch-primary); background: var(--ch-primary); color: var(--ch-white); }

.ch-like__button:disabled { opacity: 0.6; cursor: default; }

/* ---------- 가격·주 버튼 ---------- */

.ch-detail__price { margin-top: 28px; }

.ch-detail__price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }

.ch-detail__amount { font: 700 28px/1.2 var(--ch-font); letter-spacing: -0.5px; color: var(--ch-text); white-space: nowrap; }

.ch-detail__period { font: 400 15px/1.2 var(--ch-font); color: var(--ch-text-3); }

.ch-detail__price-note { margin: 0; font: 500 16px/1.4 var(--ch-font); color: var(--ch-text-3); }

.ch-detail__plans {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ch-line);
    list-style: none;
}

.ch-detail__plan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ch-line);
}

.ch-detail__plan-name { font: 600 16px/1.3 var(--ch-font); color: var(--ch-text); }

.ch-detail__plan .ch-detail__amount { margin-left: auto; font-size: 20px; }

.ch-detail__plan .ch-purchase { flex: none; }

.ch-detail__plan .ch-button--large { min-width: 0; height: 40px; padding: 0 18px; font-size: 15px; }

.ch-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.ch-detail__actions:empty { display: none; }

.ch-purchase { display: flex; margin: 0; }

/* ---------- 아래쪽 — 강좌 소개 · 커리큘럼 ---------- */

.ch-detail__section { margin-top: 80px; }

.ch-detail__heading {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ch-text);
    font: 700 24px/1.3 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
}

.ch-detail__body {
    margin: 24px 0 0;
    font: 400 16px/1.8 var(--ch-font);
    color: var(--ch-text-2);
    word-break: keep-all;
}

.ch-curriculum { margin-top: 16px; border: 1px solid var(--ch-line); }

.ch-detail__heading + .ch-curriculum { margin-top: 24px; }

.ch-curriculum__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 24px;
    background: var(--ch-tab-bg);
    font: 600 17px/1.3 var(--ch-font);
    color: var(--ch-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-curriculum__count { flex: none; font: 400 14px/1 var(--ch-font); color: var(--ch-text-3); }

.ch-curriculum__lessons { margin: 0; padding: 0; list-style: none; }

.ch-curriculum__lesson {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    min-height: 56px;
    padding: 12px 24px;
    border-top: 1px solid var(--ch-line-2);
    font: 400 15px/1.4 var(--ch-font);
    color: var(--ch-text);
}

.ch-curriculum__title { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }

.ch-curriculum__time {
    flex: none;
    min-width: 48px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ch-text-3);
    text-align: right;
}

.ch-curriculum__links { flex: none; display: flex; gap: 6px; }

.ch-curriculum__links:empty { display: none; }

.ch-curriculum__links a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--ch-line);
    border-radius: 4px;
    font: 500 13px/1 var(--ch-font);
    color: var(--ch-text-2);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.ch-curriculum__links a:hover { border-color: var(--ch-primary); color: var(--ch-primary); }

.ch-badge {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--ch-secondary);
    border-radius: 4px;
    font: 500 12px/1.2 var(--ch-font);
    color: var(--ch-primary);
    white-space: nowrap;
}

.ch-curriculum__empty {
    margin: 24px 0 0;
    padding: 48px 20px;
    border: 1px solid var(--ch-line);
    font: 400 15px/1.4 var(--ch-font);
    color: var(--ch-text-3);
    text-align: center;
}

.ch-detail__extra { margin-top: 80px; }

.ch-detail__back { margin-top: 64px; text-align: center; }

.ch-detail__back .ch-button { min-width: 180px; }

/* ---------- 1024 ~ 1439: 여백만 줄임(--ch-gutter), 단 사이 간격 ---------- */

@media (max-width: 1439px) {
    .ch-detail__top { gap: 40px; }
}

/* ---------- 769 ~ 1023: 2단 유지, 썸네일을 조금 좁게 ---------- */

@media (max-width: 1023px) {
    .ch-detail__inner { padding-top: 32px; padding-bottom: 80px; }
    .ch-detail__top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; }
    .ch-detail__title { font-size: 26px; }
    .ch-detail__summary { font-size: 16px; }
    .ch-detail__meta { font-size: 14px; }
    .ch-detail__amount { font-size: 24px; }
    .ch-button--large { min-width: 200px; height: 52px; font-size: 17px; }
    .ch-detail__section, .ch-detail__extra { margin-top: 64px; }
}

/* ---------- 768 이하: 썸네일 위 · 정보 아래, 주 버튼은 폭 꽉 채움 ---------- */

@media (max-width: 768px) {
    .ch-detail__inner { padding-top: 20px; padding-bottom: 64px; }
    .ch-detail__top { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 16px; }
    .ch-detail__thumb { margin: 0 calc(var(--ch-gutter) * -1); }
    .ch-detail__title { margin-top: 8px; font-size: 24px; }
    .ch-detail__summary { margin-top: 12px; font-size: 15px; }

    /* 좁은 폭에서는 줄이 바뀌면 구분자가 줄 머리에 남으므로 빼고 간격으로만 나눈다 */
    .ch-detail__meta { gap: 8px 16px; margin-top: 20px; padding-top: 16px; }
    .ch-detail__meta > li + li::before { content: none; }

    .ch-detail__price { margin-top: 20px; }
    .ch-detail__amount { font-size: 24px; }
    .ch-detail__plan .ch-purchase { flex: 1 1 100%; }
    .ch-detail__plan .ch-button--large { width: 100%; }

    .ch-detail__actions { flex-direction: column; gap: 8px; margin-top: 20px; }
    .ch-detail__actions .ch-button,
    .ch-detail__actions .ch-purchase { width: 100%; }
    .ch-button--large { min-width: 0; }

    .ch-detail__section, .ch-detail__extra { margin-top: 48px; }
    .ch-detail__heading { padding-bottom: 12px; font-size: 20px; }
    .ch-detail__body { margin-top: 16px; font-size: 15px; }

    .ch-curriculum__head { padding: 14px 16px; font-size: 16px; }
    .ch-curriculum__lesson { flex-wrap: wrap; padding: 12px 16px; font-size: 14px; }
    .ch-curriculum__title { flex: 1 1 100%; }
    .ch-curriculum__time { min-width: 0; text-align: left; }
    .ch-curriculum__links { margin-left: auto; }

    .ch-detail__back { margin-top: 48px; }
    .ch-detail__back .ch-button { width: 100%; }
}

/* =====================================================================
 * 공지사항 목록 (resources/views/vendor/notices/index.blade.php) — 시안 없음
 * 제목·검색칸·쪽 넘김·빈 상태는 전체 강좌 것을 쓴다(.ch-list__inner · .ch-page-title · .ch-list-search · .ch-pager · .ch-empty).
 * 표는 위 2px #222, 행 58px, 행 사이 #DDDDDD(메인 공지 상자와 같은 톤)
 * ===================================================================== */

.ch-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 40px;
}

.ch-board-toolbar .ch-list-toolbar__clear { margin-left: 0; }

.ch-board,
.ch-board-empty { margin-top: 16px; }

.ch-board {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--ch-text);
    table-layout: fixed;
}

.ch-board th {
    height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ch-line);
    font: 500 16px/1.2 var(--ch-font);
    color: var(--ch-text);
    text-align: center;
}

.ch-board td {
    height: 58px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ch-line);
    font: 400 16px/1.4 var(--ch-font);
    color: var(--ch-text-2);
    text-align: center;
}

.ch-board__num { width: 120px; }

.ch-board__date { width: 160px; }

.ch-board td.ch-board__date { font-size: 15px; color: var(--ch-text-3); font-variant-numeric: tabular-nums; }

.ch-board th.ch-board__title,
.ch-board td.ch-board__title { text-align: left; }

.ch-board__title a {
    display: block;
    overflow: hidden;
    font: 400 17px/28px var(--ch-font);
    color: var(--ch-text);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

/* 제목 링크가 행 전체를 덮는다 — 행 어디를 눌러도 상세로 */
.ch-board__row { position: relative; transition: background-color 0.2s; }

.ch-board__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.ch-board__row:hover,
.ch-board__row:focus-within { background: var(--ch-tab-bg); }

.ch-board__row:hover .ch-board__title a,
.ch-board__title a:focus-visible { color: var(--ch-primary); outline: none; }

.ch-board__row--pinned .ch-board__title a { font-weight: 500; }

.ch-board__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 26px;
    padding: 0 10px;
    border-radius: 4px;
    background: var(--ch-secondary);
    font: 600 13px/1 var(--ch-font);
    color: var(--ch-white);
}

/* =====================================================================
 * 공지 상세 (resources/views/vendor/notices/show.blade.php) — 시안 없음
 * 본문은 킷 RichText가 걸러 낸 HTML(p·br·strong·em·u·s·a·ul·ol·li·blockquote·h2~h4·img·table 등)
 * ===================================================================== */

.ch-post__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 64px var(--ch-gutter) 110px;
}

.ch-post__preview {
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--ch-tab-bg);
    font: 400 15px/1.5 var(--ch-font);
    color: var(--ch-text-2);
}

.ch-post__head {
    padding-bottom: 24px;
    border-top: 2px solid var(--ch-text);
    border-bottom: 1px solid var(--ch-line);
}

.ch-post__title {
    margin: 0;
    padding-top: 28px;
    font: 700 28px/1.4 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
    word-break: keep-all;
}

.ch-post__meta {
    margin: 12px 0 0;
    font: 400 15px/1.2 var(--ch-font);
    font-variant-numeric: tabular-nums;
    color: var(--ch-text-3);
}

.ch-post__body {
    padding: 40px 0 56px;
    border-bottom: 1px solid var(--ch-line);
}

.ch-richtext {
    font: 400 16px/1.9 var(--ch-font);
    color: var(--ch-text-2);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-richtext > :first-child { margin-top: 0; }

.ch-richtext > :last-child { margin-bottom: 0; }

.ch-richtext p { margin: 0 0 1em; }

.ch-richtext h2,
.ch-richtext h3,
.ch-richtext h4 { margin: 1.8em 0 0.6em; font-weight: 700; line-height: 1.4; color: var(--ch-text); }

.ch-richtext h2 { font-size: 22px; }

.ch-richtext h3 { font-size: 19px; }

.ch-richtext h4 { font-size: 17px; }

.ch-richtext strong,
.ch-richtext b { font-weight: 600; color: var(--ch-text); }

.ch-richtext a { color: var(--ch-primary); text-decoration: underline; text-underline-offset: 3px; }

.ch-richtext ul,
.ch-richtext ol { margin: 0 0 1em; padding-left: 1.5em; }

.ch-richtext li + li { margin-top: 0.3em; }

.ch-richtext blockquote {
    margin: 0 0 1em;
    padding: 12px 20px;
    border-left: 3px solid var(--ch-secondary);
    background: var(--ch-tab-bg);
}

.ch-richtext img { display: block; max-width: 100%; height: auto; margin: 1.2em 0; }

.ch-richtext hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ch-line); }

.ch-richtext table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
    border-top: 2px solid var(--ch-text);
    font-size: 15px;
    line-height: 1.6;
}

.ch-richtext th,
.ch-richtext td { padding: 10px 14px; border-bottom: 1px solid var(--ch-line); text-align: left; vertical-align: top; }

.ch-richtext th { background: var(--ch-tab-bg); font-weight: 600; color: var(--ch-text); }

/* ---------- 1024 ~ 1439: 여백만 줄임(--ch-gutter) ---------- */

/* ---------- 769 ~ 1023: 칸 폭과 글자를 조금 줄임 ---------- */

@media (max-width: 1023px) {
    .ch-board-toolbar { margin-top: 32px; }
    .ch-board__num { width: 88px; }
    .ch-board__date { width: 128px; }
    .ch-board td, .ch-board th { padding: 0 12px; }
    .ch-board__title a { font-size: 16px; }

    .ch-post__inner { padding-top: 48px; padding-bottom: 80px; }
    .ch-post__title { font-size: 24px; }
}

/* ---------- 768 이하: 번호 칸·머리 줄 숨김, 제목·날짜 두 줄 ---------- */

@media (max-width: 768px) {
    .ch-board-toolbar { margin-top: 24px; }
    .ch-board-toolbar .ch-list-search { flex: 1; width: auto; }

    .ch-board thead { display: none; }
    .ch-board,
    .ch-board tbody { display: block; }
    .ch-board__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 14px 4px; border-bottom: 1px solid var(--ch-line); }
    .ch-board td { display: block; height: auto; padding: 0; border: 0; text-align: left; }
    .ch-board td.ch-board__num { display: none; }
    .ch-board__row--pinned td.ch-board__num { display: block; width: auto; }
    .ch-board td.ch-board__title { flex: 1 1 0; min-width: 0; width: auto; }
    .ch-board td.ch-board__date { flex: 1 1 100%; width: auto; font-size: 13px; }
    .ch-board__title a { font-size: 15px; line-height: 24px; }
    .ch-board__badge { min-width: 0; height: 22px; padding: 0 8px; font-size: 12px; }

    .ch-post__inner { padding-top: 32px; padding-bottom: 64px; }
    .ch-post__head { padding-bottom: 16px; }
    .ch-post__title { padding-top: 20px; font-size: 21px; }
    .ch-post__meta { margin-top: 8px; font-size: 14px; }
    .ch-post__body { padding: 28px 0 40px; }
    .ch-richtext { font-size: 15px; line-height: 1.8; }
    .ch-richtext table { display: block; overflow-x: auto; }
}

/* =====================================================================
 * 안내·상단 요약 오류 — 레이아웃(vendor/public-shell/layout)이 헤더 아래에 그리는 p[data-flash] · div[role="alert"]
 * 모든 퍼블릭 화면 공통. 오류는 빨간 계열(--ch-danger)
 * ===================================================================== */

body > [data-flash],
body > [role="alert"] {
    /* body가 flex 열이라 좌우 auto 여백이면 내용 폭으로 줄어든다 — 폭을 채운 뒤 max-width로 가운데 */
    width: 100%;
    max-width: 640px;
    margin: 32px auto 0;
    padding: 14px 20px;
    border-radius: 8px;
    font: 400 15px/1.5 var(--ch-font);
    word-break: keep-all;
}

/* 한 줄 안내는 가운데. 상단 요약 오류(목록)는 왼쪽 그대로 */
body > [data-flash] { background: var(--ch-tab-bg); color: var(--ch-text); text-align: center; }

body > [data-flash="danger"] { background: #FBEDED; color: var(--ch-danger); }

body > [role="alert"] {
    border: 1px solid #F0C9C9;
    background: #FBEDED;
    color: var(--ch-danger);
}

body > [role="alert"] p { margin: 0; font-weight: 600; }

body > [role="alert"] ul { margin: 6px 0 0; padding-left: 1.2em; font-size: 14px; }

/* =====================================================================
 * 로그인·비밀번호 찾기·재설정·회원가입 (resources/views/vendor/authentication/) — 시안 없음
 * 흰 카드 — 로그인·이메일 찾기·비밀번호 찾기·재설정은 .ch-auth__box(440px), 회원가입은 제목·단계 표시 아래 가입 폼(.ch-join__form, 800px).
 * 바탕은 흰색 그대로 그림자로만 띄운다. 카드 모서리·그림자·칸 모서리는 아래 변수 한 벌. 제목 Bold 36, 입력칸 52px, 주 버튼 56px
 * ===================================================================== */

.ch-auth {
    padding: 72px var(--ch-gutter) 110px;
}

.ch-auth__box {
    max-width: 440px;
    margin: 0 auto;
    padding: 48px 40px;
    border-radius: var(--ch-card-radius);
    background: var(--ch-white);
    box-shadow: var(--ch-card-shadow);
}

/* 카드 안의 칸·버튼 모서리 */
.ch-auth__box .ch-input,
.ch-auth__box .ch-button,
.ch-join__form .ch-input,
.ch-join__form .ch-button { border-radius: var(--ch-card-control-radius); }

/* 로그인 화면만 제목 자리에 로고(h1 "로그인"은 .ch-sr로 화면에서만 숨긴다). 헤더 로고 101×86보다 조금 작게 */
.ch-auth__logo {
    display: block;
    width: 88px;
    height: auto;
    margin: 0 auto;
}

.ch-auth__title {
    margin: 0;
    font: 700 36px/1.3 var(--ch-font);
    letter-spacing: -0.8px;
    color: var(--ch-text);
    text-align: center;
}

.ch-auth__lead {
    margin: 16px 0 0;
    font: 400 15px/1.6 var(--ch-font);
    color: var(--ch-text-2);
    text-align: center;
    word-break: keep-all;
}

.ch-auth__form { margin-top: 40px; }

.ch-field + .ch-field { margin-top: 20px; }

.ch-field__label {
    display: block;
    margin-bottom: 8px;
    font: 500 15px/1.3 var(--ch-font);
    color: var(--ch-text);
}

.ch-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--ch-line);
    border-radius: 4px;
    background: var(--ch-white);
    font: 400 16px/1.2 var(--ch-font);
    color: var(--ch-text);
    transition: border-color 0.2s;
}

.ch-input::placeholder { color: #AAAAAA; opacity: 1; }

.ch-input:hover { border-color: var(--ch-secondary); }

.ch-input:focus { border-color: var(--ch-primary); outline: none; }

.ch-input[aria-invalid="true"] { border-color: var(--ch-danger); }

.ch-field__error {
    margin: 6px 0 0;
    font: 400 13px/1.4 var(--ch-font);
    color: var(--ch-danger);
}

.ch-check,
.ch-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 15px/1.3 var(--ch-font);
    color: var(--ch-text-2);
    cursor: pointer;
}

.ch-check input,
.ch-radio input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ch-primary);
    cursor: pointer;
}

.ch-auth__form .ch-check { margin-top: 16px; }

.ch-button--block { width: 100%; }

.ch-auth__form .ch-button--block { height: 56px; margin-top: 28px; font-size: 17px; }

.ch-auth__links {
    display: flex;
    justify-content: center;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font: 400 15px/1.2 var(--ch-font);
}

.ch-auth__links li + li::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 16px;
    background: var(--ch-line);
    vertical-align: middle;
}

.ch-auth__links a,
.ch-auth__switch a {
    color: var(--ch-text-2);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-auth__links a:hover,
.ch-auth__switch a:hover { color: var(--ch-primary); }

.ch-auth__switch {
    margin: 32px 0 0;
    font: 400 15px/1.4 var(--ch-font);
    color: var(--ch-text-3);
    text-align: center;
}

.ch-auth__switch a { margin-left: 6px; font-weight: 600; color: var(--ch-primary); text-decoration: underline; text-underline-offset: 3px; }

.ch-field__help {
    margin: 6px 0 0;
    font: 400 13px/1.4 var(--ch-font);
    color: var(--ch-text-3);
}

/* 이메일 찾기 결과 — 킷이 가린 주소(masked)를 그대로 보여준다 */
.ch-find-result {
    margin-top: 32px;
    padding: 24px;
    border-radius: 8px;
    background: #F7F3EF;
}

.ch-find-result__title { margin: 0; font: 600 16px/1.3 var(--ch-font); color: var(--ch-text); }

.ch-find-result__empty,
.ch-find-result__note { margin: 12px 0 0; font: 400 14px/1.6 var(--ch-font); color: var(--ch-text-3); word-break: keep-all; }

.ch-find-result__list { margin: 12px 0 0; padding: 0; list-style: none; }

.ch-find-result__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--ch-line-2);
}

.ch-find-result__list li:first-child { border-top: 0; padding-top: 4px; }

.ch-find-result__email { font: 600 17px/1.4 var(--ch-font); color: var(--ch-primary); overflow-wrap: anywhere; }

.ch-find-result__joined { font: 400 14px/1.4 var(--ch-font); color: var(--ch-text-3); }

/* ---------- 회원가입 — 폭 800, 단계 표시 ---------- */

.ch-auth--wide .ch-join { max-width: 800px; margin: 0 auto; }

.ch-join-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.ch-join-steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #AAAAAA;
}

.ch-join-steps__item + .ch-join-steps__item::before {
    content: '›';
    margin-right: 2px;
    font: 400 22px/1 var(--ch-font);
    color: #BBBBBB;
}

.ch-join-steps__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ch-line);
    border-radius: 50%;
    background: #F5F5F5;
    font: 700 16px/1 var(--ch-font);
    color: #AAAAAA;
}

.ch-join-steps__text { display: flex; flex-direction: column; gap: 2px; }

.ch-join-steps__no { font: 600 12px/1.2 var(--ch-font); letter-spacing: 0.3px; }

.ch-join-steps__name { font: 500 15px/1.2 var(--ch-font); }

.ch-join-steps__item[aria-current="step"] { color: var(--ch-primary); }

.ch-join-steps__item[aria-current="step"] .ch-join-steps__circle {
    border-color: var(--ch-primary);
    background: var(--ch-primary);
    color: var(--ch-white);
}

.ch-join-steps__item[aria-current="step"] .ch-join-steps__name { font-weight: 700; color: var(--ch-text); }

/* 서버가 정한 단계만 보인다(스크립트가 data-ch-step을 바꾼다). 스크립트가 없으면 아래 (scripting: none)이 둘 다 보인다 */
.ch-join[data-ch-step="1"] [data-ch-join-step="2"],
.ch-join[data-ch-step="2"] [data-ch-join-step="1"] { display: none; }

.ch-join__verify-form { display: none; }

/* 가입 카드 — 약관 동의·정보 입력과 버튼이 이 폼 안에 있다. 제목·단계 표시는 카드 밖 위 */
.ch-join__form {
    margin-top: 40px;
    padding: 48px;
    border-radius: var(--ch-card-radius);
    background: var(--ch-white);
    box-shadow: var(--ch-card-shadow);
}

/* STEP 01 약관동의 */

.ch-join__all {
    display: flex;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-card-control-radius);
    background: var(--ch-tab-bg);
    font-weight: 600;
    color: var(--ch-text);
}

.ch-terms { margin-top: 28px; }

.ch-terms__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.ch-terms__title { margin: 0; font: 600 16px/1.4 var(--ch-font); color: var(--ch-text); word-break: keep-all; }

.ch-terms__kind { margin-left: 4px; font-weight: 500; color: var(--ch-secondary); }

.ch-terms__choice { display: flex; gap: 20px; }

.ch-terms__box {
    height: 150px;
    margin-top: 10px;
    padding: 16px 18px;
    overflow-y: auto;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-card-control-radius);
    font: 400 14px/1.7 var(--ch-font);
    color: var(--ch-text-3);
    word-break: keep-all;
}

.ch-terms__box:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

.ch-join__notice {
    margin: 20px 0 0;
    font: 500 14px/1.4 var(--ch-font);
    color: var(--ch-danger);
    text-align: center;
}

.ch-join__actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.ch-join__actions .ch-button { min-width: 180px; height: 56px; font-size: 17px; }

/* STEP 02 정보입력 — 테두리 상자 안 표(왼쪽 라벨, 오른쪽 입력칸) */

.ch-join__required {
    margin: 0 0 10px;
    font: 400 13px/1.4 var(--ch-font);
    color: var(--ch-text-3);
    text-align: right;
}

.ch-join__mark { color: var(--ch-danger); }

.ch-join-table {
    border: 1px solid var(--ch-line);
    border-radius: 4px;
}

.ch-join-row {
    display: flex;
    border-top: 1px solid var(--ch-line-2);
}

.ch-join-row:first-child { border-top: 0; }

.ch-join-row__label {
    flex: none;
    width: 180px;
    padding: 30px 20px 0 24px;
    background: #FAF9F7;
    font: 500 15px/1.3 var(--ch-font);
    color: var(--ch-text);
}

.ch-join-row__field {
    flex: 1;
    min-width: 0;
    padding: 16px 24px;
}

.ch-join-row__field .ch-input { max-width: 420px; }

.ch-join-row__inline { display: flex; gap: 8px; max-width: 560px; }

.ch-join-row__inline .ch-input { flex: 1; min-width: 0; }

.ch-join-row__code { margin-top: 10px; }

.ch-button--inline { flex: none; height: 52px; padding: 0 18px; font-size: 15px; }

.ch-join-row__help {
    margin: 6px 0 0;
    font: 400 13px/1.4 var(--ch-font);
    color: var(--ch-text-3);
}

.ch-join-row__static {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    margin: 0;
    font: 400 16px/1.3 var(--ch-font);
    color: var(--ch-text);
}

.ch-join-row__ok {
    padding: 3px 8px;
    border: 1px solid var(--ch-secondary);
    border-radius: 4px;
    font: 500 12px/1.2 var(--ch-font);
    color: var(--ch-primary);
}

.ch-input--date { max-width: 220px; }

/* 스크립트가 없으면 두 단계를 다 보이고, 단계 사이를 오가는 버튼은 숨긴다 */
@media (scripting: none) {
    .ch-join[data-ch-step] [data-ch-join-step] { display: block; }
    .ch-join__actions--nav,
    .ch-join__prev,
    .ch-join__all { display: none; }
    .ch-join__step + .ch-join__step { margin-top: 48px; }
}

/* ---------- 769 ~ 1023 ---------- */

@media (max-width: 1023px) {
    .ch-auth { padding-top: 56px; padding-bottom: 80px; }
    .ch-auth__title { font-size: 32px; }
    .ch-join-row__label { width: 150px; }
}

/* ---------- 768 이하: 상자는 화면 폭(좌우 16px), 가입 표의 라벨은 입력칸 위 ---------- */

@media (max-width: 768px) {
    /* 좌우 여백을 주므로 폭은 자동(body가 flex 열이라 늘어난다) — 100%면 여백만큼 넘친다 */
    body > [data-flash],
    body > [role="alert"] { width: auto; margin: 20px var(--ch-gutter) 0; }

    .ch-auth { padding-top: 40px; padding-bottom: 64px; }
    .ch-auth__title { font-size: 28px; }
    .ch-auth__form { margin-top: 28px; }
    .ch-input { font-size: 16px; }
    .ch-find-result { margin-top: 24px; padding: 18px 16px; }

    .ch-join-steps { gap: 6px; margin-top: 24px; }
    .ch-join-steps__item { flex-direction: column; gap: 6px; text-align: center; }
    .ch-join-steps__item + .ch-join-steps__item::before { content: none; }
    .ch-join-steps__circle { width: 36px; height: 36px; font-size: 14px; }
    .ch-join-steps__item { flex: 1; }
    .ch-join-steps__no { font-size: 11px; }
    .ch-join-steps__name { font-size: 13px; }

    .ch-join__form { margin-top: 28px; }
    .ch-join__all { padding: 14px 16px; }
    .ch-terms__head { align-items: flex-start; flex-direction: column; }
    .ch-terms__title { font-size: 15px; }

    .ch-join-row { flex-direction: column; }
    .ch-join-row__label { width: auto; padding: 16px 16px 0; background: none; }
    .ch-join-row__field { padding: 8px 16px 16px; }
    .ch-join-row__field .ch-input,
    .ch-input--date { max-width: none; }
    .ch-join-row__inline { max-width: none; }
    .ch-button--inline { padding: 0 12px; font-size: 14px; }

    .ch-join__actions { margin-top: 28px; }
    .ch-join__actions .ch-button { flex: 1; min-width: 0; height: 52px; font-size: 16px; }
}

/* ---------- 767 이하: 카드(로그인 계열·회원가입)를 빼고 화면 폭을 채운다. 768(태블릿 세로)은 카드 유지 ---------- */

@media (max-width: 767px) {
    .ch-auth__box { max-width: none; padding: 0; border-radius: 0; box-shadow: none; }
    .ch-auth__logo { width: 72px; }
    .ch-join__form { padding: 0; border-radius: 0; box-shadow: none; }
}

/* =====================================================================
 * 나의 강의실 — 마이페이지 틀(vendor/members/mypage/layout) · 내 강의(vendor/enrollments/mypage/index)
 * · 학습 진도(vendor/progress/mypage/index). 시안 없음, 전체 강좌와 같은 톤
 * 내용 폭 1312px 가운데, 제목은 .ch-page-title, 카드는 전체 강좌 카드(.ch-course-card)와 같은 크기
 * ===================================================================== */

.ch-mypage__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 64px var(--ch-gutter) 110px;
}

/* ---------- 탭 — 가로, 지금 탭은 primary 밑줄 + 굵게 ---------- */

.ch-mypage-tabs {
    margin-top: 40px;
    border-bottom: 1px solid var(--ch-line);
}

.ch-mypage-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-mypage-tabs__tab {
    display: block;
    margin-bottom: -1px;
    padding: 14px 2px;
    border-bottom: 3px solid transparent;
    font: 400 17px/1.2 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.ch-mypage-tabs__tab:hover { color: var(--ch-text); }

.ch-mypage-tabs__tab[aria-current="page"] {
    border-bottom-color: var(--ch-primary);
    font-weight: 700;
    color: var(--ch-text);
}

.ch-mypage__heading {
    margin: 40px 0 0;
    font: 700 22px/1.3 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
}

/* ---------- 카드 — 전체 강좌 카드와 같은 크기(썸네일 300 × 165) ---------- */

.ch-my-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ch-my-card {
    display: flex;
    align-items: center;
    min-height: 204px;
    padding: 20px 32px 20px 20px;
    border: 1px solid var(--ch-line);
    background: var(--ch-white);
}

/* 만료·회수 — 카드 전체를 흐리게 */
.ch-my-card--dim { opacity: 0.55; }

.ch-my-card__thumb {
    flex: none;
    align-self: flex-start;
    width: 300px;
    height: 165px;
    overflow: hidden;
    background: var(--ch-tab-bg);
}

.ch-my-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ch-my-card__body {
    flex: 1;
    min-width: 0;
    margin-left: 32px;
}

.ch-my-card__title {
    margin: 12px 0 0;
    font: 500 20px/1.3 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
    word-break: keep-all;
}

.ch-my-card__body > .ch-my-card__title:first-child { margin-top: 0; }

.ch-my-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font: 400 15px/1.3 var(--ch-font);
    color: var(--ch-text-2);
}

.ch-my-card__meta li + li::before {
    content: '|';
    margin-right: 12px;
    color: var(--ch-line);
}

.ch-my-card__label { font-weight: 500; color: var(--ch-text); }

.ch-my-card__days { font-weight: 600; color: var(--ch-primary); }

.ch-my-card__side {
    flex: none;
    min-width: 140px;
    margin-left: 24px;
    text-align: right;
}

.ch-my-card__side:empty { display: none; }

.ch-my-card__button { min-width: 140px; height: 44px; padding: 0 24px; font-size: 15px; }

.ch-my-card__note {
    margin: 0;
    font: 500 15px/1.3 var(--ch-font);
    color: var(--ch-text-3);
    white-space: nowrap;
}

/* ---------- 상태 배지 — 수강 중 primary 채움 · 시작 전 secondary 테두리 · 만료·회수 회색 ---------- */

.ch-status {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--ch-text-3);
    border-radius: 4px;
    background: var(--ch-text-3);
    font: 600 13px/1 var(--ch-font);
    color: var(--ch-white);
    white-space: nowrap;
}

.ch-status--active { border-color: var(--ch-primary); background: var(--ch-primary); }

.ch-status--upcoming { border-color: var(--ch-secondary); background: var(--ch-white); color: var(--ch-primary); }

/* ---------- 진도 막대 — <progress>, 트랙 #EEEEEE · 채움 primary ---------- */

.ch-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin-top: 20px;
}

.ch-progress__bar {
    flex: 1;
    min-width: 0;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--ch-line-2);
    color: var(--ch-primary);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.ch-progress__bar::-webkit-progress-bar { border-radius: 4px; background: var(--ch-line-2); }

.ch-progress__bar::-webkit-progress-value { border-radius: 4px; background: var(--ch-primary); }

.ch-progress__bar::-moz-progress-bar { border-radius: 4px; background: var(--ch-primary); }

.ch-progress__text {
    flex: none;
    font: 400 15px/1.2 var(--ch-font);
    font-variant-numeric: tabular-nums;
    color: var(--ch-text-2);
}

.ch-progress__text strong { font-weight: 700; color: var(--ch-text); }

/* ---------- 1024 ~ 1439: 여백만 줄임(--ch-gutter) ---------- */

/* ---------- 769 ~ 1023: 카드 안 배치 조정(전체 강좌 카드와 같다) ---------- */

@media (max-width: 1023px) {
    .ch-mypage__inner { padding-top: 48px; padding-bottom: 80px; }
    .ch-mypage-tabs { margin-top: 32px; }
    .ch-mypage-tabs__list { gap: 0 24px; }
    .ch-mypage-tabs__tab { font-size: 16px; }
    .ch-mypage__heading { margin-top: 32px; font-size: 20px; }

    .ch-my-card { padding: 16px; }
    .ch-my-card__thumb { width: 220px; height: 121px; }
    .ch-my-card__body { margin-left: 20px; }
    .ch-my-card__title { font-size: 18px; }
    .ch-my-card__meta { font-size: 14px; }
    .ch-my-card__side { min-width: 0; margin-left: 16px; }
    .ch-my-card__button { min-width: 120px; padding: 0 16px; }
}

/* ---------- 768 이하: 탭은 가로 스크롤, 카드는 썸네일 위 · 내용 아래, 버튼은 폭 100% ---------- */

@media (max-width: 768px) {
    .ch-mypage__inner { padding-top: 32px; padding-bottom: 64px; }

    .ch-mypage-tabs {
        display: flex;
        margin: 24px calc(var(--ch-gutter) * -1) 0;
        padding: 0 var(--ch-gutter);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* 오른쪽 끝 흐림은 전체 강좌 분류 탭과 같은 규칙(.ch-tabs::after) */
    .ch-mypage-tabs__list { flex: none; flex-wrap: nowrap; gap: 0 20px; }
    .ch-mypage-tabs__tab { padding: 12px 2px; font-size: 15px; }
    .ch-mypage__heading { margin-top: 24px; font-size: 18px; }

    .ch-my-card { flex-direction: column; align-items: stretch; min-height: 0; padding: 0; }
    .ch-my-card__thumb { align-self: stretch; width: 100%; height: auto; max-height: 240px; aspect-ratio: 300 / 165; }
    .ch-my-card__body { margin: 0; padding: 16px 16px 0; }
    .ch-my-card__title { margin-top: 10px; font-size: 17px; }
    /* 좁은 폭에서는 줄이 바뀌면 구분자가 줄 머리에 남으므로 빼고 간격으로만 나눈다 */
    .ch-my-card__meta { gap: 4px 14px; margin-top: 12px; }
    .ch-my-card__meta li + li::before { content: none; }
    .ch-my-card__side { margin: 0; padding: 16px; text-align: left; }
    .ch-my-card__button { width: 100%; min-width: 0; }
    .ch-my-card__note { font-size: 14px; }

    .ch-progress { max-width: none; margin-top: 14px; }
}

/* =====================================================================
 * 나의 강의실 나머지 탭 — 회원정보·직원 신청·비밀번호 변경·회원 탈퇴·이메일 등록(킷 원본 뷰 그대로, 무스타일 마크업)
 * 뷰를 덮어쓰지 않고 소제목(.ch-mypage__heading) 뒤의 클래스 없는 요소에만 로그인·가입 카드 톤을 입힌다 —
 * 클래스를 단 사이트 화면(내 강의·학습 진도·주문 내역)은 건드리지 않는다. 폼은 최대 560px
 * 킷 마크업: <p><label>…</label><br><input>…<br><small>도움말</small></p>, 체크박스는 label 안, 버튼은 type=submit
 * ===================================================================== */

.ch-mypage__heading ~ form:not([class]) { max-width: 560px; margin-top: 24px; }

.ch-mypage__heading ~ form:not([class]) + form:not([class]) { margin-top: 0; }

.ch-mypage__heading ~ form:not([class]) > p { margin: 0 0 20px; }

.ch-mypage__heading ~ form:not([class]) br { display: none; }

.ch-mypage__heading ~ form:not([class]) label:not(:has(input)) {
    display: block;
    margin-bottom: 8px;
    font: 500 15px/1.3 var(--ch-font);
    color: var(--ch-text);
}

.ch-mypage__heading ~ form:not([class]) :is(input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], select) {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-card-control-radius);
    background: var(--ch-white);
    font: 400 16px/1.2 var(--ch-font);
    color: var(--ch-text);
    transition: border-color 0.2s;
}

.ch-mypage__heading ~ form:not([class]) input[type="date"] { max-width: 220px; }

.ch-mypage__heading ~ form:not([class]) :is(input, select)::placeholder { color: #AAAAAA; opacity: 1; }

.ch-mypage__heading ~ form:not([class]) :is(input, select):hover { border-color: var(--ch-secondary); }

.ch-mypage__heading ~ form:not([class]) :is(input, select):focus { border-color: var(--ch-primary); outline: none; }

/* 이메일처럼 바꿀 수 없는 값 — 칸 모양의 흐린 상자 */
.ch-mypage__heading ~ form:not([class]) output {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    border-radius: var(--ch-card-control-radius);
    background: #F7F3EF;
    font: 400 16px/1.3 var(--ch-font);
    color: var(--ch-text-2);
    overflow-wrap: anywhere;
}

.ch-mypage__heading ~ form:not([class]) small {
    display: block;
    margin-top: 6px;
    font: 400 13px/1.4 var(--ch-font);
    color: var(--ch-text-3);
}

.ch-mypage__heading ~ form:not([class]) small a,
.ch-mypage__heading ~ p:not([class]) a { color: var(--ch-primary); text-decoration: underline; text-underline-offset: 3px; }

/* 체크박스 — label 안에 칸과 글이 함께 있다 */
.ch-mypage__heading ~ form:not([class]) label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font: 400 15px/1.5 var(--ch-font);
    color: var(--ch-text-2);
    cursor: pointer;
    word-break: keep-all;
}

.ch-mypage__heading ~ form:not([class]) input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ch-primary);
    cursor: pointer;
}

/* 버튼 — 주 버튼(primary). 이메일 등록의 칸 옆 버튼은 보조 모양 */
.ch-mypage__heading ~ form:not([class]) button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 52px;
    margin-top: 8px;
    padding: 0 28px;
    border: 1px solid var(--ch-primary);
    border-radius: var(--ch-card-control-radius);
    background: var(--ch-primary);
    font: 600 16px/1 var(--ch-font);
    color: var(--ch-white);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.ch-mypage__heading ~ form:not([class]) button:hover { border-color: #6F5A48; background: #6F5A48; }

.ch-mypage__heading ~ form:not([class]) button:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

.ch-mypage__heading ~ form:not([class]) p:has(> input) > button {
    min-width: 0;
    margin-top: 8px;
    background: var(--ch-white);
    color: var(--ch-primary);
}

.ch-mypage__heading ~ form:not([class]) p:has(> input) > button:hover { background: var(--ch-tab-bg); }

/* 회원 탈퇴 — 동의 칸(confirm)이 있는 폼의 버튼은 danger */
.ch-mypage__heading ~ form:not([class]):has(input[name="confirm"]) button {
    border-color: var(--ch-danger);
    background: var(--ch-danger);
}

.ch-mypage__heading ~ form:not([class]):has(input[name="confirm"]) button:hover { border-color: #B33636; background: #B33636; }

.ch-mypage__heading ~ form:not([class]):has(input[name="confirm"]) button:focus-visible { outline-color: var(--ch-danger); }

/* 안내 문구·목록·상태 표 */
.ch-mypage__heading ~ p:not([class]) {
    max-width: 560px;
    margin: 16px 0 0;
    font: 400 15px/1.7 var(--ch-font);
    color: var(--ch-text-2);
    word-break: keep-all;
}

.ch-mypage__heading ~ p:not([class]) small { font-size: 14px; color: var(--ch-text-3); }

.ch-mypage__heading ~ ul:not([class]) {
    max-width: 560px;
    margin: 16px 0 0;
    padding: 20px 20px 20px 40px;
    border-radius: var(--ch-card-control-radius);
    background: #F7F3EF;
    font: 400 15px/1.7 var(--ch-font);
    color: var(--ch-text-2);
    word-break: keep-all;
}

.ch-mypage__heading ~ dl:not([class]) {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin: 16px 0 0;
    padding: 16px 20px;
    border-radius: var(--ch-card-control-radius);
    background: #F7F3EF;
    font: 400 15px/1.5 var(--ch-font);
}

.ch-mypage__heading ~ dl:not([class]) dt { flex: none; font-weight: 600; color: var(--ch-text); }

.ch-mypage__heading ~ dl:not([class]) dd { margin: 0; color: var(--ch-text-2); }

@media (max-width: 768px) {
    .ch-mypage__heading ~ form:not([class]) { max-width: none; margin-top: 20px; }
    .ch-mypage__heading ~ form:not([class]) > p:last-child > button:only-child { width: 100%; }
    .ch-mypage__heading ~ form:not([class]) > button:only-of-type { width: 100%; }
    .ch-mypage__heading ~ :is(p, ul, dl):not([class]) { max-width: none; }
    .ch-mypage__heading ~ dl:not([class]) { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* =====================================================================
 * 청아람아카데미 소개 (resources/views/site/about.blade.php) — 시안 없음, 전체 강좌와 같은 톤
 * 제목 → 사진 | 인사말 2단. 위아래 여백은 전체 강좌·공지와 같다(64 / 110)
 * ===================================================================== */

.ch-about__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 100px var(--ch-gutter) 150px;
}

/* 소개 제목만 — 공통 .ch-page-title(40px 700)과 따로 */
.ch-about .ch-page-title {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -1px;
}

.ch-about__greeting {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    max-width: 1144px;
    margin: 56px auto 0;
}

/* 사진 — 세로 틀 6:7, 표시 폭 440 이하. 원본 위아래 흐린 띠는 cover로 틀 밖에 둔다(뷰 주석) */
.ch-about__photo {
    flex: none;
    width: 440px;
    aspect-ratio: 6 / 7;
    overflow: hidden;
    background: var(--ch-tab-bg);
    /* 사진 뒤 베이지 판 — 같은 크기, 오른쪽 아래로 30px(768 이하 16px). 그림자라 틀의 overflow에 잘리지 않는다 */
    box-shadow: 30px 30px 0 var(--ch-tab-bg);
}

.ch-about__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ch-about__text {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}

/* 영문 머리 "GREETING" — 제목 위 10px */
.ch-about__eyebrow {
    margin: 0 0 10px;
    font: 600 13px/1.4 var(--ch-font);
    letter-spacing: 0.2em;
    color: var(--ch-primary);
}

.ch-about__label {
    margin: 0;
    font: 700 24px/1.3 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
}

.ch-about__body {
    margin-top: 24px;
    font: 400 17px/1.8 var(--ch-font);
    letter-spacing: -0.3px;
    color: var(--ch-text-2);
    word-break: keep-all;
}

.ch-about__body p { margin: 0; }

.ch-about__body p + p { margin-top: 14px; }

/* 1024 이상 — 문단 마지막 줄에 한 단어만 남지 않게 */
@media (min-width: 1024px) {
    .ch-about__body p { text-wrap: pretty; }
}

/* 서명 — 본문 아래 28px, 오른쪽 정렬, 이름 줄 20px */
.ch-about__sign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin: 28px 0 0;
    font: 500 17px/1.5 var(--ch-font);
    color: var(--ch-text);
}

.ch-about__sign span:last-child { font-size: 20px; font-weight: 700; }

/* ---------- 등장 — 메인 히어로와 같은 키프레임(ch-settle·ch-fade·ch-rise), 열 때 한 번 ----------
   사진은 1.06배에서 제자리로 당겨지며 서서히 나타난다(틀 .ch-about__photo가 overflow: hidden이라 넘치지 않는다).
   인사말은 제목 → 본문 문단 6개 → 서명이 0.12s 간격으로 24px 아래에서 떠오른다.
   움직임 줄이기 설정이면 맨 아래 prefers-reduced-motion 블록이 끈다. */

.ch-about__photo img {
    --ch-settle: 1.06;
    animation: ch-settle 2.2s ease-out both, ch-fade 0.9s ease-out both;
}

.ch-about__eyebrow,
.ch-about__label,
.ch-about__body p,
.ch-about__sign {
    --ch-rise: 24px;
    animation: ch-rise 0.6s ease-out both;
}

.ch-about__eyebrow { animation-delay: 0.1s; }
.ch-about__label { animation-delay: 0.2s; }
.ch-about__body p:nth-child(1) { animation-delay: 0.32s; }
.ch-about__body p:nth-child(2) { animation-delay: 0.44s; }
.ch-about__body p:nth-child(3) { animation-delay: 0.56s; }
.ch-about__body p:nth-child(4) { animation-delay: 0.68s; }
.ch-about__body p:nth-child(5) { animation-delay: 0.8s; }
.ch-about__body p:nth-child(n+6) { animation-delay: 0.92s; }
.ch-about__sign { animation-delay: 1.04s; }

/* ---------- 769 ~ 1023: 2단 유지, 사진·간격을 줄임 ---------- */

@media (max-width: 1023px) {
    .ch-about__inner { padding-top: 72px; padding-bottom: 110px; }
    .ch-about__greeting { gap: 40px; margin-top: 32px; }
    .ch-about__photo { width: 300px; }
    /* 인사말은 한 줄이 너무 길지 않게 640까지 */
    .ch-about__text { max-width: 640px; }
    .ch-about .ch-page-title { font-size: 28px; }
    .ch-about__label { font-size: 22px; }
    .ch-about__body { font-size: 16px; line-height: 1.9; }
}

/* ---------- 768 이하: 사진 위 · 글 아래 ---------- */

@media (max-width: 768px) {
    .ch-about__inner { padding-top: 48px; padding-bottom: 84px; }
    .ch-about__greeting { flex-direction: column; align-items: stretch; gap: 28px; margin-top: 24px; }
    .ch-about__photo { width: 100%; max-width: 400px; margin: 0 auto; box-shadow: 16px 16px 0 var(--ch-tab-bg); }
    .ch-about__text { width: 100%; margin: 0 auto; padding-top: 0; }
    .ch-about .ch-page-title { font-size: 22px; }
    .ch-about__label { font-size: 20px; }
    .ch-about__body { margin-top: 20px; font-size: 15px; line-height: 1.8; }
    .ch-about__body p + p { margin-top: 12px; }
    .ch-about__sign { margin-top: 20px; font-size: 16px; }
}

/* =====================================================================
 * 강의 시청 (resources/views/vendor/videos/watch.blade.php) — 시안 없음, 강좌 상세와 같은 톤
 * 경로 줄 → 섹션 이름 + 레슨 제목 → [영상 16:9 + 이전·다음 | 커리큘럼 360]. 1023 이하 1단
 * 영상 상자([data-player])의 인라인 위치·크기는 player.js·watermark.js가 준다 — 여기서 !important로 덮지 않는다
 * ===================================================================== */

.ch-watch__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 40px var(--ch-gutter) 110px;
}

.ch-watch__head { margin-top: 24px; }

.ch-watch__section {
    margin: 0;
    font: 500 15px/1.3 var(--ch-font);
    color: var(--ch-secondary);
    word-break: keep-all;
}

.ch-watch__title {
    margin: 8px 0 0;
    font: 700 28px/1.35 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-watch__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 40px;
    margin-top: 24px;
}

.ch-watch__admin {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--ch-tab-bg);
    font: 500 14px/1.4 var(--ch-font);
    color: var(--ch-text-2);
}

/* 영상 상자 — 16:9 검은 바탕. 재생할 수 없으면 킷 문구를 가운데에 */
.ch-watch__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111111;
}

.ch-watch__screen [data-player-surface],
.ch-watch__screen [data-player-surface] video,
.ch-watch__screen [data-player-surface] iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ch-watch__screen--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ch-watch__message,
.ch-watch__screen [data-player-message] {
    margin: 0;
    font: 500 16px/1.6 var(--ch-font);
    color: var(--ch-white);
    text-align: center;
    word-break: keep-all;
}

.ch-watch__screen [data-player-message] {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.ch-watch__screen [data-player-message][hidden] { display: none; }

/* 이전·다음 레슨, 강좌 상세로 */
.ch-watch__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.ch-watch__steps { display: flex; gap: 8px; }

.ch-watch__step { min-width: 160px; height: 48px; }

.ch-watch__back {
    font: 500 15px/1.4 var(--ch-font);
    color: var(--ch-text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ch-watch__back:hover { color: var(--ch-primary); }

/* 커리큘럼 — 강좌 상세 커리큘럼과 같은 모양, 지금 레슨은 primary */
.ch-watch__aside { border: 1px solid var(--ch-line); }

.ch-watch__aside-title {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ch-text);
    font: 700 18px/1.3 var(--ch-font);
    color: var(--ch-text);
}

.ch-watch-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 20px;
    background: var(--ch-tab-bg);
    font: 600 15px/1.3 var(--ch-font);
    color: var(--ch-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-watch-list__count { flex: none; font: 400 13px/1 var(--ch-font); color: var(--ch-text-3); }

.ch-watch-list__lessons { margin: 0; padding: 0; list-style: none; }

.ch-watch-list__lessons li + li { border-top: 1px solid var(--ch-line-2); }

.ch-watch-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 20px;
    border-left: 3px solid transparent;
    font: 400 14px/1.4 var(--ch-font);
    color: var(--ch-text);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.ch-watch-list__link:hover { background: #FAF9F7; color: var(--ch-primary); }

.ch-watch-list__link[aria-current="page"] {
    border-left-color: var(--ch-primary);
    background: #F7F3EF;
    font-weight: 700;
    color: var(--ch-primary);
}

.ch-watch-list__title { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }

.ch-watch-list__time {
    flex: none;
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--ch-text-3);
}

.ch-watch-list__empty {
    margin: 0;
    padding: 32px 20px;
    font: 400 14px/1.4 var(--ch-font);
    color: var(--ch-text-3);
    text-align: center;
}

/* ---------- 1023 이하: 1단(영상 → 이전·다음 → 커리큘럼) ---------- */

@media (max-width: 1023px) {
    .ch-watch__inner { padding-top: 32px; padding-bottom: 80px; }
    .ch-watch__title { font-size: 24px; }
    .ch-watch__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- 768 이하: 영상은 화면 폭을 채우고, 이전·다음은 반반 폭 ---------- */

@media (max-width: 768px) {
    .ch-watch__inner { padding-top: 20px; padding-bottom: 64px; }
    .ch-watch__head { margin-top: 16px; }
    .ch-watch__section { font-size: 14px; }
    .ch-watch__title { margin-top: 6px; font-size: 21px; }
    .ch-watch__layout { gap: 28px; margin-top: 16px; }
    .ch-watch__main > .ch-watch__screen { margin: 0 calc(var(--ch-gutter) * -1); }
    .ch-watch__nav { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
    .ch-watch__step { flex: 1; min-width: 0; height: 48px; }
    .ch-watch__back { align-self: center; padding: 12px 0; }
    .ch-watch__aside-title { padding: 14px 16px; font-size: 17px; }
    .ch-watch-list__head { padding: 12px 16px; }
    .ch-watch-list__link { padding: 10px 16px; }
}

/* =====================================================================
 * 결제·주문 — 주문/결제(vendor/toss-payments/checkout) · 결제 결과(complete) · 결제 안내(fail)
 * · 주문 내역(vendor/orders/mypage/index) · 주문 상세(show) · 환불 안내(vendor/refunds/partials/mypage-order)
 * 시안 없음. 흰 카드는 로그인 카드와 같은 변수(--ch-card-*). 결제위젯 자리(#payment-method·#payment-agreement)는 토스가 그린다 — 크기만 둔다
 * ===================================================================== */

.ch-pay__inner {
    max-width: calc(1312px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 64px var(--ch-gutter) 110px;
}

.ch-pay__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: 32px;
    margin-top: 48px;
}

.ch-pay__main { display: grid; gap: 24px; min-width: 0; }

.ch-pay-card {
    padding: 32px;
    border-radius: var(--ch-card-radius);
    background: var(--ch-white);
    box-shadow: var(--ch-card-shadow);
}

.ch-pay-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.ch-pay-card__title {
    margin: 0;
    font: 700 20px/1.3 var(--ch-font);
    letter-spacing: -0.4px;
    color: var(--ch-text);
}

.ch-pay__number { margin: 0; font: 400 14px/1.4 var(--ch-font); color: var(--ch-text-3); }

.ch-pay__number span { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--ch-text-2); }

.ch-pay-card__widget { margin-top: 16px; }

/* 품목 — 이름·옵션·단가 × 수량 | 금액 */
.ch-pay-items { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ch-text); }

.ch-pay-items__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ch-line-2);
}

.ch-pay-items__body { min-width: 0; }

.ch-pay-items__name { margin: 0; font: 600 17px/1.4 var(--ch-font); color: var(--ch-text); word-break: keep-all; overflow-wrap: anywhere; }

.ch-pay-items__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font: 400 14px/1.4 var(--ch-font); color: var(--ch-text-3); }

.ch-pay-items__price { flex: none; font: 700 18px/1.3 var(--ch-font); color: var(--ch-text); white-space: nowrap; }

/* 결제 요약 — 오른쪽에 따라온다 */
.ch-pay-summary { position: sticky; top: 24px; }

.ch-pay-summary__list { margin: 20px 0 0; }

.ch-pay-summary__list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font: 400 15px/1.4 var(--ch-font);
    color: var(--ch-text-2);
}

.ch-pay-summary__list dt,
.ch-pay-summary__list dd { margin: 0; }

.ch-pay-summary__list dd { font-variant-numeric: tabular-nums; white-space: nowrap; }

.ch-pay-summary__list > .ch-pay-summary__total {
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--ch-line);
    font-weight: 700;
    color: var(--ch-text);
}

.ch-pay-summary__total dd { font-size: 24px; letter-spacing: -0.4px; color: var(--ch-primary); }

.ch-pay-summary__pay { height: 56px; margin-top: 24px; border-radius: var(--ch-card-control-radius); font-size: 17px; }

.ch-pay-summary__message { margin: 12px 0 0; font: 400 14px/1.5 var(--ch-font); color: var(--ch-danger); word-break: keep-all; }

.ch-pay-summary__link {
    display: block;
    margin-top: 16px;
    font: 500 14px/1.4 var(--ch-font);
    color: var(--ch-text-2);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ch-pay-summary__link:hover { color: var(--ch-primary); }

/* 결제할 수 없을 때(키 없음·결제 차단) — 결제 버튼 자리에 안내 상자 */
.ch-pay-notice {
    margin: 24px 0 0;
    padding: 16px 18px;
    border: 1px solid #F0C9C9;
    border-radius: var(--ch-card-control-radius);
    background: #FBEDED;
    font: 500 15px/1.6 var(--ch-font);
    color: var(--ch-danger);
    word-break: keep-all;
}

/* 결제 결과·안내 — 가운데 카드 하나 */
.ch-pay-result {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 40px;
    text-align: center;
}

.ch-pay-result__title {
    margin: 0;
    font: 700 26px/1.4 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-primary);
    word-break: keep-all;
}

.ch-pay-result__title--pending { color: var(--ch-text); }

.ch-pay-result__title--fail { color: var(--ch-danger); }

.ch-pay-result__detail { margin: 12px 0 0; font: 400 15px/1.6 var(--ch-font); color: var(--ch-text-2); word-break: keep-all; overflow-wrap: anywhere; }

.ch-pay-result .ch-pay-info,
.ch-pay-result .ch-pay-items { text-align: left; }

.ch-pay-result__actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.ch-pay-result__actions .ch-button { flex: 1; max-width: 200px; height: 52px; border-radius: var(--ch-card-control-radius); }

.ch-pay-result__home { margin: 20px 0 0; font: 400 14px/1.4 var(--ch-font); }

.ch-pay-result__home a { color: var(--ch-text-2); text-decoration: underline; text-underline-offset: 3px; }

.ch-pay-result__contact { margin: 16px 0 0; font: 400 14px/1.6 var(--ch-font); color: var(--ch-text-3); }

/* 정보 표 — 결과 카드·주문 상세 공용(이름 | 값) */
.ch-pay-info { margin: 28px 0 0; padding: 4px 20px; border-radius: var(--ch-card-control-radius); background: #F7F3EF; }

.ch-pay-info > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font: 400 15px/1.4 var(--ch-font);
}

.ch-pay-info > div + div { border-top: 1px solid #EAE3DA; }

.ch-pay-info dt { margin: 0; color: var(--ch-text-3); }

.ch-pay-info dd { margin: 0; color: var(--ch-text); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* 주문 내역 — 공지 목록과 같은 표 톤(위 2px, 행 58px) */
.ch-orders {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    border-top: 2px solid var(--ch-text);
    font: 400 15px/1.4 var(--ch-font);
    color: var(--ch-text);
}

.ch-orders th {
    height: 52px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ch-line);
    font-weight: 600;
    text-align: center;
}

.ch-orders td {
    height: 58px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ch-line);
    text-align: center;
}

.ch-orders__number a { color: var(--ch-text); font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 3px; }

.ch-orders__number a:hover { color: var(--ch-primary); }

td.ch-orders__item { text-align: left; word-break: keep-all; }

.ch-orders__price { font-weight: 600; white-space: nowrap; }

.ch-orders__date { color: var(--ch-text-3); white-space: nowrap; }

/* 주문 상세 */
.ch-order { max-width: 800px; }

.ch-order__info { margin-top: 16px; }

.ch-order__section { margin-top: 40px; }

.ch-order__heading { margin: 0; font: 700 18px/1.3 var(--ch-font); color: var(--ch-text); }

.ch-order .ch-pay-summary__list { padding: 0 4px; }

.ch-order__back { margin-top: 48px; text-align: center; }

.ch-order__back .ch-button { min-width: 180px; }

/* 환불 안내 */
.ch-refund__total { margin: 12px 0 0; font: 400 15px/1.5 var(--ch-font); color: var(--ch-text); }

.ch-refund__rejected {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-radius: var(--ch-card-control-radius);
    background: #FBEDED;
    font: 400 15px/1.5 var(--ch-font);
    color: var(--ch-danger);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-refund__table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    border-top: 1px solid var(--ch-text);
    font: 400 14px/1.4 var(--ch-font);
}

.ch-refund__table th,
.ch-refund__table td { padding: 12px; border-bottom: 1px solid var(--ch-line); text-align: center; }

.ch-refund__table th { font-weight: 600; }

/* ---------- 1023 이하: 1단(상품 → 결제 수단 → 요약) ---------- */

@media (max-width: 1023px) {
    .ch-pay__inner { padding-top: 48px; padding-bottom: 80px; }
    .ch-pay__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
    .ch-pay-summary { position: static; }
}

/* ---------- 768 이하: 카드 여백을 줄이고, 주문 내역은 줄마다 두 줄 ---------- */

@media (max-width: 768px) {
    .ch-pay__inner { padding-top: 32px; padding-bottom: 64px; }
    .ch-pay__layout { margin-top: 24px; gap: 16px; }
    .ch-pay__main { gap: 16px; }
    .ch-pay-card { padding: 24px 20px; }
    .ch-pay-card__title { font-size: 18px; }
    .ch-pay-items__name { font-size: 16px; }
    .ch-pay-items__price { font-size: 16px; }
    .ch-pay-result { padding: 36px 20px; }
    .ch-pay-result__title { font-size: 22px; }
    .ch-pay-result__actions .ch-button { max-width: none; }

    .ch-orders thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ch-orders,
    .ch-orders tbody { display: block; }
    .ch-orders tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "item status" "number price" "date date";
        align-items: center;
        gap: 6px 12px;
        padding: 14px 4px;
        border-bottom: 1px solid var(--ch-line);
    }
    .ch-orders td { height: auto; padding: 0; border: 0; text-align: left; }
    .ch-orders__item { grid-area: item; font-weight: 600; }
    .ch-orders__status { grid-area: status; text-align: right; }
    .ch-orders__number { grid-area: number; font-size: 14px; }
    .ch-orders__price { grid-area: price; text-align: right; }
    .ch-orders__date { grid-area: date; font-size: 13px; }
}

/* =====================================================================
 * 안내 카드 — 오류 화면(resources/views/errors/404·4xx·5xx) · 직원 승인 대기(vendor/staff/pending)
 * 로그인 카드와 같은 가운데 흰 카드: 제목 · 안내 문구 · 버튼. 5xx는 헤더·푸터 없이 화면 가운데(--standalone)
 * ===================================================================== */

.ch-message { padding: 72px var(--ch-gutter) 110px; }

.ch-message__card {
    max-width: 520px;
    margin: 0 auto;
    padding: 56px 40px 48px;
    border-radius: var(--ch-card-radius);
    background: var(--ch-white);
    box-shadow: var(--ch-card-shadow);
    text-align: center;
}

.ch-message__logo { display: block; width: 72px; height: auto; margin: 0 auto 24px; }

.ch-message__title {
    margin: 0;
    font: 700 28px/1.35 var(--ch-font);
    letter-spacing: -0.6px;
    color: var(--ch-text);
    word-break: keep-all;
}

.ch-message__text {
    margin: 14px 0 0;
    font: 400 16px/1.7 var(--ch-font);
    color: var(--ch-text-2);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ch-message__text + .ch-message__text { margin-top: 6px; }

.ch-message__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.ch-message__actions .ch-button { min-width: 160px; height: 52px; border-radius: var(--ch-card-control-radius); }

.ch-message__form { display: flex; margin: 0; }

/* 5xx — 레이아웃 없이 화면 한가운데 */
.ch-message--standalone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.ch-message--standalone .ch-message__card { width: 100%; }

@media (max-width: 767px) {
    .ch-message { padding: 48px var(--ch-gutter) 64px; }
    .ch-message__card { max-width: none; padding: 0; border-radius: 0; box-shadow: none; }
    .ch-message__title { font-size: 24px; }
    .ch-message__actions { flex-direction: column; }
    .ch-message__actions .ch-button,
    .ch-message__form .ch-button { width: 100%; }
}

/* =====================================================================
 * 약관 3종 (resources/views/vendor/legal/show.blade.php) — 시안 없음, 공지 상세와 같은 톤
 * 폭 1000px 가운데. 제목 → "청아람아카데미 시행일" → 구분선 → 본문(.ch-richtext + 약관 보정)
 * ===================================================================== */

.ch-legal__inner {
    max-width: calc(1000px + var(--ch-gutter) * 2);
    margin: 0 auto;
    padding: 56px var(--ch-gutter) 110px;
}

.ch-legal__head {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ch-line);
    text-align: center;
}

/* 약관 제목 — 다른 화면의 .ch-page-title(40px)과 따로, 36px */
.ch-legal__title {
    margin: 0;
    font: 700 36px/1.3 var(--ch-font);
    letter-spacing: -0.5px;
    color: var(--ch-text);
}

.ch-legal__meta {
    margin: 12px 0 0;
    font: 400 15px/1.5 var(--ch-font);
    font-variant-numeric: tabular-nums;
    color: var(--ch-text-3);
}

.ch-legal__body { padding-top: 40px; }

.ch-legal__empty {
    margin: 0;
    padding: 40px 0;
    font: 400 16px/1.6 var(--ch-font);
    color: var(--ch-text-3);
    text-align: center;
}

/* 본문 보정 — 조항 제목은 굵은 소제목, 목록 사이를 좁게, 하위 줄("가.")은 점 없이 들여 쓰기 */
.ch-legal__text h2 { margin: 2em 0 0.5em; font-size: 18px; }

.ch-legal__text h2:first-child { margin-top: 0; }

.ch-legal__text ol,
.ch-legal__text ul { padding-left: 1.6em; }

.ch-legal__text li + li { margin-top: 0.2em; }

.ch-legal__text table { border-top: 1px solid #CCCCCC; }

.ch-legal__text th { background: #FAF8F5; }

.ch-legal__text .ch-legal__sub {
    margin: 0.2em 0 0;
    padding-left: 0.4em;
    list-style: none;
}

.ch-legal__note {
    padding: 12px 16px;
    background: var(--ch-tab-bg);
    font-size: 15px;
    color: var(--ch-text-2);
}

@media (max-width: 1023px) {
    .ch-legal__inner { padding-top: 48px; padding-bottom: 80px; }
}

@media (max-width: 768px) {
    .ch-legal__inner { padding-top: 32px; padding-bottom: 64px; }
    .ch-legal__head { padding-bottom: 20px; }
    .ch-legal__title { font-size: 24px; }
    .ch-legal__body { padding-top: 28px; }
    .ch-legal__text h2 { font-size: 17px; }
}

/* =====================================================================
 * 스크롤하면 나타나기 — public/js/chungaram.js("스크롤하면 나타나기")
 * 메인 상자가 화면에 들어올 때 30px 아래에서 떠오른다(0.7s, 한 번만). 강좌 목록 카드에는 쓰지 않는다.
 * 숨김 클래스(.ch-reveal)는 스크립트가 아직 화면 밖에 있는 것에만 붙인다 — 스크립트가 없으면 처음부터 다 보이고,
 * 처음부터 화면 안에 있던 것은 깜빡이지 않는다.
 * ===================================================================== */

.ch-reveal {
    opacity: 0;
    transform: translateY(30px);
    /* 카드 자신의 마우스 효과(테두리·그림자) 전환도 함께 적는다 — 이 규칙이 카드의 transition을 덮어쓰므로 */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out, border-color 0.2s, box-shadow 0.3s;
}

.ch-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- 움직임 줄이기 설정 — 등장·나타나기·확대를 모두 끈다 ---------- */

@media (prefers-reduced-motion: reduce) {
    .ch-hero__photo img,
    .ch-hero__title span,
    .ch-hero__sub,
    .ch-hero__cta,
    .ch-home-band,
    .ch-about__photo img,
    .ch-about__eyebrow,
    .ch-about__label,
    .ch-about__body p,
    .ch-about__sign { animation: none; }

    .ch-reveal { opacity: 1; transform: none; transition: none; }

    .ch-course-card:hover .ch-course-card__thumb img { transform: none; }
}