/* ==========================================================================
   layout-treatment — 치료 랜딩 페이지(필라)
   --------------------------------------------------------------------------
   구성은 HERA 치료 페이지를 참고했고 색과 글자는 메이린 것을 쓴다.

   이 파일 하나로 치료 페이지 9개가 돌아간다. 페이지마다 CSS 를 복사하지 않는다.
   쓰려면 글 메타 autopost_layout 에 'layout-treatment' 를 넣으면 된다.

   문서형으로 길게 쓰는 글(spoke 포스팅)은 layout-medical-detail.css 를 쓴다.
   이 둘은 역할이 다르다. 필라는 훑어보는 화면, spoke 는 읽는 화면이다.
   ========================================================================== */

.layout-treatment {
  --tw-ink: #1c1512;
  --tw-ink-soft: #6b5c4e;
  --tw-cream: #faf6f0;
  --tw-soft: #f4ece1;
  --tw-surface: #ffffff;
  --tw-line: #e8dcca;
  --tw-gold: #a8822f;
  --tw-gold-soft: #cbab6a;
  --tw-gold-wash: #f6edda;
  --tw-shadow: 0 18px 40px rgba(38, 26, 14, .09);
  --tw-radius: 20px;
}

/* 테마 기본 여백을 걷어낸다. 섹션이 화면 끝까지 가야 한다. */
.layout-treatment .site-content,
.layout-treatment .content-area,
.layout-treatment .entry-content {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* GeneratePress 는 .separate-containers .inside-article 에 40px 을 준다.
   그게 남아 있으면 히어로가 화면 끝까지 가지 못하고 액자처럼 뜬다.

   주의 — .layout-treatment .inside-article 로는 못 이긴다. 명시도가 같은데(0,2,0)
   GP 의 규칙이 head 안쪽 늦은 자리에서 나와 순서로 이긴다. body 를 붙여 한 칸 올린다.
   섹션 안쪽 여백은 .tw-in 이 따로 책임지므로 여기서는 0 으로 둔다. */
body.layout-treatment .inside-article {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
body.layout-treatment .site-content { padding: 0; }

/* ── 색이 깔린 띠는 화면 끝까지 ──────────────────────────────────────────── */
/* GeneratePress 는 .site 에 max-width 1440px 을 걸어 사이트 전체를 가둔다.
   그래서 넓은 화면에서는 크림색 띠 좌우로 흰 여백이 240px 씩 남았다.

   100vw + 음수 마진으로 띠를 밖으로 빼내는 방법은 쓰지 않는다.
   100vw 는 스크롤바를 포함한 값이라 가로 스크롤이 생긴다.
   대신 .site 의 제한만 푼다. 헤더는 .site-header 가 자기 max-width 를
   따로 갖고 있어 그대로 1440px 에 머물고, 푸터는 원래부터 full-width 다.
   글줄 길이는 안쪽 래퍼가 계속 잡아 주므로 읽기 폭은 변하지 않는다. */
body.layout-treatment .site {
  max-width: none;
  width: 100%;
}


.layout-treatment .entry-header { display: none; }

.layout-treatment .tw-page {
  background: var(--tw-surface);
  color: var(--tw-ink);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}

.layout-treatment .tw-page *,
.layout-treatment .tw-page *::before,
.layout-treatment .tw-page *::after { box-sizing: border-box; }

.layout-treatment .tw-in {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

/* ── 공통 부품 ───────────────────────────────────────────────────────────── */
.layout-treatment .tw-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--tw-gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.layout-treatment .tw-eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1.5px;
  background: currentColor;
}

.layout-treatment .tw-h2 {
  margin: 0 0 16px;
  font-size: clamp(27px, 3.8vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--tw-ink);
}

.layout-treatment .tw-lead {
  margin: 0 0 34px;
  max-width: 56ch;
  color: var(--tw-ink-soft);
  font-size: 16.5px;
}

.layout-treatment .tw-sec { padding-block: clamp(56px, 7vw, 88px); }
.layout-treatment .tw-sec--soft { background: var(--tw-cream); }
.layout-treatment .tw-sec--wash { background: var(--tw-soft); }

/* 원형 아이콘 */
.layout-treatment .tw-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tw-gold-wash);
  color: var(--tw-gold);
}
.layout-treatment .tw-ico svg { width: 18px; height: 18px; }

