/* ===================================================================
   시안 4 — koditwebzine.com 디자인 언어 참조
   독립 스타일 (tokens/base/components 미사용)
   =================================================================== */

/* ===================================================================
   DESIGN TOKENS
   사이트의 색상·글자 크기·굵기는 아래 값만 수정하면 일괄 변경됩니다.
   =================================================================== */
.s4 {
  /* 브랜드 컬러 — 버튼, 링크, 점, 화살표, 창간호 배지 공통 */
  --s4-primary: #3182f6;
  --s4-primary-rgb: 49, 130, 246;
  --s4-primary-2: var(--s4-primary);
  --s4-primary-deep: #2568d6;
  --s4-tint: #d8e8ff;
  --s4-tint-soft: #edf3fc;
  --s4-tint-mid: #e3ecfa;
  --s4-tint-strong: #d8e5f7;
  --s4-tint-pale: #f5f9ff;
  --s4-grad: linear-gradient(100deg, var(--s4-primary) 0%, var(--s4-primary-2) 100%);

  /* 표지(PDF) 색 — wz4-cover-01.jpg 에서 직접 추출.
     히어로(리본 · 타이틀 · 배경)는 표지와 같은 색을 쓴다. */
  --s4-cover: #ef7800;
  --s4-cover-rgb: 239, 120, 0;
  --s4-cover-bg: #feefdc;

  /* 본문 콜아웃 강조색 */
  --s4-tip: #12b886;
  --s4-tip-rgb: 18, 184, 134;
  --s4-cover-bg-rgb: 254, 239, 220;

  /* 그림자 · 오버레이용 잉크 (rgb 성분) */
  --s4-ink-rgb: 22, 21, 25;
  /* 기본 색상 */
  --s4-bg: #ffffff;
  --s4-surface: #f4f7fb;
  --s4-ink: #161519;
  --s4-ink-2: #45444c;
  --s4-muted: #6b6a72;
  --s4-line: #e8e8ec;

  /* 분류 탭 · 보기 전환 칩 배경 — 섹션 밴드와 같은 계열을 그대로 쓴다 */
  --s4-chip: var(--s4-surface);
  --s4-chip-hover: var(--s4-tint-mid);

  /* 섹션 상하 여백 (홈 섹션 리듬) */
  --s4-section-pad: 66px;
  --s4-dot-inactive: #c8cbd0;

  /* SNS 고유 컬러 */
  --s4-youtube: #ff0000;
  --s4-facebook: #1877f2;
  --s4-instagram: #e4405f;
  --s4-naver: #03c75a;

  --s4-radius-sm: 12px;
  --s4-radius: 20px;
  --s4-radius-lg: 28px;
  --s4-pill: 999px;

  --s4-max: 1360px;
  --s4-gutter: 40px;
  --s4-header-h: 75px;

  /* 글자 크기 배율 — 우측 하단 컨트롤이 조정한다 */
  --s4-fs: 1;
  --s4-font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;

  /* 폰트 크기 — 숫자 하나만 바꾸면 해당 크기를 쓰는 요소가 함께 변경됨 */
  --s4-font-9: calc(9px * var(--s4-fs));
  --s4-font-11: calc(11px * var(--s4-fs));
  --s4-font-12: calc(12px * var(--s4-fs));
  --s4-font-13: calc(13px * var(--s4-fs));
  --s4-font-14: calc(14px * var(--s4-fs));
  --s4-font-15: calc(15px * var(--s4-fs));
  --s4-font-16: calc(16px * var(--s4-fs));
  --s4-font-17: calc(17px * var(--s4-fs));
  --s4-font-18: calc(18px * var(--s4-fs));
  --s4-font-19: calc(19px * var(--s4-fs));
  --s4-font-20: calc(20px * var(--s4-fs));
  --s4-font-21: calc(21px * var(--s4-fs));
  --s4-font-22: calc(22px * var(--s4-fs));
  --s4-font-23: calc(23px * var(--s4-fs));
  --s4-font-24: calc(24px * var(--s4-fs));
  --s4-font-26: calc(26px * var(--s4-fs));
  --s4-font-30: calc(30px * var(--s4-fs));
  --s4-font-32: calc(32px * var(--s4-fs));
  --s4-font-34: calc(34px * var(--s4-fs));

  /* 반응형 제목 크기 */
  --s4-font-card-title: calc(clamp(18px, 1.6vw, 21px) * var(--s4-fs));
  --s4-font-list-title: calc(clamp(19px, 1.8vw, 23px) * var(--s4-fs));
  --s4-font-section-title: calc(clamp(22px, 2.4vw, 30px) * var(--s4-fs));
  --s4-font-page-title: calc(clamp(30px, 4vw, 46px) * var(--s4-fs));
  --s4-font-lead: calc(clamp(16px, 1.7vw, 20px) * var(--s4-fs));
  --s4-font-hero-subtitle: calc(clamp(17px, 2vw, 22px) * var(--s4-fs));
  --s4-font-feature-title: calc(clamp(26px, 2.6vw, 34px) * var(--s4-fs));
  --s4-font-detail-title: calc(clamp(28px, 3.6vw, 44px) * var(--s4-fs));
  --s4-font-hero-title: calc(clamp(36px, 4.5vw, 58px) * var(--s4-fs));
  --s4-font-cover-title: calc(clamp(40px, 6vw, 82px) * var(--s4-fs));

  /* 폰트 굵기 */
  --s4-weight-regular: 400;
  --s4-weight-medium: 500;
  --s4-weight-semibold: 600;
  --s4-weight-bold: 700;
  --s4-weight-extrabold: 800;
}

.s4[data-fs="-2"] { --s4-fs: .8; }
.s4[data-fs="-1"] { --s4-fs: .9; }
.s4[data-fs="1"] { --s4-fs: 1.1; }
.s4[data-fs="2"] { --s4-fs: 1.2; }
.s4[data-fs="3"] { --s4-fs: 1.3; }

/* ---------- reset ---------- */
.s4 *,
.s4 *::before,
.s4 *::after { box-sizing: border-box; }

.s4 {
  margin: 0;
  background: var(--s4-bg);
  color: var(--s4-ink);
  font-family: var(--s4-font-family);
  font-size: var(--s4-font-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(.s4) h1,
:where(.s4) h2,
:where(.s4) h3,
:where(.s4) p,
:where(.s4) figure { margin: 0; }

:where(.s4) ul,
:where(.s4) ol { margin: 0; padding: 0; list-style: none; }

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

:where(.s4) img { display: block; max-width: 100%; }

/* 사진이 없는 콘텐츠의 공통 썸네일
   콘텐츠 번호별 hue를 고정해 어느 페이지에서도 같은 색으로 보입니다. */
.s4-gradient-thumb {
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(148deg,
    hsl(var(--s4-thumb-h, 210) 18% 32%) 0%,
    hsl(calc(var(--s4-thumb-h, 210) + 14) 15% 58%) 52%,
    hsl(calc(var(--s4-thumb-h, 210) + 26) 20% 86%) 100%);
}

.s4-gradient-thumb--01 { --s4-thumb-h: 338; }
.s4-gradient-thumb--02 { --s4-thumb-h: 36; }
.s4-gradient-thumb--03 { --s4-thumb-h: 94; }
.s4-gradient-thumb--04 { --s4-thumb-h: 152; }
.s4-gradient-thumb--05 { --s4-thumb-h: 210; }
.s4-gradient-thumb--06 { --s4-thumb-h: 268; }
.s4-gradient-thumb--07 { --s4-thumb-h: 326; }
.s4-gradient-thumb--08 { --s4-thumb-h: 24; }
.s4-gradient-thumb--09 { --s4-thumb-h: 82; }
.s4-gradient-thumb--10 { --s4-thumb-h: 140; }

:where(.s4) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.s4 [hidden] { display: none !important; }

.s4-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.s4-row {
  max-width: var(--s4-max);
  margin: 0 auto;
  padding: 0 var(--s4-gutter);
}

@media (max-width: 767px) {
  .s4 { --s4-gutter: 20px; --s4-header-h: 74px; }
}

/* ---------- 헤더 ----------
   최상단에서는 배경 없이 페이지에 녹아 있고, 스크롤하면 불투명해진다.
   20px 를 넘겨 아래로 내리면 위로 숨고, 올리면 다시 내려온다. (시안 3 헤더와 동일) */
.s4-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(var(--s4-ink-rgb), .08);
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

.s4-header.is-solid {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--s4-line);
}

.s4-header.is-hidden { transform: translateY(-100%); }

.s4-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--s4-header-h);
}

.s4-tagline {
  font-size: var(--s4-font-13);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--s4-muted);
}

.s4-tagline b {
  display: block;
  color: var(--s4-ink);
  font-weight: var(--s4-weight-bold);
}

@media (max-width: 767px) {
  .s4-tagline { display: none; }
  .s4-header-inner { grid-template-columns: auto 1fr; }
}

.s4-logo {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.s4-logo img { height: 26px; width: auto; }

.s4-logo-sub {
  font-size: var(--s4-font-9);
  font-weight: var(--s4-weight-bold);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--s4-muted);
}

@media (max-width: 767px) {
  .s4-logo { justify-self: start; align-items: flex-start; }
}

.s4-header-util {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.s4-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--s4-pill);
  color: var(--s4-ink);
  transition: background-color .2s ease;
}

.s4-icon-btn:hover { background: var(--s4-surface); }

.s4-burger {
  width: auto;
  gap: 13px;
  padding: 0 10px;
  border-radius: var(--s4-radius-sm);
}

.s4-burger-label {
  font-size: var(--s4-font-16);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.04em;
}

.s4-burger-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 23px;
}

.s4-burger-lines i {
  display: block;
  width: 23px;
  height: 2px;
  border-radius: var(--s4-pill);
  background: currentColor;
}

.s4-burger-lines i:last-child { width: 16px; }

@media (max-width: 767px) {
  .s4-burger { gap: 9px; padding: 0 6px; }
  .s4-burger-label { font-size: var(--s4-font-15); }
  .s4-burger-lines { width: 22px; }
  .s4-burger-lines i { width: 22px; height: 2px; }
  .s4-burger-lines i:last-child { width: 15px; }
}

/* 호수 배지 - 헤더 아래에 걸치며 지난호 보기로 연결 */
.s4-issue-badge {
  position: relative;
  z-index: 90;
  display: block;
  width: max-content;
  margin: calc(var(--s4-header-h) - 1px) auto 0;
  padding: 8px 30px 10px;
  border-radius: 0 0 var(--s4-radius) var(--s4-radius);
  background: var(--s4-ink);
  color: #fff;
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-semibold);
  letter-spacing: .06em;
  box-shadow: 0 10px 24px rgba(var(--s4-ink-rgb), .18);
  transition: box-shadow .2s ease, background-color .2s ease;
}

.s4-issue-badge:hover {
  background: var(--s4-primary);
  box-shadow: 0 14px 30px rgba(var(--s4-primary-rgb), .32);
}

.s4-issue-badge:active {
  box-shadow: 0 7px 18px rgba(var(--s4-primary-rgb), .22);
}

.s4-issue-badge-caret {
  margin-right: -4px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* 접혀 있을 때만 캐럿이 위아래로 까딱거려 누르고 싶게 만든다 */
.s4-hero[data-open="false"] .s4-issue-badge-caret {
  animation: s4-caret-bob 1.7s ease-in-out infinite;
}

.s4-hero[data-open="false"] button.s4-issue-badge:hover .s4-issue-badge-caret {
  animation-duration: .9s;
}

.s4-hero[data-open="true"] .s4-issue-badge-caret { transform: rotate(180deg); }

@keyframes s4-caret-bob {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(3.5px); }
  60%      { transform: translateY(-1px); }
}

/* ---------- 히어로 ---------- */
.s4-home-main { padding-top: var(--s4-header-h); }

.s4-home-main > .s4-issue-badge { margin-top: -1px; }

.s4-hero {
  position: relative;
  /* overflow 를 자르지 않는다 — 접었을 때 리본 그림자가 잘리기 때문.
     패널 쪽에서 따로 잘라 준다. */
}

.s4-hero-copy {
  padding-top: 52px;
  padding-bottom: 56px;
}

.s4-hero-copy h1 {
  max-width: 920px;
  font-size: var(--s4-font-hero-title);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.055em;
  line-height: 1.22;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-hero-copy p {
  margin-top: 22px;
  font-size: var(--s4-font-lead);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--s4-muted);
  word-break: keep-all;
}

.s4-hero-typing {
  display: inline;
  min-height: 1em;
}

.s4-hero-typing i {
  display: inline-block;
  width: 3px;
  height: .88em;
  margin-left: 7px;
  border-radius: 1px;
  background: var(--s4-primary);
  transform: translateY(.04em);
  animation: s4-caret-blink 1s steps(1, end) infinite;
}

@keyframes s4-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 767px) {
  .s4-hero-copy { padding-top: 36px; padding-bottom: 42px; }
  .s4-hero-copy h1 { font-size: var(--s4-font-32); line-height: 1.28; }
  .s4-hero-copy p { margin-top: 16px; font-size: var(--s4-font-16); }
}

@media (prefers-reduced-motion: reduce) {
  .s4-hero-typing i { display: none; animation: none; }
}

/* 여닫이 : grid-template-rows 0fr → 1fr 로 위에서 아래로 밀려 내려온다 */
.s4-hero-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .62s cubic-bezier(.22, .61, .36, 1);
}

.s4-hero[data-open="true"] .s4-hero-fold { grid-template-rows: 1fr; }

.s4-hero-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .62s;
}

