/* 진료과 칼럼 목록·상세. 위치 띠는 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: max(40px, (100% - 1200px) / 2); }
.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 { padding: 48px 0 0; background: linear-gradient(180deg, #f7f4f9 0%, #fff 100%); }
.cm-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.cm-eyebrow { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; color: #6b5992; }
.cm-hero-title { margin: 8px 0 0; font-size: 48px; font-weight: 800; line-height: 1.2; 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; gap: 4px; margin-top: 36px; border-bottom: 1px solid #ebe6f1; }
.cm-tab { position: relative; flex: none; display: flex; align-items: center; min-height: 56px; padding: 0 20px; color: #16181d; text-decoration: none; }
.cm-tab:not([aria-current]) { color: #5d6069; transition: color .25s; }
.cm-tab:not([aria-current]) .column-title { font-weight: 500; }
.cm-tab:not([aria-current]):hover { color: #16181d; }
.cm-tab .column-title { margin: 0; font-size: 17px; font-weight: 800; 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) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.cm-tab:focus-visible, .column-empty-link:focus-visible, .column-section .pagination-btn:focus-visible { outline: 2px solid #8c79b3; outline-offset: 2px; }

/* 목록 — 글. 카드 전체를 누를 수 있게 제목 링크를 카드 크기로 늘린다 */
.column-section { max-width: 1280px; margin: 36px auto 100px; padding: 0 40px; }
.cm-total { margin: 0 0 20px; font-size: 14px; color: #5d6069; }
.column-link { color: inherit; text-decoration: none; transition: color .2s; }
.column-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.column-link:focus-visible { outline: none; }
.column-link:focus-visible::after { outline: 2px solid #8c79b3; outline-offset: 2px; border-radius: 14px; }
.column-feature:hover .column-link, .column-feature:focus-within .column-link, .column-card:hover .column-link, .column-card:focus-within .column-link { color: #4d3f72; }
.column-feature { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; margin-bottom: 64px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.column-feature > img, .column-feature > .column-card-noimg { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 18px; }
.column-feature-text { min-width: 0; }
.column-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #4d3f72; 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; }
.column-feature p { margin: 14px 0 0; font-size: 16px; line-height: 1.75; color: #5d6069; overflow-wrap: anywhere; }
.column-feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 20px; font-size: 14px; color: #5d6069; }
.column-reviewer { display: inline-flex; align-items: center; gap: 6px; }
.column-reviewer svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #4d3f72; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.column-read { color: #4d3f72; font-weight: 700; }
.column-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin-bottom: 64px; }
.column-card { position: relative; display: flex; flex-direction: column; min-width: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.column-card:hover, .column-card:focus-within, .column-feature:hover, .column-feature:focus-within { transform: translateY(-6px); }
.column-card img, .column-card-noimg { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 14px; background: linear-gradient(135deg, #e6def0, #c9b8ea); }
.column-card h2 { margin: 14px 0 0; font-size: 17px; 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 p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #5d6069; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.column-card-meta { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #5d6069; overflow-wrap: anywhere; }
.column-section .pagination-container { margin: 0; padding: 0; }
.column-section .pagination-controls { flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; background: none; }
.column-section .pagination-btn { min-width: 44px; height: 44px; padding: 0 6px; border-radius: 999px; color: #16181d; font-size: 15px; font-weight: 700; }
.column-section .pagination-btn:hover:not(.disabled):not(.active) { background-color: #f3effa; color: #16181d; transform: none; }
.column-section .pagination-btn.active { background-color: #4d3f72; color: #fff; }
.column-section .pagination-btn.disabled { color: #b4a3d3; opacity: 1; }
/* 빈 상자 — 칼럼 0건 · 공지 0건 · 준비 중 게시판이 같이 쓴다 */
.column-empty { margin: 0 0 48px; padding: 60px 40px; border-radius: 28px; background: #f7f4f9; box-shadow: 0 0 0 1px #ebe6f1; text-align: center; color: #5d6069; font-size: 16px; line-height: 1.7; word-break: keep-all; }
.column-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #4d3f72; font-size: 28px; }
.column-empty h2 { margin: 20px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.4; color: #16181d; }
.column-empty p { max-width: 560px; margin: 10px auto 0; }
.column-empty-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; padding: 0 22px; border-radius: 999px; background: #4d3f72; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .cm-tab:not([aria-current]), .cm-tab .column-title, .column-feature, .column-card, .column-link { transition: none; }
  .cm-rise .column-feature, .cm-rise .column-card, .cm-rise .column-empty { animation: none; }
  .column-feature:hover, .column-card:hover, .column-feature:focus-within, .column-card:focus-within { transform: none; }
}

/* 상세 — 헤더 높이는 .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 (max-width: 1068px) {
  .column-page { padding-top: 90px; }   /* 모바일 헤더 줄은 네 진료과 공용 */
  .column-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 오른쪽 퀵메뉴에 글이 가리지 않게 그 폭만큼 비운다 */
@media (min-width: 768px) and (max-width: 1439px) {
  .cm-inner, .column-section { padding-right: clamp(40px, calc(120px - (100vw - 1280px) / 2), 120px); }
}

/* 탭은 한 줄 가로 스크롤, 카드는 작은 그림 목록. 요약은 서버 HTML 에 두고 화면에서만 뺀다 */
@media (max-width: 767px) {
  .column-page .crumb-bar.column-crumb ol { padding-left: 16px; }
  .cm-hero { padding-top: 24px; }
  .cm-inner { padding: 0; }
  .cm-eyebrow, .cm-hero-title, .cm-hero-sub { padding: 0 16px; }
  .cm-eyebrow { font-size: 14px; }
  .cm-hero-title { margin-top: 6px; font-size: 30px; letter-spacing: -1px; }
  .cm-hero-sub { margin-top: 8px; font-size: 15px; }
  .cm-tabs { flex-wrap: nowrap; gap: 2px; margin-top: 16px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .cm-tabs::-webkit-scrollbar { display: none; }
  .cm-tab { min-height: 52px; padding: 0 12px; }
  .cm-tab .column-title { font-size: 15.5px; }
  .column-section { margin-top: 20px; padding: 0 16px; }
  .cm-total { margin-bottom: 12px; font-size: 13px; }
  .column-card:hover, .column-card:focus-within, .column-feature:hover, .column-feature:focus-within { transform: none; }
  .column-feature { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px; }
  .column-feature > img, .column-feature > .column-card-noimg { border-radius: 16px; }
  .column-badge { height: 26px; padding: 0 10px; }
  .column-feature h2 { margin-top: 10px; font-size: 21px; line-height: 1.45; letter-spacing: -.4px; }
  .column-feature p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .column-feature-meta { margin-top: 10px; font-size: 13px; }
  .column-grid { display: block; margin-bottom: 40px; border-top: 1px solid #ebe6f1; }
  .column-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid #ebe6f1; }
  .column-card > img, .column-card > .column-card-noimg { grid-row: 1 / span 2; border-radius: 12px; }
  .column-card h2 { grid-column: 2; margin: 0; font-size: 15.5px; }
  .column-card p { display: none; }
  .column-card-meta { grid-column: 2; margin-top: 6px; font-size: 12.5px; }
  .column-empty { padding: 40px 20px; border-radius: 20px; font-size: 15px; }
  .column-empty h2 { font-size: 21px; }
}

@media (max-width: 768px) {
  .column-detail.medical-item-detail { padding-top: 20px; }
  .column-pager { grid-template-columns: 1fr; }
  .column-pager .next { text-align: left; }
}