/* 버튼 */
.layout-treatment .tw-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--tw-gold);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.layout-treatment .tw-btn:hover,
.layout-treatment .tw-btn:focus-visible {
  background: #8e6d22;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.layout-treatment .tw-btn svg { width: 17px; height: 17px; }
.layout-treatment .tw-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
}
.layout-treatment .tw-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* ── 히어로 ──────────────────────────────────────────────────────────────── */
/* overflow 를 숨기면 안 된다. 아래로 내려 걸친 스펙 카드가 잘린다.
   인물 사진은 absolute 로 히어로 안에 갇혀 있어서 넘칠 일이 없다. */
.layout-treatment .tw-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 82% 30%, rgba(168, 130, 47, .30) 0%, transparent 58%),
    linear-gradient(112deg, #17110d 0%, #2a1f16 46%, #3d2c1c 100%);
  color: #f7f2e9;
  padding-block: clamp(46px, 6vw, 74px) 0;
}

/* 오른쪽에서 흘러드는 인물 사진. 왼쪽으로 갈수록 배경에 녹는다. */
/* 원본은 1376x768 가로 사진이고 인물이 오른쪽 절반에, 왼쪽은 빈 배경이다.
   그래서 패널을 넓게 잡아도 얼굴이 가운데로 끌려오지 않는다.
   좁은 세로 크롭을 쓰면 넓은 화면에서 오른쪽 끝에 띠처럼 몰리고 확대도 된다. */
.layout-treatment .tw-hero__face {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(62%, 1180px);
  height: 100%;
  object-fit: cover;
  object-position: 66% 26%;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 24%, #000 54%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 24%, #000 54%);
  opacity: .92;
  pointer-events: none;
}

.layout-treatment .tw-hero__in { position: relative; z-index: 2; }

.layout-treatment .tw-crumb {
  margin: 0 0 22px;
  font-size: 12.5px;
  color: rgba(247, 242, 233, .6);
}
.layout-treatment .tw-crumb a { color: rgba(247, 242, 233, .82); text-decoration: none; }
.layout-treatment .tw-crumb a:hover { color: #fff; text-decoration: underline; }
.layout-treatment .tw-crumb span { margin-inline: 7px; }

.layout-treatment .tw-hero .tw-eyebrow { color: var(--tw-gold-soft); }

.layout-treatment .tw-hero__h1 {
  margin: 0 0 18px;
  max-width: 14ch;
  font-size: clamp(34px, 6vw, 66px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}

.layout-treatment .tw-hero__sub {
  margin: 0 0 28px;
  max-width: 46ch;
  color: rgba(247, 242, 233, .82);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}

.layout-treatment .tw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* 히어로 아래에 걸치는 스펙 4칸 */
.layout-treatment .tw-spec-wrap { margin-top: clamp(40px, 5vw, 62px); transform: translateY(clamp(22px, 3vw, 34px)); }

.layout-treatment .tw-spec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--tw-surface);
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow);
  overflow: hidden;
}

.layout-treatment .tw-spec__cell {
  display: flex;
  gap: 13px;
  padding: 22px 22px;
  border-right: 1px solid var(--tw-line);
  color: var(--tw-ink);
}
.layout-treatment .tw-spec__cell:last-child { border-right: 0; }

.layout-treatment .tw-spec__k {
  margin: 0 0 3px;
  color: var(--tw-gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.layout-treatment .tw-spec__v { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; }

/* 히어로 다음 섹션은 겹친 카드만큼 위를 비워 준다 */
.layout-treatment .tw-sec--after-hero { padding-top: clamp(66px, 8vw, 104px); }

/* ── 2단: 글 + 사진 ──────────────────────────────────────────────────────── */
.layout-treatment .tw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.layout-treatment .tw-split__fig { margin: 0; position: relative; }
.layout-treatment .tw-split__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--tw-radius);
}
.layout-treatment .tw-split__cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(28, 21, 18, .72);
  color: #f7f2e9;
  font-size: 11.5px;
  letter-spacing: .04em;
}

.layout-treatment .tw-body p { margin: 0 0 15px; max-width: 54ch; color: var(--tw-ink-soft); }
.layout-treatment .tw-body p:last-child { margin-bottom: 0; }
.layout-treatment .tw-body b { color: var(--tw-ink); font-weight: 600; }

/* ── 숫자 카드 (01 / 02 / 03) ────────────────────────────────────────────── */
/* 숫자는 장식이 아니라 순서다. 순서가 뜻이 있을 때만 쓴다. */
.layout-treatment .tw-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-treatment .tw-step {
  position: relative;
  padding: 26px 24px 24px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-radius);
  overflow: hidden;
}