.s4-hero[data-open="true"] .s4-hero-panel {
  visibility: visible;
  transition-delay: 0s;
}

/* 배경 : 글로우만으로 만든다. 경계선이 생기지 않도록 위아래 모두 투명으로 빠진다. */
.s4-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 68% at 78% 24%, rgba(var(--s4-cover-rgb), .13), transparent 72%),
    radial-gradient(60% 55% at 12% 82%, rgba(var(--s4-cover-rgb), .07), transparent 72%),
    linear-gradient(180deg, transparent 0%, var(--s4-cover-bg) 50%, transparent 100%);
  /* 위아래 끝을 마스크로 흘려보내 가로 경계선이 생기지 않게 한다 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
}

/* 위아래 여백은 패널이 아니라 안쪽 .s4-row 가 가진다.
   패널에 padding 을 주면 접었을 때 그 높이가 그대로 남는다. */
.s4-hero-panel > .s4-row {
  position: relative;
  z-index: 1;
  padding-top: 60px;
  padding-bottom: 72px;
}

/* 내용은 살짝 늦게 따라 내려오며 나타난다 */
.s4-hero-inner {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity .5s ease .1s, transform .5s cubic-bezier(.22, .61, .36, 1) .1s;
}

.s4-hero[data-open="true"] .s4-hero-inner {
  opacity: 1;
  transform: none;
}

@media (max-width: 1023px) {
  /* 세로 배치에서는 글로우를 상단으로 모은다 */
  .s4-hero-panel::before {
    background:
      radial-gradient(80% 34% at 76% 8%, rgba(var(--s4-cover-rgb), .12), transparent 72%),
      linear-gradient(180deg, transparent 0%, var(--s4-cover-bg) 45%, transparent 100%);
  }
}

/* 접힌 상태에서는 리본과 첫 섹션이 붙도록 위 여백을 줄인다 */
.s4-hero + .s4-section {
  transition: padding-top .62s cubic-bezier(.22, .61, .36, 1);
}

.s4-hero[data-open="false"] + .s4-section { padding-top: 44px; }

@media (prefers-reduced-motion: reduce) {
  .s4-hero-fold,
  .s4-hero-inner,
  .s4-hero + .s4-section,
  .s4-issue-badge-caret { transition-duration: .01ms; }

  .s4-hero[data-open="false"] .s4-issue-badge-caret { animation: none; }
}

.s4-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center;
  gap: 48px;
}

@media (max-width: 1023px) {
  .s4-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .s4-hero-cover { max-width: 380px; }
}

.s4-hero-vol {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--s4-ink);
  font-size: var(--s4-font-18);
  letter-spacing: -.02em;
}

.s4-hero-vol b { font-weight: var(--s4-weight-extrabold); }

/* 표지 타이틀과 같은 단색 */
.s4-hero-title {
  margin-top: 24px;
  font-size: var(--s4-font-cover-title);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.055em;
  line-height: 1.05;
  color: var(--s4-cover);
}

.s4-hero-sub {
  margin-top: 16px;
  font-size: var(--s4-font-hero-subtitle);
  font-weight: var(--s4-weight-semibold);
  letter-spacing: -.04em;
  color: var(--s4-ink-2);
}

.s4-hero-cover {
  position: relative;
  border-radius: var(--s4-radius);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(var(--s4-ink-rgb), .22);
  aspect-ratio: 3 / 4;
  background: var(--s4-primary-deep);
}

.s4-cover-track {
  position: absolute;
  inset: 0;
}

.s4-cover-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

.s4-cover-slide.is-on { opacity: 1; }

.s4-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s4-cover-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: var(--s4-pill);
  background: rgba(255, 255, 255, .88);
  color: var(--s4-ink);
  opacity: 0;
  transition: opacity .25s ease, background-color .2s ease;
}

.s4-hero-cover:hover .s4-cover-nav,
.s4-cover-nav:focus-visible { opacity: 1; }

.s4-cover-nav:hover { background: #fff; }
.s4-cover-prev { left: 12px; }
.s4-cover-next { right: 12px; }

.s4-cover-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.s4-cover-dots button {
  width: 22px;
  height: 4px;
  border-radius: var(--s4-pill);
  background: rgba(255, 255, 255, .5);
  transition: background-color .25s ease, width .25s ease;
}

.s4-cover-dots button.is-on {
  width: 34px;
  background: #fff;
}

/* 창간호 PDF 내려받기 */
.s4-hero-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 16px 26px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-pill);
  font-size: var(--s4-font-16);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.03em;
  color: var(--s4-ink);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.s4-hero-dl:hover {
  background: var(--s4-primary);
  border-color: var(--s4-primary);
  color: #fff;
}

.s4-hero-dl svg { transition: transform .25s ease; }
.s4-hero-dl:hover svg { transform: translateY(3px); }

.s4-hero-dl-size {
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-semibold);
  color: var(--s4-muted);
  transition: color .2s ease;
}

.s4-hero-dl:hover .s4-hero-dl-size { color: rgba(255, 255, 255, .8); }

/* ---------- 섹션 ---------- */
/* 모든 섹션의 위·아래 여백은 이 값 하나로 통일한다.
   tint 밴드나 마지막 섹션도 예외 없이 같은 값을 쓴다. */
.s4-section { padding: var(--s4-section-pad) 0; }

/* 구분 배경 밴드 (여백은 건드리지 않고 배경만) */
.s4-section--tint { background: var(--s4-surface); }

/* 지난호 보기는 위아래 여백을 절반만 */
#s4-back { padding: calc(var(--s4-section-pad) / 2) 0; }

@media (max-width: 767px) {
  .s4 { --s4-section-pad: 60px; }
}

.s4-sec-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
}

.s4-sec-title {
  position: relative;
  padding-top: 16px;
  font-size: var(--s4-font-section-title);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.045em;
  line-height: 1.2;
}

.s4-sec-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: var(--s4-pill);
  background: var(--s4-primary);
}

.s4-sec-desc {
  display: block;
  margin-top: 8px;
  font-size: var(--s4-font-15);
  color: var(--s4-muted);
  letter-spacing: -.02em;
  font-weight: var(--s4-weight-regular);
}

.s4-more {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  margin-bottom: 4px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--s4-pill);
  background: var(--s4-chip);
  color: var(--s4-ink-2);
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* tint 밴드 섹션에서는 버튼 배경이 바닥과 같아져 묻힌다 — 흰색으로 띄운다 */
.s4-section--tint .s4-more { background: var(--s4-bg); }

.s4-more:hover {
  background: var(--s4-ink);
  border-color: var(--s4-ink);
  color: #fff;
}

.s4-more svg { display: none; }

.s4-more::after {
  content: '';
  order: 2;
  width: 8px;
  height: 8px;
  margin-left: 11px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.s4-more:hover::after {
  transform: translateX(2px) rotate(45deg);
}

/* ---------- 카드 (세로형) ---------- */
.s4-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.s4-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .s4-cards,
  .s4-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .s4-cards,
  .s4-cards--4 { grid-template-columns: minmax(0, 1fr); }
}

.s4-card {
  position: relative;
  display: block;
  border-radius: var(--s4-radius);
  overflow: hidden;
  background: var(--s4-primary-deep);
  aspect-ratio: 1 / 1;
}

.s4-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

.s4-card > .s4-gradient-thumb {
  position: absolute;
  inset: 0;
}

.s4-card:hover img { transform: scale(1.06); }

.s4-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--s4-ink-rgb), .1) 30%, rgba(var(--s4-ink-rgb), .88) 100%);
}

.s4-card-chip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-block;
  width: auto;
  max-width: calc(100% - 36px);
  white-space: nowrap;
  padding: 5px 12px 6px;
  line-height: 1.35;
  border-radius: var(--s4-pill);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  color: var(--s4-ink);
}

.s4-card-views {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 6px;
  line-height: 1.35;
  border-radius: var(--s4-pill);
  /* 카테고리 칩과 반대로 — 검은 반투명 위 흰 글자 */
  background: rgba(var(--s4-ink-rgb), .48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-regular);
  letter-spacing: -.02em;
  color: #fff;
}

.s4-card-views b { font-weight: inherit; }

.s4-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 24px;
  color: #fff;
}

/* hover 시 제목 옆에 화살표가 밀려 들어온다 (칩은 그대로 남는다) */

.s4-card-title::after {
  content: '';
  display: block;
  flex: 0 0 1.05em;
  width: 1.05em;
  height: 1.05em;
  margin-left: 8px;
  margin-bottom: .12em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s ease .05s, transform .35s cubic-bezier(.2, .7, .3, 1) .05s;
}

.s4-card:hover .s4-card-title::after {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .s4-card-title::after { transition: none; }
}

.s4-card-title {
  display: flex;
  align-items: flex-end;
  font-size: var(--s4-font-card-title);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.045em;
  line-height: 1.35;
  word-break: keep-all;
}

/* 발행 호수 · 발행일은 항상 보인다. hover 때는 제목 옆 화살표만 나타난다 */
.s4-card-meta {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: var(--s4-font-13);
  color: rgba(255, 255, 255, .72);
  letter-spacing: -.02em;
}

.s4-card-date {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.s4-card-date::before {
  content: '·';
  margin: 0 8px;
}



/* ---------- 소개 링크 카드 ---------- */
.s4-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1023px) {
  .s4-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .s4-links { grid-template-columns: minmax(0, 1fr); }
}

.s4-link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 26px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius);
  background: var(--s4-bg);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.s4-link:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(var(--s4-primary-rgb), .16);
}

.s4-link-no {
  flex-shrink: 0;
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: .08em;
  color: var(--s4-primary);
}

.s4-link-body { flex: 1; min-width: 0; }

.s4-link-title {
  display: block;
  font-size: var(--s4-font-18);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.04em;
  line-height: 1.4;
}

.s4-link-desc {
  display: block;
  margin-top: 5px;
  font-size: var(--s4-font-14);
  color: var(--s4-muted);
  letter-spacing: -.02em;
  word-break: keep-all;
}

.s4-link-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--s4-pill);
  background: var(--s4-surface);
  color: var(--s4-primary);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.s4-link:hover .s4-link-arrow {
  background: var(--s4-primary);
  color: #fff;
  transform: translateX(3px);
}

/* ---------- 의료중재원 소개 ----------
   데스크톱: 대표 이미지 + 확장형 아코디언
   모바일: 네 콘텐츠를 한 장씩 넘기는 슬라이더 */
.s4-about { overflow: hidden; }

.s4-about-track {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 20px;
  height: 460px;
}

.s4-about-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
}

.s4-about-lead,
.s4-about-item {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--s4-radius);
}

.s4-about-lead {
  height: 460px;
  background: var(--s4-primary-deep);
  color: #fff;
}

.s4-about-item {
  flex: 1 1 0;
  min-height: 0;
  background: var(--s4-tint-soft);
  color: var(--s4-ink);
  outline-offset: -3px;
  transition: flex-grow .38s cubic-bezier(.16, 1, .3, 1), background-color .25s ease, color .25s ease;
}

.s4-about-item:nth-child(2) { background: var(--s4-tint-mid); }
.s4-about-item:nth-child(3) { background: var(--s4-tint-strong); }

.s4-about-lead img,
.s4-about-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s4-about-lead img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }

.s4-about-item img {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .28s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.s4-about-lead:hover img { transform: scale(1.035); }

.s4-about-lead::after,
.s4-about-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s4-about-lead::after {
  background: linear-gradient(180deg, rgba(var(--s4-ink-rgb), .08) 25%, rgba(var(--s4-ink-rgb), .9) 100%);
}

.s4-about-item::after {
  opacity: 0;
  background: linear-gradient(180deg, rgba(var(--s4-ink-rgb), .12) 15%, rgba(var(--s4-ink-rgb), .88) 100%);
  transition: opacity .28s ease;
}

.s4-about-side:has(.s4-about-item:hover) .s4-about-item:hover,
.s4-about-side:has(.s4-about-item:focus-visible) .s4-about-item:focus-visible {
  flex-grow: 4;
  color: #fff;
}

.s4-about-item:hover img,
.s4-about-item:focus-visible img {
  opacity: 1;
  transform: scale(1);
}

.s4-about-item:hover::after,
.s4-about-item:focus-visible::after { opacity: 1; }

/* 우측 3개 — 카드 좌측 상단에 아이콘 (사진이 뜨는 동안에는 감춘다) */
.s4-about-icon {
  /* 본문 블록이 카드 아래에 붙어 있어, 위로 쌓아도 제목 자리는 그대로다.
     아이콘 ~ 제목 간격은 주요 제도 카드와 같은 20px. */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--s4-primary-deep);
  transition: opacity .24s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

/* 하나에 hover 하면 세 개 모두 아이콘을 숨긴다 */
.s4-about-side:has(.s4-about-item:hover) .s4-about-icon,
.s4-about-side:has(.s4-about-item:focus-visible) .s4-about-icon {
  opacity: 0;
  transform: translateY(-6px);
}

.s4-about-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 23px 24px;
}

.s4-about-title {
  display: block;
  font-size: var(--s4-font-20);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.045em;
  line-height: 1.35;
  word-break: keep-all;
}

.s4-about-lead .s4-about-title { font-size: var(--s4-font-feature-title); }

.s4-about-desc {
  display: block;
  margin-top: 8px;
  font-size: var(--s4-font-15);
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  letter-spacing: -.02em;
  word-break: keep-all;
}

.s4-about-item .s4-about-desc {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height .32s ease, margin-top .32s ease, opacity .2s ease .08s, transform .3s ease .05s;
}

