/* 배우기(메인·종목, public/learn/*.blade.php). 카드 면·메모·출처 한 줄·단계 카드는 공개 공통(public.css)을 쓰고 여기는 배치와 배우기에만 있는 목록이다. */

.learn-source { margin-top: var(--space-4); }

/* 메인 물속 활동 카드(공개 공통 .public-destination-card): 휴대폰도 두 칸, 넓은 화면 세 칸. 필요한 교육 줄은 카드 아래에 맞춘다. */
.learn-activities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.learn-activity img { aspect-ratio: 3 / 2; }
.learn-activity .public-destination-card__body { padding: var(--space-3); }
.learn-activity .public-destination-card__body h4 { font-size: var(--font-size-base); word-break: keep-all; }
.learn-activity .public-destination-card__summary { margin-top: var(--space-1); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.learn-activity__needs { margin-top: auto; padding-top: var(--space-3); color: var(--color-brand); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); word-break: keep-all; }
@media (min-width: 48rem) {
    .learn-activities { gap: var(--space-4); }
    .learn-activity .public-destination-card__body { padding: var(--space-5); }
    .learn-activity .public-destination-card__body h4 { font-size: var(--font-size-lg); }
    .learn-activity .public-destination-card__summary { font-size: var(--font-size-base); }
    .learn-activity__needs { font-size: var(--font-size-sm); }
}
@media (min-width: 64rem) {
    .learn-activities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 종목 입문 기초 주제: 휴대폰 한 줄에 하나, 태블릿부터 두 칸. */
.learn-topics { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) {
    .learn-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 안전 목록·등록 전 질문: 점·번호 목록. */
.learn-list, .learn-questions { display: grid; width: 100%; gap: var(--space-3); padding-left: var(--space-5); color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
.learn-list { list-style: disc; }
.learn-list > li::marker { color: var(--color-brand); }
.learn-questions { list-style: decimal; }
.learn-questions > li::marker { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.learn-safety .learn-list { color: var(--color-text); }
.learn-more { width: 100%; border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); }
.learn-more > summary { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-2); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }
.learn-more > summary::-webkit-details-marker { display: none; }
.learn-more > summary > .icon { transition: transform var(--duration-base) var(--ease-standard); }
.learn-more[open] > summary > .icon { transform: rotate(180deg); }
.learn-more > .learn-questions { margin-top: var(--space-3); }

/* 종목 고르기 카드: 카드 전체가 종목 화면 링크다(찾기 결과 카드와 같은 방식). 휴대폰 한 줄에 하나, 넓은 화면 두 칸. */
.learn-courses { display: grid; gap: var(--space-4); }
.learn-course-card { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); padding: var(--space-5); }
.learn-course-card > .section-eyebrow-caps { color: var(--color-brand); }
.learn-course-card__title { color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); word-break: keep-all; }
.learn-course-card__title > a { color: inherit; text-decoration: none; }
.learn-course-card__title > a::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.learn-course-card__title > a:focus-visible { outline: none; }
.learn-course-card:has(.learn-course-card__title > a:focus-visible) { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: 2px; }
.learn-course-card__scope { color: var(--color-text-secondary); line-height: var(--line-height-body); word-break: keep-all; }
.learn-course-card__more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
@media (hover: hover) {
    .learn-course-card:hover .learn-course-card__title { color: var(--color-brand); }
    .learn-more > summary:hover { text-decoration: underline; text-underline-offset: .25em; }
}
@media (min-width: 40rem) {
    .learn-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 메인 첫 구간: 찾아온 이유별 짧은 답. 한 카드 안의 줄이고 줄 전체가 아래 구간으로 가는 링크다. */
.learn-paths { display: grid; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); list-style: none; overflow: clip; }
.learn-paths > li + li { border-top: var(--border-width) solid var(--color-border); }
.learn-paths a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; word-break: keep-all; }
.learn-paths strong { color: var(--color-text); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); }
.learn-paths span { grid-column: 1; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.learn-paths .icon, .learn-paths svg { grid-column: 2; grid-row: 1 / span 2; color: var(--color-brand); }
.learn-paths a:focus-visible { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: -2px; }
@media (hover: hover) {
    .learn-paths a:hover strong { color: var(--color-brand); }
}
@media (min-width: 48rem) {
    .learn-paths a { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; padding-inline: var(--space-6); }
    .learn-paths span { grid-column: 2; }
    .learn-paths .icon, .learn-paths svg { grid-column: 3; grid-row: 1; }
}

/* 구간 안의 작은 제목. */
.learn-subhead { margin-top: var(--space-8); margin-bottom: var(--space-4); color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); word-break: keep-all; }

