/* 교육 과정 공통 (시안 _kit.py) — 교육 과정 · 온라인 강좌 · 강좌 상세 · 그룹코칭 · 연기/환불 선택 · 프로그램 상세(프리미엄 1:1)가 함께 쓴다.
   페이지 CSS 보다 먼저 붙인다. 모바일 덜어내기(.m-tg · .m-dup …)는 site.css 끝에 있다. */

/* 강의 막대 — 막대 하나가 강의 하나, 높이는 길이(--h, App\Support\LessonWave), 속이 빈 막대는 실습.
   2026-11-02 고객사 요청: 같은 막대가 반복돼 보이지 않게 로고의 체크 파형처럼 세로 위치(--y)가 내려갔다가 올라가고, 마지막 강의(.end)는 로고 마지막 막대의 민트 */
.wg { display: flex; align-items: center; justify-content: center; height: 100%; gap: var(--bg, 8px); }
.wg i { flex: none; position: relative; top: var(--y, 0); width: var(--bw, 12px); height: var(--h, calc(var(--m) / var(--max, 12) * 100%)); border-radius: 999px; background: currentColor; }
.wg i.p { background: none; box-shadow: inset 0 0 0 2px currentColor; }
.wg i.end { color: var(--wave-end, var(--logo-mint)); }

button.btn { border: 0; }
.nw { white-space: nowrap; }
:root { --panel-shadow: 0 24px 60px rgba(42, 75, 232, .08), 0 0 0 1px var(--line); }
main h2, main h3 { text-wrap: balance; }
main p, main li { text-wrap: pretty; }

/* 간격 — 머리의 아래 여백이 곧 첫 간격. 머리 바로 뒤(또는 흰 띠 뒤)의 흰 띠는 위 여백 없이 이어진다 */
.band.cont { padding-top: 0; }

/* 머리 — 같은 높이에서 시작하고, 같은 길이의 물빛을 쓴다 */
.p-head { background: linear-gradient(180deg, var(--mist), var(--white) 560px); }
.p-head .lede { max-width: 34em; }
.p-head-grid { align-items: start; }