.s4-about-item:hover .s4-about-desc,
.s4-about-item:focus-visible .s4-about-desc {
  max-height: 90px;
  margin-top: 8px;
  opacity: 1;
  transform: none;
}

.s4-about-controls { display: none; }

@media (prefers-reduced-motion: reduce) {
  .s4-about-item,
  .s4-about-item img,
  .s4-about-item::after,
  .s4-about-item .s4-about-desc,
  .s4-about-track { transition: none !important; }
}

@media (max-width: 767px) {
  /* 화살표가 이미지 밖으로 걸치므로 잘림은 트랙이 담당한다 */
  .s4-about { overflow: visible; }

  /* 잘림은 움직이지 않는 래퍼가 맡는다.
     트랙 자신에게 주면 이동할 때 창까지 같이 움직여 다음 슬라이드가 안 보인다. */
  .s4-about-view {
    overflow: hidden;
    border-radius: var(--s4-radius);
  }

  .s4-about-track {
    display: flex;
    gap: 0;
    width: 100%;
    height: auto;
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
    touch-action: pan-y;
  }

  .s4-about-side { display: contents; }

  .s4-about-lead,
  .s4-about-item {
    flex: 0 0 100%;
    width: 100%;
    min-height: 390px;
    height: auto;
    color: #fff;
  }

  .s4-about-item img {
    opacity: 1;
    transform: none;
  }

  .s4-about-item::after { opacity: 1; }

  .s4-about-item .s4-about-desc {
    max-height: none;
    margin-top: 8px;
    opacity: 1;
    transform: none;
  }

  /* 컨트롤을 이미지 위로 올린다 — 래퍼는 자리만 내주고 사라진다 */
  .s4-about { position: relative; }
  .s4-about-controls { display: contents; }

  /* 점 — 이미지 우상단 */
  .s4-about-dots {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: var(--s4-pill);
    background: rgba(var(--s4-ink-rgb), .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .s4-about-dots button {
    width: 6px;
    height: 6px;
    border-radius: var(--s4-pill);
    background: rgba(255, 255, 255, .55);
    transition: width .25s ease, background-color .25s ease;
  }

  .s4-about-dots button.is-on {
    width: 20px;
    background: #fff;
  }

  /* 화살표 — 좌우 가운데, 평소엔 숨김 */
  .s4-about-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--s4-pill);
    background: rgba(var(--s4-ink-rgb), .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .22s ease, background-color .2s ease;
  }

  /* 이미지 경계에 반쯤 걸치게 */
  .s4-about-prev { left: -16px; }
  .s4-about-next { right: -16px; }

  .s4-about-arrow span {
    margin-top: -3px;
    font-size: var(--s4-font-26);
    line-height: 1;
  }

  .s4-about:hover .s4-about-arrow,
  .s4-about-arrow:focus-visible { opacity: 1; }

  /* 마우스가 없는 기기에서는 계속 보여 준다 */
  @media (hover: none) {
    .s4-about-arrow { opacity: 1; }
  }
}

/* ---------- 주요 제도 ---------- */
.s4-system {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1023px) {
  .s4-system { grid-template-columns: minmax(0, 1fr); }
}

.s4-system-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.s4-system-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--s4-primary-rgb), .5);
  box-shadow: 0 18px 38px rgba(var(--s4-primary-rgb), .1);
}

.s4-system-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.s4-system-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  background: var(--s4-surface);
  color: var(--s4-ink-2);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.s4-system-icon svg { width: 25px; height: 25px; }

.s4-system-card:hover .s4-system-icon {
  background: var(--s4-tint);
  color: var(--s4-primary);
  transform: translateY(-2px);
}

.s4-system-no {
  display: block;
  font-size: var(--s4-font-34);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--s4-muted);
  opacity: .5;
}

.s4-system-title {
  display: block;
  margin-top: 20px;
  font-size: var(--s4-font-21);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.045em;
  line-height: 1.4;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-system-desc {
  display: block;
  margin-top: 12px;
  font-size: var(--s4-font-15);
  line-height: 1.7;
  color: var(--s4-ink-2);
  letter-spacing: -.02em;
  word-break: keep-all;
}

.s4-system-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-primary);
  transition: gap .2s ease;
}

.s4-system-card:hover .s4-system-go { gap: 12px; }

@media (max-width: 560px) {
  .s4-system-card { padding: 28px 24px 26px; }
  .s4-system-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  .s4-system-icon svg { width: 23px; height: 23px; }
}

/* ---------- 지난호 보기 ---------- */
.s4-back {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1023px) {
  .s4-back { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .s4-back { grid-template-columns: minmax(0, 1fr); }

  /* 모바일에서는 현재 발행호 한 장만 — 나머지는 전체보기에서 */
  .s4-back-card:nth-child(n + 2) { display: none; }

  /* 위아래 여백도 절반으로 */
  #s4-back { padding: calc(var(--s4-section-pad) / 4) 0; }
}

.s4-back-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius);
  background: var(--s4-bg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/*.s4-back-card:hover {*/
/*  transform: translateY(-3px);*/
/*  border-color: transparent;*/
/*  box-shadow: 0 16px 34px rgba(var(--s4-ink-rgb), .12);*/
/*}*/

.s4-back-cover {
  flex-shrink: 0;
  width: 108px;
  border-radius: var(--s4-radius-sm);
  overflow: hidden;
  background: var(--s4-surface);
  aspect-ratio: 3 / 4;
}

.s4-back-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s4-back-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.s4-back-vol {
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: .06em;
  color: var(--s4-primary);
}

.s4-back-title {
  margin-top: 8px;
  font-size: var(--s4-font-18);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.04em;
  line-height: 1.4;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-back-date {
  margin-top: 6px;
  font-size: var(--s4-font-14);
  color: var(--s4-muted);
}

.s4-back-links {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.s4-back-links a,
.s4-back-links span {
  padding: 8px 16px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-pill);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.s4-back-links a:hover {
  background: var(--s4-primary);
  border-color: var(--s4-primary);
  color: #fff;
}

.s4-back-links span {
  color: var(--s4-muted);
  opacity: .6;
}

/* ---------- 지난호 목록 페이지 ---------- */
.s4-archive-count { margin-top: 40px; }

.s4-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.s4-archive-card { min-width: 0; }

.s4-archive-cover {
  display: block;
  overflow: hidden;
  border-radius: var(--s4-radius);
  background: var(--s4-surface);
  aspect-ratio: 3 / 4;
}

.s4-archive-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

a.s4-archive-cover:hover img { transform: scale(1.025); }
.s4-archive-body { padding: 20px 4px 0; }

.s4-archive-vol {
  display: block;
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: .06em;
  color: var(--s4-primary);
}

.s4-archive-title {
  margin-top: 6px;
  font-size: var(--s4-font-22);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  line-height: 1.4;
}

.s4-archive-title a:hover { color: var(--s4-primary); }

.s4-archive-date {
  display: block;
  margin-top: 3px;
  font-size: var(--s4-font-15);
  color: var(--s4-muted);
}

.s4-archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.s4-archive-actions a,
.s4-archive-actions span {
  padding: 8px 13px;
  border-radius: var(--s4-pill);
  background: var(--s4-surface);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-ink-2);
}

.s4-archive-actions a:hover { background: var(--s4-ink); color: var(--s4-bg); }
.s4-archive-card.is-pending .s4-archive-cover { opacity: .78; }


@media (max-width: 1023px) {
  .s4-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .s4-archive-count { margin-top: 28px; }
  .s4-archive-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .s4-archive-cover img { transition: none; }
}

/* ---------- 아카이브 ---------- */
.s4-page-head {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--s4-line);
}

.s4-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--s4-font-14);
  color: var(--s4-muted);
  letter-spacing: -.02em;
}

.s4-crumb a:hover { color: var(--s4-primary); }

.s4-page-title {
  margin-top: 18px;
  font-size: var(--s4-font-page-title);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.05em;
  line-height: 1.2;
}

.s4-page-desc {
  margin-top: 12px;
  font-size: var(--s4-font-17);
  color: var(--s4-muted);
  letter-spacing: -.02em;
  word-break: keep-all;
}

/* 분류 탭 + 보기 전환을 한 줄에 */
.s4-listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 36px 0 26px;
}

.s4-listbar--end { justify-content: flex-end; }

/* 테두리 없는 회색 pill. 크기로 존재감을 만드는 형태라 높이를 줄이지 않는다. */
.s4-tabs {
  display: flex;
  gap: 8px;
  margin: 36px 0 26px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* 바 안에서는 바가 여백을 담당한다 (검색 페이지처럼 단독으로 놓일 때만 자기 여백을 쓴다) */
.s4-listbar .s4-tabs { margin: 0; }


.s4-tabs::-webkit-scrollbar { display: none; }

.s4-tab {
  position: relative;
  flex-shrink: 0;
  padding: 15px 28px 15px 32px;
  border: 0;
  border-radius: var(--s4-pill);
  background: var(--s4-chip);
  font-size: var(--s4-font-16);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--s4-ink-2);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.s4-tab:hover { background: var(--s4-chip-hover); color: var(--s4-ink); }

.s4-tab[aria-selected="true"],
.s4-tab[aria-selected="true"]:hover {
  background: var(--s4-primary);
  color: #fff;
}

/* 섹션 제목 위의 파란 점과 같은 문법 — 글자 좌측 상단에 붙는다.
   자리는 모든 탭이 똑같이 비워 두어 선택이 바뀌어도 글자가 흔들리지 않는다. */
.s4-tab[aria-selected="true"]::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 17px;
  width: 5px;
  height: 5px;
  border-radius: var(--s4-pill);
  background: #fff;
}

/* 탭 옆 게시물 수 — 분류명보다 한 단계 약하게 */
.s4-tab-count {
  margin-left: 6px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-medium);
  color: var(--s4-muted);
  transition: color .2s ease;
}

.s4-tab:hover .s4-tab-count { color: var(--s4-ink-2); }
.s4-tab[aria-selected="true"] .s4-tab-count { color: rgba(255, 255, 255, .72); }

/* 보기 전환 (목록 / 갤러리) */
.s4-view {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 20px;
  background: var(--s4-chip);
}

.s4-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--s4-muted);
  transition: background-color .2s ease, color .2s ease;
}

.s4-view-btn:hover { background: var(--s4-chip-hover); color: var(--s4-ink); }

/* 선택 표시는 블랙으로 — 파랑은 '현재 보고 있는 분류' 에만 쓴다 */
.s4-view-btn.is-on,
.s4-view-btn.is-on:hover {
  background: var(--s4-ink);
  color: #fff;
}

@media (max-width: 767px) {
  .s4-listbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 28px 0 20px;
  }

  .s4-listbar .s4-view { align-self: flex-end; }

  /* '전체 N건' 과 보기 전환을 한 줄로 */
  .s4-listbar-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .s4-listbar-sub .s4-count {
    margin-bottom: 0;
    font-size: var(--s4-font-16);
  }
  .s4-listbar-sub .s4-view { align-self: auto; }
  .s4-tabs { margin: 28px 0 20px; }
  .s4-listbar .s4-tabs { margin: 0; }
  /* 메인 '전체보기' 버튼과 같은 크기로 맞춘다 */
  .s4-tabs { gap: 6px; }
  .s4-tab { padding: 12px 16px 12px 20px; font-size: var(--s4-font-13); }
  .s4-tab[aria-selected="true"]::before { top: 12px; left: 10px; width: 4px; height: 4px; }
  .s4-tab-count { margin-left: 5px; font-size: var(--s4-font-12); }
  /* 카테고리 탭과 같은 37px 높이로 */
  .s4-view { gap: 2px; padding: 3px; border-radius: 16px; }
  .s4-view-btn { width: 31px; height: 31px; border-radius: 10px; }
  .s4-view-btn svg { width: 17px; height: 17px; }
}

.s4-count {
  margin-bottom: 20px;
  font-size: var(--s4-font-15);
  color: var(--s4-muted);
  letter-spacing: -.02em;
}

.s4-count b { color: var(--s4-ink); font-weight: var(--s4-weight-extrabold); }

/* 목록 행 */
.s4-list { border-top: 2px solid var(--s4-ink); }

.s4-list-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--s4-line);
  transition: background-color .2s ease;
}

/*.s4-list-row:hover { background: var(--s4-surface); }*/

.s4-list-thumb {
  flex-shrink: 0;
  width: 200px;
  border-radius: var(--s4-radius-sm);
  overflow: hidden;
  background: var(--s4-surface);
  aspect-ratio: 4 / 3;
}

.s4-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.s4-list-thumb > .s4-gradient-thumb { transition: transform .6s cubic-bezier(.2, .7, .3, 1); }

.s4-list-row:hover .s4-list-thumb img,
.s4-list-row:hover .s4-list-thumb > .s4-gradient-thumb { transform: scale(1.06); }

.s4-list-body { flex: 1; min-width: 0; }

.s4-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--s4-pill);
  background: var(--s4-surface);
  color: var(--s4-ink-2);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
}

.s4-list-title {
  display: block;
  margin-top: 12px;
  font-size: var(--s4-font-list-title);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.045em;
  line-height: 1.4;
  word-break: keep-all;
}

.s4-list-desc {
  display: block;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 10px;
  font-size: var(--s4-font-15);
  line-height: 1.7;
  color: var(--s4-muted);
  letter-spacing: -.02em;
  word-break: keep-all;
}

.s4-list-meta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  font-size: var(--s4-font-14);
  color: var(--s4-muted);
}

.s4-list-issue {
  color: inherit;
  font-weight: inherit;
}

.s4-list-date { margin-left: 0; }
.s4-list-date::before { content: '·'; margin: 0 8px; }

