/* ==========================================================================
   표지형 포스팅 레이아웃                                    [layout-cover]
   --------------------------------------------------------------------------
   `autopost_layout` 메타가 `layout-cover` 인 글에서만 불린다.
   글에는 마크업만 두고 모양은 전부 여기서 맡는다 — 고칠 일이 생기면
   이 파일 하나만 고치면 모든 표지 글이 따라온다.
   ========================================================================== */

/* ==========================================================================
   잡지 표지형 히어로                                               [mkcv]
   --------------------------------------------------------------------------
   인물이 배경에서 오려진 그림이라 잡지 표지의 핵심 수법을 쓸 수 있다 —
   **제호를 인물 뒤로 보내는 것**. 머리가 글자를 가리면 두 겹이 한 장면이
   된다. 배경 붙은 사진으로는 안 되는 배치다.

   쌓는 순서: 배경 → 제호 → 인물 → 표지 문구.

   색은 참고 표지(보라·라벤더)를 따르지 않았다. 이 사이트는 크림과 금색이라
   그대로 옮기면 표지만 따로 논다.

   그림은 **.webp 를 직접 건다.** 업로드가 만든 .avif 는 투명도가 날아가
   (yuva420p -> yuv420p) 배경이 시커멓게 채워진다.
   ========================================================================== */

.mkcv {
  --cv-deep: #2b241d;
  --cv-ink: #3b3128;
  --cv-gold: #a8822f;
  --cv-cream: #fdf9f2;

  display: grid;
  place-items: center;
  /* 표지 둘레에 배경을 깔지 않는다. 표지는 461px 인데 이 칸은 1185px 이라
     양옆으로 362px 씩 크림색 띠가 생겼다. 표지 한 장만 놓이게 둔다. */
  padding: 0 16px clamp(14px, 2.8vw, 34px);
}

/* 표지를 헤더 바로 아래에 붙인다.
   테마가 본문 위에 41px 을 준다. `.inside-article` 만으로는 안 먹는다 —
   테마 규칙이 `.separate-containers .inside-article` 로 클래스가 하나 더
   많아 더 구체적이다. 같은 모양으로 맞춰야 이긴다.
   위쪽만 없앤다 — 좌우와 아래는 테마 값을 그대로 둔다. */
.layout-cover.separate-containers .inside-article { padding-top: 0; }

/* 표지 한 장.
   화면 높이 제한은 max-height 가 아니라 **폭** 에 건다. max-height 로
   자르면 폭은 그대로라 3:4 가 1.1 로 납작해진다(실제로 그랬다).
   3:4 이므로 폭 제한은 높이 제한의 0.75 배다. */
