/* =====================================================================
   뉴플랜 의학칼럼 공통 CSS  (column_list.php / column01.php / column02.php ...)
   ---------------------------------------------------------------------
   - 색상·폰트는 사이트 공통 변수(--pri-*, --pnt-*, --gs*, --serif, --mont)를 그대로 사용
   - 사이트 기본 단위(rem = 뷰포트 연동)와 달리, 본문 가독성을 위해 px 로 작성
   - 목차
       01. 변수 / 기본
       02. 공통 컴포넌트 (버튼, 섹션 제목, 리빌)
       03. 칼럼 리스트 (column_list.php)
       04. 칼럼 상세 (column01.php ...)
       05. 문의 CTA / 하단 이동
       06. 헤더 메뉴 활성 표시
       07. 반응형 / 접근성
   ===================================================================== */

/* ---------- 01. 변수 / 기본 ---------- */
:root {
  --col-accent: var(--pri-3, #E55B5B);
  --col-accent-light: var(--pri-2, #F3625D);
  --col-plum: var(--pri-4, #953055);
  --col-deep: var(--pri-5, #57033E);
  --col-cream: var(--pnt-2, #FFF9EF);
  --col-beige: var(--pnt-3, #F7F2EC);
  --col-text: var(--gs900, #232527);
  --col-text-2: var(--gs800, #444444);
  --col-text-3: var(--gs700, #636363);
  --col-line: var(--gs300, #E2E2E2);
  --col-bg-soft: var(--gs50, #FAFAFA);

  --col-serif: var(--serif, "Noto Serif KR", serif);
  --col-mont: var(--mont, "Montserrat", sans-serif);

  --col-wrap: 1100px;
  /* 리스트 / 넓은 영역 */
  --col-read: 820px;
  /* 본문 읽기 폭 */
  --col-radius: 24px;
  --col-shadow: 0 10px 30px rgba(87, 3, 62, .08);
  --col-header-h: var(--header-height, 80px);
}

.col-page {
  color: var(--col-text);
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
  background: #fff;
}

.col-page *,
.col-page *::before,
.col-page *::after {
  box-sizing: border-box;
}

/* :where() = 특이도 0 → 아래 컴포넌트 클래스가 항상 우선 */
.col-page :where(h1, h2, h3, p, ul, ol, figure) {
  margin: 0;
  padding: 0;
}

.col-page :where(ul, ol) {
  list-style: none;
}

.col-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.col-page :where(a) {
  color: inherit;
  text-decoration: none;
}

.col-page :where(h1, h2, h3) {
  font-weight: inherit;
}

.col-wrap {
  width: calc(100% - 40px);
  max-width: var(--col-wrap);
  margin: 0 auto;
}

.col-read {
  width: calc(100% - 40px);
  max-width: var(--col-read);
  margin: 0 auto;
}

/* ---------- 02. 공통 컴포넌트 ---------- */
/* 섹션 */
.col-section {
  position: relative;
  padding: 88px 0;
}

.col-section--tint {
  background: var(--col-cream);
}

.col-section--soft {
  background: var(--col-beige);
}

/* 섹션 제목 (번호 + 제목) */
.col-heading {
  margin-bottom: 36px;
}

.col-heading__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: 100px;
  font-family: var(--col-mont);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1;
  color: #fff;
  background: var(--col-accent);
}

.col-heading__title {
  font-family: var(--col-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--col-deep);
}

/* 본문 텍스트 */
.col-prose p {
  margin-bottom: 1.3em;
  color: var(--col-text-2);
}

.col-prose p:last-child {
  margin-bottom: 0;
}

.col-prose strong,
.col-prose b {
  font-weight: 700;
  color: var(--col-deep);
  background: linear-gradient(transparent 62%, rgba(243, 98, 93, .22) 0);
}

/* 이미지 */
.col-figure {
  margin: 0;
}

.col-figure img {
  width: 100%;
  border-radius: var(--col-radius);
}

.col-figure--shadow img {
  box-shadow: var(--col-shadow);
}

.col-figure--plain img {
  border-radius: 0;
  box-shadow: none;
}

/* 2단 (이미지 + 텍스트) */
.col-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.col-split--reverse .col-split__media {
  order: 2;
}

.col-split__media .col-figure {
  max-width: 460px;
  margin: 0 auto;
}

/* 카드 */
.col-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.col-card {
  position: relative;
  padding: 32px 28px;
  background: #fff;
  border-radius: var(--col-radius);
  box-shadow: var(--col-shadow);
  border: 1px solid rgba(149, 48, 85, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.col-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(87, 3, 62, .12);
}

.col-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--col-accent);
  background: var(--col-cream);
}

.col-card__title {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--col-deep);
}

.col-card__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--col-text-3);
}

/* STEP */
.col-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  counter-reset: step;
}

.col-step {
  position: relative;
  padding: 52px 28px 32px;
  counter-increment: step;
  background: #fff;
  border-radius: var(--col-radius);
  box-shadow: var(--col-shadow);
}

.col-step::before {
  content: "STEP " counter(step, decimal-leading-zero);
  position: absolute;
  top: -16px;
  left: 28px;
  height: 32px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  background: var(--col-plum);
  color: #fff;
  font-family: var(--col-mont);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.col-step__title {
  margin-bottom: 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--col-deep);
}

.col-step__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--col-text-3);
}

.col-step__text strong {
  color: var(--col-accent);
  font-weight: 700;
}

/* 체크리스트 */
.col-split~.col-read {
  margin-top: 44px;
}

.col-checklist {
  margin: 0;
}

.col-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--col-line);
  font-size: 18px;
  line-height: 1.6;
  color: var(--col-text);
}

.col-checklist li:first-child {
  border-top: 1px solid var(--col-line);
}

.col-checklist__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  background: var(--col-accent);
}

