/* 무통 마취 5차(2026-11-06 · ko-ver3 미리보기) — 배너를 1차 메모 3장 안으로 되돌림. 규칙은 1차 p-v3an.css(백업 renewal-ko-ver3-anes2-1106_20261106_0335_pre)의 배너 부분 그대로, 클래스 이름만 v3an-→v3an5-(지금 p-v3an.css 와 겹치지 않게). 생성 build/ver3-1106-an5/make_v3an5.py */

/* 어두운 배경 위 머리 메뉴 = 흰 글자(p-v3an.css 의 어두운 글자를 되돌림) */
body.v3an5 .hdr:not(.is-solid):not(.is-open) { color: #fff; }
body.v3an5 .hdr:not(.is-solid):not(.is-open) .hdr__logo-l { opacity: 1; }
body.v3an5 .hdr:not(.is-solid):not(.is-open) .hdr__logo-d { opacity: 0; }

/* ───── 배너: 왼쪽 문구 · 오른쪽 후기 메모지 ───── */
body.v3an5 .v3an5-hero { height: auto; min-height: min(100vh, 1200px); min-height: min(100svh, 1200px); max-height: none; }
body.v3an5 .v3an5-hero .shero__bg { object-position: 100% 50%; }
body.v3an5 .v3an5-hero .shero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 3vw, 64px); width: 100%; padding-top: calc(var(--hdr-h) + 28px); padding-bottom: 36px; }
body.v3an5 .v3an5-hero__desc { margin-top: clamp(14px, 1vw + 8px, 24px); font-size: clamp(18px, 15px + .55vw, 24px); line-height: 1.5; font-weight: 600; letter-spacing: -0.03em; }
body.v3an5 .v3an5-hero .shero__title { font-weight: 500; }
/* 후기 고지: 사진 어두운 자리에(PC = 단추 아래, 모바일 = 메모지 바로 아래) */
body.v3an5 .v3an5-hero__note { max-width: 36em; margin: clamp(18px, 1.6vw, 28px) 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .92); }

