/* ============================================================
   메인 비주얼 — 공통 (iw-main-hero 1.50.0)
   모양별 CSS(mNN.css)는 이 파일 뒤에 실린다. 선택자 세기는 .iwv.iwv--mNN 로 맞춘다.

   높이
     --iw-vh      빌더 미리보기가 넘겨주는 '보이는 화면 높이' (실제 사이트엔 없음 → 100vh)
     --iwv-top    흰 메뉴가 비주얼 위에 따로 있을 때 그 높이 (상단 메뉴가 넣어 준다)
     --iwn-abar   로그인 상태 워드프레스 관리자 바 높이 (새 상단 메뉴 base.css 가 body.admin-bar 에 넣는다 · v1.51.0)
     --iwv-hdr-ov 흰색 고정 메뉴 아래에서 시작할 때 0 — 투명용 모양이 메뉴 높이만큼 한 번 더 밀리지 않게 (v1.51.0)
     --iwv-bg     편집 화면 '배경색' (머리 주석 Bg 가 있는 모양만, 고른 경우만 · v1.51.0)
     --iwv-h      디자인 탭 '높이(PC)' — 없으면 화면 꽉
     --iwv-hm     디자인 탭 '높이(모바일)'
   글자 — 디자인 탭 '글자' 값(--iw-title-size 등)이 있으면 그것, 없으면 모양 기본값(--iwv-t-*)
   바로가기 (v1.55.0) — 꾸미기 › 글자 '바로가기' = 빌더 meta 키
     --iw-meta-size · --iw-meta-weight · --iw-meta-color  이름 글자 (색은 모양 CSS 가 q-a·q-t 에서 var(--iw-meta-color, 모양색) 으로 읽는다)
     --iw-icon-bg                                         아이콘 뒤 원·네모 (그런 모양만 — 모양 CSS 가 var(--iw-icon-bg, 모양색))
     마우스 올렸을 때 색은 모양에 정해진 그대로
   ============================================================ */