/* 안내 박스 */
.col-note {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 36px;
  padding: 28px 30px;
  background: #fff;
  border-radius: 20px;
  border-left: 5px solid var(--col-accent);
  box-shadow: var(--col-shadow);
}

.col-note__icon {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 22px;
  color: var(--col-accent);
}

.col-note p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--col-text-2);
}

/* 수치 강조 (pH 등) */
.col-stat {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 36px 0;
  padding: 32px 36px;
  border-radius: var(--col-radius);
  background: linear-gradient(135deg, var(--col-deep) 0%, var(--col-plum) 100%);
  color: #fff;
}

.col-stat__num {
  flex: 0 0 auto;
  font-family: var(--col-mont);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.col-stat__num small {
  font-size: 22px;
  font-weight: 600;
  margin-right: 4px;
  opacity: .8;
}

.col-stat__desc {
  font-size: 17px;
  line-height: 1.7;
  opacity: .92;
}

/* 버튼 */
.col-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 100px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.col-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.col-btn--tel {
  background: #fff;
  color: var(--col-deep) !important;
}

.col-btn--kakao {
  background: #FEE500;
  color: #191919 !important;
}

.col-btn--naver {
  background: #03C75A;
  color: #fff !important;
}

.col-btn--line {
  background: transparent;
  color: var(--col-deep) !important;
  border-color: var(--col-deep);
}

.col-btn--line:hover {
  background: var(--col-deep);
  color: #fff !important;
}

/* 스크롤 등장 (JS 가 below-the-fold 요소에만 .is-hidden 부여 → JS 미동작 시에도 콘텐츠는 항상 보임) */
.col-reveal {
  transition: opacity .8s ease, transform .8s ease;
}

.col-reveal.is-hidden {
  opacity: 0;
  transform: translateY(32px);
}

/* 읽기 진행 바 */
.col-progress {
  position: fixed;
  left: 0;
  top: var(--col-header-h);
  z-index: 450;
  width: 100%;
  height: 4px;
  background: transparent;
  pointer-events: none;
}

.col-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--col-accent-light), var(--col-plum));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 상단 히어로 (리스트/상세 공통) ---------- */
.col-hero {
  padding: calc(var(--col-header-h) + 72px) 0 72px;
  text-align: center;
  background: linear-gradient(180deg, var(--col-cream) 0%, #fff 100%);
}

.col-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--col-mont);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--col-accent);
}