/* 메모지 3장: 모서리만 살짝 겹침(글자 · 작성자 줄은 가리지 않음). --fs = 메모지 폭 기준 글자 크기 */
body.v3an5 .v3an5-notes { position: relative; margin: 0; padding: 0; list-style: none; aspect-ratio: 100 / 79; text-shadow: none; }
body.v3an5 .v3an5-note { --r: 0deg; --fs: 11.6cqw; position: absolute; container-type: inline-size; transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
body.v3an5 .v3an5-note--1 { --r: -3deg; left: 0; top: 3%; z-index: 2; width: 45%; aspect-ratio: 100 / 84; }
body.v3an5 .v3an5-note--2 { --r: 2.5deg; --fs: 10.6cqw; left: 44.5%; top: 0; z-index: 3; width: 50%; aspect-ratio: 100 / 80; }
body.v3an5 .v3an5-note--3 { --r: -1.5deg; --fs: 9.6cqw; left: 18%; top: 50%; z-index: 4; width: 56%; aspect-ratio: 100 / 69; }
body.v3an5 .v3an5-note figure { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; padding: 7.5cqw 8cqw 6cqw; color: #2a2419; background: linear-gradient(rgba(120, 90, 0, .05), transparent 13%), linear-gradient(170deg, #fff0a0 0%, #fde57f 100%); box-shadow: 0 1px 2px rgba(20, 14, 4, .22), 0 24px 34px -18px rgba(0, 0, 0, .62); }
body.v3an5 .v3an5-note--1 figure { background: linear-gradient(rgba(120, 90, 0, .05), transparent 13%), linear-gradient(170deg, #fff6bd 0%, #fcefa8 100%); }
body.v3an5 .v3an5-note--3 figure { background: linear-gradient(rgba(120, 90, 0, .05), transparent 13%), linear-gradient(170deg, #ffe5a6 0%, #fbd588 100%); }
/* 끝이 살짝 들린 그림자 */
body.v3an5 .v3an5-note figure::after { content: ""; position: absolute; right: 4%; bottom: 7px; z-index: -1; width: 46%; height: 14%; background: rgba(0, 0, 0, .55); filter: blur(9px); transform: rotate(4deg); }
body.v3an5 .v3an5-note__src { font-size: clamp(12px, 4.3cqw, 15px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: #6b5317; }
body.v3an5 .v3an5-note blockquote { flex: 1; display: flex; align-items: center; margin: 0; padding: 0; border: 0; }
body.v3an5 .v3an5-note blockquote p { margin: 0; font-family: "Nanum Pen Script", var(--font); font-size: clamp(25px, var(--fs), 56px); line-height: 1.16; font-weight: 400; letter-spacing: -0.01em; color: #2a2419; word-break: keep-all; }
body.v3an5 .v3an5-note mark { padding: 0 .08em; color: inherit; background: linear-gradient(transparent 52%, rgba(232, 160, 40, .62) 52%, rgba(232, 160, 40, .62) 94%, transparent 94%); }
body.v3an5 .v3an5-note figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: clamp(12px, 4.1cqw, 14px); line-height: 1.35; color: #54431a; }
body.v3an5 .v3an5-note figcaption a { flex: none; font-weight: 700; color: #54431a; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  body.v3an5 .v3an5-note:hover { z-index: 5; transform: rotate(0deg) scale(1.03); }
}
@media (prefers-reduced-motion: no-preference) {
  body.v3an5 .v3an5-note { animation: v3an5Stick .7s cubic-bezier(.2, .8, .2, 1) both; }
  body.v3an5 .v3an5-note--2 { animation-delay: .16s; }
  body.v3an5 .v3an5-note--3 { animation-delay: .32s; }
}
@keyframes v3an5Stick { from { opacity: 0; transform: translateY(-18px) rotate(calc(var(--r) + 5deg)) scale(1.06); } to { opacity: 1; transform: rotate(var(--r)); } }

@media (max-width: 1023px) {
  /* 조명 밝은 부분이 로고 · 제목 뒤에 오지 않게 그림을 위로 올림 */
  body.v3an5 .v3an5-hero .shero__bg { inset: -20% 0 auto; height: 120%; object-position: 50% 50%; }
  body.v3an5 .v3an5-hero .shero__in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: calc(var(--hdr-h) + 18px); padding-bottom: 88px; }
  body.v3an5 .v3an5-hero__tx { display: contents; }
  body.v3an5 .v3an5-hero .shero__btns { order: 4; margin-top: 22px; }
  body.v3an5 .v3an5-hero__memo { order: 2; margin-top: 20px; }
  body.v3an5 .v3an5-notes { display: flex; flex-direction: column; aspect-ratio: auto; }
  /* 좁은 화면: 글이 잘리지 않게 정사각형 대신 글 길이만큼 */
  body.v3an5 .v3an5-note { position: relative; left: auto; top: auto; width: 90%; max-width: 480px; aspect-ratio: auto; container-type: normal; }
  body.v3an5 .v3an5-note--1 { --r: -1.6deg; align-self: flex-start; }
  body.v3an5 .v3an5-note--2 { --r: 1.4deg; align-self: flex-end; margin-top: -6px; }
  body.v3an5 .v3an5-note--3 { --r: -1deg; align-self: flex-start; margin-top: -6px; }
  body.v3an5 .v3an5-note figure { padding: 14px 18px 12px; }
  body.v3an5 .v3an5-note__src, body.v3an5 .v3an5-note figcaption { font-size: 13px; }
  body.v3an5 .v3an5-note blockquote { margin: 6px 0 8px; }
  body.v3an5 .v3an5-note blockquote p { font-size: 28px; line-height: 1.14; }
  body.v3an5 .v3an5-hero__note { order: 3; margin-top: 14px; }
}