.mkcv__card {
  position: relative;
  width: min(680px, 100%, 64vh);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate;

  /* 글자를 화면이 아니라 이 표지 기준으로 잰다. cqw = 이 상자 폭의 1%.
     vw 로 두면 표지가 좁아져도 글자만 커져 머리기사가 늘어진다. */
  container-type: inline-size;

  /* 모서리를 둥글리지 않는다. 종이 잡지는 각이 서 있다. */
  background:
    radial-gradient(70% 45% at 62% 26%, rgba(255, 252, 246, .95) 0%, rgba(255, 252, 246, 0) 62%),
    linear-gradient(168deg, #f3ead9 0%, #e6d3b8 52%, #cdb08a 100%);
}

/* ── 제호: 인물 뒤 ─────────────────────────────────────────────────── */
.mkcv__masthead {
  position: absolute;
  z-index: 1;
  top: clamp(10px, 3.4cqw, 30px);
  left: 0;
  right: 0;
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(38px, 15.5cqw, 108px);
  line-height: .92;
  letter-spacing: -.022em;
  text-align: center;
  color: var(--cv-deep);
}

/* ── 인물 ─────────────────────────────────────────────────────────── */
.mkcv__cut {
  position: absolute;
  z-index: 2;
  bottom: 0;
  /* 가운데에 두었더니 머리기사가 인물 위에 얹혀 읽기 힘들었다.
     오른쪽으로 밀어 왼쪽 3분의 1을 글자 자리로 비운다. */
  left: 63%;
  transform: translateX(-50%);
  height: 92%;
  width: auto;
  max-width: none;
  display: block;
  /* 그림자 없음. 인쇄된 한 장처럼 납작하게 둔다.
     흰 니트가 배경에 묻히면 배경 아래쪽을 조금 더 진하게 하는 쪽이 낫다 —
     그림자를 다시 넣는 것보다 표지답다. */
}

/* ── 표지 문구: 인물 앞 ────────────────────────────────────────────── */
.mkcv__ink {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(12px, 3.6cqw, 30px) clamp(12px, 4cqw, 34px);
  color: var(--cv-ink);
  pointer-events: none;
}

.mkcv__ink a { pointer-events: auto; }

.mkcv__issue {
  justify-self: start;
  align-self: start;
  margin: clamp(46px, 17cqw, 118px) 0 0;
  padding: 5px 13px;
  font-size: clamp(8.5px, 1.75cqw, 11px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cv-deep);
  border: 1px solid rgba(43, 36, 29, .45);
  border-radius: 999px;
  background: rgba(253, 249, 242, .55);
  backdrop-filter: blur(2px);
}

.mkcv__mid {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(8px, 2.6cqw, 22px);
  padding-bottom: clamp(6px, 2cqw, 16px);
}

.mkcv__kicker {
  margin: 0 0 clamp(5px, 1.4cqw, 11px);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 3.4cqw, 24px);
  line-height: 1.15;
  color: var(--cv-gold);
}

.mkcv__lead {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(20px, 6.8cqw, 48px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--cv-deep);
  /* 한글이 섞이면 낱말 중간에서 잘린다 */
  word-break: keep-all;
}

.mkcv__dek {
  margin: clamp(7px, 2cqw, 14px) 0 0;
  max-width: 24ch;
  font-size: clamp(9.5px, 2.1cqw, 14px);
  line-height: 1.5;
  color: rgba(59, 49, 40, .82);
  word-break: keep-all;
}

.mkcv__side {
  margin: 0;
  text-align: right;
  font-size: clamp(11px, 3.1cqw, 23px);
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--cv-deep);
}

.mkcv__side span { color: var(--cv-gold); }

.mkcv__foot {
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.mkcv__sign {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 4cqw, 28px);
  color: var(--cv-deep);
}

/* 이 사진이 환자가 아니라는 것을 표지 위에 적어 둔다. 치료 이야기 옆에
   놓인 인물은 가만히 두면 환자나 결과로 읽힌다. */