.col-hero__eyebrow::before,
.col-hero__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.col-hero__title {
  max-width: 880px;
  margin: 22px auto 0;
  font-family: var(--col-serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--col-deep);
}

.col-hero__lead {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 18px;
  color: var(--col-text-3);
}

.col-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  margin-top: 28px;
  font-size: 15px;
  color: var(--col-text-3);
}

.col-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.col-hero__meta li+li::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--col-line);
  margin-right: 10px;
}

.col-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.col-tags li {
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--col-plum);
  background: rgba(149, 48, 85, .08);
}

.col-hero__figure {
  max-width: 620px;
  margin: 48px auto 0;
}

.col-hero__figure img {
  width: 100%;
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(87, 3, 62, .16);
}

/* PC 에서만 줄바꿈 */
.col-page .pc-br {
  display: inline;
}

/* ---------- 03. 칼럼 리스트 ---------- */
.col-hero--list {
  padding-bottom: 56px;
}

.col-listwrap {
  padding: 24px 0 120px;
}

.col-list {
  border-top: 2px solid var(--col-deep);
}

.col-item {
  border-bottom: 1px solid var(--col-line);
}

.col-item__link {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 40px 12px;
  transition: background-color .3s ease;
}

.col-item__link:hover {
  background: var(--col-cream);
}

.col-item__thumb {
  overflow: hidden;
  border-radius: 20px;
  background: var(--col-beige);
  aspect-ratio: 3 / 2;
}

.col-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.col-item__link:hover .col-item__thumb img {
  transform: scale(1.06);
}

.col-item__cate {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  background: var(--col-accent);
}

.col-item__title {
  margin-bottom: 14px;
  font-family: var(--col-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--col-deep);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s ease;
}

.col-item__link:hover .col-item__title {
  color: var(--col-accent);
}

.col-item__desc {
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--col-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.col-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--col-text-3);
}

.col-item__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--col-plum);
}

.col-item__more i {
  transition: transform .3s ease;
}

.col-item__link:hover .col-item__more i {
  transform: translateX(5px);
}

/* ---------- 04. 칼럼 상세 ---------- */
.col-intro {
  padding-top: 32px;
}

.col-lead-box {
  margin-top: 40px;
  padding: 32px 36px;
  border-radius: var(--col-radius);
  background: var(--col-cream);
  border: 1px solid rgba(243, 98, 93, .25);
}

.col-lead-box__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--col-accent);
}

.col-lead-box p {
  margin: 0;
  color: var(--col-text);
}

/* ---------- 05. 문의 CTA / 하단 이동 ---------- */
.col-cta {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--col-deep) 0%, var(--col-plum) 100%);
}

.col-cta::before,
.col-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}

.col-cta::before {
  width: 420px;
  height: 420px;
  left: -140px;
  top: -180px;
}

.col-cta::after {
  width: 320px;
  height: 320px;
  right: -100px;
  bottom: -160px;
}

.col-cta__inner {
  position: relative;
  z-index: 1;
}

.col-cta__eyebrow {
  font-family: var(--col-mont);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  opacity: .75;
}

.col-cta__title {
  margin-top: 14px;
  font-family: var(--col-serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #fff;
}

.col-cta__text {
  margin-top: 14px;
  font-size: 17px;
  opacity: .88;
}

.col-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.col-cta__tel {
  margin-top: 26px;
  font-family: var(--col-mont);
  font-size: 15px;
  letter-spacing: .04em;
  opacity: .8;
}

.col-pager {
  padding: 56px 0 120px;
  text-align: center;
  background: #fff;
}

/* ---------- 06. 헤더 메뉴 활성 표시 (칼럼 페이지에서 '의학칼럼' 강조) ---------- */
.header__nav_ul li.is-current>a {
  color: var(--pri-3, #E55B5B);
  font-weight: 700;
}

.header__nav_ul_pc li.is-current>a::after {
  opacity: 1;
}

/* ---------- 06-2. 확장 컴포넌트 (칼럼 2회차~) ---------- */
/* 2열 카드 */
.col-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 소제목 라벨 (예: [ 수술적 치료 방법 ]) */
.col-subhead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--col-deep);
}