.layout-treatment .tw-step__n {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tw-gold);
  opacity: .16;
}

.layout-treatment .tw-step .tw-ico { margin-bottom: 16px; }
.layout-treatment .tw-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.layout-treatment .tw-step p { margin: 0; color: var(--tw-ink-soft); font-size: 14.5px; line-height: 1.62; }

/* ── 부위 카드 ───────────────────────────────────────────────────────────── */
.layout-treatment .tw-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-treatment .tw-area {
  position: relative;
  padding: 20px 20px 18px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-line);
  border-radius: 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.layout-treatment .tw-area:hover { border-color: var(--tw-gold-soft); transform: translateY(-2px); }
.layout-treatment .tw-area h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; }
.layout-treatment .tw-area p { margin: 0; color: var(--tw-ink-soft); font-size: 14px; line-height: 1.6; }
.layout-treatment .tw-area__n {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tw-gold);
  opacity: .32;
}

/* ── 체크 알약 ───────────────────────────────────────────────────────────── */
.layout-treatment .tw-forwho {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.layout-treatment .tw-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-treatment .tw-check {
  display: flex;
  gap: 11px;
  padding: 16px 18px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-line);
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
.layout-treatment .tw-check svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--tw-gold); }

/* 맞지 않는 경우 — 색을 달리해 구분한다 */
.layout-treatment .tw-notfor {
  margin-top: 22px;
  padding: 20px 22px;
  border-left: 3px solid #b3714f;
  border-radius: 0 14px 14px 0;
  background: #fbf1e9;
}
.layout-treatment .tw-notfor h3 { margin: 0 0 9px; font-size: 15.5px; font-weight: 700; color: #8a4f2c; }
.layout-treatment .tw-notfor ul { margin: 0; padding-left: 18px; color: #6f5240; font-size: 14.5px; }
.layout-treatment .tw-notfor li { margin-bottom: 5px; }
.layout-treatment .tw-notfor a { color: #8a4f2c; }

/* ── Before / after ──────────────────────────────────────────────────────── */
.layout-treatment .tw-ba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 660px;
}
.layout-treatment .tw-ba figure { margin: 0; }
.layout-treatment .tw-ba__slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 18px;
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, #efe4d5 0 10px, #f7efe4 10px 20px);
  color: #9a8871;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.layout-treatment .tw-ba figcaption { margin-top: 9px; font-size: 12px; color: var(--tw-ink-soft); }
.layout-treatment .tw-ba__note { margin: 18px 0 0; max-width: 62ch; font-size: 13px; color: var(--tw-ink-soft); }

/* ── 더 읽을거리 (spoke 링크) ────────────────────────────────────────────── */
.layout-treatment .tw-spokes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-treatment .tw-spoke {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-line);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.layout-treatment a.tw-spoke:hover {
  border-color: var(--tw-gold-soft);
  box-shadow: var(--tw-shadow);
  transform: translateY(-2px);
  text-decoration: none;
}
.layout-treatment .tw-spoke__k {
  margin: 0;
  color: var(--tw-gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.layout-treatment .tw-spoke h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.38; }
.layout-treatment .tw-spoke p { margin: 0; color: var(--tw-ink-soft); font-size: 14px; line-height: 1.6; }
.layout-treatment .tw-spoke__go {
  margin-top: auto;
  padding-top: 4px;
  color: var(--tw-gold);
  font-size: 13px;
  font-weight: 700;
}
.layout-treatment .tw-spoke--soon { opacity: .72; }
.layout-treatment .tw-spoke--soon .tw-spoke__go { color: var(--tw-ink-soft); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.layout-treatment .tw-faq { max-width: 780px; }
.layout-treatment .tw-faq details {
  border-bottom: 1px solid var(--tw-line);
}
.layout-treatment .tw-faq details:first-of-type { border-top: 1px solid var(--tw-line); }
.layout-treatment .tw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
}
.layout-treatment .tw-faq summary::-webkit-details-marker { display: none; }
.layout-treatment .tw-faq summary::after {
  content: "+";
  flex: none;
  color: var(--tw-gold);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.layout-treatment .tw-faq details[open] summary::after { content: "–"; }
.layout-treatment .tw-faq .amd-faq-answer { padding: 0 4px 20px; }
.layout-treatment .tw-faq .amd-faq-answer p {
  margin: 0;
  max-width: 62ch;
  color: var(--tw-ink-soft);
  font-size: 15px;
  line-height: 1.68;
}

/* ── 마무리 CTA ──────────────────────────────────────────────────────────── */
.layout-treatment .tw-end {
  padding: clamp(36px, 5vw, 56px);
  border-radius: 24px;
  background:
    radial-gradient(90% 120% at 88% 12%, rgba(168, 130, 47, .28) 0%, transparent 60%),
    linear-gradient(112deg, #17110d 0%, #2f2218 100%);
  color: #f7f2e9;
}
.layout-treatment .tw-end h2 {
  margin: 0 0 12px;
  max-width: 20ch;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.16;
  color: #fff;
}
.layout-treatment .tw-end p { margin: 0 0 24px; max-width: 50ch; color: rgba(247, 242, 233, .8); }

.layout-treatment .tw-fine {
  margin: 28px 0 0;
  max-width: 68ch;
  color: var(--tw-ink-soft);
  font-size: 12.5px;
  line-height: 1.65;
}
.layout-treatment .tw-fine a { color: var(--tw-gold); }

/* ── 좁은 화면 ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .layout-treatment .tw-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-treatment .tw-spec__cell:nth-child(2) { border-right: 0; }
  .layout-treatment .tw-spec__cell:nth-child(1),
  .layout-treatment .tw-spec__cell:nth-child(2) { border-bottom: 1px solid var(--tw-line); }
  .layout-treatment .tw-steps,
  .layout-treatment .tw-areas,
  .layout-treatment .tw-spokes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-treatment .tw-split,
  .layout-treatment .tw-forwho { grid-template-columns: 1fr; }
  .layout-treatment .tw-split__fig { order: -1; max-width: 460px; }
}

@media (max-width: 680px) {
  .layout-treatment .tw-hero__face {
    width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 40%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 40%, #000 100%);
    opacity: .3;
  }
  .layout-treatment .tw-spec { grid-template-columns: 1fr; }
  .layout-treatment .tw-spec__cell { border-right: 0; border-bottom: 1px solid var(--tw-line); }
  .layout-treatment .tw-spec__cell:last-child { border-bottom: 0; }
  .layout-treatment .tw-steps,
  .layout-treatment .tw-areas,
  .layout-treatment .tw-spokes,
  .layout-treatment .tw-checks,
  .layout-treatment .tw-ba { grid-template-columns: 1fr; }
  .layout-treatment .tw-hero__h1 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .layout-treatment .tw-page * { transition: none !important; }
}

/* ==========================================================================
   채널 영상 두 장 + 영상 요청 버튼                                  [twv]
   --------------------------------------------------------------------------
   이 페이지 주제(쥬베룩)의 영상이 아직 없어서, 관련 영상인 척하지 않고
   "지금 많이 보는 것" 으로 내놓는 자리다. 그래서 카드마다 플랫폼과 주제를
   먼저 적는다. 읽는 사람이 쥬베룩 설명인 줄 알고 눌러서는 안 된다.

   유튜브는 썸네일을 그대로 쓸 수 있지만 인스타는 CDN 이 핫링크를 막는다
   (받아 보면 12바이트짜리 오류가 온다). 그래서 인스타 쪽은 사진 대신
   브랜드 색 타일로 둔다. 깨진 게 아니라 그렇게 만든 것으로 보이게 한다.
   ========================================================================== */

.layout-treatment .twv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 clamp(30px, 4vw, 44px);
}

.layout-treatment .twv__card {
  display: flex;
  flex-direction: column;
  background: var(--tw-surface);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-radius);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.layout-treatment .twv__card:hover {
  border-color: var(--tw-gold-soft);
  box-shadow: var(--tw-shadow);
  transform: translateY(-2px);
}

/* ── 썸네일 ─────────────────────────────────────────────────────── */
.layout-treatment .twv__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tw-soft);
  overflow: hidden;
}

.layout-treatment .twv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 인스타 쪽 타일. 사진이 없는 자리를 비워 두지 않는다. */
.layout-treatment .twv__thumb--ig {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(203, 171, 106, .34) 0%, transparent 60%),
    linear-gradient(140deg, #2a2019 0%, #3d2f22 100%);
}

.layout-treatment .twv__igmark {
  color: var(--tw-gold-soft);
  opacity: .9;
}

.layout-treatment .twv__igmark svg { width: 46px; height: 46px; display: block; }

/* 재생 표시 */
.layout-treatment .twv__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(28, 21, 18, .72);
  color: #fff;
  transition: background-color .18s ease, transform .18s ease;
}

.layout-treatment .twv__thumb--ig .twv__play {
  /* 타일에는 가운데에 브랜드 마크가 있으므로 재생 표시를 아래로 비켜 둔다 */
  top: auto;
  bottom: 14px;
  left: 14px;
  transform: none;
  width: 42px;
  height: 42px;
}

.layout-treatment .twv__play svg { width: 24px; height: 24px; }

.layout-treatment .twv__card:hover .twv__play {
  background: var(--tw-gold);
}

.layout-treatment .twv__card:hover .twv__thumb--ig .twv__play {
  transform: none;
}

/* ── 글 ─────────────────────────────────────────────────────────── */
.layout-treatment .twv__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.layout-treatment .twv__where {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tw-gold);
}