/* 패널 — 반지름 22, 같은 그림자 */
.panel { border-radius: 22px; background: var(--white); padding: clamp(24px, 2.6vw, 32px); box-shadow: var(--panel-shadow); }
.panel > h2 { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
/* 패널 안 순서 — 첫 단계만 코발트 */
.seq { counter-reset: s; }
.seq > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; counter-increment: s; }
.seq > li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--cobalt); font-size: var(--fs-xs); font-weight: 650; line-height: 1; }
.seq > li:first-child::before { background: var(--cobalt); color: #fff; }

/* 버튼 */
.btn-small { height: 44px; padding: 0 18px; border-radius: 12px; font-size: var(--fs-s); }
.btn-kakao { gap: 8px; background: #FEE500; color: #191919; }
@media (hover: hover) { .btn-kakao:hover { background: #F5DC00; } }
.btn-kakao svg { flex: none; }
/* 카카오톡 테두리 버튼 — 예전 화면의 btn-outline-secondary / btn-outline-primary 자리 */
.btn-kk-line { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field); }
@media (hover: hover) { .btn-kk-line:hover { box-shadow: inset 0 0 0 1px var(--slate); } }
.btn-kk-line.is-blue { color: var(--cobalt); box-shadow: inset 0 0 0 1.5px var(--cobalt); }
@media (hover: hover) { .btn-kk-line.is-blue:hover { background: var(--tint); } }
.btn[disabled], .btn.is-off { cursor: default; }
.btn[disabled] { opacity: .55; }

/* 혼자 선 링크 — 글자는 그대로, 누르는 자리만 44px */
.go-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--fs-s); }
.go-links .link { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* 대표 한 줄 — 보이스첵 소개와 같은 모양 */
.coach-line { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; max-width: 34em; }
.coach-line .portrait { flex: none; width: 48px; height: 48px; }
.coach-line p { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.coach-line b { color: var(--ink); font-weight: 650; }
.coach-line .link { display: inline-block; padding: 10px 0; margin: -10px 0 -10px 8px; white-space: nowrap; }

/* 이런 분께 — 체크로 시작 */
.who-list { display: grid; gap: 12px; font-size: var(--fs-m); line-height: 1.6; }
.who-list li { display: flex; gap: 12px; align-items: flex-start; }
.who-list .tick { margin-top: 4px; }
.who-list b { display: block; margin-bottom: 4px; font-size: var(--fs-l); line-height: 1.4; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.who-list.cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); font-size: var(--fs-s); line-height: 1.75; color: var(--ink-2); }
.who-list.cols .tick { margin-top: 6px; }
.who-list.small { gap: 8px; font-size: var(--fs-s); color: var(--ink-2); }
.who-list.small .tick { margin-top: 3px; }

/* VCI 음성분석으로 시작 (마지막 띠 — 왼쪽 문장과 버튼, 오른쪽 순서 · 다른 과정 · 운영 안내 · 질문) */
.vci-start .lede { margin-top: 12px; }
.vci-start .go2 { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.vci-start .go2 span { font-size: var(--fs-s); color: var(--slate); }
.vci-start .go2 .link { margin: 0; padding: 10px 0; font-size: var(--fs-s); }
.vci-start.solo { grid-template-columns: minmax(0, 1fr); }
.vs-side { display: grid; gap: 22px; }
/* 오른쪽 순서 — 점검 → 결과 · 추천 → 과정 시작 (패널 안 순서와 같은 번호) */
.vs-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.vs-steps > li { row-gap: 2px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.vs-steps b { font-size: var(--fs-m); font-weight: 650; letter-spacing: -.025em; }
.vs-steps span { font-size: var(--fs-s); line-height: 1.65; color: var(--ink-2); }
/* 다른 과정 — 자주 묻는 질문 줄과 같은 결, 끝에 화살표 */
.vs-k { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; color: var(--slate); margin-bottom: -10px; }
.go-rows { border-top: 1px solid var(--line); }
.go-rows li { border-bottom: 1px solid var(--line); }
.go-rows a { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 18px 4px; color: var(--ink); }
.go-rows a > span { display: grid; gap: 2px; }
.go-rows b { font-size: var(--fs-m); font-weight: 650; letter-spacing: -.025em; }
.go-rows small { font-size: var(--fs-s); line-height: 1.6; color: var(--slate); }
.go-rows a::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-top: 2px solid var(--slate); border-right: 2px solid var(--slate); transform: rotate(45deg); margin-right: 4px; }
@media (hover: hover) { .go-rows a:hover b { color: var(--cobalt); } .go-rows a:hover::after { border-color: var(--cobalt); } }
.go-rows a:active b { color: var(--cobalt); }
/* 운영 안내 — 결제 · 환불 · 일정 · 과제는 자주 묻는 질문에서 */
.vs-faq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: var(--fs-s); }
.vs-faq > span { font-size: var(--fs-xs); font-weight: 650; color: var(--slate); }
.vci-start .vs-faq .link { margin: 0; padding: 10px 0; }

/* 장면의 작은 표시 (교육 과정 판의 열 머리) */
.mk { display: flex; width: max-content; align-items: flex-end; height: 36px; color: var(--cobalt); }
.mk-course { gap: 6px; --bw: 4px; --bg: 2px; }
.mk-course .wg { height: 100%; }
.mk-course .wg i.p { box-shadow: inset 0 0 0 1.5px currentColor; }
.mk-group .seats { width: auto; height: 36px; }
.mk-premium { gap: 3px; align-items: center; }
.mk-premium i { width: 7px; height: 22px; border-radius: 3px; background: var(--cobalt); }
.mk-premium i.more { background: var(--peri-soft); }
.mk-premium i.gap { margin-left: 4px; }
.mk-nk { position: relative; gap: 3px; padding-bottom: 5px; }
.mk-nk i { width: 12px; border-radius: 3px 3px 0 0; background: var(--peri-soft); }
.mk-nk i:nth-child(1) { height: 12px; } .mk-nk i:nth-child(2) { height: 21px; background: var(--peri); } .mk-nk i:nth-child(3) { height: 30px; background: var(--cobalt); }
.mk-nk b { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--peri-soft); }

/* 자리 막대 (그룹코칭) — 로고의 막대가 곧 정원, 점선은 최소 인원 */
.seats { display: block; overflow: visible; }
.seats rect { fill: var(--peri-soft); }
.seats rect.on { fill: var(--cobalt); }
.seats line { stroke: var(--navy); stroke-width: 1.6; stroke-dasharray: 3 3; }

/* 화면 안 알림 (Livewire 처리 결과 — 틀의 알림 띠는 페이지를 새로 열 때만 그려진다) */
.say { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: var(--tint); font-size: var(--fs-s); line-height: 1.65; color: var(--ink); }
.say.is-error { background: #FCEDEC; color: var(--err); }

@media (max-width: 860px) { .who-list.cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vci-start .go2 .btn { width: 100%; } }
@media (max-width: 760px) {
    .vs-side { gap: 16px; }
    .vs-steps > li { padding: 14px 2px; }
    .go-rows a { min-height: 64px; padding: 14px 2px; }
    .go-rows small { font-size: var(--fs-xs); }
}