.iwv {
  --iwv-full: calc(var(--iw-vh, 100vh) - var(--iwv-top, 0px) - var(--iwn-abar, 0px));
  --iwv-hdr: var(--iwv-hdr-ov, var(--iwn-hdr, 90px));         /* 투명 메뉴가 겹치는 높이 (글자가 메뉴 밑에 숨지 않게) — 상단 메뉴가 실제 높이를 넣어 준다 */
  --iwv-fg: #fff;
  --iwv-gut: clamp(20px, 5vw, 120px);
  position: relative;
  box-sizing: border-box;
  height: var(--iwv-h, var(--iwv-full));
  min-height: 420px;
  overflow: hidden;
  color: var(--iwv-fg);
  font-family: var(--iw-font, var(--iwv-font, 'Pretendard', 'Noto Sans KR', sans-serif));
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.iwv *, .iwv *::before, .iwv *::after { box-sizing: border-box; }
@supports (height: 100svh) { .iwv { --iwv-full: calc(var(--iw-vh, 100svh) - var(--iwv-top, 0px) - var(--iwn-abar, 0px)); } }
.iwv a { text-decoration: none; color: inherit; }
.iwv ul { list-style: none; margin: 0; padding: 0; }
.iwv p, .iwv h1, .iwv h2, .iwv h3 { margin: 0; }
.iwv button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.iwv :focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* ---------- 글자 (모양 기본값은 --iwv-t-* 로 모양 CSS 가 정한다) ---------- */
.iwv .iwv-label {
  font-size: var(--iw-label-size, var(--iwv-l-size, 15px));
  font-weight: var(--iw-label-weight, var(--iwv-l-weight, 600));
  color: var(--iw-label-color, var(--iwv-l-color, currentColor));
  text-align: var(--iw-label-align, inherit);
  letter-spacing: var(--iwv-l-ls, .02em);
  line-height: 1.4;
}
.iwv .iwv-title {
  font-family: var(--iw-font, var(--iwv-t-font, inherit));
  font-size: var(--iw-title-size, var(--iwv-t-size, clamp(32px, 4.2vw, 64px)));
  font-weight: var(--iw-title-weight, var(--iwv-t-weight, 700));
  line-height: var(--iw-title-lh, var(--iwv-t-lh, 1.25));
  letter-spacing: var(--iwv-t-ls, -.02em);
  color: var(--iw-title-color, var(--iwv-t-color, currentColor));
  text-align: var(--iw-title-align, inherit);
  word-break: keep-all;
  text-wrap: balance;
}
.iwv .iwv-desc {
  font-family: var(--iw-font, var(--iwv-d-font, inherit));
  font-size: var(--iw-body-size, var(--iwv-d-size, clamp(15px, 1.2vw, 20px)));
  font-weight: var(--iw-body-weight, var(--iwv-d-weight, 400));
  line-height: var(--iw-body-lh, var(--iwv-d-lh, 1.6));
  letter-spacing: var(--iwv-d-ls, -.01em);
  color: var(--iw-body-color, var(--iwv-d-color, currentColor));
  text-align: var(--iw-body-align, inherit);
}
.iwv .iwv-title b, .iwv .iwv-title strong { font-weight: 800; }

/* ---------- 버튼 ---------- */
.iwv .iwv-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--iw-btn-size, var(--iwv-b-size, 16px));
  font-weight: var(--iw-btn-weight, 600);
  color: var(--iw-btn-color, var(--iwv-b-color, #fff));
  background: var(--iwv-b-bg, var(--ac));
  border: 1px solid var(--iwv-b-bd, transparent);
  padding: var(--iwv-b-pad, 15px 30px);
  border-radius: var(--iwv-b-r, 999px);
  line-height: 1.2;
  margin-left: var(--iw-btn-ml, 0); margin-right: var(--iw-btn-mr, 0);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.iwv .iwv-btn:hover { transform: translateY(-2px); }
.iwv .iwv-arw { width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); flex: none; margin-right: 2px; }

/* ---------- 슬라이드 · 사진 · 영상 ---------- */
.iwv .iwv-slides { position: relative; height: 100%; }
.iwv .iwv-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.iwv .iwv-slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }
.iwv .iwv-media { position: absolute; inset: 0; overflow: hidden; background: #1d2633; }
.iwv .iwv-img { position: absolute; inset: 0; background: center / cover no-repeat; }
/* ★ 1.61.0 사진 위치(초점) · 확대 — IW_Visual::focal() 이 값이 있을 때만 클래스·변수를 찍는다(없으면 위 규칙 그대로)
   확대 = transform 이 아니라 칸 크기를 키우고(--iwv-fz 배) 초점 쪽으로 옮긴다 → 초점이 제자리에 있고 가장자리 빈 곳이 없다
   (--iwv-fx · fy 는 0~100 숫자, 왼쪽·위 = (1 - 배율) × 초점 %). 모바일 값은 768 이하에서만 PC 값을 덮는다 */
.iwv .iwv-img.has-fz { inset: auto; width: calc(var(--iwv-fz) * 100%); height: calc(var(--iwv-fz) * 100%); left: calc((1 - var(--iwv-fz)) * var(--iwv-fx) * 1%); top: calc((1 - var(--iwv-fz)) * var(--iwv-fy) * 1%); }
@media (max-width: 768px) {
  .iwv .iwv-img.has-fpm { background-position: calc(var(--iwv-fxm) * 1%) calc(var(--iwv-fym) * 1%) !important; inset: auto; width: calc(var(--iwv-fzm) * 100%); height: calc(var(--iwv-fzm) * 100%); left: calc((1 - var(--iwv-fzm)) * var(--iwv-fxm) * 1%); top: calc((1 - var(--iwv-fzm)) * var(--iwv-fym) * 1%); }
}
.iwv .iwv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s; }
.iwv .iwv-vid.is-play { opacity: 1; }
.iwv .iwv-dim { position: absolute; inset: 0; background: #000; opacity: var(--iwv-dim, var(--iwv-dim-d, .3)); pointer-events: none; }
/* 사진을 안 넣었을 때 — 실제 화면: 포인트색 그라데이션 / 편집기: 사진 자리 그림 */
.iwv .iwv-img.is-empty { background: linear-gradient(130deg, color-mix(in srgb, var(--ac) 78%, #0a0f18) 0%, color-mix(in srgb, var(--ac) 40%, #05080e) 100%); }
.iwv .iwv-img.is-empty.is-ph {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Ccircle cx='118' cy='30' r='11' fill='%23fff' fill-opacity='.35'/%3E%3Cpath d='M0 100 L46 46 L76 76 L104 52 L160 100Z' fill='%23fff' fill-opacity='.18'/%3E%3C/svg%3E") center 60% / min(46%, 520px) auto no-repeat,
    linear-gradient(130deg, #5b6d82 0%, #2c3746 100%);
}
/* 모양 고르기 썸네일 전용 — 슬라이드마다 다른 풍경 (파랑 · 초록 · 주황). 실제 화면·편집 미리보기에는 안 붙는다 (v1.52.0) */
.iwv .iwv-img.is-empty.is-ph.is-th { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235d7fa8'/%3E%3Cstop offset='1' stop-color='%23c3d2e4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='100' fill='url(%23g)'/%3E%3Ccircle cx='118' cy='30' r='10' fill='%23f3e6c4'/%3E%3Cpath d='M0 70 C30 52 52 58 78 66 C104 74 128 54 160 60 V100 H0Z' fill='%233f5d80'/%3E%3Cpath d='M0 84 C36 72 70 80 100 86 C124 91 142 80 160 82 V100 H0Z' fill='%232a4360'/%3E%3C/svg%3E") center / cover no-repeat; }
.iwv .iwv-img.is-empty.is-ph.is-th.th-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fb9ae'/%3E%3Cstop offset='1' stop-color='%23e2eee7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='100' fill='url(%23g)'/%3E%3Ccircle cx='118' cy='30' r='10' fill='%23fbf3d6'/%3E%3Cpath d='M0 70 C30 52 52 58 78 66 C104 74 128 54 160 60 V100 H0Z' fill='%235c8b70'/%3E%3Cpath d='M0 84 C36 72 70 80 100 86 C124 91 142 80 160 82 V100 H0Z' fill='%233d6a50'/%3E%3C/svg%3E"); }
.iwv .iwv-img.is-empty.is-ph.is-th.th-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d99b74'/%3E%3Cstop offset='1' stop-color='%23f3dbc6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='100' fill='url(%23g)'/%3E%3Ccircle cx='118' cy='30' r='10' fill='%23fff1d8'/%3E%3Cpath d='M0 70 C30 52 52 58 78 66 C104 74 128 54 160 60 V100 H0Z' fill='%23a4664a'/%3E%3Cpath d='M0 84 C36 72 70 80 100 86 C124 91 142 80 160 82 V100 H0Z' fill='%23774532'/%3E%3C/svg%3E"); }
.iwv.iwv-illust .iwv-img.is-empty { background: none; }
.iwv.iwv-illust .iwv-img.is-empty.is-ph {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cellipse cx='100' cy='148' rx='86' ry='9' fill='%23000' fill-opacity='.08'/%3E%3Ccircle cx='72' cy='58' r='20' fill='%23000' fill-opacity='.14'/%3E%3Cpath d='M44 148c0-40 12-66 28-66s28 26 28 66z' fill='%23000' fill-opacity='.14'/%3E%3Ccircle cx='132' cy='70' r='16' fill='%23000' fill-opacity='.10'/%3E%3Cpath d='M108 148c0-34 10-56 24-56s24 22 24 56z' fill='%23000' fill-opacity='.10'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}

/* 슬라이드별 글자색 (내용 탭 '글자색') — 모양 기본은 모양 CSS 의 --iwv-fg */
.iwv .iwv-slide { color: var(--iwv-fg); }
.iwv .iwv-slide.is-light { --iwv-fg: #fff; }
.iwv .iwv-slide.is-dark { --iwv-fg: #14181f; }
.iwv .iwv-slide.is-dark .iwv-dim { background: #fff; }

/* ---------- 넘김 단추 ---------- */
.iwv .iwv-ctrl { display: flex; align-items: center; gap: 14px; z-index: 5; }
.iwv .iwv-prev, .iwv .iwv-next, .iwv .iwv-pause { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.iwv .iwv-prev i, .iwv .iwv-next i { width: 11px; height: 11px; border: solid currentColor; border-width: 2px 2px 0 0; }
.iwv .iwv-prev i { transform: translateX(2px) rotate(-135deg); }
.iwv .iwv-next i { transform: translateX(-2px) rotate(45deg); }
.iwv .iwv-pause i { width: 10px; height: 12px; border: solid currentColor; border-width: 0 3px; }
.iwv.is-paused .iwv-pause i { width: 0; height: 0; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.iwv .iwv-count { display: inline-flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.iwv .iwv-count b { font-weight: 700; }
.iwv .iwv-count em { font-style: normal; opacity: .6; }
.iwv .iwv-dots { display: inline-flex; gap: 8px; align-items: center; }
.iwv .iwv-dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; opacity: .4; transition: width .3s, opacity .3s; }
.iwv .iwv-dot.is-on { width: 26px; opacity: 1; }
.iwv .iwv-bar { position: relative; display: inline-block; width: 120px; height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); overflow: hidden; }
.iwv .iwv-bar i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); }
.iwv .iwv-bar i.is-run { animation: iwvBar var(--iwv-sec, 6s) linear forwards; }
.iwv.is-paused .iwv-bar i.is-run { animation-play-state: paused; }
@keyframes iwvBar { to { transform: scaleX(1); } }

/* ---------- 바로가기 공통 ---------- */
.iwv .iwv-q-a { display: flex; align-items: center; gap: 10px; }
.iwv .iwv-q-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--iw-icon-color, var(--iwv-ic-color, currentColor)); }
.iwv .iwv-q-ic svg { width: var(--iw-icon-size, var(--iwv-ic-size, 34px)); height: var(--iw-icon-size, var(--iwv-ic-size, 34px)); }
.iwv .iwv-q-t { font-size: var(--iw-meta-size, var(--iwv-q-size, 16px)); font-weight: var(--iw-meta-weight, var(--iwv-q-weight, 600)); line-height: 1.35; }

/* ---------- 썸네일 메뉴 흉내 (편집기 썸네일에만 나온다) ---------- */
.iwv-thbar { position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 20; display: flex; align-items: center; gap: 60px; padding: 0 60px; }
.iwv-thbar.is-solid { background: #fff; box-shadow: 0 1px 0 #e6e8eb; }
.iwv-thbar i { display: block; }
.iwv-thbar .lg { width: 150px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.85); }
.iwv-thbar span { display: flex; gap: 46px; margin: 0 auto; }
.iwv-thbar span i { width: 92px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.75); }
.iwv-thbar .bt { width: 34px; height: 24px; border-top: 4px solid rgba(255,255,255,.85); border-bottom: 4px solid rgba(255,255,255,.85); }
.iwv-thbar.is-solid .lg, .iwv-thbar.is-dk .lg { background: #2b3440; }
.iwv-thbar.is-solid span i, .iwv-thbar.is-dk span i { background: #c3c9d1; }
.iwv-thbar.is-solid .bt, .iwv-thbar.is-dk .bt { border-color: #2b3440; }

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  .iwv .iwv-slide, .iwv .iwv-slide.is-on { transition: none; }
  .iwv * { animation: none !important; }
}

/* ---------- 모바일 공통 ---------- */
@media (max-width: 768px) {
  .iwv { --iwv-hdr: var(--iwv-hdr-ov, var(--iwn-hdr-mo, 66px)); height: var(--iwv-hm, var(--iwv-h-mo, var(--iwv-full))); min-height: 360px; }
}

/* ★ v1.51.0 어두운 배경색(is-bgdk) — 바탕 위 이름표·아이콘의 포인트색을 밝게 섞어 읽히게 (모양 CSS 의 .iwv.iwv--mNN 보다 세게) */
.iwv.has-bg.is-bgdk { --iwv-l-color: color-mix(in srgb, var(--ac) 45%, #fff); --iwv-ic-color: color-mix(in srgb, var(--ac) 40%, #fff); }

/* ★ v1.55.1 사진 어둡게 '전체 고르게' — 모양마다 다른 그라데이션 대신 사진 전체에 같은 농도로 덮는다.
   덮는 색은 --iwv-dimc(비우면 검정 · 글자 어둡게 슬라이드는 흰색). 클래스를 두 번 써서 모양 CSS(.iwv.iwv--mNN …)를 이긴다 */
.iwv.is-dimflat.is-dimflat .iwv-slide .iwv-dim { background: var(--iwv-dimc, #000); opacity: var(--iwv-dim, var(--iwv-dim-d, .3)); }
.iwv.is-dimflat.is-dimflat .iwv-slide.is-dark .iwv-dim { background: var(--iwv-dimc, #fff); }

/* ★ v1.55.4 멈춤 상태 ▶ 표시 — 모양마다 단추 크기를 줄이려고 넣은 .iwv--mNN … .iwv-pause i { width; height; border-width: 0 2px }
   규칙이 위 .iwv.is-paused 규칙보다 강해서, 멈추면 세모가 안 되고 막대 하나(|)만 남았다. 클래스를 겹쳐 그 규칙들을 이긴다.
   m04 원형 단추는 자기 규칙(더 큰 세모)을 쓴다 */
.iwv.is-paused.is-paused .iwv-pause:not(.iwv-m04-ring) i {
  width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor; margin-left: 3px;
}

/* ============================================================
   ★ v1.55.5 글자 위치 (꾸미기 › 글자 위치: 모양 기본 | 왼쪽 | 가운데 | 오른쪽)
   사진 위에 글이 얹힌 모양만(머리 주석 Pos). 고르면 루트에 has-tp tp-left|center|right.
   - 세로: 메뉴 아래(--tp-t) ~ 아래 넘김 줄·바로가기 위(--tp-b) 사이 정가운데 (3번 '왼쪽 큰 제목' 기준)
   - 가로: --tp-xl / --tp-xr 안쪽 여백, 왼쪽·오른쪽일 때 글 폭 --tp-w
   - 글 상자를 위아래로 늘리고 flex 로 가운데 → transform 을 쓰지 않아 모양마다 다른 등장 효과와 안 부딪힌다
   - 모바일(768 이하)은 모양 기본 그대로 (세로 화면은 모양마다 아래/위 배치가 더 낫다)
   ============================================================ */
@media not all and (max-width: 768px) {
  .iwv.has-tp.has-tp.has-tp :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) {
    position: absolute; z-index: 3; margin: 0; max-width: none;
    top: var(--tp-t, var(--iwv-hdr)); bottom: var(--tp-b, 60px);
    left: var(--tp-xl, var(--tp-x, 7%)); right: var(--tp-xr, var(--tp-x, 7%)); width: auto;
    transform: none; animation: none;
    display: flex; flex-direction: column; justify-content: center;
    pointer-events: none;
  }
  .iwv.has-tp :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) > * { pointer-events: auto; }
  .iwv.has-tp.has-tp.has-tp.tp-left :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) { right: auto; width: var(--tp-w, min(62%, 900px)); align-items: flex-start; text-align: left; }
  .iwv.has-tp.has-tp.has-tp.tp-right :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) { left: auto; width: var(--tp-w, min(62%, 900px)); align-items: flex-end; text-align: right; }
  .iwv.has-tp.has-tp.has-tp.tp-center :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) { align-items: center; text-align: center; }
  .iwv.has-tp.tp-center :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) > * { max-width: var(--tp-cw, min(100%, 1100px)); }
  .iwv.has-tp.tp-right :is(.iwv-copy, .iwv-m08-copy, .iwv-m10-copy, .iwv-m12-copy) .iwv-btn { flex-direction: row; }

  /* 모양별 자리 */
  .iwv.iwv--m01.has-tp { --tp-t: 7%; --tp-b: calc(clamp(20px, 2.6vw, 42px) + 54px); --tp-x: 6%; --tp-w: min(56%, 640px); }
  .iwv.iwv--m02.has-tp { --tp-b: calc(clamp(30px, 4.5%, 58px) + 56px); --tp-x: var(--iwv-gut); }
  .iwv.iwv--m03.has-tp { --tp-b: calc(clamp(28px, 5%, 56px) + 26px); --tp-x: 7%; }
  .iwv.iwv--m03.has-tp.is-single { --tp-b: 48px; }
  .iwv.iwv--m04.has-tp { --tp-b: var(--m04-cb); --tp-x: 7%; }
  .iwv.iwv--m04.has-tp.is-single { --tp-b: 48px; }
  .iwv.iwv--m06.has-tp { --tp-b: calc(clamp(90px, 19%, 210px) * .55 + 64px); --tp-x: var(--iwv-gut); }
  .iwv.iwv--m06.has-tp.has-quick { --tp-b: 58%; }
  .iwv.iwv--m08.has-tp { --tp-b: calc(9% + clamp(110px, 9.4vw, 160px) + 24px); --tp-x: 4.8%; --tp-w: min(44%, 760px); }
  .iwv.iwv--m08.has-tp.is-single { --tp-b: 60px; }
  .iwv.iwv--m10.has-tp { --tp-b: 60px; --tp-x: var(--iwv-gut); --tp-xr: calc(var(--iwv-gut) + 36px); }
  .iwv.iwv--m10.has-tp.has-quick { --tp-b: calc(clamp(26px, 6.5%, 60px) + var(--tp-barh, 132px) + 24px); }
  .iwv.iwv--m12.has-tp { --tp-b: 6.5%; --tp-xl: 15%; --tp-xr: 8%; --tp-w: 77%; }
  .iwv.iwv--m14.has-tp { --tp-t: calc(clamp(20px, 3%, 44px) + 60px); --tp-b: clamp(44px, 8%, 110px); --tp-x: clamp(28px, 6%, 110px); --tp-w: min(62%, 760px); }
  .iwv.iwv--m14.has-tp.has-quick { --tp-b: calc(var(--m14-bar) / 2 + clamp(36px, 6%, 80px)); }
  .iwv.iwv--m16.has-tp { --tp-b: calc(clamp(40px, 6%, 64px) + 56px); --tp-x: var(--iwv-gut); --tp-w: min(calc(100% - var(--iwv-gut) * 2), 820px); }
  .iwv.iwv--m16.has-tp.has-quick { --tp-xr: calc(var(--m16-gw) + var(--iwv-gut)); --tp-w: min(calc(100% - var(--m16-gw) - var(--iwv-gut) * 2), 820px); }

  /* 등장 효과 — 6번은 글 상자 자체가 움직였는데(가운데 정렬 transform) 위치를 바꾸면 쓸 수 없어 안쪽 글에 준다 */
  .iwv.iwv--m06.has-tp .is-on .iwv-copy > * { animation: iwvTpIn 1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes iwvTpIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  /* 글 쪽을 진하게 까는 가로 그라데이션(3·4번)은 오른쪽일 때 뒤집는다 */
  .iwv.has-tp.tp-right:not(.is-dimflat) .iwv-dim { transform: scaleX(-1); }

  /* 글 바로 아래 붙어 다니는 넘김 줄은 글과 같은 쪽으로 (1·3·4·16번) */
  .iwv.iwv--m01.has-tp.tp-center .iwv-m01-ctrl { left: 50%; transform: translateX(-50%); }
  .iwv.iwv--m01.has-tp.tp-right .iwv-m01-ctrl { left: auto; right: calc(50% - var(--m01-w) / 2 + var(--m01-w) * .06 - 10px); }
  .iwv.iwv--m03.has-tp.tp-center .iwv-m03-ctrl { left: 50%; transform: translateX(-50%); }
  .iwv.iwv--m03.has-tp.tp-right .iwv-m03-ctrl { left: auto; right: 7%; }
  .iwv.iwv--m04.has-tp.tp-left .iwv-m04-ctrl { left: 7%; }
  .iwv.iwv--m04.has-tp.tp-center .iwv-m04-ctrl { left: 50%; transform: translateX(-50%); }
  .iwv.iwv--m04.has-tp.tp-right .iwv-m04-ctrl { left: auto; right: 7%; }
  /* 오른쪽 아래는 곡선으로 깎여 있어 넘김을 곡선 위로 올린다 */
  .iwv.iwv--m04.has-tp.tp-right .iwv-m04-ctrl { bottom: calc(var(--m04-r) * .5 + 26px); }
  .iwv.iwv--m04.has-tp.tp-right { --tp-b: calc(var(--m04-r) * .5 + 26px + 52px); }
  .iwv.iwv--m16.has-tp.tp-center .iwv-m16-ctrl { left: 50%; transform: translateX(-50%); }
  .iwv.iwv--m16.has-tp.has-quick.tp-center .iwv-m16-ctrl { left: calc((100% - var(--m16-gw)) / 2); }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .iwv.has-tp:not(.iwv--m16) { --tp-w: 80%; }
  .iwv.iwv--m12.has-tp { --tp-xl: 11%; --tp-xr: 9%; --tp-w: 80%; }
}

/* ============================================================
   ★ v1.60.0 글 묶음 (꾸미기 › 높이 · 사진 · 넘김 › 글 묶음) — 머리 주석 Copy 가 있는 모양(m03 · m04)의 메인만.
   PHP(IW_Visual::cp_class · cp_vars)가 고른 값만 클래스·변수로 찍는다. 비우면 아무것도 안 붙어 모양 기본 그대로.
     has-cv  cv-top | cv-middle | cv-bottom       PC(769 이상) 세로 위치
     has-cvm cvm-top | cvm-middle | cvm-bottom    모바일(768 이하) 세로 위치
     has-cy  --iwv-cy / --iwv-cy-mo              위아래 미세 이동(+ 아래로). translate 라 등장 효과의 transform 과 안 부딪힌다
     --iwv-g1(-mo) 제목 ↔ 설명 · --iwv-g2(-mo) 설명 ↔ 버튼 — 모양 CSS 의 margin-bottom 이 var(…, 모양 기본) 으로 읽는다
   세로 위치: 글 상자를 위 경계(--cp-t = 메뉴 아래 + 여유) ~ 아래 경계(--cp-b = 넘김 줄 위 + 여유)로 늘리고
   첫 글·끝 글의 auto 여백으로 위 · 가운데 · 아래를 정한다. justify-content 대신 auto 여백이라 글이 넘쳐도
   위가 메뉴 밑으로 숨지 않고 아래로만 넘친다(safe center). 경계 변수는 모양 CSS 가 정한다
   ============================================================ */
@media (min-width: 769px) {
  /* 비주얼 실제 높이(높이 옵션 · 화면 − 메뉴) · 메뉴/넘김 줄과 글 사이 여유 — 모양 CSS 의 기본 경계·크기가 같이 쓴다 */
  .iwv.iwv-cp:not(.iwv--sub) { --cp-H: var(--iwv-h, var(--iwv-full)); --cp-clr: clamp(24px, calc(var(--cp-H) * .045), 56px); }
  .iwv.iwv-cp.has-cv.has-cv.has-cv:not(.iwv--sub) .iwv-copy {
    top: var(--cp-t, var(--iwv-hdr)); bottom: var(--cp-b, 60px); height: auto; transform: none;
    display: flex; flex-direction: column; justify-content: flex-start; pointer-events: none;
  }
  .iwv.iwv-cp.has-cv:not(.iwv--sub) .iwv-copy > * { pointer-events: auto; }
  .iwv.iwv-cp.has-cv.has-cv.has-cv:not(.iwv--sub) .iwv-copy > :first-child { margin-top: 0; }
  .iwv.iwv-cp.has-cv.has-cv.has-cv:not(.iwv--sub) .iwv-copy > :last-child { margin-bottom: 0; }
  .iwv.iwv-cp.cv-middle.cv-middle.cv-middle:not(.iwv--sub) .iwv-copy > :first-child,
  .iwv.iwv-cp.cv-bottom.cv-bottom.cv-bottom:not(.iwv--sub) .iwv-copy > :first-child { margin-top: auto; }
  .iwv.iwv-cp.cv-middle.cv-middle.cv-middle:not(.iwv--sub) .iwv-copy > :last-child { margin-bottom: auto; }
  .iwv.iwv-cp.has-cy:not(.iwv--sub) .iwv-copy { translate: 0 var(--iwv-cy, 0px); }
}
@media (max-width: 768px) {
  .iwv.iwv-cp.has-cvm.has-cvm.has-cvm:not(.iwv--sub) .iwv-copy {
    top: var(--cp-t-mo, calc(var(--iwv-hdr) + 24px)); bottom: var(--cp-b-mo, 96px); height: auto; transform: none;
    display: flex; flex-direction: column; justify-content: flex-start; pointer-events: none;
  }
  .iwv.iwv-cp.has-cvm:not(.iwv--sub) .iwv-copy > * { pointer-events: auto; }
  .iwv.iwv-cp.has-cvm.has-cvm.has-cvm:not(.iwv--sub) .iwv-copy > :first-child { margin-top: 0; }
  .iwv.iwv-cp.has-cvm.has-cvm.has-cvm:not(.iwv--sub) .iwv-copy > :last-child { margin-bottom: 0; }
  .iwv.iwv-cp.cvm-middle.cvm-middle.cvm-middle:not(.iwv--sub) .iwv-copy > :first-child,
  .iwv.iwv-cp.cvm-bottom.cvm-bottom.cvm-bottom:not(.iwv--sub) .iwv-copy > :first-child { margin-top: auto; }
  .iwv.iwv-cp.cvm-middle.cvm-middle.cvm-middle:not(.iwv--sub) .iwv-copy > :last-child { margin-bottom: auto; }
  .iwv.iwv-cp.has-cy:not(.iwv--sub) .iwv-copy { translate: 0 var(--iwv-cy-mo, 0px); }
}

/* ★ v1.60.0 넘길 때 글자 겹침 — 나가는 슬라이드는 사진과 함께 0.9초 동안 흐려져, 그동안 나가는 글자와 바로 시작하는
   들어오는 글자가 겹쳐 보였다. 나가는 글 상자만 0.2초에 먼저 숨기고(사진 페이드는 그대로), 들어오는 글자는
   넘김 뒤(is-swapped — visual.js 가 첫 넘김 때 붙임)에만 0.25초 늦게 시작한다. 첫 화면 등장은 예전 그대로.
   사진·켄번스(1.59.0 고정 처리)는 건드리지 않는다.
   모양 이름으로 건다(iwv-cp 클래스에 기대면 빌더 렌더 캐시(최대 1주)가 남은 페이지에선 업데이트 직후 안 먹는다) */
@media (prefers-reduced-motion: no-preference) {
  .iwv:is(.iwv--m03, .iwv--m04):not(.iwv--sub) .iwv-slide:not(.is-on) .iwv-copy { opacity: 0; transition: opacity .2s ease-out; }
  .iwv:is(.iwv--m03, .iwv--m04).is-swapped:not(.iwv--sub) .is-on .iwv-copy > * { animation-delay: .25s; }
  .iwv:is(.iwv--m03, .iwv--m04).is-swapped:not(.iwv--sub) .is-on .iwv-copy > :nth-child(2) { animation-delay: .37s; }
  .iwv:is(.iwv--m03, .iwv--m04).is-swapped:not(.iwv--sub) .is-on .iwv-copy > :nth-child(3) { animation-delay: .49s; }
  .iwv:is(.iwv--m03, .iwv--m04).is-swapped:not(.iwv--sub) .is-on .iwv-copy > :nth-child(4) { animation-delay: .61s; }
}