/* 진료과 칼럼 목록·상세. 위치 띠는 item-detail.css, 상세 바탕은 medical-item-detail.css · story-detail.css 를 쓴다 */

.column-page { padding-top: 85px; }   /* 상세 전용 헤더 높이 */

/* 글이 적어도 푸터가 화면 바닥에 붙게 한다 */
body:has(> .column-page) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .column-page) > .footer { margin-top: auto; margin-left: 0; margin-right: 0; }

.column-crumb .crumb-current { min-width: 0; flex: 0 1 auto; }
.crumb-bar.column-crumb ol > li.crumb-up { flex-shrink: 0; }
.column-crumb .crumb-current span { overflow: hidden; text-overflow: ellipsis; }

/* 목록 */
.column-section { max-width: 1400px; margin: 40px auto 80px; padding: 0 clamp(20px, 5vw, 96px); }
.column-section .column-title { font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0 0 32px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0; color: #1d1d1f; }
.column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; margin-bottom: 48px; }
.column-card { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.column-card img, .column-card-noimg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; background: #f2f2f4; transition: transform .2s ease; }
.column-card:hover img { transform: translateY(-2px); }
.column-card h2 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; line-height: 1.45; color: #1d1d1f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.column-card:hover h2 { color: #6d28d9; }
.column-card p { margin: 0; font-size: 13px; line-height: 1.55; color: #6b6b73; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.column-card time { margin-top: 8px; font-size: 12px; color: #999; }
.column-empty { margin: 0 0 48px; padding: 80px 20px; text-align: center; color: #6b6b73; font-size: 15px; line-height: 1.7; background: #f8f8fa; border-radius: 12px; word-break: keep-all; }

/* 상세 — 헤더 높이는 .column-page 가 맡는다 */
.column-detail.medical-item-detail { padding-top: 32px; }
.column-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; color: #555; }
.column-byline b { color: #1d1d1f; font-weight: 600; }
.column-byline .dot { color: #c4c4ca; }
.column-disclaimer { margin-top: 48px; padding: 18px 20px; border-radius: 10px; background: #f7f7f9; border: 1px solid #ececef; color: #5b5b63; font-size: 13px; line-height: 1.7; word-break: keep-all; }
.column-detail.medical-item-detail > .column-disclaimer { box-sizing: border-box; width: calc(100% - 40px); max-width: 1160px; padding: 18px 20px; }   /* 상자 테두리를 제목 글자 줄에 맞춘다 */
.column-pager { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.column-pager a, .column-pager span { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 10px; color: #1d1d1f; text-decoration: none; }
.column-pager a:hover { border-color: #6d28d9; }
.column-pager small { font-size: 12px; color: #8a8a92; }
.column-pager strong { font-size: 15px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.column-pager .next { text-align: right; }
.column-pager span { color: #b0b0b6; background: #fafafa; }
.column-pager span small { color: inherit; }

@media (min-width: 1024px) {
  .column-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
  .column-card h2 { font-size: 18px; margin-top: 18px; }
  .column-card p { font-size: 14px; }
  .column-card time { font-size: 13px; }
}

@media (max-width: 1068px) {
  .column-page { padding-top: 90px; }   /* 모바일 헤더 줄은 네 진료과 공용 */
}

@media (max-width: 768px) {
  .column-section { margin-top: 28px; }
  .column-section .column-title { font-size: 21px; margin-bottom: 24px; }
  .column-detail.medical-item-detail { padding-top: 20px; }
  .column-pager { grid-template-columns: 1fr; }
  .column-pager .next { text-align: left; }
}