.s4-list-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--s4-muted);
}

.s4-list-views::before { content: '·'; margin: 0 8px; }
.s4-list-views b { font-weight: inherit; }

/* 검색 결과 — 본래 카테고리 옆의 소속 메뉴명 */
.s4-chip-menu {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  color: var(--s4-muted);
}

.s4-chip-menu::before { content: '·'; margin-right: 8px; }

.s4-list-go {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-pill);
  color: var(--s4-muted);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.s4-list-row:hover .s4-list-go {
  background: var(--s4-ink);
  border-color: var(--s4-ink);
  color: #fff;
}

@media (max-width: 767px) {
  /* 목록 썸네일은 정사각형으로 */
  .s4-list-thumb { aspect-ratio: 1 / 1; }

  /* 썸네일을 좌측 30% 로 두고 내용이 옆에 붙는 압축 행 */
  .s4-list-row {
    align-items: flex-start;
    gap: 14px;
    padding: 16px 2px;
  }

  .s4-list-thumb { flex: 0 0 30%; width: 30%; }
  .s4-list-go { display: none; }

  .s4-chip { padding: 4px 10px; font-size: var(--s4-font-12); }
  .s4-list-title { margin-top: 7px; font-size: var(--s4-font-16); line-height: 1.4; }
  /* 좁은 화면에서는 제목·분류만 남기고 설명글은 접는다 */
  .s4-list-desc { display: none; }
  .s4-list-meta { margin-top: 8px; font-size: var(--s4-font-12); }
}

.s4-empty {
  padding: 80px 0;
  text-align: center;
  color: var(--s4-muted);
  font-size: var(--s4-font-16);
}

/* 페이지네이션 */
.s4-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 48px;
}

.s4-pagenavi[hidden] { display: none; }

/* 숫자는 테두리 없이 글자만 — 간격으로만 구분한다 */
.s4-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 38px;
  padding: 0 8px;
  color: var(--s4-muted);
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  transition: color .2s ease;
}

.s4-page:hover:not(:disabled):not(.is-on) { color: var(--s4-ink); }

.s4-page.is-on {
  color: var(--s4-primary);
  font-weight: var(--s4-weight-extrabold);
}

.s4-page:disabled {
  color: var(--s4-dot-inactive);
  cursor: default;
}

/* 화살표만 숫자 묶음과 살짝 떨어뜨린다 */
.s4-page--arrow { min-width: 34px; padding: 0; }
.s4-page--arrow:first-child { margin-right: 8px; }
.s4-page--arrow:last-child { margin-left: 8px; }

.s4-page-gap {
  padding: 0 4px;
  color: var(--s4-muted);
  font-size: var(--s4-font-15);
}

@media (max-width: 767px) {
  .s4-pagenavi { margin-top: 36px; }
  .s4-page { min-width: 30px; height: 34px; padding: 0 6px; font-size: var(--s4-font-14); }
}

/* ---------- 검색 ---------- */
.s4-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 10px 0 26px;
  border: 2px solid var(--s4-ink);
  border-radius: var(--s4-pill);
  background: var(--s4-bg);
  transition: border-color .2s ease;
}

.s4-search-form:focus-within { border-color: var(--s4-primary); }

.s4-search-form input {
  flex: 1;
  min-width: 0;
  height: calc(68px * var(--s4-fs));
  border: 0;
  background: none;
  color: var(--s4-ink);
  font: inherit;
  font-size: var(--s4-font-19);
  letter-spacing: -.03em;
  outline: none;
}

.s4-search-form input::placeholder { color: var(--s4-muted); }

/* type="search" 가 브라우저 기본 X 를 하나 더 그린다 — 우리 지우기 버튼만 남긴다 */
.s4-search-form input::-webkit-search-cancel-button,
.s4-search-form input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.s4-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--s4-pill);
  color: var(--s4-muted);
  transition: background-color .2s ease, color .2s ease;
}

.s4-search-clear:hover { background: var(--s4-surface); color: var(--s4-ink); }

.s4-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--s4-pill);
  background: var(--s4-primary);
  color: #fff;
  transition: background-color .2s ease;
}

.s4-search-btn:hover { background: var(--s4-primary-deep); }

/* 검색 범위 — 검색창 왼쪽의 작은 드롭다운 */
.s4-scope {
  position: relative;
  flex-shrink: 0;
  margin-right: 4px;
}

.s4-scope-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 9px 14px;
  border-radius: var(--s4-radius-btn);
  background: var(--s4-surface);
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--s4-ink);
  transition: background-color .2s ease;
}

.s4-scope-btn:hover { background: var(--s4-chip-hover); }
.s4-scope-btn svg { color: var(--s4-muted); transition: transform .22s ease; }
.s4-scope-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.s4-scope-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--s4-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(var(--s4-ink-rgb), .12);
}

.s4-scope-menu[hidden] { display: none; }

.s4-scope-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-medium);
  letter-spacing: -.03em;
  text-align: left;
  color: var(--s4-ink-2);
  transition: background-color .2s ease, color .2s ease;
}

.s4-scope-menu button:hover { background: var(--s4-surface); color: var(--s4-ink); }

.s4-scope-menu button[aria-selected="true"] {
  font-weight: var(--s4-weight-bold);
  color: var(--s4-primary);
}

@media (max-width: 767px) {
  .s4-scope-btn { padding: 8px 10px 8px 12px; font-size: var(--s4-font-13); }
  .s4-scope-menu { min-width: 132px; }
}

.s4-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.s4-keywords-label {
  margin-right: 4px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-muted);
  letter-spacing: -.02em;
}

.s4-keyword {
  padding: 9px 16px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-pill);
  background: var(--s4-bg);
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-semibold);
  letter-spacing: -.02em;
  color: var(--s4-ink-2);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.s4-keyword:hover {
  background: var(--s4-tint);
  border-color: var(--s4-primary);
  color: var(--s4-primary);
}

.s4-list-title mark,
.s4-card-title mark {
  padding: 0 2px;
  background: var(--s4-tint);
  color: var(--s4-primary);
  font-weight: var(--s4-weight-extrabold);
}

/* 카드는 이미지 위 흰 글자라 하이라이트도 밝은 쪽으로 뒤집는다 */
.s4-card-title mark {
  border-radius: 3px;
  background: rgba(255, 255, 255, .92);
  color: var(--s4-ink);
}

.s4-empty strong {
  color: var(--s4-ink);
  font-weight: var(--s4-weight-extrabold);
}

/* ---------- 게시물 상세 ---------- */
.s4-post { padding: 56px 0 0; }

.s4-post-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin-top: 22px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--s4-primary) 8%, transparent);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-semibold);
  color: var(--s4-primary);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .2s ease;
}

.s4-post-eyebrow:hover {
  background: color-mix(in srgb, var(--s4-primary) 15%, transparent);
}

.s4-post-title {
  margin-top: 12px;
  font-size: var(--s4-font-detail-title);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.05em;
  line-height: 1.28;
  word-break: keep-all;
}

.s4-post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--s4-line);
  font-size: var(--s4-font-14);
  color: var(--s4-muted);
}

/* 발행호 — 작성일 왼쪽 */
.s4-post-issue { font-weight: var(--s4-weight-semibold); color: var(--s4-ink-2); }
.s4-post-issue::after { margin: 0 8px; content: '·'; color: var(--s4-muted); font-weight: var(--s4-weight-regular); }

.s4-post-views::before {
  margin: 0 8px;
  content: '·';
}

.s4-post-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.s4-post-hero {
  margin-top: 40px;
  border-radius: var(--s4-radius);
  overflow: hidden;
  background: var(--s4-surface);
}

.s4-post-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.s4-post-hero > .s4-gradient-thumb { aspect-ratio: 16 / 9; }

/* 본문에 넣은 이미지도 대표 이미지와 같은 둥근 모서리 */
.s4-post-content img {
  height: auto;
  border-radius: var(--s4-radius);
}

@media (max-width: 767px) {
  .s4-post-hero,
  .s4-post-content img { border-radius: var(--s4-radius-sm); }
}

.s4-post-content {
  margin-top: 44px;
  font-size: var(--s4-font-17);
  line-height: 1.9;
  color: var(--s4-ink-2);
  letter-spacing: -.02em;
  word-break: keep-all;
}

.s4-post-content > * + * { margin-top: 24px; }

.s4-post-lead {
  font-size: var(--s4-font-19);
  font-weight: var(--s4-weight-semibold);
  line-height: 1.75;
  color: var(--s4-ink);
}

.s4-post-content h2 {
  position: relative;
  margin-top: 72px;
  padding-top: 44px;
  border-top: 2px solid var(--s4-ink);
  font-size: var(--s4-font-26);
  line-height: 1.3;
  scroll-margin-top: calc(var(--s4-header-h) + 28px);
  font-size: var(--s4-font-23);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.045em;
  color: var(--s4-ink);
}

.s4-post-quote {
  margin: 40px 0;
  padding: 34px 40px;
  border-left: 6px solid var(--s4-primary);
  border-radius: var(--s4-radius);
  background: var(--s4-tint-soft);
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: var(--s4-weight-semibold);
  line-height: 1.65;
  letter-spacing: -.035em;
  color: var(--s4-ink);
}

/* ---------- 원장님 인사말 ---------- */
.s4-greeting-opening {
  max-width: none;
  margin: 48px 0 0;
  padding: 0 0 40px;
  border-bottom: 1px solid var(--s4-line);
  color: var(--s4-ink);
}

.s4-greeting-hello,
.s4-greeting-name { margin: 0; }

.s4-greeting-hello {
  font-size: var(--s4-font-20);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.045em;
  line-height: 1.45;
}

.s4-greeting-name {
  margin-top: 12px;
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.06em;
  line-height: 1.32;
  word-break: keep-all;
}

.s4-greeting-name strong { color: var(--s4-primary); }

.s4-greeting-letter {
  max-width: none;
  margin: 44px 0 0;
}

.s4-greeting-letter p { margin: 0; }
.s4-greeting-letter p + p { margin-top: 26px; }

.s4-greeting-change {
  max-width: none;
  margin: 72px 0 0;
}

.s4-greeting-change > h2 { margin-top: 0; }

.s4-greeting-change > p {
  max-width: none;
  color: var(--s4-ink-2);
}

.s4-greeting-promises {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: greeting-promise;
  border-top: 1px solid var(--s4-line);
}

.s4-greeting-promises li {
  position: relative;
  min-height: 132px;
  padding: 26px 0 26px 74px;
  border-bottom: 1px solid var(--s4-line);
  counter-increment: greeting-promise;
}

.s4-greeting-promises li::before {
  position: absolute;
  top: 28px;
  left: 0;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--s4-pill);
  background: color-mix(in srgb, var(--s4-primary) 10%, transparent);
  color: var(--s4-primary);
  content: '0' counter(greeting-promise);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: .02em;
}

.s4-greeting-promises strong,
.s4-greeting-promises span { display: block; }

.s4-greeting-promises strong {
  color: var(--s4-ink);
  font-size: var(--s4-font-18);
  font-weight: var(--s4-weight-bold);
  line-height: 1.5;
  letter-spacing: -.04em;
  word-break: keep-all;
}

.s4-greeting-promises span {
  margin-top: 8px;
  color: var(--s4-ink-2);
  font-size: var(--s4-font-16);
  line-height: 1.75;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.s4-greeting-quote {
  max-width: none;
  margin: 56px 0 0;
}

.s4-greeting-signature {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin: 56px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--s4-line);
  color: var(--s4-ink-2);
  font-size: var(--s4-font-16);
  line-height: 1.65;
}

.s4-greeting-signature strong {
  color: var(--s4-ink);
  font-size: var(--s4-font-19);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.04em;
  text-align: right;
}

@media (max-width: 639px) {
  .s4-post-quote {
    margin: 28px 0;
    padding: 24px 22px;
    border-left-width: 4px;
    font-size: var(--s4-font-18);
    line-height: 1.65;
  }

  .s4-greeting-opening { margin-top: 36px; padding-bottom: 32px; }
  .s4-greeting-letter { margin-top: 32px; }
  .s4-greeting-letter p + p { margin-top: 22px; }
  .s4-greeting-change { margin-top: 52px; }

  .s4-greeting-promises li {
    min-height: 0;
    padding: 20px 0 22px 58px;
  }

  .s4-greeting-promises li::before {
    top: 21px;
    width: 36px;
    height: 36px;
  }

  .s4-greeting-promises strong { font-size: var(--s4-font-17); }
  .s4-greeting-promises span { font-size: var(--s4-font-16); line-height: 1.7; }
  .s4-greeting-quote { margin-top: 40px; }

  .s4-greeting-signature {
    display: block;
    margin-top: 40px;
    padding-top: 24px;
  }

  .s4-greeting-signature strong {
    display: block;
    margin-top: 10px;
    text-align: left;
  }
}

/* ---------- 본문 + 우측 목차 ---------- */
/* 본문과 우측 목차를 한 그리드로 묶어 왼쪽 읽기 영역을 넓힌다. */
#article-list { scroll-margin-top: 120px; }

.s4-doc-head {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  margin-inline: 0;
}

.s4-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 60px;
  margin-top: 44px;
  padding-bottom: 32px;
}

