/* 치과의 정석 (칼럼) 전용 스타일 2026-09-10
   업체 newsub.css 의 토큰(Pretendard, #15264B, #EFF3FD, #F5F5F5, #E8EBED, 2rem/3.2rem 본문)만 재사용한다.
   폰트 패밀리·기본 크기·색은 업체 세팅 그대로. 이 파일은 main#column 안에서만 동작한다. */

/* 비주얼: 업체 히어로 규격(3840x1520, 2.53:1)으로 만든 배너를 업체와 같은 고정 높이·cover 로 표시.
   중요 요소는 이미지 중앙 75% 안에 있어 좁은 데스크톱에서 양옆이 잘려도 원장·제목이 남는다. */
main#column .visual-con {background-image: url("../img/newsub/column/column_visual_notext.jpg"); background-position: center center;}
/* 상세: 글자 없는 배너 위에 글 제목을 남색으로 오른쪽(원장 사진 옆)에 배치 */
main#column:not(.hub) .visual-con .txt-wrap {color: #15264B; padding-left: 40%; padding-top: 20rem;}
main#column:not(.hub) .visual-con .txt-wrap .eng-tit {color: #6A8BD5; letter-spacing: .3em;}
main#column:not(.hub) .visual-con .txt-wrap h1 {font-size: 5.2rem; line-height: 1.25; color: #111; word-break: keep-all; max-width: 90rem;}
main#column:not(.hub) .visual-con .txt-wrap .desc {color: #555; font-size: 2rem; padding-top: 2.4rem;}
/* 허브(데스크톱): 제목이 들어간 배너를 그대로 보여주고, 겹치는 HTML 제목은 스크린리더용으로만 */
main#column.hub .visual-con {background-image: url("../img/newsub/column/column_visual_con_img.jpg");}
main#column.hub .visual-con .txt-wrap {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
@media screen and (max-width: 1024px) {
  /* 태블릿·모바일: 양옆 크롭이 커져 박힌 제목이 잘리므로 글자 없는 배너(오른쪽 깨끗한 면) + HTML 제목으로 통일 */
  main#column .visual-con, main#column.hub .visual-con {background-image: url("../img/newsub/column/column_visual_notext.jpg"); background-position: 100% center;}
  main#column .visual-con .txt-wrap, main#column.hub .visual-con .txt-wrap {position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: #15264B; padding-left: 0; padding-top: 16rem;}
  main#column .visual-con .txt-wrap .eng-tit {color: #6A8BD5; letter-spacing: .3em;}
  main#column .visual-con .txt-wrap h1 {font-size: 4.6rem; line-height: 1.25; color: #111; word-break: keep-all;}
  main#column .visual-con .txt-wrap .desc {color: #555; font-size: 2rem; line-height: 3.2rem; padding-top: 2rem;}
  main#column .intro-con .main-tit {word-break: keep-all;}
}
@media screen and (max-width: 768px) {
  main#column .visual-con .txt-wrap h1 {font-size: 4.2rem;}
}

/* ---- 상세: 본문 ---- */
main#column .column-con {padding: 10rem 0 4rem;}
main#column .column-body {max-width: 100rem; margin: 0 auto; font-size: 2rem; line-height: 3.4rem; color: #333; word-break: keep-all;}
main#column .column-body > p:first-child {font-size: 2.2rem; line-height: 3.6rem; color: #000; font-weight: 500;}
main#column .column-body h2 {margin-top: 8rem; margin-bottom: 2.4rem; font-size: 3.2rem; line-height: 1.35; font-weight: 800; color: #15264B;}
main#column .column-body h3 {margin-top: 4rem; margin-bottom: 1.6rem; font-size: 2.4rem; line-height: 1.4; font-weight: 700; color: #15264B;}
main#column .column-body p {margin: 0 0 2rem;}
main#column .column-body strong {font-weight: 600; color: #000;}
main#column .column-body a {color: #15264B; text-decoration: underline; text-underline-offset: .3rem;}
main#column .column-body ul,
main#column .column-body ol {margin: 0 0 2.4rem; padding-left: 0; list-style: none;}
main#column .column-body ul li {position: relative; padding-left: 2.4rem; margin-bottom: 1rem;}
main#column .column-body ul li:before {content: ""; position: absolute; left: .4rem; top: 1.4rem; width: .8rem; height: .8rem; border-radius: 50%; background: #15264B;}
main#column .column-body ol {counter-reset: col;}
main#column .column-body ol li {position: relative; padding-left: 3.2rem; margin-bottom: 1rem; counter-increment: col;}
main#column .column-body ol li:before {content: counter(col) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: #15264B;}

main#column .column-body .key-box {margin: 4rem 0 2rem; padding: 4rem 4.4rem; border-radius: 1.6rem; background: #EFF3FD;}
main#column .column-body .key-box h2 {margin: 0 0 2rem; font-size: 2.4rem;}
main#column .column-body .key-box ul {margin: 0;}
main#column .column-body .key-box li {margin-bottom: .8rem;}

