/* 프로그램 상세 (/programs/{slug}, 지금은 프리미엄 1:1 — 시안 voicecheck-program-premium). 공통은 edu.css
   머리 + 시작 패널, 가운데 회차 띠 하나만 강조. 회차 칸 수 · 묶음은 과정 데이터에서 (--cols · --n 은 뷰가 준다) */
.pm-head .facts { margin-top: 28px; }

/* 시작 패널 — 강좌 상세의 신청 패널과 같은 결 */
.start ol { margin: 18px 0 24px; }
.start li { padding: 14px 0; border-top: 1px solid var(--line-2); }
.start li b { font-size: var(--fs-s); font-weight: 650; }
.start li span { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.start .btn { width: 100%; }
.start .fine { margin-top: 10px; font-size: var(--fs-xs); color: var(--slate); text-align: center; }
.start .btn-kakao { margin-top: 18px; }
/* 가격 공개 뒤의 묶음별 금액 */
.start .pk { margin: -8px 0 20px; display: grid; gap: 6px; }
.start .pk div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.start .pk dt { font-size: var(--fs-s); font-weight: 650; }
.start .pk dd { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.start .pk s { font-size: var(--fs-xs); color: var(--slate); }
.start .pk b { font-size: var(--fs-l); font-weight: 750; letter-spacing: -.03em; }

/* 분석부터 사후 점검까지 — 제공하는 것 전체를 차례로 (2026-11-02 고객사 요청, 과정 데이터의 포함 사항) */
.svc-h .lede { margin-top: 12px; max-width: 40em; }
.svc { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: start; padding: clamp(20px, 2.2vw, 26px); border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.svc .n { 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; }
.svc li:first-child .n { background: var(--cobalt); color: #fff; }
.svc b { font-size: var(--fs-m); line-height: 1.5; font-weight: 700; letter-spacing: -.025em; }
.svc .d { font-size: var(--fs-s); line-height: 1.65; color: var(--ink-2); }

/* 이런 분께 · 코칭 방향 */
.fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.fit .who-list { margin-top: 24px; }
.fit .lede { margin-top: 12px; }
.dirs { margin-top: 24px; border-top: 1px solid var(--line); }
.dirs div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.dirs dt { font-size: var(--fs-m); font-weight: 650; letter-spacing: -.025em; }
.dirs dd { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }

/* 회차 띠 */
.sess-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 24px; }
.sess-top .lede { margin-top: 12px; }
.toggle { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.toggle button { min-width: 88px; height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: none; font-size: var(--fs-s); font-weight: 650; color: var(--slate); }
.toggle [aria-pressed="true"] { background: var(--cobalt); color: #fff; }
.sess { margin-top: 44px; padding: clamp(28px, 3vw, 40px); border-radius: 22px; background: var(--white); display: grid; grid-template-columns: var(--cols); column-gap: 6px; }
.sess > ol { display: contents; }
.cell { grid-row: 1; height: 64px; border-radius: 12px; background: var(--peri-soft); display: grid; place-items: center; font-size: var(--fs-s); font-weight: 650; color: var(--navy); font-variant-numeric: tabular-nums; }
.cell.more { background: var(--tint); color: var(--cobalt); box-shadow: inset 0 0 0 1.5px var(--peri-soft); }
.cell.gap { margin-left: 10px; }   /* 구간 사이 숨 */
.end-node, .start-node { grid-row: 1; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; font-size: var(--fs-s); font-weight: 650; text-align: center; line-height: 1.3; }
.start-node { grid-column: 1; margin-right: 10px; box-shadow: inset 0 0 0 1.5px var(--peri); color: var(--cobalt); }
.end-node { grid-column: -2; margin-left: 10px; background: var(--cobalt); color: #fff; white-space: nowrap; }
.end-node .tick { color: #fff; }
.phs { display: contents; }
.ph { grid-row: 2; padding: 20px 12px 0 0; border-top: 0; }
.ph + .ph { padding-left: 10px; }
.ph small { display: block; font-size: var(--fs-xs); font-weight: 650; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.ph h3 { margin-top: 4px; font-size: var(--fs-m); font-weight: 700; letter-spacing: -.025em; }
.ph p { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.65; }
.node-cap { grid-row: 2; padding-top: 20px; font-size: var(--fs-xs); color: var(--slate); line-height: 1.6; }
.node-cap.s { grid-column: 1; padding-right: 14px; }
.node-cap.e { grid-column: -2; padding-left: 10px; }
/* 회차로 적지 않은 커리큘럼 — 순서 목록 */
.cur-list { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cur-list li { padding: 22px 24px; border-radius: 22px; background: var(--white); }
.cur-list small { display: block; font-size: var(--fs-xs); font-weight: 650; color: var(--cobalt); }
.cur-list h3 { margin-top: 4px; font-size: var(--fs-m); font-weight: 700; letter-spacing: -.025em; }
.cur-list p { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.65; }

/* 코칭 사이에도 */
.between { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.between.solo { grid-template-columns: minmax(0, 1fr); }
.between.solo > div > p { max-width: 40em; }
.between h3 { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
.between > div > p { margin-top: 8px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }
.between > div > p.inc-k { margin: 0 0 12px; font-size: var(--fs-xs); font-weight: 650; color: var(--slate); }
.between ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.between li { padding-top: 16px; border-top: 2px solid var(--peri-soft); }
.between li b { display: block; font-size: var(--fs-s); font-weight: 650; }
.between li span { display: block; margin-top: 4px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.65; }

@media (max-width: 960px) {
    .fit { grid-template-columns: minmax(0, 1fr); }
    .between { grid-template-columns: minmax(0, 1fr); }
    .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .svc { margin-top: 20px; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
    .svc li { padding: 14px 2px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line-2); }
    .svc b { font-size: var(--fs-m); }
}
/* 좁은 화면: 띠는 숫자 칸만, 구간 설명은 아래로 */
@media (max-width: 760px) {
    .sess { padding: 20px 16px 8px; column-gap: 3px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
    .sess .cell { margin-bottom: 14px; }
    .cell { height: 44px; border-radius: 8px; font-size: var(--fs-xs); }
    .cell.gap { margin-left: 5px; }
    .start-node, .node-cap.s { display: none; }
    .sess .cell { grid-column: auto !important; }
    .ph { grid-column: 1 / -1 !important; grid-row: auto; padding: 18px 0; border-top: 1px solid var(--line-2); }
    .ph + .ph { padding-left: 0; }
    /* 사후 점검은 버튼처럼 보이지 않게 — 구간 목록의 마지막 줄로 */
    .end-node { grid-column: 1 / -1; grid-row: auto; order: 9; justify-content: flex-start; height: auto; margin: 0; padding: 18px 0 0; border-radius: 0; border-top: 1px solid var(--line-2); background: none; color: var(--cobalt); font-size: var(--fs-m); }
    .end-node .tick { color: var(--cobalt); }
    .node-cap.e { grid-column: 1 / -1 !important; grid-row: auto; order: 10; padding: 4px 0 18px; font-size: var(--fs-s); color: var(--ink-2); }
    .between ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .between li { padding: 14px 0; border-top: 1px solid var(--line); }
    .sess-top .toggle { width: 100%; grid-auto-columns: 1fr; }
    .cur-list { margin-top: 28px; }
}
/* 모바일 덜어내기 — 구간은 회차 띠 아래 한 줄로 넘기고, 방향은 접는 줄, 코칭 사이는 제목만 */
@media (max-width: 760px) {
    .sess .phs { grid-column: 1 / -1; margin: 2px -16px 0; padding: 0 16px 4px; scroll-padding-inline: 16px; }
    .sess .phs > .ph { flex-basis: 78%; padding: 16px 16px 18px; border-top: 0; border-radius: 14px; background: var(--mist); }
    .sess .ph h3 { font-size: var(--fs-m); }
    .end-node { padding-top: 20px; border-top: 0; }
    .dirs { margin-top: 16px; }
    .dirs div { display: block; padding: 0; }
    .dirs dt { font-size: var(--fs-m); }
    .dirs dd { padding: 0 2px 16px; }
    .start li { padding: 12px 0; }
    .start .fine { margin-top: 0; }
    .between { margin-top: 20px; gap: 0; border-top: 1px solid var(--line); }
    .between h3 { font-size: var(--fs-m); }
    .between > div > p { margin: 0 0 4px; }
    .between li { padding: 12px 0; }
    .vci-start { row-gap: 24px; }   /* 리드 · 버튼을 숨겨 제목 바로 아래 질문 */
}