.s4-doc-body {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.s4-doc .s4-post-hero { margin-top: 0; }

/* 목차와 도구 버튼은 대표이미지 윗선에서 시작해 함께 고정된다. */
.s4-doc-side {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  min-width: 0;
}

.s4-doc-side-inner {
  position: sticky;
  top: calc(var(--s4-header-h) + 30px);
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.s4-toc {
  order: 1;
  position: static;
  width: auto;
  margin: 0;
}

.s4-actions {
  order: 2;
  position: static;
  width: auto;
  margin: 26px 0 0;
}

.s4-toc-inner {
  position: static;
  max-height: none;
  overflow: visible;
}

.s4-toc-title {
  margin-bottom: 14px;
  font-size: var(--s4-font-16);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.02em;
  color: var(--s4-ink);
}

.s4-toc-list {
  list-style: none;
  border-left: 1px solid var(--s4-line);
}

.s4-toc-list a {
  display: block;
  padding: 8px 0 8px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--s4-font-15);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--s4-muted);
  word-break: keep-all;
  transition: color .2s ease, border-color .2s ease;
}

.s4-toc-list a:hover { color: var(--s4-ink); }

.s4-toc-list a.is-on {
  border-left-color: var(--s4-primary);
  color: var(--s4-primary);
  font-weight: var(--s4-weight-bold);
}

/* 목차 머리 (모바일 드로어에서만 닫기 버튼이 보인다) */
.s4-toc-head { display: flex; align-items: center; justify-content: space-between; }
.s4-toc-close { display: none; }

/* 스크림 — 드로어·바텀시트 공용 */
.s4-scrim {
  position: fixed;
  inset: 0;
  z-index: 118;
  background: rgba(var(--s4-ink-rgb), .45);
  opacity: 0;
  transition: opacity .25s ease;
}

.s4-scrim.is-on { opacity: 1; }

/* 용어 바텀시트 — 좁은 화면에서 아래에서 올라온다 */
.s4-sheet {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.s4-sheet-panel {
  width: 100%;
  max-height: 76vh;
  overflow-y: auto;
  padding: 12px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--s4-bg);
  box-shadow: 0 -18px 46px rgba(var(--s4-ink-rgb), .18);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
  pointer-events: auto;
}

.s4-sheet.is-on .s4-sheet-panel { transform: none; }

.s4-sheet-grip {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: var(--s4-pill);
  background: var(--s4-line);
}

.s4-sheet-body dt {
  font-size: var(--s4-font-19);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  color: var(--s4-ink);
}

.s4-sheet-body dt span {
  display: block;
  margin-top: 3px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-regular);
  letter-spacing: 0;
  color: var(--s4-muted);
}

.s4-sheet-body dd {
  margin: 14px 0 0;
  font-size: var(--s4-font-17);
  line-height: 1.8;
  color: var(--s4-ink-2);
  word-break: keep-all;
}

.s4-sheet-body .s4-fn-back { display: none; }

.s4-sheet-more {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* PC — 화면을 가로지르지 않도록 가운데 카드로 */
@media (min-width: 768px) {
  .s4-sheet { justify-content: center; }

  .s4-sheet-panel {
    width: min(560px, 92vw);
    margin-bottom: 28px;
    border-radius: 20px;
  }
}

.s4-sheet-close {
  width: 100%;
  margin-top: 22px;
  padding: 15px 0;
  border: 0;
  border-radius: var(--s4-radius-sm);
  background: var(--s4-chip);
  font: inherit;
  font-size: var(--s4-font-16);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-ink);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .s4-sheet-panel,
  .s4-scrim,
  .s4-toc { transition: none; }
}

/* 사이드가 설 자리가 없으면 목차는 우측 드로어, 용어 설명은 본문 아래로 */
@media (max-width: 1289px) {
  .s4-doc { display: flex; flex-direction: column; }

  .s4-doc-head,
  .s4-doc-body,
  .s4-doc-side {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
  }

  .s4-doc-head { order: 0; }
  .s4-doc-side { order: 1; margin-top: 24px; }
  .s4-doc-body { order: 2; margin-top: 32px; }

  .s4-doc-side-inner { position: static; }

  .s4-actions {
    width: auto;
    margin: 20px 0 0;
  }

  .s4-toc-actions { justify-content: center; }
  .s4-toc-status { text-align: center; }

  /* 목차 — 본문 위 가로형 박스 */
  .s4-toc {
    position: static;
    order: -1;
    width: auto;
    max-width: 860px;
    margin: 0 auto 32px;
    padding: 18px 20px;
    border-radius: var(--s4-radius);
    background: var(--s4-surface);
  }

  .s4-toc-inner { position: static; max-height: none; overflow: visible; }
  .s4-toc-title { margin-bottom: 12px; font-size: var(--s4-font-16); letter-spacing: -.03em; }
  .s4-toc-list { display: flex; flex-wrap: wrap; gap: 6px 16px; border-left: 0; }
  .s4-toc-list a { font-size: var(--s4-font-15); padding: 4px 0; margin-left: 0; border-left: 0; }
  .s4-toc-list a.is-on { border-left: 0; }
}

@media (max-width: 767px) {
  /* 목차 — 좁은 화면에서는 한 단계씩 줄인다(PC 16 · 15 → 15 · 14) */
  .s4-toc-title { margin-bottom: 10px; font-size: var(--s4-font-15); }
  .s4-toc-list a { font-size: var(--s4-font-14); }

  .s4-doc-body { order: 1; }
  .s4-doc-side { order: 2; margin-top: 32px; }
}

.s4-toc-actions {
  display: flex;
  gap: 8px;
}

/* 아이콘 전용 — 목록 페이지의 보기 전환 버튼과 같은 문법 */
.s4-toc-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 15px;
  background: var(--s4-chip);
  color: var(--s4-ink-2);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.s4-toc-btn:hover { background: var(--s4-ink); color: #fff; }
.s4-toc-btn:active { transform: scale(.94); }

/* hover 툴팁 — 아이콘만 있어서 이름을 띄워 준다 */
.s4-toc-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--s4-ink);
  color: #fff;
  font-size: var(--s4-font-12);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.s4-toc-btn[data-tip]:hover::after,
.s4-toc-btn[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.s4-toc-status {
  margin-top: 10px;
  min-height: 1.4em;
  font-size: var(--s4-font-12);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  color: var(--s4-primary);
}

.s4-toc-status.is-error { color: var(--s4-muted); }

/* ---------- 본문 구성요소 ---------- */
/* 사건 개요 요약 */
/* 사건 개요 — 타일 4장 */
.s4-fact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.s4-fact > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 24px;
  border-radius: 14px;
  background: var(--s4-surface);
}

/* 결과 타일만 브랜드색으로 무게를 준다 */
.s4-fact > div.is-accent {
  background: var(--s4-tint-pale);
  box-shadow: inset 0 0 0 1px rgba(var(--s4-primary-rgb), .18);
}

.s4-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--s4-bg);
  color: var(--s4-primary);
}

.s4-fact > div.is-accent .s4-fact-icon { background: var(--s4-primary); color: #fff; }

.s4-fact-icon svg { width: 19px; height: 19px; }

.s4-fact dt {
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  color: var(--s4-muted);
}

.s4-fact dd {
  margin: -6px 0 0;
  font-size: var(--s4-font-21);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.045em;
  line-height: 1.35;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-fact > div.is-accent dd { color: var(--s4-primary-deep); }

@media (max-width: 767px) {
  .s4-fact { gap: 8px; }
}

/* 진료 경과 — 세로 타임라인 */
.s4-timeline {
  list-style: none;
  padding: 0;
}

.s4-timeline > li {
  position: relative;
  padding: 0 0 22px 36px;
}

/* 항목을 잇는 세로선 */
.s4-timeline > li::before {
  content: '';
  position: absolute;
  top: 9px;
  bottom: -2px;
  left: 7px;
  width: 2px;
  background: var(--s4-line);
}

.s4-timeline > li:last-child { padding-bottom: 0; }
.s4-timeline > li:last-child::before { display: none; }

/* 시점 표시 점 */
.s4-timeline > li::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 3px solid var(--s4-primary);
  border-radius: var(--s4-pill);
  background: var(--s4-bg);
}

/* 마지막(사망) 시점은 검정으로 마감 */
.s4-timeline > li.is-final::after { border-color: var(--s4-ink); }

/* 날짜는 알약 배지로 — 시점이 한눈에 끊겨 보이게 */
.s4-timeline-date {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 14px 6px;
  border-radius: var(--s4-pill);
  background: rgba(var(--s4-primary-rgb), .1);
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--s4-primary);
}

/* 내용은 카드로 감싸 일자별로 덩어리가 분리되게 */
.s4-timeline-body {
  padding: 18px 20px;
  border-radius: 12px;
  background: #f7f8fa;
}

.s4-timeline-body > * + * { margin-top: 10px; }

/* 카드 위에서는 수치 박스를 흰색으로 띄운다 */
.s4-timeline-body .s4-note {
  background: var(--s4-bg);
  border-left-color: var(--s4-primary);
}

/* 마지막 시점은 검정으로 마감 */
.s4-timeline > li.is-final .s4-timeline-date {
  background: var(--s4-ink);
  color: #fff;
}

.s4-timeline > li.is-final .s4-timeline-body {
  background: var(--s4-bg);
  box-shadow: inset 0 0 0 1px var(--s4-line);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-ink);
}

.s4-timeline-body ul {
  list-style: none;
  padding: 0;
}

.s4-timeline-body li {
  position: relative;
  padding-left: 14px;
  font-weight: var(--s4-weight-medium);
  line-height: 1.75;
  color: var(--s4-ink);
}

.s4-timeline-body li + li { margin-top: 6px; }

.s4-timeline-body li::before {
  content: '';
  position: absolute;
  top: .82em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--s4-pill);
  background: var(--s4-dot-inactive);
}

.s4-note {
  margin: 12px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--s4-primary);
  border-radius: 0 var(--s4-radius-sm) var(--s4-radius-sm) 0;
  background: var(--s4-tint-pale);
  font-size: var(--s4-font-17);
  line-height: 1.75;
}

.s4-note b { color: var(--s4-ink); }

/* 각주 */
/* 각주 — 괄호 숫자가 아니라 단어 전체가 클릭 영역 */
.s4-term {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(var(--s4-primary-rgb), .07);
  border-bottom: 1px dashed rgba(var(--s4-primary-rgb), .5);
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease;
}

.s4-term:hover { background: rgba(var(--s4-primary-rgb), .16); }

.s4-term sup {
  margin-left: 1px;
  font-size: .72em;
  font-weight: var(--s4-weight-bold);
  color: var(--s4-primary);
}

.s4-fn-back {
  margin-left: 6px;
  color: var(--s4-muted);
}

/* 쟁점 — 양측 주장 */
/* 쟁점 — 실제 메신저 화면처럼 */
.s4-chat {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 50px;
  border-radius: 18px;
  /* 대화방 바탕 — 흰 말풍선이 떠 보일 만큼만 옅게 */
  background: #eef3f9;
}

.s4-chat-msg { max-width: 82%; }
.s4-chat-msg--patient { align-self: flex-start; }
.s4-chat-msg--hospital { align-self: flex-end; }

.s4-chat-bubble {
  position: relative;
  padding: 16px 20px;
  font-size: var(--s4-font-17);
  font-weight: var(--s4-weight-medium);
  line-height: 1.75;
  letter-spacing: -.02em;
  color: var(--s4-ink);
  word-break: keep-all;
}

/* 말꼬리는 화자 쪽 위 모서리를 깎아 만든다 */
.s4-chat-msg--patient .s4-chat-bubble {
  border-radius: 4px 18px 18px 18px;
  background: #fff;
}

.s4-chat-msg--hospital .s4-chat-bubble {
  border-radius: 18px 4px 18px 18px;
  background: var(--s4-tint);
}

/* 이름은 말풍선 위에 — 누가 한 말인지 먼저 읽히도록 */
.s4-chat-who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.02em;
  color: var(--s4-ink-2);
}

.s4-chat-msg--hospital .s4-chat-who { justify-content: flex-end; }

.s4-chat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--s4-pill);
  background: #fff;
  color: var(--s4-ink-2);
}

.s4-chat-msg--hospital .s4-chat-ico { color: var(--s4-primary); }

/* 적절성 판단 — 번호 매긴 항목 */
/* 적절성 판단 — 세로선으로 1~3 을 하나로 묶는다 */
/* ---------- 기사 블록 : 카드 묶음 · 비교표 · 문의 ----------
   주요 제도처럼 항목을 나란히 보여 주는 글에서 쓴다.
   <div class="s4-points s4-points--3"><div class="s4-point"><span class="s4-point-no">01</span><h4>제목</h4><p>설명</p></div> … </div> */
.s4-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0;
}

.s4-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.s4-point {
  padding: 24px 24px 26px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius);
  background: #fff;
}

.s4-point--tint { border-color: transparent; background: var(--s4-surface); }

.s4-point { position: relative; }

/* 아이콘이 있으면 번호 · 이름표는 오른쪽 위로 */
.s4-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(var(--s4-primary-rgb), .12);
  color: var(--s4-primary);
}

.s4-point:not(.s4-point--tint) .s4-point-icon { background: rgba(var(--s4-primary-rgb), .08); box-shadow: none; }
.s4-point-icon svg { width: 24px; height: 24px; }
.s4-point-icon + .s4-point-no { position: absolute; top: 24px; right: 24px; margin: 0; }

/* 본문 중간 사진 */
.s4-post-figure { margin: 40px 0 0; }
.s4-post-figure img { display: block; width: 100%; height: auto; }
.s4-post-figure figcaption { margin-top: 10px; color: var(--s4-muted); font-size: var(--s4-font-14); text-align: center; }

.s4-point-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  margin-bottom: 12px;
  padding: 0 9px;
  border-radius: var(--s4-pill);
  background: rgba(var(--s4-primary-rgb), .1);
  color: var(--s4-primary);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: .02em;
}