main#column .column-body .tbl-wrap {overflow-x: auto; margin: 2.4rem 0 3.2rem;}
main#column .column-body table {width: 100%; border-collapse: collapse; font-size: 1.8rem; line-height: 2.8rem; word-break: keep-all;}
main#column .column-body th {background: #15264B; color: #fff; font-weight: 600; padding: 1.6rem 1.8rem; text-align: left; white-space: nowrap;}
main#column .column-body td {padding: 1.5rem 1.8rem; border-bottom: 1px solid #E8EBED; vertical-align: top; color: #333;}
main#column .column-body tr:nth-child(even) td {background: #F5F5F5;}

/* ---- 상세: 이미지(대표 일러스트·인포그래픽) ---- */
main#column .column-body .col-hero {margin: 0 0 4rem; padding: 0;}
main#column .column-body .col-hero img {display: block; width: 100%; height: auto; border-radius: 1.6rem;}
main#column .column-body .col-fig {margin: 3.2rem 0 4rem; padding: 0;}
main#column .column-body .col-fig img {display: block; width: 100%; height: auto; border: 1px solid #E8EBED; border-radius: 1.6rem; background: #fff;}
main#column .column-body .col-fig figcaption {margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; color: #666; text-align: center; word-break: keep-all;}

/* ---- 허브: 카드 썸네일 ---- */
main#column .column-list .thumb {display: block; margin: -3.6rem -4rem 2.4rem; border-radius: 1.6rem 1.6rem 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: #EFF3FD;}
main#column .column-list .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}

/* ---- 상세: 관련 글·면책 ---- */
main#column .column-rel {padding: 6rem 0 10rem;}
main#column .column-rel .area {max-width: 100rem;}
main#column .column-rel .rel-tit {font-size: 2.6rem; font-weight: 800; color: #15264B; margin-bottom: 2rem;}
main#column .column-rel .rel-list {list-style: none; margin: 0 0 4rem; padding: 0; border-top: 1px solid #E8EBED;}
main#column .column-rel .rel-list li {border-bottom: 1px solid #E8EBED;}
main#column .column-rel .rel-list a {display: block; padding: 1.8rem .4rem; font-size: 2rem; color: #000; text-decoration: none;}
main#column .column-rel .rel-list a:hover {color: #15264B; font-weight: 600;}
main#column .column-note {font-size: 1.6rem; line-height: 2.6rem; color: #666; word-break: keep-all; padding: 2.4rem 2.8rem; background: #F5F5F5; border-radius: 1.2rem;}
main#column .column-review {margin-top: 1.6rem; font-size: 1.6rem; color: #666;}
main#column .column-back {margin-top: 3.2rem;}
main#column .column-back a {display: inline-block; padding: 1.4rem 3rem; border-radius: 9999px; background: #15264B; color: #fff; font-size: 1.7rem; font-weight: 600; text-decoration: none;}

/* ---- 허브: 글 목록 ---- */
main#column .column-list-con {padding: 2rem 0 10rem;}
main#column .column-group {margin-top: 7rem;}
main#column .column-group:first-child {margin-top: 3rem;}
main#column .group-tit {display: flex; align-items: baseline; gap: 2rem; font-size: 3rem; font-weight: 800; color: #15264B; margin-bottom: 2.8rem;}
main#column .group-tit .hub-link {font-size: 1.6rem; font-weight: 500; color: #666; text-decoration: underline; text-underline-offset: .3rem;}
main#column .column-list {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem;}
main#column .column-list li a {display: block; height: 100%; padding: 3.6rem 4rem; border: 1px solid #E8EBED; border-radius: 1.6rem; background: #fff; text-decoration: none; color: #000; transition: box-shadow .25s ease, transform .25s ease;}
main#column .column-list li a:hover {box-shadow: 0 10px 28px rgba(21, 38, 75, .12); transform: translateY(-.3rem);}
main#column .column-list .tag {display: inline-block; padding: .5rem 1.4rem; border-radius: 9999px; background: #EFF3FD; color: #15264B; font-size: 1.4rem; font-weight: 600;}
main#column .column-list .tit {display: block; margin-top: 1.8rem; font-size: 2.4rem; line-height: 1.4; font-weight: 700; word-break: keep-all;}
main#column .column-list .sum {margin-top: 1.4rem; font-size: 1.7rem; line-height: 2.7rem; color: #666; word-break: keep-all;}
main#column .column-list .date {display: block; margin-top: 2rem; font-size: 1.4rem; color: #999;}