.mkcv__note {
  margin: 0;
  font-size: clamp(7.5px, 1.5cqw, 10.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(59, 49, 40, .58);
  text-align: right;
}

/* 좁은 화면에서는 표지를 화면 끝까지 넓힌다.

   표지는 본문 칸 안에 있고, 그 칸은 테마가 좌우에 여백을 주고 가운데로
   모아 둔다. 그 밖으로 나가려면 여백을 음수로 되받아야 한다 —
   `calc(50% - 50vw)` 는 '이 칸 절반'에서 '화면 절반'을 뺀 값이라
   양쪽 모두 정확히 화면 가장자리에 닿는다. 칸 폭을 몰라도 된다.

   100vw 는 세로 스크롤바 폭까지 포함해서 데스크톱에서는 가로 스크롤을
   만든다. 그래서 좁은 화면에만 건다 — 휴대폰 스크롤바는 화면을 차지하지
   않는다. */
@media (max-width: 768px) {
  .mkcv {
    margin-inline: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }

  /* 높이로 폭을 제한하던 것을 푼다. 여기서는 화면 폭이 기준이다. */
  .mkcv__card { width: 100%; }
}

/* 더 좁아지면 오른쪽 문구를 위로 올린다. 옆에 두면 둘 다 좁아져 두 글자씩
   끊어진다. 표지도 조금 더 길쭉하게. */
@media (max-width: 520px) {
  .mkcv__mid { grid-template-columns: 1fr; align-items: start; }
  .mkcv__side { text-align: left; order: -1; }
  .mkcv__card { aspect-ratio: 2 / 3; }
  /* 문구가 위로 올라가므로 인물을 가운데로 되돌린다.

     높이는 건드리지 않는다. 전에 84% 로 줄여 두었더니, 여기서 표지가
     3:4 에서 2:3 으로 길어지는 것과 겹쳐 머리가 24px 내려앉았다.
     인물이 바닥에 붙어 있어서 작아진 만큼 머리가 내려가기 때문이다.
     그러면 제호가 머리 뒤로 넘어가지 못하고 위에 홀로 떠 버린다 --
     그 한 수가 표지를 표지로 만드는 것인데 그게 사라진다.

     기본값 92% 를 그대로 쓰면 21px 이 겹친다(PC 는 40px). */
  .mkcv__cut { left: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  .mkcv * { transition: none !important; }
}

/* ==========================================================================
   잡지 본문                                                        [mkmg]
   --------------------------------------------------------------------------
   표지와 같은 결로 간다 — 크림·금색, 각진 모서리, 그림자 없음.

   폭은 1000px 로 잡되 글줄은 그보다 좁게 둔다. 1000px 을 글자로 가득 채우면
   한 줄이 너무 길어 눈이 다음 줄을 못 찾는다. 잡지도 판형은 넓게 쓰고 글은
   단으로 좁혀 앉힌다. 인용문만 단을 넘어 넓게 나간다.
   ========================================================================== */

.mkmg {
  --mg-deep: #2b241d;
  --mg-ink: #3b3128;
  --mg-soft: #6b5c4e;
  --mg-gold: #a8822f;
  --mg-line: #e4d9c6;

  /* 표지와 본문 사이 숨 */
  margin-top: clamp(40px, 7vw, 92px);
  margin-inline: auto;
  max-width: 1000px;
  padding-inline: 16px;
  color: var(--mg-ink);
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.72;
}

/* ── 머리 ─────────────────────────────────────────────────────────── */
.mkmg__eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mg-gold);
}

.mkmg__h {
  margin: 0;
  max-width: 17ch;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--mg-deep);
  text-wrap: balance;
  word-break: keep-all;
}

.mkmg__stand {
  margin: 18px 0 0;
  max-width: 54ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--mg-soft);
  word-break: keep-all;
}

.mkmg__by {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--mg-line);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mg-soft);
}

.mkmg__by b { color: var(--mg-deep); font-weight: 700; }

/* ── 본문 ─────────────────────────────────────────────────────────── */
.mkmg__body {
  margin-top: clamp(26px, 3.4vw, 44px);
  max-width: 68ch;
}

.mkmg__body p { margin: 0 0 1.15em; word-break: keep-all; }

/* 첫 글자를 키운다. 잡지에서 글이 시작하는 자리를 알려 주는 표시다. */
.mkmg__body--lead > p:first-of-type::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 3.5em;
  line-height: .82;
  color: var(--mg-gold);
}

/* 형광펜 강조.

   선을 긋는 게 아니라 글자 아래 절반을 반투명한 띠로 덮는다.
   text-decoration 으로는 이 두께가 안 나온다 — 그쪽은 선이지 면이 아니다.
   그래서 배경으로 깐다. 띠 높이를 0.5em 으로 못 박아 글자 크기가 달라져도
   비율이 유지된다.

   box-decoration-break: clone 이 꼭 필요하다. 기본값(slice)은 여러 줄에
   걸친 글의 배경을 **한 덩어리로 늘려** 칠해서, 두 번째 줄부터 띠가
   엉뚱한 높이에 그려진다. clone 은 줄마다 따로 칠한다.

   글자 뒤에 깔리므로 색이 진하면 글씨를 잡아먹는다. 30% 에서 멈춘다. */