.s4-post-content .s4-point h4 {
  margin: 0;
  font-size: var(--s4-font-18);
  font-weight: var(--s4-weight-extrabold);
  line-height: 1.45;
  letter-spacing: -.04em;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-post-content .s4-point p,
.s4-post-content .s4-point ul {
  margin: 10px 0 0;
  font-size: var(--s4-font-16);
  line-height: 1.7;
  color: var(--s4-ink-2);
  word-break: keep-all;
}

.s4-post-content .s4-point ul { padding: 0; list-style: none; }
.s4-post-content .s4-point li { position: relative; padding-left: 14px; }
.s4-post-content .s4-point li + li { margin-top: 6px; }
.s4-post-content .s4-point li::before {
  content: '';
  position: absolute;
  top: .72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--s4-pill);
  background: var(--s4-primary);
}

/* 비교표 — 좁은 화면에서는 표만 가로로 밀린다 */
.s4-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.s4-table {
  width: 100%;
  min-width: 520px;
  border-top: 2px solid var(--s4-ink);
  border-collapse: collapse;
  font-size: var(--s4-font-16);
  line-height: 1.6;
}

.s4-table th,
.s4-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--s4-line);
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
}

.s4-table thead th {
  background: var(--s4-surface);
  color: var(--s4-ink);
  font-weight: var(--s4-weight-bold);
}

.s4-table tbody th {
  color: var(--s4-ink);
  font-weight: var(--s4-weight-bold);
  white-space: nowrap;
}

.s4-table .is-up { color: var(--s4-primary); font-weight: var(--s4-weight-bold); }
.s4-table small { display: block; color: var(--s4-muted); font-size: var(--s4-font-14); }
.s4-post-content .s4-table-note { margin: -12px 0 24px; color: var(--s4-muted); font-size: var(--s4-font-14); }

/* 문의 */
.s4-contact-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 40px 0 0;
  padding: 22px 26px;
  border-radius: var(--s4-radius);
  background: var(--s4-ink);
  color: #fff;
}

.s4-contact-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.s4-contact-icon svg { width: 22px; height: 22px; }
.s4-contact-icon + p { flex: 1; min-width: 180px; }

.s4-post-content .s4-contact-box p { margin: 0; color: rgba(255, 255, 255, .8); font-size: var(--s4-font-16); }
.s4-post-content .s4-contact-box a { color: #fff; font-size: var(--s4-font-22); font-weight: var(--s4-weight-extrabold); letter-spacing: -.02em; text-decoration: none; }

@media (max-width: 767px) {
  .s4-points,
  .s4-points--3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .s4-point { padding: 20px 20px 22px; }
  .s4-point-icon { width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; }
  .s4-point-icon svg { width: 21px; height: 21px; }
  .s4-point-icon + .s4-point-no { top: 20px; right: 20px; }
  .s4-post-figure { margin-top: 28px; }
  .s4-table { min-width: 0; font-size: var(--s4-font-14); }
  .s4-table th, .s4-table td { padding: 11px 8px; }
  .s4-table tbody th { white-space: normal; }
  .s4-contact-box { padding: 20px; }
}

.s4-steps {
  position: relative;
  list-style: none;
  counter-reset: step;
  padding: 30px 32px;
  border-radius: 16px;
  background: #f7f8fa;
}

/* 번호를 잇는 세로선 (첫·마지막 원 안쪽에서 시작·종료) */
.s4-steps::before {
  content: '';
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 49px;
  width: 2px;
  background: rgba(var(--s4-primary-rgb), .22);
}

.s4-steps > li {
  position: relative;
  counter-increment: step;
  padding-left: 52px;
}

.s4-steps > li + li { margin-top: 30px; }

.s4-steps > li::before {
  content: counter(step);
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--s4-pill);
  border: 3px solid #f7f8fa;
  background: var(--s4-primary);
  color: #fff;
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-extrabold);
}

.s4-steps h4 {
  margin-bottom: 10px;
  font-size: var(--s4-font-18);
  font-weight: var(--s4-weight-extrabold);
  line-height: 1.5;
  letter-spacing: -.04em;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-post-content h2::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: var(--s4-pill);
  background: var(--s4-primary);
}

/* 첫 섹션은 위 구분선을 두지 않는다 */
.s4-post-content > h2:first-of-type { margin-top: 56px; }

.s4-post-content h2 + p { margin-top: 18px; color: var(--s4-ink-2); }

.s4-post-content h3 {
  margin-top: 44px;
  padding-left: 14px;
  border-left: 3px solid var(--s4-primary);
  font-size: var(--s4-font-21);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  line-height: 1.4;
  color: var(--s4-ink);
}

/* 조정 결과 */
.s4-result {
  padding: 30px 32px;
  border: 2px solid var(--s4-ink);
  border-radius: var(--s4-radius);
}

.s4-result dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--s4-line);
}

.s4-result dt {
  margin-bottom: 6px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-muted);
}

.s4-result dd {
  font-size: var(--s4-font-23);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  color: var(--s4-ink);
}

.s4-result dd.is-strong { color: var(--s4-primary); }
.s4-result > p { font-size: var(--s4-font-17); line-height: 1.8; }
.s4-result > p b { color: var(--s4-ink); }

/* 용어 설명 */
/* 용어 설명 — 제목까지 품은 한 덩어리 박스 */
.s4-glossary {
  margin-top: 72px;
  padding: 30px 34px 12px;
  border-radius: 16px;
  background: #f7f8fa;
  scroll-margin-top: calc(var(--s4-header-h) + 28px);
}

/* 본문 h2 의 구분선·파란 점을 걷어내고 박스 제목으로 쓴다 */
.s4-post-content .s4-glossary-tit {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  padding: 0 0 16px;
  border-top: 0;
  border-bottom: 1px solid #e6e6e6;
  font-size: var(--s4-font-19);
  letter-spacing: -.04em;
}

.s4-post-content .s4-glossary-tit::before { display: none; }
.s4-glossary-tit svg { color: var(--s4-primary); }

.s4-terms {
  padding: 0;
  font-size: var(--s4-font-17);
  line-height: 1.75;
  color: var(--s4-ink-2);
}

/* 번호는 왼쪽 여백에 걸고, 표제어와 뜻풀이는 같은 선에서 시작한다 */
.s4-terms > div {
  position: relative;
  padding: 18px 0 18px 34px;
  scroll-margin-top: calc(var(--s4-header-h) + 28px);
}

.s4-terms > div + div { border-top: 1px solid #e9eaec; }

.s4-terms-no {
  position: absolute;
  top: 20px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--s4-pill);
  background: rgba(var(--s4-primary-rgb), .12);
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-primary);
}

.s4-terms dt {
  font-size: var(--s4-font-17);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.03em;
  color: var(--s4-ink);
}

.s4-terms dt i {
  margin-left: 7px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-regular);
  font-style: italic;
  letter-spacing: 0;
  color: var(--s4-muted);
}

.s4-terms dd {
  margin: 5px 0 0;
  word-break: keep-all;
}

/* 흐름 안으로 들어왔으므로 본문 복귀 링크를 살린다 */
.s4-terms .s4-fn-back {
  margin-left: 4px;
  color: var(--s4-dot-inactive);
}

.s4-terms .s4-fn-back:hover { color: var(--s4-primary); }

/* 안내 문구 */
/* ---------- 본문 콜아웃 ---------- */
/* 좌측 4px 바 + 강조색을 옅게 깐 배경. 종류는 색만 바꿔 쓴다. */
.s4-callout {
  --s4-callout: var(--s4-ink);
  --s4-callout-rgb: var(--s4-ink-rgb);

  display: flex;
  gap: 14px;
  padding: 22px 26px 24px;
  border-left: 4px solid var(--s4-callout);
  border-radius: 0 12px 12px 0;
  background: rgba(var(--s4-callout-rgb), .07);
  font-size: var(--s4-font-17);
  line-height: 1.85;
  color: var(--s4-ink-2);
  word-break: keep-all;
}

.s4-callout--tip {
  --s4-callout: var(--s4-tip);
  --s4-callout-rgb: var(--s4-tip-rgb);
}

.s4-callout--warn {
  --s4-callout: var(--s4-cover);
  --s4-callout-rgb: var(--s4-cover-rgb);
}

.s4-callout-mark {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--s4-callout);
}

.s4-callout-body { min-width: 0; }

.s4-callout-tit {
  margin-bottom: 12px;
  font-size: var(--s4-font-17);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.03em;
  color: var(--s4-ink);
}

.s4-callout-body > p + p { margin-top: 14px; }

.s4-callout-list {
  list-style: none;
  padding: 0;
}

.s4-callout-list li {
  position: relative;
  padding-left: 15px;
}

.s4-callout-list li + li { margin-top: 12px; }

.s4-callout-list li::before {
  content: '';
  position: absolute;
  top: .78em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--s4-pill);
  background: var(--s4-callout);
}

/* 본문 흐름에서의 위치 */
.s4-post-content > .s4-callout { margin-top: 36px; }
.s4-post-content > .s4-callout--warn { margin-top: 56px; }

@media (max-width: 767px) {
  .s4-callout { gap: 11px; padding: 18px 18px 20px; }
}


@media (max-width: 767px) {
  .s4-result dl { grid-template-columns: minmax(0, 1fr); }
  .s4-chat { padding: 22px 16px; gap: 16px; }
  .s4-chat-msg { max-width: 92%; }
  .s4-chat-bubble { padding: 14px 16px; font-size: var(--s4-font-15); }
  .s4-result { padding: 24px 22px; }
  .s4-steps { padding: 22px 20px; }
  .s4-steps::before { display: none; }
  .s4-steps > li { padding-left: 0; }
  .s4-steps > li::before { position: static; margin-bottom: 10px; }
  .s4-terms { padding: 20px 20px; }
}

/* ---------- 정책 안내 페이지 ---------- */
/* 창간호 배지가 없는 페이지는 고정 헤더 높이만큼 직접 비운다 */
.s4-sub-main { padding-top: var(--s4-header-h); }

.s4-policy {
  max-width: 860px;
  margin-top: 0;
  padding: 48px 0 96px;
}

.s4-policy > h2:first-of-type { margin-top: 44px; }

.s4-policy-list {
  padding-left: 2px;
  list-style: none;
}

.s4-policy-list li {
  position: relative;
  padding-left: 16px;
}

.s4-policy-list li + li { margin-top: 8px; }

.s4-policy-list li::before {
  content: '';
  position: absolute;
  top: .85em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--s4-pill);
  background: var(--s4-dot-inactive);
}

.s4-policy-table {
  width: 100%;
  border-top: 2px solid var(--s4-ink);
  border-collapse: collapse;
  font-size: var(--s4-font-15);
}

.s4-policy-table th,
.s4-policy-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--s4-line);
  text-align: left;
  line-height: 1.65;
  vertical-align: top;
}

.s4-policy-table th {
  background: var(--s4-surface);
  color: var(--s4-ink);
  font-weight: var(--s4-weight-bold);
  white-space: nowrap;
}

.s4-policy-box {
  padding: 26px 28px;
  border-radius: var(--s4-radius);
  background: var(--s4-surface);
  font-size: var(--s4-font-15);
  line-height: 1.8;
}

.s4-policy-box > * + * { margin-top: 12px; }

.s4-policy-date {
  padding-top: 20px;
  border-top: 1px solid var(--s4-line);
  font-size: var(--s4-font-15);
  color: var(--s4-muted);
}

.s4-policy-ref {
  padding: 18px 22px;
  border-radius: var(--s4-radius-sm);
  background: var(--s4-tint-pale);
  font-size: var(--s4-font-15);
}

.s4-policy-ref a { color: var(--s4-primary); font-weight: var(--s4-weight-bold); }
.s4-policy-ref a:hover { text-decoration: underline; }

.s4-policy a:not(.s4-policy-ref a) {
  color: var(--s4-ink);
  font-weight: var(--s4-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .s4-policy { padding: 32px 0 72px; }
  .s4-policy-table { font-size: var(--s4-font-14); }
  .s4-policy-table th,
  .s4-policy-table td { padding: 12px 10px; }
  .s4-policy-box { padding: 20px 18px; }
}

.s4-related-inner {
  /* 상세 본문의 좌측 열(우측 목차 240px + 간격 60px 제외)과 맞춘다. */
  width: calc(100% - 300px);
  max-width: 980px;
  margin-inline: 0;
}

.s4-related .s4-list-row { padding: 22px 4px; }
.s4-related .s4-list-thumb { width: 160px; }
.s4-related .s4-list-title { margin-top: 10px; }

@media (max-width: 1289px) {
  .s4-related-inner {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
  }
}

.s4-post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--s4-line);
}

.s4-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-pill);
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.03em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.s4-btn-line:hover {
  background: var(--s4-ink);
  border-color: var(--s4-ink);
  color: #fff;
}

/* ---------- 준비 중 안내 모달 ---------- */
.s4-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(var(--s4-ink-rgb), .45);
  opacity: 0;
  transition: opacity .2s ease;
}

.s4-modal.is-on { opacity: 1; }

