/* 진료과 칼럼 목록·상세. 위치 띠는 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-crumb .crumb-current details, .column-crumb .crumb-current summary { min-width: 0; }
.column-crumb .crumb-menu { max-width: min(560px, calc(100vw - 32px)); }
.column-crumb .crumb-menu a { white-space: normal; }
/* 위치 띠 첫 글자를 제목 왼쪽 선에 맞춘다 — 목록은 .column-section, 상세는 .story-head 와 같은 식 */
.column-page .crumb-bar.column-crumb ol { padding-left: calc(max(0px, (100% - 1400px) / 2) + clamp(20px, 5vw, 96px)); }
.column-page:has(.story-head) .crumb-bar.column-crumb ol { padding-left: calc(max(0px, (100% - 1200px) / 2) + 20px); }
@media (max-width: 768px) {
  .column-page:has(.story-head) .crumb-bar.column-crumb ol { padding-left: calc(16px + 20px); }
}

/* 목록 — 커뮤니티 머리 */
.cm-hero { position: relative; overflow: hidden; padding: 64px 0 0; background: linear-gradient(180deg, #f4eff6 0%, #faf8fc 70%, #fff 100%); }
.cm-hero::before, .cm-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cm-hero::before { right: -120px; top: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(234, 166, 200, .35), transparent 65%); }
.cm-hero::after { left: 30%; top: -200px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(180, 163, 211, .35), transparent 65%); }
.cm-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 96px); }
.cm-eyebrow { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; color: #8c79b3; }
.cm-hero-title { margin: 8px 0 0; font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -1.6px; color: #16181d; }
.cm-hero-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #5d6069; word-break: keep-all; }
.cm-tabs { position: relative; display: flex; flex-wrap: wrap; row-gap: 6px; margin-top: 40px; border-bottom: 1px solid #ebe6f1; }   /* 탭이 자리를 넘으면 다음 줄로 — 옆으로 밀면 지금 탭이 화면 밖에 남는다 */
.cm-tab { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 168px; padding: 0 24px 18px; color: #16181d; text-decoration: none; }
.cm-tab:not([aria-current]) { color: #8b8f98; transition: color .25s; }
.cm-tab:not([aria-current]) .column-title { font-weight: 500; }
.cm-tab:not([aria-current]):hover { color: #4d3f72; }
.cm-tab .column-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; white-space: nowrap; transition: transform .12s; }
.cm-tab:active .column-title { transform: translateY(1px); }
.cm-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #4d3f72; }
/* 탭으로 넘어왔을 때만 — 밑줄 늘어남-줄어듦 이동과 시안과 같은 글 떠오름 .5s · 45ms 간격. 붙이는 쪽은 community-hero.html 의 스크립트 */
.cm-tabs.cm-sliding .cm-tab[aria-current="page"]::after { opacity: 0; }
.cm-tab-ind { position: absolute; height: 3px; border-radius: 3px 3px 0 0; background: #4d3f72; pointer-events: none; transform-origin: 0 0; will-change: transform; }
@keyframes cmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cm-rise .column-feature, .cm-rise .column-card, .cm-rise .column-empty { animation: cmRise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  .cm-tab:not([aria-current]), .cm-tab .column-title { transition: none; }
  .cm-rise .column-feature, .cm-rise .column-card, .cm-rise .column-empty { animation: none; }
}

/* 목록 — 글 */
.column-section { max-width: 1400px; margin: 40px auto 100px; padding: 0 clamp(20px, 5vw, 96px); }
.cm-total { margin: 0 0 24px; font-size: 14px; color: #5d6069; }
.column-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; color: inherit; text-decoration: none; }
.column-feature > img, .column-feature > .column-card-noimg { display: block; width: 100%; height: auto; aspect-ratio: 310 / 162; object-fit: cover; border-radius: 14px; background: #f2f2f4; }
.column-feature-text { display: block; min-width: 0; }
.column-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #7d6aa8; color: #fff; font-size: 13px; font-weight: 700; }
.column-feature h2 { margin: 16px 0 0; font-size: 28px; font-weight: 800; line-height: 1.42; letter-spacing: -.6px; color: #16181d; word-break: keep-all; overflow-wrap: anywhere; transition: color .2s; }
.column-feature:hover h2 { color: #4d3f72; }
.column-feature p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.75; color: #5d6069; overflow-wrap: anywhere; }
.column-feature-meta { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 13.5px; color: #767676; }
.column-read { color: #7d6aa8; font-weight: 700; font-size: 14.5px; }
.column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; margin-bottom: 64px; }
.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: 310 / 162; object-fit: cover; border-radius: 10px; background: #f2f2f4; transition: transform .2s ease; }
.column-card:hover img { transform: translateY(-2px); }
.column-card h2 { margin: 16px 0 6px; font-size: 15px; font-weight: 700; line-height: 1.5; color: #16181d; 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: #4d3f72; }
.column-card p { margin: 0; font-size: 13px; line-height: 1.6; color: #6b6f78; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.column-card time { margin-top: 10px; font-size: 12px; color: #767676; }
.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; }   /* 상자 테두리를 제목 글자 줄에 맞춘다 */
/* 일본어는 띄어쓰기가 없어 keep-all 이면 줄을 못 바꾸고 넘친다 */
:lang(ja) .column-disclaimer { word-break: normal; }
.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(4, minmax(0, 1fr)); gap: 40px 24px; }
  .column-card h2 { font-size: 17px; }
  .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) {
  .cm-hero { padding-top: 36px; }
  .cm-hero-title { font-size: 34px; letter-spacing: -1px; }
  .cm-hero-sub { font-size: 14.5px; }
  .cm-tabs { margin-top: 28px; }
  .cm-tab { min-width: 0; padding: 0 16px 14px; }
  .cm-tab .column-title { font-size: 16px; }
  .column-section { margin-top: 28px; }
  .column-feature { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .column-feature h2 { font-size: 21px; margin-top: 12px; }
  .column-feature p { font-size: 14.5px; margin-top: 10px; }
  .column-feature-meta { margin-top: 14px; }
  .column-detail.medical-item-detail { padding-top: 20px; }
  .column-pager { grid-template-columns: 1fr; }
  .column-pager .next { text-align: left; }
}