@media screen and (max-width: 1024px) {
  main#column .column-list {grid-template-columns: minmax(0, 1fr);}
}
@media screen and (max-width: 768px) {
  main#column .column-con {padding: 6rem 0 2rem;}
  main#column .column-body {font-size: 2rem; line-height: 3.2rem;}
  main#column .column-body > p:first-child {font-size: 2.1rem; line-height: 3.4rem;}
  main#column .column-body h2 {margin-top: 5.6rem; font-size: 2.8rem;}
  main#column .column-body .key-box {padding: 2.8rem 2.4rem;}
  main#column .column-body table {font-size: 1.6rem; line-height: 2.5rem;}
  main#column .column-body th, main#column .column-body td {padding: 1.2rem 1.2rem;}
  main#column .group-tit {font-size: 2.6rem; flex-wrap: wrap; gap: 1rem;}
  main#column .column-list li a {padding: 2.8rem 2.4rem;}
}

/* ---- 홈: 치과의 정석 최신 글 (2026-09-17, 원장 승인). 홈 맨 아래 섹션.
   섹션 여백·제목 크기·설명 타이포는 업체 홈 섹션 규칙(#main article, .tit-wrap.cmn)을 그대로 상속하고 여기서 덮어쓰지 않는다.
   우측 버튼은 qna-con 의 탭 배치, 카드는 허브 .column-list 규격의 3열 축약형 ---- */
#main .latest-con {position: relative; background: #fff; overflow: hidden;}
#main .latest-con .area {position: relative;}
#main .latest-con .tit-wrap {position: relative;}
#main .latest-con .latest-more {position: absolute; right: 0; bottom: 0;}
#main .latest-con .latest-more a {display: inline-block; padding: 1.8rem 3.6rem; border-radius: 9999px; background: #15264B; color: #fff; font-size: 1.8rem; font-weight: 700; text-decoration: none;}
#main .latest-con .latest-list {list-style: none; margin: 7.7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem;}
#main .latest-con .latest-list li a {display: block; height: 100%; padding: 0 3.2rem 3.2rem; border: 1px solid #E8EBED; border-radius: 1.6rem; background: #fff; text-decoration: none; color: #000; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease;}
#main .latest-con .latest-list li a:hover {box-shadow: 0 10px 28px rgba(21, 38, 75, .12); transform: translateY(-.3rem);}
#main .latest-con .latest-list .thumb {display: block; margin: 0 -3.2rem 2.4rem; aspect-ratio: 2 / 1; background: #EFF3FD; overflow: hidden;}
#main .latest-con .latest-list .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
#main .latest-con .latest-list .tag {display: inline-block; padding: .5rem 1.4rem; border-radius: 9999px; background: #EFF3FD; color: #15264B; font-size: 1.4rem; font-weight: 600;}
#main .latest-con .latest-list .tit {display: block; margin-top: 1.6rem; font-size: 2.2rem; line-height: 1.4; font-weight: 700; word-break: keep-all;}
#main .latest-con .latest-list .sum {margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.6rem; color: #666; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#main .latest-con .latest-list .date {display: block; margin-top: 1.8rem; font-size: 1.4rem; color: #999;}

@media all and (max-width: 960px) {
  #main .latest-con .latest-more {position: static; margin-top: 3rem;}
  #main .latest-con .latest-more a {font-size: 1.7rem; padding: 1.6rem 3rem;}
  #main .latest-con .latest-list {grid-template-columns: minmax(0, 1fr); margin-top: 4rem; gap: 1.6rem;}
  #main .latest-con .latest-list li a {display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.6rem;}
  #main .latest-con .latest-list .thumb {flex: 0 0 11rem; margin: 0; aspect-ratio: 1 / 1; border-radius: 1rem;}
  #main .latest-con .latest-list .card-txt {min-width: 0;}
  #main .latest-con .latest-list .tit {margin-top: 1rem; font-size: 1.8rem;}
  #main .latest-con .latest-list .sum {display: none;}
  #main .latest-con .latest-list .date {margin-top: 1rem;}
}

/* ---- 허브 글(kind=hub): 자동 목차 ---- */
main#column .column-body .col-toc {margin: 3.2rem 0 0; padding: 2.8rem 3.6rem; background: #F5F5F5; border-radius: 1.6rem;}
main#column .column-body .col-toc .toc-tit {margin: 0 0 1.2rem; font-size: 1.8rem; font-weight: 800; color: #15264B;}
main#column .column-body .col-toc ol {margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 2.4rem; counter-reset: toc;}
main#column .column-body .col-toc ol li {position: relative; padding-left: 2.6rem; font-size: 1.7rem; line-height: 2.6rem; counter-increment: toc;}
main#column .column-body .col-toc ol li:before {content: counter(toc) "."; position: absolute; left: 0; top: 0; color: #15264B; font-weight: 700;}
main#column .column-body .col-toc a {color: #333; text-decoration: none; font-weight: 500;}
main#column .column-body .col-toc a:hover {color: #15264B; text-decoration: underline;}
main#column .column-body h2[id] {scroll-margin-top: 12rem;}
@media screen and (max-width: 960px) {
  main#column .column-body .col-toc {padding: 2.2rem 2.4rem;}
  main#column .column-body .col-toc ol {grid-template-columns: minmax(0, 1fr);}
}