.s4-modal-panel {
  width: min(380px, 100%);
  padding: 34px 30px 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(var(--s4-ink-rgb), .22);
  text-align: center;
  transform: translateY(10px) scale(.98);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.s4-modal.is-on .s4-modal-panel { transform: none; }

.s4-modal-title {
  font-size: var(--s4-font-20);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  color: var(--s4-ink);
}

.s4-modal-text {
  margin-top: 10px;
  font-size: var(--s4-font-15);
  line-height: 1.6;
  letter-spacing: -.02em;
  color: var(--s4-muted);
  word-break: keep-all;
}

.s4-modal-ok {
  width: 100%;
  margin-top: 24px;
  padding: 14px 0;
  border-radius: var(--s4-radius-btn);
  background: var(--s4-ink);
  color: #fff;
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.03em;
  transition: background-color .2s ease;
}

.s4-modal-ok:hover { background: var(--s4-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .s4-modal,
  .s4-modal-panel { transition: none; }
}

/* ---------- 이전 글 · 다음 글 ---------- */
/* 본문 끝(유의사항) 바로 아래 */
.s4-adjacent { margin-top: 44px; }

.s4-adjacent,
.s4-adjacent-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.s4-adjacent-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 24px 22px;
  border-radius: 16px;
  background: var(--s4-surface);
  transition: background-color .2s ease;
}

.s4-adjacent-item:hover { background: var(--s4-chip-hover); }

/* 다음 글은 오른쪽 끝에서 읽히도록 뒤집는다 */
.s4-adjacent-item--next { flex-direction: row-reverse; text-align: right; }

.s4-adjacent-text { min-width: 0; }

.s4-adjacent-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--s4-font-14);
  letter-spacing: -.02em;
  color: var(--s4-muted);
}

.s4-adjacent-item--next .s4-adjacent-label { justify-content: flex-end; }

.s4-adjacent-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: var(--s4-font-16);
  font-weight: var(--s4-weight-bold);
  letter-spacing: -.035em;
  line-height: 1.45;
  color: var(--s4-ink);
  word-break: keep-all;
}

.s4-adjacent-item:hover .s4-adjacent-title { color: var(--s4-primary); }

@media (max-width: 767px) {
  .s4-adjacent { margin-top: 32px; }
  .s4-adjacent { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .s4-adjacent-item { padding: 14px 16px; }
  .s4-adjacent-title { font-size: var(--s4-font-15); margin-top: 6px; }
}

/* ---------- 푸터 ---------- */
.s4-footer {
  margin-top: 0;
  padding: 64px 0 28px;
  background: #fff;
  color: var(--s4-ink);
  font-size: var(--s4-font-14);
}

.s4-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(180px, .75fr) minmax(220px, .85fr);
  gap: clamp(38px, 6vw, 92px);
  padding-bottom: 52px;
}

@media (max-width: 1023px) {
  .s4-footer-top { grid-template-columns: 1fr 1fr; }
  .s4-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .s4-footer-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* 브랜드 */
.s4-footer-logo img {
  height: 22px;
  width: auto;
}

.s4-footer-col-title {
  margin-bottom: 22px;
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.03em;
}

.s4-footer-tagline {
  margin-top: 22px;
  font-size: var(--s4-font-15);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--s4-ink-2);
}

.s4-footer-tagline b {
  display: block;
  color: var(--s4-ink);
  font-weight: var(--s4-weight-extrabold);
}

.s4-footer-addr {
  margin-top: 18px;
  font-size: var(--s4-font-13);
  font-style: normal;
  line-height: 1.6;
  color: var(--s4-muted);
  letter-spacing: -.02em;
}

.s4-footer-sns {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

.s4-footer-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  color: var(--s4-ink);
  transition: color .2s ease, transform .2s ease;
}

.s4-footer-sns a:hover {
  transform: translateY(-2px);
}

.s4-footer-sns li:nth-child(1) a:hover { color: var(--s4-youtube); }
.s4-footer-sns li:nth-child(2) a:hover { color: var(--s4-facebook); }
.s4-footer-sns li:nth-child(3) a:hover { color: var(--s4-instagram); }
.s4-footer-sns li:nth-child(4) a:hover { color: var(--s4-naver); }

.s4-footer-sns svg { width: 24px; height: 24px; }

/* 점 리스트 (사이트맵 · 연락처 공용) */
.s4-dotlist {
  display: grid;
  gap: 14px;
}

.s4-dotlist li {
  position: relative;
  padding-left: 16px;
  font-size: var(--s4-font-14);
  color: var(--s4-ink-2);
  letter-spacing: -.02em;
}

.s4-dotlist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: 3px;
  height: 3px;
  border-radius: var(--s4-pill);
  background: var(--s4-muted);
}

.s4-dotlist a { transition: color .2s ease; }
.s4-dotlist a:hover { color: var(--s4-primary); }

/* 연락처 · 패밀리 사이트 */
.s4-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.s4-footer-contact .s4-dotlist .is-strong {
  color: var(--s4-primary);
  font-weight: var(--s4-weight-extrabold);
}

.s4-family {
  width: min(260px, 100%);
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius-sm);
  background: var(--s4-bg);
}

.s4-family summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  font-size: var(--s4-font-14);
  font-weight: var(--s4-weight-semibold);
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}

.s4-family summary::-webkit-details-marker { display: none; }

.s4-family summary svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--s4-muted);
  transition: transform .25s ease;
}

.s4-family[open] summary svg { transform: rotate(180deg); }

.s4-family-panel {
  display: grid;
  padding: 6px;
  border-top: 1px solid var(--s4-line);
}

.s4-family-panel a {
  padding: 10px 12px;
  border-radius: var(--s4-radius-sm);
  font-size: var(--s4-font-13);
  color: var(--s4-ink-2);
  letter-spacing: -.02em;
  transition: background-color .2s ease, color .2s ease;
}

.s4-family-panel a:hover {
  background: var(--s4-tint);
  color: var(--s4-primary);
}

/* 하단 */
.s4-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 24px;
  border-top: 1px solid var(--s4-line);
}

.s4-footer-bottom .s4-family {
  position: relative;
  flex: 0 0 min(260px, 100%);
}

.s4-footer-bottom .s4-family-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 3;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius-sm);
  background: #fff;
  box-shadow: 0 14px 32px rgba(var(--s4-ink-rgb), .09);
}

.s4-footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--s4-font-13);
}

.s4-footer-legal a {
  color: var(--s4-muted);
  letter-spacing: -.02em;
  transition: color .2s ease;
}

.s4-footer-legal a:hover { color: var(--s4-primary); }
.s4-footer-legal a.is-strong { color: var(--s4-ink); font-weight: var(--s4-weight-bold); }
.s4-footer-legal i { color: var(--s4-line); font-style: normal; }

.s4-footer-copy {
  font-size: var(--s4-font-13);
  color: var(--s4-muted);
  letter-spacing: -.01em;
}

/* ---------- 전체 메뉴 ---------- */
.s4-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(var(--s4-ink-rgb), .45);
  opacity: 0;
  transition: opacity .25s ease;
}

.s4-drawer.is-open { opacity: 1; }

.s4-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 88vw);
  padding: 24px 28px;
  background: var(--s4-bg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
}

.s4-drawer.is-open .s4-drawer-panel { transform: none; }

.s4-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.s4-drawer-head h2 {
  position: relative;
  padding-top: 15px;
  font-size: var(--s4-font-24);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  color: var(--s4-ink);
}

/* 닫기 버튼은 48px 원형 히트영역이라 아이콘이 안쪽으로 13px 들어와 있다.
   아래 caret(20px, 패널 padding 끝에 맞음)과 우측 열을 맞추기 위해 그만큼 당긴다. */
.s4-drawer-head .s4-close { margin-right: -13px; }

.s4-drawer-head h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: var(--s4-pill);
  background: var(--s4-primary);
}

/* 대분류 + 하위 메뉴 (드롭다운) */
.s4-drawer-group { padding: 4px 0; }
.s4-drawer-group + .s4-drawer-group { border-top: 1px solid var(--s4-line); }

.s4-drawer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 18px 0;
  font-size: var(--s4-font-19);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: -.04em;
  text-align: left;
  color: var(--s4-ink);
  transition: color .2s ease;
}

.s4-drawer-title:hover { color: var(--s4-primary); }

.s4-drawer-note {
  margin-left: 6px;
  font-size: var(--s4-font-12);
  font-weight: var(--s4-weight-bold);
  color: var(--s4-muted);
  letter-spacing: -.02em;
}

.s4-drawer-caret {
  flex-shrink: 0;
  color: var(--s4-muted);
  transition: transform .3s ease, color .2s ease;
}

.s4-drawer-title[aria-expanded="true"] .s4-drawer-caret {
  transform: rotate(180deg);
  color: var(--s4-primary);
}

/* 0fr → 1fr 로 높이를 자연스럽게 펼친다 */
.s4-drawer-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.s4-drawer-title[aria-expanded="true"] + .s4-drawer-fold { grid-template-rows: 1fr; }

.s4-drawer-fold > * {
  overflow: hidden;
  min-height: 0;
}

.s4-drawer-sub { padding-bottom: 14px; }

.s4-drawer-sub a {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--s4-line);
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-medium);
  letter-spacing: -.03em;
  color: var(--s4-muted);
  transition: color .2s ease, border-color .2s ease, padding-left .2s ease;
}

.s4-drawer-sub a:hover {
  padding-left: 20px;
  border-color: var(--s4-primary);
  color: var(--s4-primary);
}

@media (prefers-reduced-motion: reduce) {
  .s4-drawer-fold,
  .s4-drawer-caret { transition: none; }
}

/* ---------- 스크롤 등장 ---------- */
.s4-js .s4-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .55s ease;
}

.s4-js .s4-up.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .s4-js .s4-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- 플로팅 : 글자 크기 + 맨 위로 (시안 3 .s3-float 과 동일 구성) ---------- */
.s4-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1023px) {
  .s4-float { right: 16px; bottom: 16px; }
}

.s4-fs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius-sm);
  background: var(--s4-bg);
  box-shadow: 0 14px 40px rgba(var(--s4-ink-rgb), .14);
}

.s4-fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius-sm);
  background: var(--s4-bg);
  font-size: var(--s4-font-15);
  font-weight: var(--s4-weight-extrabold);
  color: var(--s4-ink-2);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.s4-fs-btn:hover:not(:disabled) {
  background: var(--s4-primary);
  border-color: var(--s4-primary);
  color: #fff;
}

.s4-fs-btn:disabled { opacity: .35; cursor: default; }

.s4-fs-value {
  min-width: 48px;
  padding: 2px 0;
  font-family: system-ui, sans-serif;
  font-size: var(--s4-font-13);
  font-weight: var(--s4-weight-bold);
  line-height: 1.2;
  text-align: center;
  color: var(--s4-muted);
}

/* 맨 위로 - 글자 크기 버튼과 함께 항상 노출 */
.s4-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 70px;
  height: 62px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius-sm);
  background: var(--s4-bg);
  color: var(--s4-ink-2);
  box-shadow: 0 14px 40px rgba(var(--s4-ink-rgb), .14);
  opacity: 1;
  visibility: visible;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.s4-top:hover {
  background: var(--s4-primary);
  border-color: var(--s4-primary);
  color: #fff;
}

.s4-top span {
  font-family: system-ui, sans-serif;
  font-size: var(--s4-font-11);
  font-weight: var(--s4-weight-extrabold);
  letter-spacing: .06em;
}