.mkmg__mark {
  font-weight: 700;
  color: var(--mg-deep);
  background-image: linear-gradient(rgba(168, 130, 47, .30), rgba(168, 130, 47, .30));
  background-size: 100% .5em;
  background-position: 0 100%;
  background-repeat: no-repeat;
  /* 실제 형광펜처럼 글자 양옆으로 조금 번지게 */
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mkmg__sub {
  margin: 2em 0 .7em;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.25;
  color: var(--mg-deep);
  word-break: keep-all;
}

/* 인용문은 글단을 넘어 넓게 나간다. 페이지를 넘기다 눈이 걸리는 자리다.
   글단(.mkmg__body) 안에 두면 그 폭(68ch)에 갇히므로 글 덩어리 밖으로
   빼서 .mkmg 의 직계로 둔다. 그래야 1000px 을 다 쓴다. */
.mkmg__quote {
  margin: clamp(30px, 4vw, 52px) 0;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}

.mkmg__quote p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(21px, 2.9vw, 34px);
  line-height: 1.3;
  color: var(--mg-deep);
  word-break: keep-all;
}

.mkmg__quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mg-soft);
}

/* ── 갈무리 ───────────────────────────────────────────────────────── */
.mkmg__end {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--mg-line);
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.66;
  color: var(--mg-soft);
  word-break: keep-all;
}

.mkmg__end a { color: var(--mg-gold); }

.mkmg__end b { color: var(--mg-deep); }

/* ==========================================================================
   표지 변형 — 사진이 판을 꽉 채우는 형                        [cover--photo]
   --------------------------------------------------------------------------
   기본형은 배경에서 오려낸 인물을 쓴다. 그래야 제호를 인물 뒤로 보낼 수
   있다 — 머리가 글자를 가리는 그 한 수가 표지를 표지로 만든다.

   그런데 오려낸 그림이 늘 있는 건 아니다. 배경이 붙은 평범한 사진뿐일 때를
   위해 이 변형을 둔다. 사진이 판을 채우고 제호는 그 **위**에 얹힌다.
   실제 잡지도 대부분 이쪽이다.

   글자가 사진 위에 놓이므로 읽히는 것이 관건이다. 사진마다 밝기가 달라
   어디가 밝을지 알 수 없으니, 위아래와 왼쪽에 어두운 막을 깔아 글자가
   어디에 오든 읽히게 한다. 사진을 가리지 않을 만큼만.
   ========================================================================== */

.mkcv--photo .mkcv__card {
  /* 사진이 바탕을 덮으므로 밝은 그라데이션이 필요 없다 */
  background: #2b241d;
}

.mkcv--photo .mkcv__photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 얼굴이 위쪽에 오도록. 가운데로 두면 표지에서 턱이 잘린다. */
  object-position: center 16%;
  display: block;
}

.mkcv--photo .mkcv__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(28, 22, 17, .50) 0%, rgba(28, 22, 17, .10) 24%, rgba(28, 22, 17, 0) 44%),
    linear-gradient(to top, rgba(28, 22, 17, .62) 0%, rgba(28, 22, 17, .12) 32%, rgba(28, 22, 17, 0) 54%),
    linear-gradient(to right, rgba(28, 22, 17, .42) 0%, rgba(28, 22, 17, 0) 46%);
}

/* 사진 위에 얹히므로 글자는 밝은 색으로 뒤집는다 */
.mkcv--photo .mkcv__masthead {
  z-index: 3;
  color: var(--cv-cream);
  text-shadow: 0 2px 20px rgba(28, 22, 17, .38);
}

.mkcv--photo .mkcv__ink {
  z-index: 4;
  color: var(--cv-cream);
}

.mkcv--photo .mkcv__issue {
  color: var(--cv-cream);
  border-color: rgba(253, 249, 242, .55);
  background: rgba(28, 22, 17, .22);
}

