/* PC 층: public/shared/user-learn.css 위에 얹는 넓은 화면 배치 */
.pc-main { --pc-main-width: 1200px; }

/* 흰 면이 회색 바탕에서 이미 구분되므로 모바일의 그림자는 뺍니다 */
.lrn-seg,
.lrn-card,
.lrn-pn__a,
.lrn-typeg__cell,
.lrn-ckp__chip { box-shadow: none; }

/* 본문 뼈대: 기본은 전체 폭, 체크 묶음 카드만 2단 */
.lrn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  padding: 0;
}
.lrn > * { grid-column: 1 / -1; }
.lrn > .lrn-card:has(> .lrn-ck) { grid-column: auto; }
.lrn-card { padding: var(--space-6); }

/* 탭은 늘이지 않고 내용 폭으로 */
.lrn-seg { justify-self: start; width: 560px; margin-bottom: var(--space-4); }

/* 시작하기 단계 카드: 왼쪽 그림, 오른쪽 제목과 설명 3단 */
.lrn-guide {
  display: grid;
  grid-template-columns: 220px repeat(3, minmax(0, 1fr));
  column-gap: var(--space-6);
}
.lrn-guide__art { grid-column: 1; grid-row: 1 / span 12; align-self: center; margin: 0 auto; }
.lrn-guide__head,
.lrn-guide__title { grid-column: 2 / -1; text-align: left; }
.lrn-guide .lrn-btn { grid-column: 2 / -1; }
.lrn-card .lrn-btn { justify-self: start; width: fit-content; min-width: 280px; padding-inline: var(--space-6); }

/* 용어: 검색은 입력 폭만, 칩은 줄바꿈, 목록 3단 */
.lrn-search { width: 480px; }
.lrn-chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow-x: visible; }
.lrn-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-6);
  padding-block: var(--space-1);
}
.lrn-terms > li { border-top: 1px solid var(--color-border-divider); }
.lrn-terms > li:nth-child(-n + 3) { border-top: 0; }

/* 유형별: 칸은 개수만큼 한 줄 */
.lrn-typeg {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* 유형 안내 카드: 왼쪽 안내, 오른쪽 체크리스트, 아래 제안 물건 */
.lrn-card:has(> .lrn-sep) { display: flow-root; }
.lrn-card:has(> .lrn-sep) > .lrn-h3,
.lrn-card:has(> .lrn-sep) > .lrn-line {
  float: left;
  clear: left;
  width: calc(50% - var(--space-5));
}
.lrn-card:has(> .lrn-sep) > .lrn-sep {
  margin: 0 0 0 calc(50% + var(--space-5));
  padding-top: 0;
  border-top: 0;
}
/* 앞의 float 를 비운 요소의 위 여백은 사라지므로 안쪽 여백으로 띄웁니다 */
.lrn-card:has(> .lrn-sep) > .lrn-gsec { clear: both; margin-top: 0; padding-top: var(--space-6); }
.lrn-card:has(> .lrn-sep) > .lrn-btn { clear: both; }
.lrn-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-6);
}

/* 체크리스트: 관심 물건 칩은 가로 넘김 대신 줄바꿈, 많이 하는 실수는 전체 폭 3단 */
.lrn-ckp { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow-x: visible; }
.lrn-mis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-6);
}
.lrn-mis__row + .lrn-mis__row { border-top: 0; }