.col-subhead::before {
  content: "";
  flex: 0 0 6px;
  height: 24px;
  border-radius: 4px;
  background: var(--col-accent);
}

.col-subhead:first-child {
  margin-top: 0;
}

/* 넓은 이미지 */
.col-figure--wide {
  max-width: 760px;
  margin: 36px auto;
}

.col-figure--wide figcaption {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  color: var(--col-text-3);
}

/* 카드 안 보조 문구 */
.col-card__sub {
  display: block;
  margin-bottom: 8px;
  font-family: var(--col-mont);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--col-accent);
}

.noti {
  font-size: small;
  color: #636363;
  text-align: center;
}

/* ---------- 07. 반응형 ---------- */
@media (max-width: 1024px) {
  .col-section {
    padding: 72px 0;
  }

  .col-split {
    gap: 36px;
  }

  .col-hero__title {
    font-size: 38px;
  }

  .col-item__link {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .col-page {
    font-size: 17px;
  }

  .col-section {
    padding: 60px 0;
  }

  .col-heading {
    margin-bottom: 28px;
  }

  .col-heading__title {
    font-size: 26px;
  }

  .col-hero {
    padding: calc(var(--col-header-h) + 44px) 0 48px;
  }

  .col-hero__title {
    font-size: 28px;
    margin-top: 18px;
  }

  .col-hero__lead {
    font-size: 16px;
  }

  .col-hero__figure {
    margin-top: 32px;
  }

  .col-hero__figure img {
    border-radius: 22px;
  }

  .col-hero--list {
    padding-bottom: 36px;
  }

  .col-page .pc-br {
    display: none;
  }

  .col-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .col-split--reverse .col-split__media {
    order: 0;
  }

  .col-split__media .col-figure {
    max-width: 380px;
  }

  .col-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 28px 0;
  }

  .col-subhead {
    margin-top: 40px;
    font-size: 19px;
  }

  .col-figure--wide {
    margin: 28px auto;
  }

  .col-card {
    padding: 26px 22px;
  }

  .col-steps {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 44px;
  }

  .col-step {
    padding: 48px 22px 26px;
  }

  .col-checklist li {
    font-size: 16px;
    padding: 16px 2px;
    gap: 12px;
  }

  .col-note {
    padding: 22px 20px;
    gap: 14px;
    margin-top: 28px;
  }

  .col-note p {
    font-size: 16px;
  }

  .col-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 24px;
  }

  .col-stat__num {
    font-size: 40px;
  }

  .col-lead-box {
    padding: 24px 22px;
    margin-top: 28px;
  }

  .col-listwrap {
    padding-bottom: 80px;
  }

  .col-item__link {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
  }

  .col-item__link:hover {
    background: transparent;
  }

  .col-item__title {
    font-size: 22px;
  }

  .col-cta {
    padding: 64px 0;
  }

  .col-cta__title {
    font-size: 24px;
  }

  .col-cta__btns {
    flex-direction: column;
    align-items: stretch;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .col-btn {
    width: 100%;
  }

  .col-pager {
    padding: 40px 0 88px;
  }
}

@media (max-width: 480px) {

  .col-wrap,
  .col-read {
    width: calc(100% - 32px);
  }

  .col-hero__title {
    font-size: 25px;
  }

  .col-hero__meta {
    font-size: 14px;
  }
}

/* 접근성: 키보드 포커스 / 모션 최소화 */
.col-page a:focus-visible,
.col-page .col-btn:focus-visible {
  outline: 3px solid var(--col-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  .col-reveal,
  .col-card,
  .col-btn,
  .col-item__thumb img,
  .col-item__more i {
    transition: none !important;
  }

  .col-reveal.is-hidden {
    opacity: 1;
    transform: none;
  }
}