/* ---------- 모바일 섹션 머리 ---------- */
@media (max-width: 767px) {
  /* 제목 아래 설명글은 감춘다 — 좁은 화면에서 스크롤만 늘린다 */
  .s4-sec-desc { display: none; }

  /* ── 모바일 본문 기준: p = 15px, 나머지는 여기에 맞춘다 ── */
  .s4-post-content,
  .s4-policy,
  .s4-callout,
  .s4-page-desc,
  .s4-timeline,
  .s4-note,
  .s4-terms,
  .s4-result > p { font-size: var(--s4-font-15); }

  /* 페이지 머리 — 여백과 글자를 함께 줄인다 */
  .s4-page-head { padding: 28px 0 22px; }
  .s4-crumb { gap: 6px; font-size: var(--s4-font-13); }
  .s4-page-title { margin-top: 8px; font-size: var(--s4-font-24); letter-spacing: -.04em; }
  .s4-page-desc { margin-top: 7px; line-height: 1.55; }

  .s4-post-content h2 { font-size: var(--s4-font-21); padding-top: 34px; margin-top: 52px; }
  .s4-post-content h2::before { top: 20px; }
  .s4-post-content h3 { font-size: var(--s4-font-18); margin-top: 34px; }

  .s4-callout-tit,
  .s4-terms dt,
  .s4-steps h4 { font-size: var(--s4-font-16); }

  .s4-chat-who { font-size: var(--s4-font-15); }
  .s4-list-desc { font-size: var(--s4-font-14); }
  /* 사건 개요 — 2×2 로 압축 */
  .s4-fact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .s4-fact > div {
    gap: 8px;
    padding: 14px 14px 16px;
    border-radius: 12px;
  }

  .s4-fact-icon { width: 30px; height: 30px; border-radius: 9px; }
  .s4-fact-icon svg { width: 16px; height: 16px; }
  .s4-fact dt { font-size: var(--s4-font-13); }

  .s4-fact dd {
    margin-top: -4px;
    font-size: var(--s4-font-15);
    letter-spacing: -.04em;
    line-height: 1.4;
    word-break: break-all;
  }
  .s4-result dd { font-size: var(--s4-font-20); }

  /* 함께 보면 좋은 사례 — 위아래 여백 축소 */
  .s4-related { padding: calc(var(--s4-section-pad) / 4) 0; }

  /* 본문 아래쪽 여백도 함께 줄여 붙는 느낌을 막는다 */
  .s4-doc { padding-bottom: 32px; }

  /* 용어 설명 섹션은 감춘다 — 각주를 누르면 바텀시트로 보여 주므로 중복이다.
     (숨겨도 시트가 innerHTML 을 읽으므로 내용은 그대로 쓰인다) */
  .s4-glossary { display: none; }
  .s4-sheet-more { display: none; }

  .s4-term { padding: 3px 5px; }

  /* 상세 제목은 목록 제목 수준으로 (기본 28px 는 모바일에서 과하다) */
  .s4-post-title {
    font-size: var(--s4-font-list-title);
    letter-spacing: -.04em;
    line-height: 1.35;
  }

  /* 목차는 모바일에서 숨긴다 */
  .s4-toc { display: none; }

  /* 조정 사례는 모바일에서도 본문 위 목차와 모든 이동 대상을 제공한다. */
  .s4-post--case .s4-doc-side { order: 1; margin-top: 24px; }
  .s4-post--case .s4-doc-body { order: 2; }
  .s4-post--case .s4-toc { display: block; margin-bottom: 0; }
  .s4-post--case .s4-glossary { display: block; }
  #s4-news .s4-card--desktop-only { display: none; }

  /* 주요 통계도 다른 섹션처럼 — 썸네일 안에 내용을 얹는다 */
  #s4-stats .s4-list { border-top: 0; }

  #s4-stats .s4-list-row {
    position: relative;
    /* body 를 absolute 로 두면 조회수 배지의 기준점을 가로챈다.
       flex 로 아래에 붙이고 기준점은 행이 갖는다. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 기본 규칙의 align-items:center 가 본문을 가로 가운데로 좁힌다 */
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: var(--s4-radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
  }

  #s4-stats .s4-list-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    border-radius: 0;
    aspect-ratio: auto;
  }

  #s4-stats .s4-list-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--s4-ink-rgb), .1) 30%, rgba(var(--s4-ink-rgb), .88) 100%);
  }

  /* 분류 칩은 다른 카드와 같이 좌상단으로 */
  #s4-stats .s4-chip {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 5px 12px 6px;
    background: rgba(255, 255, 255, .86);
    color: var(--s4-ink);
  }

  #s4-stats .s4-list-body {
    position: static;
    /* 기본 .s4-list-body 의 flex:1 이 내용을 위로 밀어 올린다 */
    flex: 0 0 auto;
    margin-top: auto;
    z-index: 2;
    padding: 24px 22px;
    color: #fff;
  }

  #s4-stats .s4-list-title {
    margin-top: 0;
    font-size: var(--s4-font-card-title);
    color: #fff;
  }

  #s4-stats .s4-list-desc { display: none; }

  #s4-stats .s4-list-meta { color: rgba(255, 255, 255, .72); }

  /* 조회수는 다른 카드처럼 썸네일 우상단 배지로 */
  #s4-stats .s4-list-views {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    gap: 5px;
    padding: 5px 12px 6px;
    border-radius: var(--s4-pill);
    background: rgba(var(--s4-ink-rgb), .48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: var(--s4-font-13);
    color: #fff;
  }

  #s4-stats .s4-list-views::before { content: none; }
  #s4-stats .s4-list-views,
  #s4-stats .s4-list-views b { font-weight: var(--s4-weight-regular); }
  #s4-stats .s4-list-go { display: none; }



  /* 주요 제도 — 카드 대신 한 줄짜리 목록으로 */
  .s4-system {
    gap: 0;
    border-top: 1px solid var(--s4-line);
  }

  /* 아이콘 | (번호 / 제목) | 화살표 — 화살표는 제목 줄에 맞춘다 */
  .s4-system-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 14px 4px;
    border: 0;
    border-bottom: 1px solid var(--s4-line);
    border-radius: 0;
    background: none;
  }

  .s4-system-card:hover { transform: none; box-shadow: none; }

  /* 래퍼를 걷어내 아이콘과 번호를 각자 칸에 앉힌다 */
  .s4-system-top { display: contents; }

  .s4-system-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .s4-system-icon svg { width: 20px; height: 20px; }

  .s4-system-no {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 2px;
    font-size: var(--s4-font-12);
    letter-spacing: .06em;
    opacity: 1;
    color: var(--s4-primary);
  }

  .s4-system-title {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: var(--s4-font-16);
    line-height: 1.45;
  }

  .s4-system-desc { display: none; }

  /* 화살표만 남겨 제목과 같은 줄에 */
  .s4-system-go {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    margin: 0;
    /* 기본 규칙의 padding-top:24px 가 화살표를 아래로 밀어낸다 */
    padding: 0;
    gap: 0;
    font-size: 0;
    color: var(--s4-dot-inactive);
  }

  .s4-system-go svg { width: 18px; height: 18px; }

  /* 전체보기 버튼을 줄여 제목이 쓸 가로폭을 넓힌다.
     bottom 정렬이면 알약 버튼의 아래 패딩 때문에 글자가 떠 보여서 baseline 으로 맞춘다. */
  .s4-sec-head {
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }

  /* 제목은 한 줄을 유지하고, 폭이 부족하면 버튼만 다음 줄로 보낸다. */
  .s4-sec-head > .s4-sec-title {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .s4-more {
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 8px 14px;
    background: var(--s4-chip);
    font-size: var(--s4-font-13);
  }

  .s4-section--tint .s4-more { background: var(--s4-bg); }

  .s4-more::after { width: 6px; height: 6px; margin-left: 8px; }
}

/* ---------- 모바일 터치 영역 보정 ---------- */
@media (max-width: 767px) {
  /* 손가락으로 누르기 어려운 링크·버튼에 세로 여백을 준다 */
  .s4-footer-addr a,
  .s4-footer-legal a,
  .s4-footer-contact .s4-dotlist a {
    display: inline-block;
    padding: 7px 0;
  }

  /* 푸터 상·하 여백 축소 */
  .s4-footer { padding-top: 40px; padding-bottom: 20px; }
  .s4-footer-top { padding-bottom: 20px; }

  .s4-footer-sns {
    margin-top: 10px;
    margin-bottom: -4px;
    gap: 2px;
  }

  .s4-footer-sns a {
    width: 36px;
    height: 36px;
  }

  /* 패밀리 사이트 ↔ 구분선 ↔ 카피라이트 간격을 같게 */
  .s4-footer-contact .s4-family { margin-top: 14px; }
  .s4-footer-bottom { margin-top: 16px; padding-top: 16px; }

  .s4-footer-logo { display: inline-block; padding: 6px 0; }

  /* 소개 슬라이더 점 — 눌리는 범위를 넓힌다 */
  .s4-about-dots button {
    position: relative;
    padding: 0;
  }

  .s4-about-dots button::after {
    content: '';
    position: absolute;
    inset: -12px -2px;
  }

  /* 발행호·날짜·조회수가 한 줄에 안 들어가면 접히게 */
  .s4-list-meta { flex-wrap: wrap; row-gap: 2px; }

  /* 표는 가로 스크롤로 두되, 최소폭을 낮춰 스크롤 양을 줄인다 */
  /* 타임라인 — 좁은 화면에서 들여쓰기·여백 축소 */
  .s4-timeline > li { padding: 0 0 18px 26px; }
  .s4-timeline > li::after { width: 14px; height: 14px; border-width: 3px; }
  .s4-timeline > li::before { left: 6px; }
  .s4-timeline-date { margin-bottom: 8px; padding: 4px 11px 5px; font-size: var(--s4-font-14); }
  .s4-timeline-body { padding: 14px 16px; border-radius: 10px; }
}

/* ---------- 모바일 푸터 ---------- */
@media (max-width: 767px) {
  /* 전체 메뉴는 드로어로 볼 수 있으므로 푸터에서 숨긴다 */
  .s4-footer-menu { display: none; }

  /* 정책 안내 — 제목 없이 한 줄로 */
  .s4-footer-contact .s4-footer-col-title { display: none; }

  .s4-footer-contact .s4-dotlist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  .s4-footer-contact .s4-dotlist li { padding-left: 0; }
  .s4-footer-contact .s4-dotlist li::before { display: none; }
  .s4-footer-contact .s4-dotlist a { font-size: var(--s4-font-12); }

  /* 카피라이트 + 글자크기 + TOP 을 한 줄에 */
  .s4-footer-bottom {
    align-items: center;
    gap: 10px 12px;
  }

  /* 패밀리 사이트 — 정책 안내 아래, 구분선 위. 폭은 내용에 맞게 */
  .s4-footer-contact .s4-family {
    max-width: 260px;
    margin-top: 20px;
  }

  .s4-footer-contact .s4-family summary {
    padding: 10px 14px;
    font-size: var(--s4-font-13);
  }

  .s4-footer-contact .s4-family-panel a {
    padding: 9px 14px;
    font-size: var(--s4-font-13);
  }

  /* 아랫줄 — 카피라이트는 왼쪽, 컨트롤은 오른쪽 끝에 고정 */
  .s4-footer-copy {
    flex: 1 1 auto;
    order: 1;
    font-size: var(--s4-font-11);
    letter-spacing: -.02em;
  }

  .s4-footer-bottom .s4-float {
    order: 2;
    margin-left: auto;
  }

  .s4-footer-bottom .s4-float {
    position: static;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  /* 글자 크기 — 가로형으로 납작하게 */
  .s4-footer-bottom .s4-fs {
    flex-direction: row;
    gap: 2px;
    padding: 3px 4px;
    border-radius: var(--s4-pill);
    box-shadow: none;
  }

  .s4-footer-bottom .s4-fs-btn {
    width: 32px;
    height: 32px;
    border: 0;
    font-size: var(--s4-font-13);
  }

  .s4-footer-bottom .s4-fs-value {
    min-width: 34px;
    font-size: var(--s4-font-11);
  }

  /* TOP — 아이콘만 남긴 작은 원형 */
  .s4-footer-bottom .s4-top {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--s4-pill);
    box-shadow: none;
  }

  .s4-footer-bottom .s4-top svg { width: 16px; height: 16px; }
  .s4-footer-bottom .s4-top span { display: none; }
}

/* ---------- 인쇄 ---------- */
@media print {
  .s4-doc { display: block !important; }
  .s4-doc-side, .s4-adjacent { display: none !important; }
  .s4-post-content img { max-width: 100% !important; height: auto !important; }
  .s4-post-content { color: #111; }
  .s4-header,
  .s4-issue-badge,
  .s4-drawer,
  .s4-float,
  .s4-toc,
  .s4-actions,
  .s4-footer,
  .s4-post-foot,
  .s4-crumb,
  .s4-post .s4-section { display: none !important; }

  .s4-sub-main,
  .s4-home-main { padding-top: 0; }

  .s4 { --s4-max: 100%; --s4-gutter: 0; }

  .s4-doc { margin-top: 0; padding-bottom: 0; }
  .s4-doc-head,
  .s4-doc-body { max-width: 100%; }

  /* 용어 설명은 본문 흐름 안에 있으므로 그대로 인쇄된다 */
  .s4-terms { font-size: 9pt; }
  .s4-terms > div { break-inside: avoid; }
  .s4-term { background: none; border-bottom: 0; }
  .s4-sheet, .s4-scrim { display: none !important; }

  .s4-post-hero img { aspect-ratio: auto; }

  .s4-timeline { font-size: 9.5pt; }
  .s4-timeline > li,
  .s4-chat-msg,
  .s4-steps > li,
  .s4-result { break-inside: avoid; }

  .s4-post-content h2,
  .s4-post-content h3 { break-after: avoid; }

  a[href]::after { content: ''; }
}

/* ---------- 관리자 전용 : 기사 관리 메뉴 · 관리자 바로가기 (pet119 와 같은 모양) ---------- */
.s4-admin-bar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 32px;
  padding: 13px 16px;
  border: 1px solid #EAEDF3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(27, 34, 48, .14);
  font-family: inherit;
}

.s4-admin-bar-text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s4-admin-bar-text b { color: #1B2230; font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.s4-admin-bar-text span { overflow: hidden; min-width: 0; color: #8A90A0; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.s4-admin-bar-actions { display: flex; flex: none; align-items: center; gap: 8px; }

.s4-admin-bar-edit,
.s4-admin-bar-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  letter-spacing: -.01em;
  cursor: pointer;
}

.s4-post-content a.s4-admin-bar-edit,
.s4-admin-bar-edit { border: 1px solid #E4E7F0; background: #fff; color: #414A5C; font-weight: 700; text-decoration: none; }
.s4-admin-bar-edit:hover { background: #F5F6FA; }
.s4-admin-bar-del { border: 1px solid #E5484D; background: #E5484D; box-shadow: 0 6px 14px rgba(229, 72, 77, .24); color: #fff; font-weight: 800; font-family: inherit; }
.s4-admin-bar-del:hover { background: #D93D42; }

.s4-admin-link { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #1B2230; text-decoration: none; }
.s4-admin-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid #E2E6F0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 30px rgba(27, 34, 48, .18);
  color: #4B5AC9;
  transition: box-shadow .18s ease;
}
.s4-admin-link:hover .s4-admin-link-icon { box-shadow: 0 16px 34px rgba(27, 34, 48, .24); }
.s4-admin-link-label { padding: 3px 8px; border: 1px solid #E9ECF3; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(27, 34, 48, .08); color: #414A5C; font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; }

@media (max-width: 767px) {
  .s4-admin-bar { bottom: 12px; gap: 10px; padding: 10px 12px; border-radius: 14px; }
  .s4-admin-bar-text span { display: none; }
  .s4-admin-bar-edit, .s4-admin-bar-del { padding: 8px 14px; font-size: 13px; }
  .s4-admin-link-icon { width: 44px; height: 44px; }
  .s4-admin-link-label { display: none; }
}

@media print {
  .s4-admin-bar,
  .s4-admin-link { display: none !important; }
}