/* 체험 카드: 사진 + 무엇을·어디서·프로그램 예. 휴대폰 한 줄에 하나, 넓은 화면 두 칸. */
.learn-trials { display: grid; gap: var(--space-4); }
.learn-trial img { aspect-ratio: 16 / 9; }
.learn-trial .public-destination-card__body { gap: var(--space-3); padding: var(--space-5); }
.learn-trial h3 { font-size: var(--font-size-lg); word-break: keep-all; }
.learn-trial__summary { color: var(--color-text); line-height: var(--line-height-body); word-break: keep-all; }
.learn-trial dl { display: grid; gap: var(--space-3); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); font-size: var(--font-size-sm); }
.learn-trial dt { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.learn-trial dd { margin-top: var(--space-1); color: var(--color-text-secondary); line-height: var(--line-height-body); word-break: keep-all; }
.learn-trial .public-source-note { margin-top: auto; }
@media (min-width: 48rem) {
    .learn-trials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 체험 문의 뒤 바로 이어지는 찾기 링크. */
.learn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }

/* 정규 교육 네 칸 카드: 휴대폰 한 칸, 태블릿 두 칸, 넓은 화면 네 칸. */
.learn-topics--four .public-card__body { align-content: start; }
@media (min-width: 64rem) {
    .learn-topics--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .learn-topics--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 종목 화면 단체 탭의 내용. 과정 카드 → 체험·다음 과정 → 이 단체 강사 찾기 순서다. */
.learn-course__columns--single { grid-template-columns: minmax(0, 1fr) !important; }
.learn-agency { display: grid; gap: var(--space-5); }
.learn-agency__intro { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.learn-course { display: grid; min-width: 0; gap: var(--space-5); scroll-margin-top: calc(var(--header-height) + var(--chapters-height) + var(--space-4)); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); padding: var(--space-5); }
.learn-course__head > h3 { color: var(--color-text); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); word-break: keep-all; }
.learn-course__scope { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-body); word-break: keep-all; }
.learn-course__purpose { margin-top: var(--space-3); color: var(--color-text); line-height: var(--line-height-loose); word-break: keep-all; }
.learn-course__columns { display: grid; gap: var(--space-5); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-5); }
.learn-course h4 { margin-bottom: var(--space-2); color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.learn-course .learn-list { gap: var(--space-2); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.learn-course__facts { display: grid; gap: var(--space-3); margin: 0; font-size: var(--font-size-sm); }
.learn-course__facts > div { display: grid; gap: var(--space-1); }
.learn-course__facts dt { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.learn-course__facts dd { color: var(--color-text-secondary); line-height: var(--line-height-body); word-break: keep-all; }
.learn-course__costs { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.learn-course__costs > a { margin-left: var(--space-1); }
.learn-agency__more { display: grid; gap: var(--space-4); }
.learn-mini { display: grid; gap: var(--space-3); }
.learn-mini > article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); }
.learn-mini h5 { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); word-break: keep-all; }
.learn-mini p { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.learn-mini .public-source-note { margin-top: auto; }
.learn-find { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-radius: var(--radius-card); background: var(--color-brand-soft); padding: var(--space-5); }
.learn-find strong { display: block; color: var(--color-text); font-weight: var(--font-weight-semibold); word-break: keep-all; }
.learn-find p { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.learn-find > .btn { flex: none; }
@media (min-width: 48rem) {
    .learn-course { padding: var(--space-6); }
    .learn-course__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .learn-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .learn-find { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); }
}
.learn-unverified { margin-top: var(--space-5); }

.learn-agency-source { margin-bottom: var(--space-5); }

/* 교육 단체 설명의 살펴볼 기준: 번호 없는 네 칸. */
.learn-checks { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); list-style: none; }
.learn-checks strong { display: block; color: var(--color-text); font-weight: var(--font-weight-semibold); word-break: keep-all; }
.learn-checks span { display: block; margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
@media (min-width: 48rem) {
    .learn-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 비용 항목과 확인할 것: 묶음별 표 한 벌. */
.learn-cost-groups { display: grid; width: 100%; gap: var(--space-6); }
.learn-cost-groups h3 { margin-bottom: var(--space-3); color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.learn-costs .learn-costs__check { color: var(--color-text-muted); }
@media (min-width: 48rem) {
    .learn-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}

/* 두 칸 비교(x-learn.compare, 메인의 체험·정규 교육과 두 종목): 항목마다 한 줄에 두 칸을 맞댄다. 휴대폰도 두 칸이다.
   넓은 화면은 왼쪽에 항목 이름 열(아이콘 + 이름)을 두고, 휴대폰은 항목 이름이 두 칸 위로 올라간다.
   칸은 굵은 핵심어(config point) + 설명 문장이다.
   종목 머리(원형 종목 사진 + 이름)는 표 안에서 헤더·장 목록 아래에 붙어 따라온다.
   머리는 장 목록과 같은 흰 유리 띠라 붙어 있을 때 헤더·장 목록과 한 몸처럼 보인다(진한 띠를 겹쳐 쌓지 않는다).
   마지막 줄(꼭 알아 둘 위험)은 항목 이름·아이콘만 SMB 홍시로 짚는다(면은 칠하지 않는다). 머리 사진은 있을 때만 그린다. 종목 고르기 링크는 표 안에 두지 않는다(화면 끝 종목 고르기 카드). */
.learn-compare { --learn-compare-label: 11rem; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); overflow: clip; }
.learn-compare__head { position: sticky; top: calc(var(--header-height) + var(--chapters-height) + var(--border-width)); z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: var(--border-width) solid var(--color-border); background: var(--header-glass-background); -webkit-backdrop-filter: var(--header-glass-blur); backdrop-filter: var(--header-glass-blur); color: var(--color-brand); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.learn-compare__head > span { display: flex; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.learn-compare__head > span + span { border-left: var(--border-width) solid var(--color-border); }
.learn-compare__head img { width: 2rem; height: 2rem; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-border); }
.learn-compare__row { position: relative; border-top: var(--border-width) solid var(--color-border); }
.learn-compare__head + .learn-compare__row { border-top: 0; }
/* 휴대폰: 두 칸 사이 세로선은 항목 이름 줄까지 끊기지 않게 행 전체 높이로 긋는다. */
.learn-compare__row::after { position: absolute; inset-block: 0; left: 50%; width: var(--border-width); background: var(--color-border); content: ""; }
.learn-compare__row > h3 { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; color: var(--color-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); word-break: keep-all; }
.learn-compare__row > h3 > .icon { display: grid; width: 1.75rem; height: 1.75rem; flex: none; place-items: center; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); font-size: .75rem; }
.learn-compare__row--risk > h3 { color: var(--color-smb-deep); }
.learn-compare__row--risk > h3 > .icon { background: var(--color-smb-soft); color: var(--color-smb-deep); }
.learn-compare__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.learn-compare__cells > div { display: grid; min-width: 0; align-content: start; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-5); word-break: keep-all; }
.learn-compare__cells strong { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.learn-compare__cells p { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-loose); }
@media (min-width: 48rem) {
    .learn-compare__head { grid-template-columns: var(--learn-compare-label) repeat(2, minmax(0, 1fr)); font-size: var(--font-size-lg); }
    .learn-compare__head > span { padding: var(--space-4) var(--space-6); }
    .learn-compare__head > span:first-child { grid-column: 2; border-left: var(--border-width) solid var(--color-border); }
    .learn-compare__head img { width: 2.5rem; height: 2.5rem; }
    .learn-compare__row { display: grid; grid-template-columns: var(--learn-compare-label) minmax(0, 1fr); }
    .learn-compare__row::after { content: none; }
    .learn-compare__row > h3 { align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-5) var(--space-6); font-size: var(--font-size-sm); line-height: 2.25rem; }
    .learn-compare__row > h3 > .icon { width: 2.25rem; height: 2.25rem; font-size: .9375rem; }
    .learn-compare__cells > div { gap: var(--space-2); border-left: var(--border-width) solid var(--color-border); padding: var(--space-5) var(--space-6); }
    .learn-compare__cells strong { font-size: var(--font-size-lg); }
    .learn-compare__cells p { font-size: var(--font-size-base); }
}