.mkcv--photo .mkcv__lead,
.mkcv--photo .mkcv__side,
.mkcv--photo .mkcv__sign {
  color: var(--cv-cream);
  text-shadow: 0 2px 16px rgba(28, 22, 17, .45);
}

.mkcv--photo .mkcv__kicker {
  color: #e2c485;
  text-shadow: 0 1px 12px rgba(28, 22, 17, .45);
}

.mkcv--photo .mkcv__side span { color: #e2c485; }

.mkcv--photo .mkcv__dek { color: rgba(253, 249, 242, .80); }

.mkcv--photo .mkcv__note { color: rgba(253, 249, 242, .62); }

/* ── 사진 없는 표지 ──────────────────────────────────────────────────
   Issue 04 부터는 인물 사진 없이 글자만으로 표지를 만든다. 표지 종이
   (.mkcv__card 의 그라디언트)는 그대로 쓰고 인물 컷만 뺀다.

   .mkcv__lead 는 11ch, .mkcv__dek 는 24ch 로 묶여 있다 - 오른쪽 인물을
   피해 왼쪽 3분의 1 안에 들어가야 했기 때문이다. 인물이 없으면 그
   제한이 이유를 잃고 머리기사만 좁게 접힌다. 그래서 여기서만 넓힌다.

   사진이 생기면 이 클래스를 빼고 <img class="mkcv__cut"> 를 되돌리면
   원래 배치가 된다. 다른 규칙은 건드리지 않았다. */
.mkcv--type .mkcv__lead { max-width: 15ch; }
.mkcv--type .mkcv__dek  { max-width: 34ch; }

/* ── 인물 컷의 왼쪽 가장자리 ─────────────────────────────────────────
   컷아웃에 따라 인물의 팔·어깨가 사진 프레임 왼쪽에 닿아 잘려 있다.
   재보니 cover-model-4 는 왼쪽 가장자리의 11%가 불투명하다(cover-model-2
   도 11%, cover-model-5 는 0%). 표지에서는 그 경계가 카드 안쪽
   (왼쪽 끝에서 81px)에 놓여 직선으로 뚝 잘린 것처럼 보인다.

   사진을 옮기거나 키우면 머리기사 자리를 침범한다. 가장자리 28px 만
   흐리면 잘린 자국이 사라지고, 가장자리가 이미 투명한 사진에는 아무
   변화가 없다. */
.mkcv__cut {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
          mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

/* ── 본문 안의 도해 ──────────────────────────────────────────────────
   본문 단락은 68ch 로 묶여 있다(읽기 좋은 폭). 도해는 그 안에 글자가
   들어 있어서 그 폭에서는 잔글씨가 안 읽힌다. `.mkmg` 의 1000px 를
   그대로 쓰도록 본문 블록 바깥에 형제로 놓고 여기서 폭을 준다.

   설명 글(figcaption)은 빼지 말 것. 이 그림은 환자 전후 사진이 아니라
   제품 설명용 도해라, 무엇인지 적어 두지 않으면 시술 결과 주장으로
   읽힌다. */
.mkmg__fig {
  margin: clamp(26px, 3.4vw, 44px) 0 0;
}

.mkmg__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--mg-line, #e4d9c6);
}

.mkmg__fig figcaption {
  margin-top: 10px;
  max-width: 68ch;
  font-size: clamp(12.5px, 1.02vw, 14px);
  line-height: 1.6;
  color: var(--mg-soft, #6b5c4e);
}

/* ── 발행일·수정일 ───────────────────────────────────────────────────
   기사 끝에 작게 둔다. 본문과 같은 폭(68ch)에 맞추고, 위에 가는 선을
   그어 기사가 여기서 끝난다는 것을 보이게 한다. */
.mkmg__dates {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding-top: 14px;
  max-width: 68ch;
  border-top: 1px solid var(--mg-line, #e4d9c6);
  font-size: clamp(12.5px, 1.02vw, 13.5px);
  letter-spacing: .02em;
  color: var(--mg-soft, #6b5c4e);
}