.layout-treatment .twv__t {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tw-ink);
}

.layout-treatment .twv__d {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--tw-ink-soft);
}

.layout-treatment .twv__link {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tw-gold);
  text-decoration: none;
}

.layout-treatment .twv__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 영상 요청 ──────────────────────────────────────────────────── */
.layout-treatment .twv__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--tw-cream);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-radius);
}

.layout-treatment .twv__ask-txt { flex: 1 1 320px; }

.layout-treatment .twv__ask-txt h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tw-ink);
}

.layout-treatment .twv__ask-txt p {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--tw-ink-soft);
}

.layout-treatment .twv__ask-act {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.layout-treatment .twv__ask-act .tw-btn { cursor: pointer; border: 0; font: inherit; }

.layout-treatment .twv__ask-act .tw-btn[disabled] {
  opacity: .62;
  cursor: default;
  transform: none;
}

.layout-treatment .twv__ask-count {
  margin: 0;
  min-height: 1.2em;
  font-size: 13.5px;
  color: var(--tw-ink-soft);
}

@media (max-width: 820px) {
  .layout-treatment .twv { grid-template-columns: 1fr; }
  .layout-treatment .twv__ask-act { width: 100%; }
}

/* ==========================================================================
   버튼 속 두 줄 이름                                             [twstack]
   --------------------------------------------------------------------------
   거리뷰 버튼처럼 이름 밑에 장소를 작게 덧붙이는 경우.
   두 줄이 되면 키가 커져서 옆의 예약 버튼과 밑선이 어긋난다. 그래서
   위아래 여백을 줄이는 --stack 을 같이 붙여 키를 맞춘다.
   ========================================================================== */

.layout-treatment .tw-btn__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.layout-treatment .tw-btn__stack small {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

/* 두 버튼은 줄 안에 나란히 놓인 상자다. 그냥 두면 글자 밑선을 기준으로
   서기 때문에, 두 줄짜리 버튼이 8px 아래로 내려앉는다. 가운데로 맞춘다. */
.layout-treatment .tw-end .tw-btn { vertical-align: middle; }

/* 옆의 예약 버튼과 밑선을 맞춘 값이다. 두 줄이 한 줄보다 크는 만큼만 뺀다. */
.layout-treatment .tw-btn--stack {
  padding-top: 9.5px;
  padding-bottom: 9.5px;
}

/* ==========================================================================
   세로 영상의 표지 그림                                           [twshot]
   --------------------------------------------------------------------------
   릴은 세로(9:16)인데 타일은 가로(16:9)다. 잘라 채우면 가운데 띠만 남아
   제목도 얼굴도 사라진다. 그래서 표지는 통째로 넣고(contain), 남는 양옆은
   같은 그림을 흐리게 깔아 메운다. 같은 주소라 내려받기는 한 번이다.
   ========================================================================== */

.layout-treatment .twv__thumb--shot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17110d;
}

.layout-treatment .twv__thumb--shot .twv__shot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 확대해 두지 않으면 흐림 처리 때문에 가장자리가 비쳐 보인다 */
  transform: scale(1.25);
  filter: blur(22px) brightness(.48);
}

.layout-treatment .twv__thumb--shot .twv__shot {
  position: relative;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

/* 그림이 깔리면 가운데 문양은 자리를 비켜 줘야 한다 */
.layout-treatment .twv__thumb--shot .twv__igmark {
  position: absolute;
  top: 11px;
  right: 12px;
  color: #fff;
  opacity: .92;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

.layout-treatment .twv__thumb--shot .twv__igmark svg {
  width: 22px;
  height: 22px;
}