/* ── 활동 이야기 (게시글 본문의 .vs-story) ─────────────────────
   사진 몇 장과 짧은 글을 스크랩북처럼 엮은 활동 후기 글의 모양이다.
   본문 살균(lib/board/post-media.ts)이 div · span 의 class 만 남기므로 꾸밈은 전부 여기서 class 로 준다
   (img · h2 · h3 · p · ol · li 는 class 를 못 가져 부모 class 로 고른다).
   이런 글은 편집기로 만들 수 없다 — 본문 HTML 을 따로 써서 등록하며, 편집기로 고치면 꾸밈이 사라진다. */
.post-content .vs-story {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.75;
    color: #2B2F4A;
    word-break: keep-all;
    overflow-wrap: normal;
}
.post-content .vs-story img { display: block; max-width: 100%; height: auto; margin: 0; border-radius: 0; }
.post-content .vs-story p { margin: 0; }
.post-content .vs-story ol { margin: 0; padding: 0; list-style: none; }
.post-content .vs-story :is(h2, h3) { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-navy-ink); letter-spacing: -.02em; }
/* 의미 덩어리 — 줄은 덩어리 사이에서만 바뀐다 */
.post-content .vs-story .vs-ph { display: inline-block; }

/* 테이프 · 크레용 낙서 (그림은 public/images/home7) */
.vs-story .vs-tape { position: absolute; left: 50%; top: -17px; z-index: 3; width: 158px; height: 24px; translate: -50% 0; rotate: -4deg; background: center / 100% 100% no-repeat; opacity: .94; }
.vs-story .vs-tape-sky { background-image: url("/images/home7/tape-sky.webp"); }
.vs-story .vs-tape-yellow { background-image: url("/images/home7/tape-yellow.webp"); rotate: 3deg; }
.vs-story .vs-tape-orange { background-image: url("/images/home7/tape-orange.webp"); }
.vs-story .vs-doodle { position: absolute; z-index: 4; background: center / contain no-repeat; pointer-events: none; }
.vs-story .vs-d-sparkles { width: 88px; height: 92px; right: -30px; top: -54px; rotate: 8deg; background-image: url("/images/home7/sparkles.webp"); }
.vs-story .vs-d-star { width: 68px; height: 68px; left: -28px; bottom: -26px; rotate: -12deg; background-image: url("/images/home7/star.webp"); }
.vs-story .vs-d-flower { width: 74px; height: 104px; left: -36px; top: -46px; rotate: -10deg; background-image: url("/images/home7/flower.webp"); }
.vs-story .vs-d-heart { width: 72px; height: 70px; right: -32px; top: -38px; rotate: 12deg; background-image: url("/images/home7/heart.webp"); }
.vs-story .vs-d-sun { width: 82px; height: 82px; left: -38px; bottom: -32px; rotate: -8deg; background-image: url("/images/home7/sun.webp"); }
.vs-story .vs-d-white { width: 80px; height: 84px; right: -16px; top: -44px; rotate: 10deg; background-image: url("/images/home7/sparkles.webp"); filter: brightness(0) invert(1); opacity: .85; }
.vs-story .vs-d-endstar { width: 60px; height: 60px; right: 44px; top: -26px; rotate: 14deg; background-image: url("/images/home7/star.webp"); }

/* 테이프로 붙인 사진 한 장 */
.vs-story .vs-snap { position: relative; padding: 14px 14px 16px; background: #fff; border-radius: 6px; box-shadow: 0 34px 56px -30px rgba(27, 34, 144, .5), 0 2px 8px rgba(21, 26, 94, .08); }
.vs-story .vs-snap > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: #FBF8F0; }
.vs-story .vs-cap { padding-top: 12px; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 29px; line-height: 1.2; word-spacing: -.14em; color: var(--color-navy-ink); }
.vs-story .vs-r1 { rotate: 2.2deg; }
.vs-story .vs-r2 { rotate: -2deg; }
.vs-story .vs-r3 { rotate: 2deg; }
.vs-story .vs-r4 { rotate: 2.5deg; }
.vs-story .vs-r5 { rotate: -1.8deg; }

/* 첫 화면 */
.vs-story .vs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; padding: 60px 56px 116px; background:
    radial-gradient(circle at 1px 1px, rgba(27, 34, 144, .07) 1.2px, transparent 0) 0 0 / 26px 26px,
    linear-gradient(180deg, #FFF1C2 0%, #FFF8E2 55%, #fff 100%); }
.vs-story .vs-tape-label { display: inline-block; margin: 0 0 14px -6px; padding: .38em 1.3em .3em; background: url("/images/home7/tape-yellow.webp") center / 100% 100% no-repeat; font-family: var(--font-hand); font-weight: 700; font-size: 26px; line-height: 1.2; word-spacing: -.14em; color: var(--color-navy-ink); rotate: -2deg; }
.vs-story .vs-hero h2 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.16; }
.vs-story .vs-ai { color: var(--color-navy); }
.vs-story .vs-hl { margin: 0 -.08em; padding: 0 .08em; background: linear-gradient(transparent 60%, #FFCE45 60%, #FFCE45 93%, transparent 93%); }
.vs-story .vs-hero p { font-size: 19px; line-height: 1.65; color: #33385C; }
.vs-story .vs-hero h2 + p { margin-top: 22px; }
.vs-story .vs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.vs-story .vs-tags span { padding: 7px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.vs-story .vs-tags span:nth-child(1) { background: var(--color-navy); color: #fff; }
.vs-story .vs-tags span:nth-child(2) { background: #CDE7FB; color: var(--color-navy-ink); }
.vs-story .vs-tags span:nth-child(3) { background: #fff; color: var(--color-navy-ink); box-shadow: inset 0 0 0 1.5px var(--color-navy-ink); }
.vs-story .vs-art { position: relative; }

/* 한눈에 보기 */
.vs-story .vs-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: -62px 56px 0; }
.vs-story .vs-fact { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: #fff; border: 1px solid #E9E4D8; border-radius: 28px; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); }
.vs-story .vs-ico { flex: none; width: 50px; height: 50px; background: center / contain no-repeat; }
.vs-story .vs-ico-sun { background-image: url("/images/home7/sun.webp"); }
.vs-story .vs-ico-star { background-image: url("/images/home7/star.webp"); }
.vs-story .vs-ico-heart { background-image: url("/images/home7/heart.webp"); }
.vs-story .vs-k { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: #5F6788; }
.vs-story .vs-fact strong { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--color-navy-ink); }

/* 함께한 곳 */
.vs-story .vs-with { position: relative; margin: 60px 56px 0; padding: 46px 28px 32px; text-align: center; background: #fff; border: 1px solid #E9E4D8; border-radius: 32px; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); }
.vs-story .vs-with-tape { position: absolute; left: 50%; top: -19px; translate: -50% 0; padding: .36em 1.5em .28em; background: url("/images/home7/tape-sky.webp") center / 100% 100% no-repeat; font-family: var(--font-hand); font-weight: 700; font-size: 26px; line-height: 1.2; white-space: nowrap; color: var(--color-navy-ink); rotate: -2deg; }
.vs-story .vs-logos { display: flex; align-items: center; justify-content: center; gap: 32px; }
.vs-story .vs-logo-vin img { width: auto; height: 104px; }
.vs-story .vs-logo-champ img { width: auto; height: 84px; }
.vs-story .vs-logos .vs-ico { width: 44px; height: 44px; rotate: -8deg; }
.vs-story .vs-with p { margin-top: 20px; font-size: 19px; line-height: 1.7; color: #262A45; }
.vs-story .vs-with p strong { font-weight: 700; color: var(--color-navy-ink); background: linear-gradient(transparent 62%, #CDE7FB 62%); }

/* 여는 글 */
.vs-story .vs-lead { padding: 88px 40px 24px; text-align: center; }
.vs-story .vs-lead p { font-size: clamp(21px, 2.3vw, 28px); font-weight: 600; line-height: 1.65; letter-spacing: -.01em; color: var(--color-navy-ink); }
.vs-story .vs-q { color: var(--color-navy); background: linear-gradient(transparent 62%, #CDE7FB 62%); }

/* 사진으로 따라가는 하루 */
.vs-story .vs-line { padding: 40px 56px 24px; }
.vs-story .vs-line-title { text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 32px; line-height: 1.2; word-spacing: -.14em; color: var(--color-flame); }
.vs-story .vs-line ol { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 26px; }
.vs-story .vs-line ol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; border-top: 3px dashed #D9D2BF; }
.vs-story .vs-line li { position: relative; padding-top: 32px; text-align: center; }
.vs-story .vs-line li::before { content: ""; position: absolute; left: 50%; top: 0; width: 20px; height: 20px; translate: -50% 0; border: 4px solid #fff; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--c); }
.vs-story .vs-line li:nth-child(1) { --c: #58C3F2; }
.vs-story .vs-line li:nth-child(2) { --c: #EA7131; }
.vs-story .vs-line li:nth-child(3) { --c: #1B2290; }
.vs-story .vs-line li:nth-child(4) { --c: #22A52A; }
.vs-story .vs-line li:nth-child(5) { --c: #FFCE45; }
.vs-story .vs-t { display: block; font-family: var(--font-heading); font-size: 20px; line-height: 1.6; color: var(--color-navy-ink); }
.vs-story .vs-l { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; color: #5F6788; }

/* 장면 — 사진 한 장 + 글 */
.vs-story .vs-scene { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 60px; align-items: center; padding: 64px 56px; }
.vs-story .vs-scene.vs-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.vs-story .vs-flip .vs-art { order: 2; }
.vs-story .vs-num { display: flex; align-items: baseline; gap: 12px; }
.vs-story .vs-num strong { font-family: var(--font-heading); font-size: 72px; line-height: 1; letter-spacing: -.02em; color: #FFCE45; -webkit-text-stroke: 2.5px var(--color-navy-ink); paint-order: stroke fill; }
.vs-story .vs-num span { font-family: var(--font-hand); font-weight: 700; font-size: 29px; word-spacing: -.14em; color: var(--color-flame); rotate: -3deg; }
.vs-story :is(.vs-scene, .vs-deep) h3 { margin-top: 12px; font-size: clamp(27px, 3vw, 40px); line-height: 1.28; }
.vs-story :is(.vs-scene, .vs-deep) p { max-width: 23em; margin-top: 14px; font-size: 19px; line-height: 1.75; color: #262A45; }
.vs-story :is(.vs-scene, .vs-deep) h3 + p { margin-top: 24px; }
.vs-story .vs-scene p strong { font-weight: 700; color: var(--color-navy-ink); background: linear-gradient(transparent 62%, #FFE48F 62%); }

/* 남색 띠 */
.vs-story .vs-deep { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 28px 28px 52px; padding: 64px 52px; border-radius: 44px; color: #fff; background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1.2px, transparent 0) 0 0 / 24px 24px,
    radial-gradient(120% 90% at 100% 0%, #2B36C4 0%, transparent 60%),
    var(--color-navy); }
.vs-story .vs-deep .vs-num strong { -webkit-text-stroke: 0; }
.vs-story .vs-deep .vs-num span { color: #58C3F2; }
.vs-story .vs-deep h3 { color: #fff; }
.vs-story .vs-deep h3 em { font-style: normal; color: #FFCE45; }
.vs-story .vs-deep p { color: #EEF0FF; }
.vs-story .vs-deep p strong { font-weight: 700; color: #fff; }
.vs-story .vs-keep-title { margin-top: 34px; font-family: var(--font-hand); font-weight: 700; font-size: 31px; line-height: 1.2; word-spacing: -.14em; color: #FFCE45; }
.vs-story .vs-deep ol { display: grid; gap: 10px; margin-top: 12px; counter-reset: vs-k; }
.vs-story .vs-deep li { counter-increment: vs-k; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; background: rgba(255, 255, 255, .09); font-size: 17.5px; font-weight: 600; line-height: 1.45; }
.vs-story .vs-deep li::before { content: counter(vs-k); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFCE45; font-family: var(--font-heading); font-size: 17px; color: var(--color-navy-ink); }
.vs-story .vs-deep .vs-snap > img { aspect-ratio: 4 / 4.6; object-position: 78% 50%; }

/* 맺음 */
.vs-story .vs-end { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; margin: 36px 28px 44px; padding: 44px 52px 44px 40px; border-radius: 44px; background: #FFCE45; }
.vs-story .vs-mascot img { width: 176px; filter: drop-shadow(0 18px 18px rgba(21, 26, 94, .22)); }
.vs-story .vs-end-hand { font-family: var(--font-hand); font-weight: 700; font-size: 33px; line-height: 1.2; word-spacing: -.14em; color: var(--color-navy); }
.vs-story .vs-end h3 { margin-top: 2px; font-size: clamp(27px, 3vw, 40px); line-height: 1.28; }
.vs-story .vs-end p { max-width: 26em; margin-top: 10px; font-size: 19px; line-height: 1.7; color: #1F2360; }
.vs-story .vs-end h3 + p { margin-top: 16px; }
.vs-story .vs-meet { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 22px; border-radius: 999px; background: var(--color-navy); font-size: 16.5px; font-weight: 700; line-height: 1.5; color: #fff; }
.vs-story .vs-meet::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #FFCE45; }

/* 휴대폰 · 좁은 화면 */
@media (max-width: 860px) {
    .post-content .vs-story { font-size: 16.5px; }
    .vs-story .vs-hero { grid-template-columns: 1fr; gap: 40px; padding: 30px 20px 92px; }
    .vs-story .vs-tape-label { font-size: 21px; }
    .vs-story .vs-hero p { font-size: 17px; }
    .vs-story .vs-snap { padding: 10px 10px 12px; }
    .vs-story .vs-cap { padding-top: 9px; font-size: 23px; }
    .vs-story .vs-tape { top: -13px; width: 124px; height: 19px; }
    .vs-story .vs-r1 { rotate: 1.5deg; }
    .vs-story .vs-r2, .vs-story .vs-r5 { rotate: -1.2deg; }
    .vs-story .vs-r3, .vs-story .vs-r4 { rotate: 1.2deg; }
    .vs-story :is(.vs-d-sparkles, .vs-d-flower, .vs-d-heart, .vs-d-sun, .vs-d-endstar) { display: none; }
    .vs-story .vs-d-star { left: -6px; bottom: -22px; width: 52px; height: 52px; }
    .vs-story .vs-facts { grid-template-columns: 1fr; gap: 10px; margin: -54px 16px 0; }
    .vs-story .vs-fact { padding: 15px 18px; border-radius: 22px; }
    .vs-story .vs-ico { width: 42px; height: 42px; }
    .vs-story .vs-with { margin: 44px 16px 0; padding: 40px 14px 24px; border-radius: 26px; }
    .vs-story .vs-with-tape { font-size: 23px; }
    .vs-story .vs-logos { gap: 12px; }
    .vs-story .vs-logo-vin img { height: 66px; }
    .vs-story .vs-logo-champ img { height: 46px; }
    .vs-story .vs-logos .vs-ico { width: 26px; height: 26px; }
    .vs-story .vs-with p { font-size: 17.5px; }
    .vs-story .vs-lead { padding: 60px 16px 12px; }
    .vs-story .vs-lead p { font-size: 17.5px; }
    .vs-story .vs-line { padding: 36px 20px 12px; }
    .vs-story .vs-line ol { grid-template-columns: 1fr; gap: 0; width: fit-content; margin: 18px auto 0; }
    .vs-story .vs-line ol::before { left: 9px; right: auto; top: 14px; bottom: 14px; border-top: 0; border-left: 3px dashed #D9D2BF; }
    .vs-story .vs-line li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0 7px 38px; text-align: left; }
    .vs-story .vs-line li::before { left: 0; top: 13px; translate: 0 0; }
    .vs-story .vs-t { min-width: 3.4em; }
    .vs-story .vs-scene, .vs-story .vs-scene.vs-flip { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px; }
    .vs-story .vs-flip .vs-art { order: 0; }
    .vs-story .vs-num strong { font-size: 56px; }
    .vs-story :is(.vs-scene, .vs-deep, .vs-end) p { font-size: 17.5px; line-height: 1.7; }
    .vs-story .vs-deep { grid-template-columns: 1fr; gap: 38px; margin: 20px 10px 36px; padding: 40px 20px 36px; border-radius: 32px; }
    .vs-story .vs-deep li { padding: 12px 14px; font-size: 16.5px; }
    .vs-story .vs-deep .vs-snap > img { aspect-ratio: 4 / 3; }
    .vs-story .vs-end { grid-template-columns: 1fr; gap: 6px; margin: 24px 10px 28px; padding: 32px 22px 18px; border-radius: 32px; }
    .vs-story .vs-mascot { order: 2; }
    .vs-story .vs-mascot img { width: 140px; margin: 14px 0 0 auto; }
    .vs-story .vs-end-hand { font-size: 27px; }
    .vs-story .vs-meet { padding: 11px 18px; font-size: 15px; }
}

/* ── 활동 이야기 · 사진 일기형 (게시글 본문의 .vd-story) ─────────────────
   크림색 바탕에 사진을 크고 편안하게 놓고, 손글씨 한마디를 곁들인 차분한 모양.
   꾸밈은 줄이고 여백을 넉넉히 둔다. 색은 남색 글자 + 노란 형광펜 하나만 쓴다.
   본문 살균이 div · span 의 class 만 남기므로 img · h2 · h3 · p · ol · li 는 부모 class 로 고른다. */
.post-content .vd-story {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.8;
    color: #33374F;
    word-break: keep-all;
    overflow-wrap: normal;
    background: #FFFDF8;
}
.post-content .vd-story img { display: block; max-width: 100%; height: auto; margin: 0; border-radius: 0; }
.post-content .vd-story p { margin: 0; }
.post-content .vd-story ol { margin: 0; padding: 0; list-style: none; }
.post-content .vd-story :is(h2, h3) { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -.02em; color: var(--color-navy-ink); }
.post-content .vd-story .vd-ph { display: inline-block; }

/* 손글씨 한마디 */
.vd-story .vd-hand { display: block; font-family: var(--font-hand); font-weight: 700; font-size: 25px; line-height: 1.3; word-spacing: -.14em; color: #E0803A; }
/* 형광펜 */
.vd-story .vd-hl { background: linear-gradient(transparent 62%, #FFE48F 62%, #FFE48F 94%, transparent 94%); }

/* 사진 — 둥글고 부드러운 그림자, 반듯하게 */
.vd-story .vd-shot > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; background: #F4F0E4; box-shadow: 0 24px 40px -28px rgba(27, 34, 144, .45); }
.vd-story .vd-shot .vd-hand { margin-top: 14px; padding-left: 6px; font-size: 23px; color: #5F6788; }

/* 첫 화면 */
.vd-story .vd-hero { padding: 72px 56px 0; text-align: center; background: linear-gradient(180deg, #FFF6D9 0%, #FFFDF8 70%); }
.vd-story .vd-hero h2 { margin-top: 12px; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.28; }
.vd-story .vd-hero p { margin-top: 20px; font-size: 19px; line-height: 1.7; color: #5F6788; }
.vd-story .vd-hero .vd-shot { margin-top: 48px; text-align: right; }
.vd-story .vd-hero .vd-shot > img { aspect-ratio: 16 / 9; object-position: 50% 62%; border-radius: 32px; }
.vd-story .vd-hero .vd-shot .vd-hand { padding: 0 10px 0 0; }

/* 한눈에 */
.vd-story .vd-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px 56px 0; }
.vd-story .vd-meta span { padding: 9px 20px; border: 1px solid #E9E4D8; border-radius: 999px; background: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--color-navy-ink); }

/* 여는 글 */
.vd-story .vd-lead { padding: 84px 40px 0; text-align: center; }
.vd-story .vd-lead p { font-size: clamp(21px, 2.4vw, 28px); font-weight: 600; line-height: 1.7; letter-spacing: -.01em; color: var(--color-navy-ink); }

/* 장면 */
.vd-story .vd-sec { margin: 92px 56px 0; padding-top: 72px; border-top: 2px dashed #E6E2D8; }
.vd-story .vd-sec h3 { margin-top: 4px; font-size: clamp(27px, 3.1vw, 38px); line-height: 1.3; }
.vd-story .vd-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.vd-story .vd-split.vd-rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.vd-story .vd-split.vd-rev > .vd-text { order: 2; }
.vd-story .vd-text p { margin-top: 12px; font-size: 19px; line-height: 1.8; }
.vd-story .vd-text h3 + p { margin-top: 24px; }
.vd-story .vd-text p strong { font-weight: 700; color: var(--color-navy-ink); background: linear-gradient(transparent 62%, #FFE48F 62%, #FFE48F 94%, transparent 94%); }
.vd-story .vd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }

/* 오늘의 활동 */
.vd-story .vd-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; counter-reset: vd-a; }
.vd-story .vd-acts > div { counter-increment: vd-a; padding: 22px 22px 24px; border: 1px solid #E9E4D8; border-radius: 24px; background: #fff; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); font-family: var(--font-heading); font-size: 18.5px; line-height: 1.45; color: var(--color-navy-ink); }
.vd-story .vd-acts > div::before { content: counter(vd-a); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: #FFCE45; font-size: 16px; }
/* 여섯 낱말 */
.vd-story .vd-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; }
.vd-story .vd-pills .vd-hand { width: 100%; margin-bottom: 4px; }
.vd-story .vd-pills span:not(.vd-hand) { padding: 7px 18px; border-radius: 999px; background: #FFF1C2; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--color-navy-ink); }

/* 오늘의 한 문장 */
.vd-story .vd-quote { margin: 92px 56px 0; padding: 60px 40px 64px; border-radius: 36px; text-align: center; background: #FFF6D9; }
.vd-story .vd-quote h3 { margin-top: 10px; font-size: clamp(25px, 3.3vw, 42px); line-height: 1.4; }
.vd-story .vd-quote p { margin-top: 14px; font-size: 18px; color: #5F6788; }

/* 부서모임 사진 넉 장 */
.vd-story .vd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; margin-top: 48px; }

/* 맺음 */
.vd-story .vd-end { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin: 96px 56px 56px; padding: 52px 48px 0 56px; border-radius: 36px; background: #EAF5FD; }
.vd-story .vd-end > div { padding-bottom: 52px; }
.vd-story .vd-end h3 { margin-top: 4px; font-size: clamp(27px, 3.1vw, 38px); line-height: 1.3; }
.vd-story .vd-end p { margin-top: 16px; font-size: 19px; line-height: 1.8; }
.vd-story .vd-logos { display: inline-flex; align-items: center; gap: 22px; margin-top: 26px; padding: 14px 26px; border-radius: 20px; background: #fff; }
.vd-story .vd-logo-vin img { width: auto; height: 66px; }
.vd-story .vd-logo-champ img { width: auto; height: 54px; }
.vd-story .vd-meet { display: block; margin-top: 22px; font-size: 15.5px; font-weight: 700; color: var(--color-navy); }
.vd-story .vd-mascot img { width: 190px; }

/* 휴대폰 · 좁은 화면 */
@media (max-width: 860px) {
    .post-content .vd-story { font-size: 16.5px; }
    .vd-story .vd-hand { font-size: 22px; }
    .vd-story .vd-shot > img { border-radius: 18px; }
    .vd-story .vd-shot .vd-hand { margin-top: 10px; font-size: 20px; }
    .vd-story .vd-hero { padding: 44px 20px 0; }
    .vd-story .vd-hero p { font-size: 17px; }
    .vd-story .vd-hero .vd-shot { margin-top: 32px; }
    .vd-story .vd-hero .vd-shot > img { aspect-ratio: 4 / 3; border-radius: 22px; }
    .vd-story .vd-meta { gap: 8px; margin: 30px 20px 0; }
    .vd-story .vd-meta span { padding: 7px 15px; font-size: 14.5px; }
    .vd-story .vd-lead { padding: 56px 20px 0; }
    .vd-story .vd-lead p { font-size: 19px; }
    .vd-story .vd-sec { margin: 60px 20px 0; padding-top: 48px; }
    .vd-story .vd-split, .vd-story .vd-split.vd-rev { grid-template-columns: 1fr; gap: 30px; }
    .vd-story .vd-split.vd-rev > .vd-text { order: 0; }
    .vd-story .vd-text p { font-size: 17.5px; line-height: 1.75; }
    .vd-story .vd-duo { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }
    .vd-story .vd-acts { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
    .vd-story .vd-acts > div { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; font-size: 16.5px; }
    .vd-story .vd-acts > div::before { flex: none; margin-bottom: 0; width: 30px; height: 30px; font-size: 14.5px; }
    .vd-story .vd-pills span:not(.vd-hand) { padding: 6px 15px; font-size: 15px; }
    .vd-story .vd-quote { margin: 60px 14px 0; padding: 40px 20px 44px; border-radius: 28px; }
    .vd-story .vd-quote p { font-size: 16.5px; }
    .vd-story .vd-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
    .vd-story .vd-end { grid-template-columns: 1fr; gap: 0; margin: 64px 14px 20px; padding: 36px 22px 0; border-radius: 28px; }
    .vd-story .vd-end > div { padding-bottom: 8px; }
    .vd-story .vd-end p { font-size: 17.5px; }
    .vd-story .vd-logos { gap: 14px; padding: 12px 18px; }
    .vd-story .vd-logo-vin img { height: 52px; }
    .vd-story .vd-logo-champ img { height: 40px; }
    .vd-story .vd-mascot img { width: 130px; margin-left: auto; }
}

/* ── 스티커 (그림은 public/images/story, 만드는 법은 업무 폴더의 _도구/make_stickers.py) ── */
.vd-story :is(.vd-hero, .vd-shot, .vd-quote, .vd-end, .vd-lead) { position: relative; }
.vd-story .vd-st { position: absolute; z-index: 3; width: 78px; height: 78px; background: center / contain no-repeat; filter: drop-shadow(0 4px 5px rgba(21, 26, 94, .2)); pointer-events: none; }
.vd-story .vd-st-bubble-q { background-image: url("/images/story/bubble-q.svg"); }
.vd-story .vd-st-bubble { background-image: url("/images/story/bubble.svg"); }
.vd-story .vd-st-bulb { background-image: url("/images/story/bulb.svg"); }
.vd-story .vd-st-camera { background-image: url("/images/story/camera.svg"); }
.vd-story .vd-st-clapper { background-image: url("/images/story/clapper.svg"); }
.vd-story .vd-st-cloud { background-image: url("/images/story/cloud.svg"); }
.vd-story .vd-st-flower-lilac { background-image: url("/images/story/flower-lilac.svg"); }
.vd-story .vd-st-flower { background-image: url("/images/story/flower.svg"); }
.vd-story .vd-st-guitar { background-image: url("/images/story/guitar.svg"); }
.vd-story .vd-st-heart { background-image: url("/images/story/heart.svg"); }
.vd-story .vd-st-laptop { background-image: url("/images/story/laptop.svg"); }
.vd-story .vd-st-note { background-image: url("/images/story/note.svg"); }
.vd-story .vd-st-paper { background-image: url("/images/story/paper.svg"); }
.vd-story .vd-st-pencil { background-image: url("/images/story/pencil.svg"); }
.vd-story .vd-st-rainbow { background-image: url("/images/story/rainbow.svg"); }
.vd-story .vd-st-ribbon { background-image: url("/images/story/ribbon.svg"); }
.vd-story .vd-st-robot { background-image: url("/images/story/robot.svg"); }
.vd-story .vd-st-sparkle-pink { background-image: url("/images/story/sparkle-pink.svg"); }
.vd-story .vd-st-sparkle { background-image: url("/images/story/sparkle.svg"); }
.vd-story .vd-st-star { background-image: url("/images/story/star.svg"); }

.vd-story .vd-st.vd-s { width: 54px; height: 54px; }
.vd-story .vd-st.vd-l { width: 98px; height: 98px; }
.vd-story .vd-tl { left: -30px; top: -34px; rotate: -12deg; }
.vd-story .vd-tr { right: -30px; top: -34px; rotate: 11deg; }
.vd-story .vd-bl { left: -30px; bottom: 26px; rotate: 9deg; }
.vd-story .vd-br { right: -28px; bottom: 28px; rotate: -9deg; }
.vd-story .vd-tr2 { right: 44px; top: -30px; rotate: -8deg; }
.vd-story .vd-tl2 { left: 48px; top: -28px; rotate: 9deg; }
/* 글 위 · 카드 안에 놓는 스티커 */
.vd-story .vd-st.vd-top { position: static; display: block; width: 70px; height: 70px; margin: 0 auto 14px; }
.vd-story .vd-acts > div .vd-st { position: static; display: block; width: 58px; height: 58px; margin: -4px 0 10px -6px; }
.vd-story .vd-acts.vd-stk > div::before { display: none; }
/* 첫 화면 제목 둘레 */
.vd-story .vd-hero > .vd-st-bubble-q { left: 9%; top: 40px; rotate: -12deg; }
.vd-story .vd-hero > .vd-st-robot { right: 9%; top: 34px; rotate: 9deg; width: 88px; height: 88px; }
.vd-story .vd-hero > .vd-st-sparkle { left: 5%; top: 168px; rotate: 6deg; }
.vd-story .vd-hero > .vd-st-sparkle-pink { right: 5%; top: 176px; rotate: -8deg; }
/* 마스킹테이프 — 색 줄무늬 띠 */
.vd-story .vd-tape { position: absolute; left: 50%; top: -14px; z-index: 2; width: 124px; height: 28px; translate: -50% 0; rotate: -3deg; border-radius: 2px; opacity: .9; background: repeating-linear-gradient(135deg, #FFD86B 0 9px, #FFE8A3 9px 18px); }
.vd-story .vd-tape.vd-pink { rotate: 3deg; background: repeating-linear-gradient(135deg, #FFB1C8 0 9px, #FFD3E0 9px 18px); }
.vd-story .vd-tape.vd-mint { rotate: -2deg; background: repeating-linear-gradient(135deg, #A5E6CB 0 9px, #CFF3E3 9px 18px); }
.vd-story .vd-tape.vd-sky { rotate: 2.5deg; background: repeating-linear-gradient(135deg, #A9DDF6 0 9px, #D3EEFB 9px 18px); }
/* 사진을 아주 살짝 기울인다 */
.vd-story .vd-ta { rotate: -1.1deg; }
.vd-story .vd-tb { rotate: 1.1deg; }
.vd-story .vd-logos .vd-st { position: static; width: 34px; height: 34px; }
.vd-story .vd-end > .vd-st-cloud { right: 250px; top: -36px; rotate: 6deg; }
@media (max-width: 860px) {
    .vd-story .vd-st { width: 52px; height: 52px; }
    .vd-story .vd-st.vd-s { width: 40px; height: 40px; }
    .vd-story .vd-st.vd-l { width: 64px; height: 64px; }
    .vd-story .vd-tl { left: -12px; top: -24px; }
    .vd-story .vd-tr { right: -12px; top: -24px; }
    .vd-story .vd-bl { left: -12px; bottom: 30px; }
    .vd-story .vd-br { right: -12px; bottom: 30px; }
    .vd-story .vd-tr2 { right: 26px; top: -22px; }
    .vd-story .vd-tl2 { left: 28px; top: -20px; }
    .vd-story .vd-st.vd-top { width: 56px; height: 56px; }
    .vd-story .vd-acts > div .vd-st { flex: none; width: 44px; height: 44px; margin: 0; }
    .vd-story .vd-hero > .vd-st-bubble-q { left: 6px; top: 8px; width: 44px; height: 44px; }
    .vd-story .vd-hero > .vd-st-robot { right: 6px; top: 6px; width: 50px; height: 50px; }
    .vd-story .vd-hero > .vd-st-sparkle, .vd-story .vd-hero > .vd-st-sparkle-pink { display: none; }
    .vd-story .vd-tape { top: -11px; width: 92px; height: 22px; }
    .vd-story .vd-end > .vd-st-cloud { right: 18px; top: -26px; }
}

/* 강사 소개 카드 */
.vd-story .vd-teacher { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-top: 60px; padding: 30px 38px; border: 1px solid #E9E4D8; border-radius: 28px; background: #fff; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); }
.vd-story .vd-teacher-pic img { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; }
.vd-story .vd-teacher strong { display: block; font-family: var(--font-heading); font-size: 27px; font-weight: 700; line-height: 1.3; color: var(--color-navy-ink); }
.vd-story .vd-teacher p strong { display: inline; font-family: inherit; font-size: inherit; line-height: inherit; background: linear-gradient(transparent 62%, #FFE48F 62%, #FFE48F 94%, transparent 94%); }
.vd-story .vd-role { display: block; margin-top: 2px; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: #5F6788; }
.vd-story .vd-teacher p { margin-top: 12px; font-size: 17.5px; line-height: 1.75; }
.vd-story .vd-teacher-logo img { width: auto; height: 84px; }
.vd-story .vd-logo-kaec img { width: auto; height: 66px; }
@media (max-width: 860px) {
    .vd-story .vd-teacher { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; padding: 26px 22px; text-align: center; }
    .vd-story .vd-teacher-pic img { width: 116px; height: 116px; margin: 0 auto; }
    .vd-story .vd-teacher strong { font-size: 23px; }
    .vd-story .vd-teacher p { font-size: 16.5px; }
    .vd-story .vd-teacher-logo img { height: 60px; margin: 0 auto; }
    .vd-story .vd-logo-kaec img { height: 50px; }
}

/* ── 사진 일기형의 과수원 · 농촌 봉사 판 (.vd-story 안의 .vd-farm) ─────────────────
   틀은 사진 일기형(.vd-story)을 그대로 쓰고, 색만 풀빛 · 흙빛으로 바꾼다. 나무 팻말 일정표와 농촌 스티커를 더한다. */
.vd-story .vd-farm { background: #FBFDF4; }
.vd-story .vd-farm .vd-hand { color: #4E9A3F; }
.vd-story .vd-farm .vd-shot .vd-hand { color: #6B7A5A; }
.vd-story .vd-farm .vd-hl,
.vd-story .vd-farm .vd-text p strong { background: linear-gradient(transparent 62%, #D9EFA8 62%, #D9EFA8 94%, transparent 94%); }
.vd-story .vd-farm .vd-shot > img { background: #EAF3DC; box-shadow: 0 24px 40px -28px rgba(46, 96, 40, .5); }

/* 첫 화면 — 파란 하늘에서 풀빛으로 */
.vd-story .vd-farm .vd-hero { background: linear-gradient(180deg, #CFEAFB 0, #E6F5FC 260px, #F1FAEA 520px, #FBFDF4 720px); }
.vd-story .vd-farm .vd-hero p { color: #4F5E63; }
.vd-story .vd-farm .vd-hero > .vd-st-sun { right: 8%; top: 30px; width: 96px; height: 96px; rotate: 8deg; }
.vd-story .vd-farm .vd-hero > .vd-st-cloud { left: 7%; top: 44px; width: 96px; height: 96px; rotate: -6deg; }
.vd-story .vd-farm .vd-hero > .vd-st-pear { left: 15%; top: 168px; rotate: -12deg; }
.vd-story .vd-farm .vd-hero > .vd-st-leaf { right: 16%; top: 178px; width: 56px; height: 56px; rotate: 14deg; }

.vd-story .vd-farm .vd-meta span { border-color: #D5E6C2; }
.vd-story .vd-farm .vd-sec { border-top-color: #CFE3B8; }
.vd-story .vd-farm .vd-lead p { color: #2F4A2B; }
.vd-story .vd-farm .vd-sec h3, .vd-story .vd-farm .vd-hero h2 { color: #1F3A24; }

/* 하루 일정 — 나무 팻말 줄 */
.vd-story .vd-day { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 72px 56px 0; }
.vd-story .vd-day > div { position: relative; min-width: 150px; padding: 16px 20px 18px; border-radius: 18px; text-align: center; background: #F3E3C6; box-shadow: inset 0 -5px 0 #E2CBA4, 0 14px 24px -20px rgba(120, 84, 40, .7); }
.vd-story .vd-day > div:nth-child(odd) { rotate: -1.4deg; }
.vd-story .vd-day > div:nth-child(even) { rotate: 1.2deg; }
.vd-story .vd-day .vd-st { position: static; display: block; width: 50px; height: 50px; margin: -34px auto 4px; }
.vd-story .vd-t { display: block; font-family: var(--font-heading); font-size: 19px; line-height: 1.4; color: #6B4A22; }
.vd-story .vd-l { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; color: #7A5B33; }

/* 세로 사진 */
.vd-story .vd-shot.vd-tall > img { aspect-ratio: 3 / 4; }
.vd-story .vd-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 56px; }
.vd-story .vd-trio .vd-shot > img { aspect-ratio: 3 / 4; }

/* 테이프 — 풀빛 · 크라프트 */
.vd-story .vd-tape.vd-leaf { rotate: -2.5deg; background: repeating-linear-gradient(135deg, #B9E3A0 0 9px, #D9F0C8 9px 18px); }
.vd-story .vd-tape.vd-kraft { rotate: 2.5deg; background: repeating-linear-gradient(135deg, #E3C79B 0 9px, #F0DDBD 9px 18px); }

.vd-story .vd-farm .vd-acts > div { border-color: #D5E6C2; box-shadow: 0 14px 30px -24px rgba(46, 96, 40, .6); color: #1F3A24; }
.vd-story .vd-farm .vd-quote { background: #EEF7DD; }
.vd-story .vd-farm .vd-quote h3 { color: #1F3A24; }
.vd-story .vd-farm .vd-quote p { color: #5B6B4E; }
.vd-story .vd-farm .vd-end { background: #E4F3D4; }
.vd-story .vd-farm .vd-end h3 { color: #1F3A24; }
.vd-story .vd-farm .vd-meet { color: #2F6B2A; }

.vd-story .vd-st-pear { background-image: url("/images/story/pear.svg"); }
.vd-story .vd-st-apple { background-image: url("/images/story/apple.svg"); }
.vd-story .vd-st-leaf { background-image: url("/images/story/leaf.svg"); }
.vd-story .vd-st-tree { background-image: url("/images/story/tree.svg"); }
.vd-story .vd-st-sprout { background-image: url("/images/story/sprout.svg"); }
.vd-story .vd-st-hat { background-image: url("/images/story/hat.svg"); }
.vd-story .vd-st-can { background-image: url("/images/story/can.svg"); }
.vd-story .vd-st-basket { background-image: url("/images/story/basket.svg"); }
.vd-story .vd-st-glove { background-image: url("/images/story/glove.svg"); }
.vd-story .vd-st-sun { background-image: url("/images/story/sun.svg"); }
.vd-story .vd-st-ladybug { background-image: url("/images/story/ladybug.svg"); }
.vd-story .vd-st-cosmos { background-image: url("/images/story/cosmos.svg"); }
.vd-story .vd-st-scissors { background-image: url("/images/story/scissors.svg"); }
.vd-story .vd-st-bus { background-image: url("/images/story/bus.svg"); }
.vd-story .vd-st-kimbap { background-image: url("/images/story/kimbap.svg"); }

@media (max-width: 860px) {
    .vd-story .vd-farm .vd-hero { padding-top: 76px; }
    .vd-story .vd-farm .vd-hero > .vd-st-sun { right: 10px; top: 10px; width: 54px; height: 54px; }
    .vd-story .vd-farm .vd-hero > .vd-st-cloud { left: 10px; top: 12px; width: 54px; height: 54px; }
    .vd-story .vd-farm .vd-hero > .vd-st-pear, .vd-story .vd-farm .vd-hero > .vd-st-leaf { display: none; }
    .vd-story .vd-day { gap: 26px 10px; margin: 56px 14px 0; }
    .vd-story .vd-day > div { min-width: 0; width: calc(50% - 5px); padding: 14px 8px 14px; }
    .vd-story .vd-day > div:last-child:nth-child(odd) { width: 100%; }
    .vd-story .vd-day .vd-st { width: 42px; height: 42px; margin-top: -30px; }
    .vd-story .vd-t { font-size: 17px; }
    .vd-story .vd-l { font-size: 14px; }
    .vd-story .vd-trio { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }
    .vd-story .vd-trio .vd-shot > img { aspect-ratio: 4 / 5; }
}

/* ── 사진 일기형의 마음 약국 판 (.vd-story 안의 .vd-pharm) ─────────────────
   틀은 사진 일기형을 그대로 쓰고, 민트 · 연보라 색과 처방전 · 약 봉투 카드, 밤하늘 색의 프로그램 소개 판을 더한다. */
.vd-story .vd-pharm { background: #FBFEFC; }
.vd-story .vd-pharm .vd-hand { color: #2FA58B; }
.vd-story .vd-pharm .vd-shot .vd-hand { color: #5E7A78; }
.vd-story .vd-pharm .vd-hl,
.vd-story .vd-pharm .vd-text p strong { background: linear-gradient(transparent 62%, #C6F0E2 62%, #C6F0E2 94%, transparent 94%); }
.vd-story .vd-pharm .vd-shot > img { background: #E4F5EF; box-shadow: 0 24px 40px -28px rgba(30, 110, 100, .5); }
.vd-story .vd-pharm .vd-hero { background:
    radial-gradient(circle at 1px 1px, rgba(47, 165, 139, .13) 1.3px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(180deg, #D9F5EC 0, #EEFAF6 360px, #FBFEFC 700px); }
.vd-story .vd-pharm .vd-hero > .vd-st-plus { left: 9%; top: 36px; rotate: -10deg; width: 84px; height: 84px; }
.vd-story .vd-pharm .vd-hero > .vd-st-pill { right: 9%; top: 34px; rotate: 10deg; width: 88px; height: 88px; }
.vd-story .vd-pharm .vd-hero > .vd-st-heart { left: 5%; top: 172px; width: 54px; height: 54px; rotate: 8deg; }
.vd-story .vd-pharm .vd-hero > .vd-st-sparkle { right: 5%; left: auto; top: 178px; rotate: -8deg; }
.vd-story .vd-pharm .vd-hero .vd-shot.vd-up > img { object-position: 50% 12%; }
.vd-story .vd-pharm .vd-sec { border-top-color: #BFE8DA; }
.vd-story .vd-pharm :is(.vd-hero h2, .vd-sec h3, .vd-end h3) { color: #173F4A; }
.vd-story .vd-pharm .vd-lead p { color: #173F4A; }

/* 처방전 — 한눈에 보기 */
.vd-story .vd-rx { position: relative; max-width: 620px; margin: 56px auto 0; padding: 30px 36px 28px; border: 2px dashed #9FDCC8; border-radius: 22px; background: #fff; box-shadow: 0 18px 30px -24px rgba(30, 110, 100, .6); rotate: -1deg; }
.vd-story .vd-rx > .vd-st { right: -26px; top: -30px; rotate: 12deg; }
.vd-story .vd-rx-title { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #173F4A; font-family: var(--font-heading); font-size: 24px; line-height: 1.3; color: #173F4A; }
.vd-story .vd-rx-no { margin-left: auto; font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #7FA9A0; }
.vd-story .vd-rx-row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #CDEBE0; font-size: 17px; line-height: 1.55; color: #23263F; }
.vd-story .vd-rx-row:last-child { border-bottom: 0; padding-bottom: 0; }
.vd-story .vd-rx-k { flex: none; width: 4.2em; font-weight: 800; color: #2FA58B; }

/* 약 봉투 석 장 */
.vd-story .vd-bags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.vd-story .vd-bag { position: relative; padding: 46px 22px 24px; border-radius: 6px 6px 22px 22px; background: #fff; box-shadow: 0 16px 30px -22px rgba(30, 110, 100, .6); text-align: center; }
.vd-story .vd-bag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(90deg, #7FD3B1 0 14px, #BFEBDB 14px 28px); }
.vd-story .vd-bag:nth-child(2)::before { background: repeating-linear-gradient(90deg, #FFB1C8 0 14px, #FFD9E4 14px 28px); }
.vd-story .vd-bag:nth-child(3)::before { background: repeating-linear-gradient(90deg, #C9BBF4 0 14px, #E4DDFA 14px 28px); }
.vd-story .vd-bag:nth-child(1) { rotate: -1.5deg; }
.vd-story .vd-bag:nth-child(3) { rotate: 1.5deg; }
.vd-story .vd-bag .vd-st { position: static; display: block; width: 72px; height: 72px; margin: 0 auto 10px; }
.vd-story .vd-bag-no { display: block; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: #7FA9A0; }
.vd-story .vd-bag strong { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.4; color: #173F4A; }
.vd-story .vd-bag p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: #5B6B70; }

/* 프로그램 소개 — 밤하늘 색 판 */
.vd-story .vd-app { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; margin: 92px 28px 0; padding: 56px 52px; border-radius: 40px; color: #fff; background:
    radial-gradient(circle at 12% 18%, rgba(255, 206, 69, .22), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(169, 221, 246, .2), transparent 34%),
    linear-gradient(160deg, #241A52 0%, #17123A 100%); }
.vd-story .vd-app > .vd-st { right: 34px; top: -34px; rotate: 10deg; }
.vd-story .vd-app-shot > img { width: 100%; border: 6px solid rgba(255, 255, 255, .14); border-radius: 26px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .8); rotate: -2deg; }
.post-content .vd-story .vd-app .vd-hand { color: #FFCE45; }
.post-content .vd-story .vd-app h3 { margin-top: 4px; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; color: #fff; }
.post-content .vd-story .vd-app p { margin-top: 14px; font-size: 18px; line-height: 1.75; color: #DCD8F5; }
.vd-story .vd-app p strong { font-weight: 700; color: #fff; }
.vd-story .vd-steps { display: grid; gap: 10px; margin-top: 22px; }
.vd-story .vd-steps > div { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .07); font-size: 16.5px; font-weight: 600; line-height: 1.5; color: #fff; }
.vd-story .vd-steps .vd-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFCE45; font-family: var(--font-heading); font-size: 15px; color: #17123A; }
.vd-story .vd-maker { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 206, 69, .14); font-size: 16px; line-height: 1.6; color: #FFF1C2; }
.vd-story .vd-maker .vd-st { position: static; flex: none; width: 44px; height: 44px; }
.post-content .vd-story .vd-link { margin-top: 22px; }
.post-content .vd-story .vd-link a { display: inline-block; padding: 12px 28px; border-radius: 999px; background: #FFCE45; font-size: 17px; font-weight: 800; line-height: 1.5; color: #17123A; text-decoration: none; box-shadow: 0 14px 24px -14px rgba(255, 206, 69, .9); }

/* 함께한 곳 — 로고 줄 */
.vd-story .vd-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin: 40px 56px 0; }
.vd-story .vd-partners .vd-hand { width: 100%; text-align: center; font-size: 22px; }
.vd-story .vd-partners .vd-logo-vin img { width: auto; height: 78px; }
.vd-story .vd-partners .vd-logo-champ img { width: auto; height: 64px; }
.vd-story .vd-partners .vd-st { position: static; width: 34px; height: 34px; }

.vd-story .vd-tape.vd-lilac { rotate: -2.5deg; background: repeating-linear-gradient(135deg, #C9BBF4 0 9px, #E4DDFA 9px 18px); }
.vd-story .vd-pharm .vd-end { background: #DDF4EC; }
.vd-story .vd-pharm .vd-meet { color: #1F7A68; }

.vd-story .vd-st-pill { background-image: url("/images/story/pill.svg"); }
.vd-story .vd-st-bottle { background-image: url("/images/story/bottle.svg"); }
.vd-story .vd-st-bandage { background-image: url("/images/story/bandage.svg"); }
.vd-story .vd-st-plus { background-image: url("/images/story/plus.svg"); }
.vd-story .vd-st-letter { background-image: url("/images/story/letter.svg"); }
.vd-story .vd-st-pinwheel { background-image: url("/images/story/pinwheel.svg"); }
.vd-story .vd-st-parasol { background-image: url("/images/story/parasol.svg"); }
.vd-story .vd-st-icecup { background-image: url("/images/story/icecup.svg"); }

@media (max-width: 860px) {
    .vd-story .vd-pharm .vd-hero { padding-top: 76px; }
    .vd-story .vd-pharm .vd-hero > .vd-st-plus { left: 10px; top: 10px; width: 50px; height: 50px; }
    .vd-story .vd-pharm .vd-hero > .vd-st-pill { right: 10px; top: 8px; width: 54px; height: 54px; }
    .vd-story .vd-pharm .vd-hero > .vd-st-heart, .vd-story .vd-pharm .vd-hero > .vd-st-sparkle { display: none; }
    .vd-story .vd-rx { margin: 40px 18px 0; padding: 22px 20px 20px; }
    .vd-story .vd-rx > .vd-st { right: -8px; top: -24px; }
    .vd-story .vd-rx-title { font-size: 20px; }
    .vd-story .vd-rx-row { gap: 10px; font-size: 15.5px; }
    .vd-story .vd-bags { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
    .vd-story .vd-bag, .vd-story .vd-bag:nth-child(1), .vd-story .vd-bag:nth-child(3) { rotate: none; padding: 32px 18px 20px; }
    .vd-story .vd-bag .vd-st { width: 56px; height: 56px; }
    .vd-story .vd-app { grid-template-columns: 1fr; gap: 30px; margin: 60px 10px 0; padding: 36px 20px 34px; border-radius: 30px; }
    .vd-story .vd-app > .vd-st { right: 14px; top: -24px; }
    .post-content .vd-story .vd-app p { font-size: 16.5px; }
    .vd-story .vd-steps > div { font-size: 15.5px; padding: 11px 13px; gap: 10px; }
    .vd-story .vd-maker { font-size: 15px; }
    .vd-story .vd-partners { margin: 30px 18px 0; gap: 8px 14px; }
    .vd-story .vd-partners .vd-logo-vin img { height: 58px; }
    .vd-story .vd-partners .vd-logo-champ img { height: 44px; }
}

/* ── 사진 일기형의 엄마 품 판 (.vd-story 안의 .vd-mom) ─────────────────
   틀은 사진 일기형을 그대로 쓰고, 살구 · 연분홍 색과 아기 수첩 카드, 턱받이 모양 카드, 누빔 담요 판을 더한다.
   아이들이 지내는 곳의 글이라 사진은 얼굴이 보이지 않는 것만 쓴다 (본문을 고칠 때도 같은 기준). */
.vd-story .vd-mom { background: #FFFBF6; }
.vd-story .vd-mom .vd-hand { color: #E08A6E; }
.vd-story .vd-mom .vd-shot .vd-hand { color: #9A7B6C; }
.vd-story .vd-mom .vd-hl,
.vd-story .vd-mom .vd-text p strong { background: linear-gradient(transparent 62%, #FFD9C7 62%, #FFD9C7 94%, transparent 94%); }
.vd-story .vd-mom .vd-shot > img { background: #FBEDE3; box-shadow: 0 24px 40px -28px rgba(160, 90, 60, .55); }
.vd-story .vd-mom :is(.vd-hero h2, .vd-sec h3, .vd-end h3) { color: #5A3A2E; }
.vd-story .vd-mom .vd-lead p { color: #5A3A2E; }
.vd-story .vd-mom :is(.vd-text p, .vd-end p) { color: #4A3B36; }
.vd-story .vd-mom .vd-hero { background:
    radial-gradient(ellipse 60% 300px at 50% 0, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(180deg, #FFDCD3 0, #FFEDE2 340px, #FFFBF6 700px); }
.vd-story .vd-mom .vd-hero p { color: #7A6157; }
.vd-story .vd-mom .vd-hero > .vd-st-moon { left: 9%; top: 34px; rotate: -10deg; width: 88px; height: 88px; }
.vd-story .vd-mom .vd-hero > .vd-st-bear { right: 9%; top: 32px; rotate: 8deg; width: 90px; height: 90px; }
.vd-story .vd-mom .vd-hero > .vd-st-heart { left: 5%; top: 176px; width: 54px; height: 54px; rotate: 10deg; }
.vd-story .vd-mom .vd-hero > .vd-st-sparkle-pink { right: 5%; top: 182px; rotate: -8deg; }
.vd-story .vd-mom .vd-hero .vd-shot > img { aspect-ratio: 2 / 1; object-position: 50% 60%; }
.vd-story .vd-mom .vd-sec { border-top-color: #F6D8C8; }

/* 아기 수첩 속지 — 한눈에 보기 */
.vd-story .vd-note { position: relative; max-width: 640px; margin: 56px auto 0; padding: 30px 36px 26px 64px; border-radius: 8px 24px 24px 8px; background:
    radial-gradient(circle at 26px 34px, #FFE3D6 7px, transparent 8px) 0 0 / 100% 64px,
    #fff; box-shadow: 0 18px 30px -24px rgba(160, 90, 60, .6); rotate: 1deg; }
.vd-story .vd-note > .vd-st { right: -26px; top: -32px; rotate: 12deg; }
.vd-story .vd-note-title { padding-bottom: 12px; border-bottom: 2px solid #F3C9B6; font-family: var(--font-heading); font-size: 23px; line-height: 1.3; color: #5A3A2E; }
.vd-story .vd-note-row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #F3D9CB; font-size: 17px; line-height: 1.55; color: #4A3B36; }
.vd-story .vd-note-row:last-child { border-bottom: 0; padding-bottom: 0; }
.vd-story .vd-note-k { flex: none; width: 4.2em; font-weight: 800; color: #E08A6E; }

/* 턱받이 모양 카드 석 장 */
.vd-story .vd-bibs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.vd-story .vd-bib { position: relative; padding: 46px 20px 28px; border-radius: 26px 26px 50% 50% / 26px 26px 34% 34%; text-align: center; background: #fff; box-shadow: 0 16px 30px -22px rgba(160, 90, 60, .6); }
.vd-story .vd-bib::before { content: ""; position: absolute; left: 50%; top: -22px; width: 76px; height: 44px; translate: -50% 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #FFFBF6; box-shadow: inset 0 -3px 0 #FFD9C7; }
.vd-story .vd-bib:nth-child(1) { background: #FFF1EA; }
.vd-story .vd-bib:nth-child(2) { background: #FFF7E0; }
.vd-story .vd-bib:nth-child(3) { background: #EEF8EF; }
.vd-story .vd-bib .vd-st { position: static; display: block; width: 76px; height: 76px; margin: 0 auto 8px; }
.vd-story .vd-bib strong { display: block; font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.4; color: #5A3A2E; }
.vd-story .vd-bib p { margin-top: 6px; padding-bottom: 14px; font-size: 15.5px; line-height: 1.6; color: #7A6157; }

/* 누빔 담요 판 — 큰 한 문장 */
.vd-story .vd-quilt { position: relative; margin: 92px 28px 0; padding: 64px 40px 68px; border: 3px dashed #F6BFA9; border-radius: 40px; outline: 10px solid #FFE6DA; outline-offset: -3px; text-align: center; background:
    linear-gradient(45deg, transparent 49.2%, rgba(255, 255, 255, .7) 49.2% 50.8%, transparent 50.8%) 0 0 / 44px 44px,
    linear-gradient(-45deg, transparent 49.2%, rgba(255, 255, 255, .7) 49.2% 50.8%, transparent 50.8%) 0 0 / 44px 44px,
    #FFE6DA; }
.post-content .vd-story .vd-quilt h3 { margin-top: 10px; font-size: clamp(25px, 3.3vw, 42px); line-height: 1.42; color: #5A3A2E; }
.post-content .vd-story .vd-quilt p { margin-top: 16px; font-size: 18px; line-height: 1.7; color: #7A6157; }

/* 넓은 사진 한 장 */
.vd-story .vd-wide { margin-top: 56px; }
.vd-story .vd-wide.vd-shot > img { aspect-ratio: 2 / 1; }

.vd-story .vd-tape.vd-apricot { rotate: -2.5deg; background: repeating-linear-gradient(135deg, #FFCBA4 0 9px, #FFE3CC 9px 18px); }
.vd-story .vd-tape.vd-rose { rotate: 2.5deg; background: repeating-linear-gradient(135deg, #FFC2CF 0 9px, #FFE0E6 9px 18px); }
.vd-story .vd-mom .vd-end { background: #FFE9DF; }
.vd-story .vd-mom .vd-meet { color: #C2603F; }

.vd-story .vd-st-milk { background-image: url("/images/story/milk.svg"); }
.vd-story .vd-st-bear { background-image: url("/images/story/bear.svg"); }
.vd-story .vd-st-rattle { background-image: url("/images/story/rattle.svg"); }
.vd-story .vd-st-blocks { background-image: url("/images/story/blocks.svg"); }
.vd-story .vd-st-socks { background-image: url("/images/story/socks.svg"); }
.vd-story .vd-st-duck { background-image: url("/images/story/duck.svg"); }
.vd-story .vd-st-moon { background-image: url("/images/story/moon.svg"); }
.vd-story .vd-st-pram { background-image: url("/images/story/pram.svg"); }

@media (max-width: 860px) {
    .vd-story .vd-mom .vd-hero { padding-top: 76px; }
    .vd-story .vd-mom .vd-hero > .vd-st-moon { left: 10px; top: 8px; width: 52px; height: 52px; }
    .vd-story .vd-mom .vd-hero > .vd-st-bear { right: 10px; top: 8px; width: 54px; height: 54px; }
    .vd-story .vd-mom .vd-hero > .vd-st-heart, .vd-story .vd-mom .vd-hero > .vd-st-sparkle-pink { display: none; }
    .vd-story .vd-mom .vd-hero .vd-shot > img { aspect-ratio: 4 / 3; }
    .vd-story .vd-note { margin: 40px 18px 0; padding: 22px 18px 20px 48px; background:
        radial-gradient(circle at 20px 30px, #FFE3D6 6px, transparent 7px) 0 0 / 100% 58px,
        #fff; }
    .vd-story .vd-note > .vd-st { right: -8px; top: -24px; }
    .vd-story .vd-note-title { font-size: 20px; }
    .vd-story .vd-note-row { gap: 10px; font-size: 15.5px; }
    .vd-story .vd-bibs { grid-template-columns: 1fr; gap: 34px; margin: 46px 30px 0; }
    .vd-story .vd-bib .vd-st { width: 60px; height: 60px; }
    .vd-story .vd-quilt { margin: 60px 12px 0; padding: 44px 20px 46px; border-radius: 30px; }
    .post-content .vd-story .vd-quilt p { font-size: 16.5px; }
    .vd-story .vd-wide { margin-top: 36px; }
    .vd-story .vd-wide.vd-shot > img { aspect-ratio: 4 / 3; }
}

/* ── 사진 일기형의 캠프 판 (.vd-story 안의 .vd-camp) ─────────────────
   틀은 사진 일기형을 그대로 쓰고, 숲 · 하늘 · 모닥불 색과 "둘이 하나" 띠, DAY 깃발 머리말, 캠프의 밤 판, 영상 자리를 더한다. */
.vd-story .vd-camp { background: #FBFDF7; }
.vd-story .vd-camp .vd-hand { color: #E8823A; }
.vd-story .vd-camp .vd-shot .vd-hand { color: #5E7767; }
.vd-story .vd-camp .vd-hl,
.vd-story .vd-camp .vd-text p strong { background: linear-gradient(transparent 62%, #FFDDB8 62%, #FFDDB8 94%, transparent 94%); }
.vd-story .vd-camp .vd-shot > img { background: #E6F2E4; box-shadow: 0 24px 40px -28px rgba(30, 80, 50, .55); }
.vd-story .vd-camp :is(.vd-hero h2, .vd-sec h3, .vd-end h3) { color: #1E4634; }
.vd-story .vd-camp .vd-lead p { color: #1E4634; }
/* 첫 화면 — 하늘 아래 산 능선 */
.vd-story .vd-camp .vd-hero { background:
    linear-gradient(135deg, transparent 49.5%, #CFE9C9 50%) 0 430px / 50% 120px no-repeat,
    linear-gradient(225deg, transparent 49.5%, #BFE0BC 50%) 100% 410px / 56% 140px no-repeat,
    linear-gradient(180deg, #CDEBFB 0, #E9F6FC 330px, #EAF5E2 550px, #FBFDF7 720px); }
.vd-story .vd-camp .vd-hero p { color: #4F6660; }
.vd-story .vd-camp .vd-hero > .vd-st-tent { left: 8%; top: 30px; rotate: -8deg; width: 94px; height: 94px; }
.vd-story .vd-camp .vd-hero > .vd-st-sun { right: 8%; top: 28px; rotate: 8deg; width: 94px; height: 94px; }
.vd-story .vd-camp .vd-hero > .vd-st-pine { left: 4%; top: 176px; width: 60px; height: 60px; rotate: -6deg; }
.vd-story .vd-camp .vd-hero > .vd-st-campfire { right: 4%; top: 180px; width: 60px; height: 60px; rotate: 6deg; }
.vd-story .vd-camp .vd-hero .vd-shot > img { object-position: 50% 50%; }
.vd-story .vd-camp .vd-sec { border-top-color: #CFE3C8; }

/* 둘이 하나 — 서울 + 수원 */
.vd-story .vd-one { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin: 48px 56px 0; }
.vd-story .vd-one .vd-hand { width: 100%; text-align: center; font-size: 23px; }
.vd-story .vd-city { padding: 12px 30px; border-radius: 999px; font-family: var(--font-heading); font-size: 24px; line-height: 1.4; color: #fff; box-shadow: 0 14px 24px -16px rgba(30, 80, 50, .7); }
.vd-story .vd-city.vd-seoul { background: #4A9FD8; rotate: -2deg; }
.vd-story .vd-city.vd-suwon { background: #F08A4B; rotate: 2deg; }
.vd-story .vd-one .vd-st { position: static; width: 78px; height: 78px; }
.vd-story .vd-eq { font-family: var(--font-heading); font-size: 30px; color: #1E4634; }
.vd-story .vd-city.vd-all { background: #2F7D55; font-size: 26px; rotate: -1deg; }

/* 캠프 수첩 */
.vd-story .vd-campnote { position: relative; max-width: 660px; margin: 52px auto 0; padding: 30px 36px 26px; border: 2px solid #CFE3C8; border-radius: 22px; background: #fff; box-shadow: 0 18px 30px -24px rgba(30, 80, 50, .6); rotate: -1deg; }
.vd-story .vd-campnote > .vd-st { right: -28px; top: -34px; rotate: 12deg; }
.vd-story .vd-campnote-title { padding-bottom: 12px; border-bottom: 2px solid #1E4634; font-family: var(--font-heading); font-size: 23px; line-height: 1.3; color: #1E4634; }
.vd-story .vd-campnote-row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #D9E8D3; font-size: 17px; line-height: 1.55; color: #23263F; }
.vd-story .vd-campnote-row:last-child { border-bottom: 0; padding-bottom: 0; }
.vd-story .vd-campnote-k { flex: none; width: 4.2em; font-weight: 800; color: #2F7D55; }

/* DAY 깃발 머리말 */
.vd-story .vd-day-head { display: flex; align-items: center; gap: 22px; margin: 100px 56px 0; }
.vd-story .vd-pennant { flex: none; padding: 14px 44px 14px 26px; font-family: var(--font-heading); font-size: 30px; line-height: 1.2; color: #fff; background: #F08A4B; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); }
.vd-story .vd-day-head.vd-d2 .vd-pennant { background: #2F9E7E; }
.vd-story .vd-day-head.vd-d3 .vd-pennant { background: #4A7FD0; }
.vd-story .vd-day-date { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; color: #6B7F74; }
.vd-story .vd-day-theme { display: block; font-family: var(--font-heading); font-size: clamp(21px, 2.4vw, 28px); line-height: 1.35; color: #1E4634; }
.vd-story .vd-camp .vd-day-head + .vd-sec { margin-top: 36px; padding-top: 0; border-top: 0; }

/* 캠프의 밤 */
.vd-story .vd-night { position: relative; margin: 92px 28px 0; padding: 56px 52px 60px; border-radius: 40px; color: #fff; background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .9) 1.4px, transparent 2px) 0 0 / 120px 110px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .7) 1.2px, transparent 2px) 0 0 / 90px 130px,
    radial-gradient(ellipse at 50% 120%, rgba(255, 154, 77, .45), transparent 60%),
    linear-gradient(180deg, #1B2A4E 0%, #2A2550 100%); }
.vd-story .vd-night > .vd-st { right: 40px; top: -36px; rotate: 8deg; }
.post-content .vd-story .vd-night .vd-hand { color: #FFCE45; }
.post-content .vd-story .vd-night h3 { margin-top: 4px; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; color: #fff; }
.post-content .vd-story .vd-night p { margin-top: 12px; font-size: 18px; line-height: 1.75; color: #DCE0F5; }
.vd-story .vd-night .vd-duo { margin-top: 34px; }
.vd-story .vd-night .vd-shot > img { box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8); }
.post-content .vd-story .vd-night .vd-shot .vd-hand { color: #C9CEEA; }

/* 영상으로 보는 캠프 */
.vd-story .vd-film { position: relative; margin: 92px 56px 0; padding: 44px 40px 40px; border-radius: 36px; text-align: center; background: #FFF1DF; }
.vd-story .vd-film > .vd-st { left: -24px; top: -30px; rotate: -10deg; }
.post-content .vd-story .vd-film h3 { margin-top: 4px; font-size: clamp(25px, 3vw, 36px); line-height: 1.3; color: #1E4634; }
.post-content .vd-story .vd-film p { margin-top: 10px; font-size: 17.5px; line-height: 1.7; color: #5E6B5F; }
.post-content .vd-story .vd-film .youtube-embed { margin: 26px 0 0; border-radius: 22px; box-shadow: 0 24px 40px -24px rgba(30, 80, 50, .7); }

.vd-story .vd-tape.vd-forest { rotate: -2.5deg; background: repeating-linear-gradient(135deg, #9BD3AE 0 9px, #CDEBD6 9px 18px); }
.vd-story .vd-tape.vd-flame { rotate: 2.5deg; background: repeating-linear-gradient(135deg, #FFB37A 0 9px, #FFD9BC 9px 18px); }
.vd-story .vd-camp .vd-end { background: #E2F1DD; }
.vd-story .vd-camp .vd-meet { color: #2F7D55; }

.vd-story .vd-st-tent { background-image: url("/images/story/tent.svg"); }
.vd-story .vd-st-campfire { background-image: url("/images/story/campfire.svg"); }
.vd-story .vd-st-marshmallow { background-image: url("/images/story/marshmallow.svg"); }
.vd-story .vd-st-backpack { background-image: url("/images/story/backpack.svg"); }
.vd-story .vd-st-lantern { background-image: url("/images/story/lantern.svg"); }
.vd-story .vd-st-compass { background-image: url("/images/story/compass.svg"); }
.vd-story .vd-st-mountain { background-image: url("/images/story/mountain.svg"); }
.vd-story .vd-st-pine { background-image: url("/images/story/pine.svg"); }
.vd-story .vd-st-flag { background-image: url("/images/story/flag.svg"); }
.vd-story .vd-st-knot { background-image: url("/images/story/knot.svg"); }

@media (max-width: 860px) {
    .vd-story .vd-camp .vd-hero { padding-top: 76px; background: linear-gradient(180deg, #CDEBFB 0, #E9F6FC 260px, #EAF5E2 430px, #FBFDF7 580px); }
    .vd-story .vd-camp .vd-hero > .vd-st-tent { left: 10px; top: 8px; width: 54px; height: 54px; }
    .vd-story .vd-camp .vd-hero > .vd-st-sun { right: 10px; top: 8px; width: 54px; height: 54px; }
    .vd-story .vd-camp .vd-hero > .vd-st-pine, .vd-story .vd-camp .vd-hero > .vd-st-campfire { display: none; }
    .vd-story .vd-one { gap: 10px 8px; margin: 36px 14px 0; }
    .vd-story .vd-city { padding: 9px 18px; font-size: 18px; }
    .vd-story .vd-one .vd-st { width: 50px; height: 50px; }
    .vd-story .vd-eq { width: 100%; text-align: center; font-size: 24px; line-height: 1; }
    .vd-story .vd-city.vd-all { font-size: 20px; }
    .vd-story .vd-campnote { margin: 40px 18px 0; padding: 22px 20px 20px; }
    .vd-story .vd-campnote > .vd-st { right: -8px; top: -26px; }
    .vd-story .vd-campnote-title { font-size: 20px; }
    .vd-story .vd-campnote-row { gap: 10px; font-size: 15.5px; }
    .vd-story .vd-day-head { gap: 12px; margin: 68px 20px 0; }
    .vd-story .vd-pennant { padding: 10px 30px 10px 16px; font-size: 21px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
    .vd-story .vd-day-date { font-size: 13.5px; }
    .vd-story .vd-camp .vd-day-head + .vd-sec { margin-top: 26px; }
    .vd-story .vd-night { margin: 60px 10px 0; padding: 40px 20px 40px; border-radius: 30px; }
    .vd-story .vd-night > .vd-st { right: 16px; top: -26px; }
    .post-content .vd-story .vd-night p { font-size: 16.5px; }
    .vd-story .vd-film { margin: 60px 14px 0; padding: 36px 16px 22px; border-radius: 28px; }
    .vd-story .vd-film > .vd-st { left: -6px; top: -24px; }
    .post-content .vd-story .vd-film p { font-size: 16px; }
    .post-content .vd-story .vd-film .youtube-embed { border-radius: 16px; }
}

/* ── 사진 일기형의 모집 공지 판 (.vd-story 안의 .vd-recruit) ─────────────────
   포스터의 색(남색 · 주황 · 노랑, 모눈종이)을 그대로 가져와 눈에 확 띄게 만든 모집 공지. */
.vd-story .vd-recruit { background:
    linear-gradient(rgba(27, 34, 144, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(27, 34, 144, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    #FFFBEF; }
.vd-story .vd-recruit .vd-hl { background: linear-gradient(transparent 60%, #FFCE45 60%, #FFCE45 94%, transparent 94%); }

/* 첫 화면 — 남색 판에 큰 제목 */
.vd-story .vd-rc-hero { position: relative; margin: 0; padding: 64px 40px 150px; text-align: center; color: #fff; background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .1) 1.3px, transparent 0) 0 0 / 24px 24px,
    radial-gradient(90% 120% at 100% 0%, #2F3BD0 0%, transparent 60%),
    #1B2290; }
.vd-story .vd-rc-hero > .vd-st-sun { right: 7%; top: 30px; width: 96px; height: 96px; rotate: 10deg; }
.vd-story .vd-rc-hero > .vd-st-star { left: 7%; top: 36px; width: 80px; height: 80px; rotate: -12deg; }
.vd-story .vd-rc-hero > .vd-st-heart { left: 5%; bottom: 190px; width: 56px; height: 56px; rotate: 10deg; }
.vd-story .vd-rc-hero > .vd-st-sparkle { right: 5%; bottom: 196px; width: 56px; height: 56px; rotate: -8deg; }
.vd-story .vd-rc-badge { display: inline-block; padding: 9px 26px; border-radius: 999px; background: #FFCE45; font-family: var(--font-heading); font-size: 22px; line-height: 1.4; color: #151A5E; rotate: -2deg; box-shadow: 0 10px 0 rgba(0, 0, 0, .18); }
.post-content .vd-story .vd-rc-hero h2 { margin-top: 26px; font-size: clamp(42px, 7vw, 92px); line-height: 1.12; color: #fff; }
.post-content .vd-story .vd-rc-hero h2 em { font-style: normal; color: #FF8A3D; }
.post-content .vd-story .vd-rc-hero p { margin-top: 22px; font-size: 21px; font-weight: 600; line-height: 1.6; color: #E6E9FF; }
.vd-story .vd-rc-hero p strong { color: #FFCE45; font-weight: 800; }

/* 날짜 카드 두 장 — 첫 화면에 걸쳐서 */
.vd-story .vd-rc-keys { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: -96px 56px 0; }
.vd-story .vd-rc-key { position: relative; padding: 28px 30px 30px; border-radius: 28px; background: #DCEEFF; box-shadow: 0 22px 34px -22px rgba(21, 26, 94, .7); rotate: -1.2deg; }
.vd-story .vd-rc-key.vd-yellow { background: #FFE27A; rotate: 1.2deg; }
.vd-story .vd-rc-key .vd-tape { top: -13px; }
.vd-story .vd-rc-k { display: block; font-size: 16px; font-weight: 800; line-height: 1.5; color: #3A4290; }
.vd-story .vd-rc-key strong { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.25; color: #151A5E; }
.vd-story .vd-rc-key p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: #3A4270; }

/* 포스터 */
.vd-story .vd-rc-poster { position: relative; max-width: 620px; margin: 40px auto 0; padding: 0 20px; }
.vd-story .vd-rc-poster > img { width: 100%; border-radius: 18px; box-shadow: 0 30px 50px -28px rgba(21, 26, 94, .7); rotate: -1deg; }
.vd-story .vd-rc-poster > .vd-st-camera { left: -14px; top: -34px; rotate: -12deg; }
.vd-story .vd-rc-poster > .vd-st-flower { right: -10px; bottom: 40px; rotate: 10deg; }
.vd-story .vd-rc-poster .vd-hand { margin-top: 18px; text-align: center; color: #5F6788; }

.vd-story .vd-rc-title { margin: 92px 56px 0; text-align: center; }
.vd-story .vd-rc-title .vd-hand { color: #EA7131; }
.post-content .vd-story .vd-rc-title h3 { margin-top: 4px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; color: #151A5E; }

/* 봉사활동 여덟 칸 */
.vd-story .vd-rc-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px 28px 0; padding: 30px; border-radius: 36px; background: #1B2290; }
.vd-story .vd-rc-acts > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 10px 18px; border-radius: 22px; background: #fff; font-family: var(--font-heading); font-size: 18.5px; line-height: 1.35; text-align: center; color: #151A5E; }
.vd-story .vd-rc-acts > div.vd-more { justify-content: center; background: #FFCE45; font-size: 20px; }
.vd-story .vd-rc-acts .vd-st { position: static; width: 60px; height: 60px; }

/* 이런 친구를 기다려요 */
.vd-story .vd-rc-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px 56px 0; }
.vd-story .vd-rc-who > div { padding: 26px 22px; border: 1px solid #E9E4D8; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); text-align: center; font-size: 17.5px; font-weight: 600; line-height: 1.6; color: #23263F; }
.vd-story .vd-rc-who .vd-st { position: static; display: block; width: 64px; height: 64px; margin: 0 auto 10px; }

/* 문의 · 접수 */
.vd-story .vd-rc-contact { position: relative; margin: 92px 28px 28px; padding: 54px 44px 56px; border-radius: 40px; text-align: center; background: #FF8A3D; }
.vd-story .vd-rc-contact > .vd-st { left: 34px; top: -34px; rotate: -10deg; }
.post-content .vd-story .vd-rc-contact .vd-hand { color: #fff; }
.post-content .vd-story .vd-rc-contact h3 { margin-top: 2px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; color: #fff; }
.vd-story .vd-rc-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 28px auto 0; }
.vd-story .vd-rc-phone { padding: 20px 16px 22px; border-radius: 24px; background: #fff; }
.vd-story .vd-rc-phone .vd-rc-k { color: #EA7131; }
.vd-story .vd-rc-phone strong { display: block; font-family: var(--font-heading); font-size: clamp(24px, 3vw, 36px); line-height: 1.3; letter-spacing: .01em; color: #151A5E; }
.post-content .vd-story .vd-rc-contact p { margin-top: 22px; font-size: 17.5px; font-weight: 600; line-height: 1.7; color: #fff; }
.post-content .vd-story .vd-rc-contact .vd-link a { background: #1B2290; color: #fff; box-shadow: 0 14px 24px -14px rgba(21, 26, 94, .9); }

.vd-story .vd-st-coal { background-image: url("/images/story/coal.svg"); }
.vd-story .vd-st-shopbag { background-image: url("/images/story/shopbag.svg"); }
.vd-story .vd-st-house { background-image: url("/images/story/house.svg"); }
.vd-story .vd-st-globe { background-image: url("/images/story/globe.svg"); }

@media (max-width: 860px) {
    .vd-story .vd-rc-hero { padding: 56px 16px 120px; }
    .vd-story .vd-rc-hero > .vd-st-sun { right: 8px; top: 8px; width: 54px; height: 54px; }
    .vd-story .vd-rc-hero > .vd-st-star { left: 8px; top: 10px; width: 50px; height: 50px; }
    .vd-story .vd-rc-hero > .vd-st-heart, .vd-story .vd-rc-hero > .vd-st-sparkle { display: none; }
    .vd-story .vd-rc-badge { font-size: 17px; padding: 7px 18px; box-shadow: 0 7px 0 rgba(0, 0, 0, .18); }
    .post-content .vd-story .vd-rc-hero p { font-size: 17.5px; }
    .vd-story .vd-rc-keys { grid-template-columns: 1fr; gap: 18px; margin: -84px 18px 0; }
    .vd-story .vd-rc-key { padding: 22px 22px 24px; border-radius: 22px; }
    .vd-story .vd-rc-poster { margin-top: 52px; }
    .vd-story .vd-rc-poster > .vd-st-camera { left: 2px; top: -26px; }
    .vd-story .vd-rc-poster > .vd-st-flower { right: 4px; }
    .vd-story .vd-rc-title { margin: 64px 18px 0; }
    .vd-story .vd-rc-acts { grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 10px 0; padding: 16px; border-radius: 28px; }
    .vd-story .vd-rc-acts > div { padding: 14px 6px 13px; border-radius: 18px; font-size: 16px; }
    .vd-story .vd-rc-acts .vd-st { width: 46px; height: 46px; }
    .vd-story .vd-rc-who { grid-template-columns: 1fr; gap: 12px; margin: 26px 18px 0; }
    .vd-story .vd-rc-who > div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; font-size: 16.5px; }
    .vd-story .vd-rc-who .vd-st { flex: none; width: 48px; height: 48px; margin: 0; }
    .vd-story .vd-rc-contact { margin: 64px 10px 14px; padding: 44px 16px 40px; border-radius: 30px; }
    .vd-story .vd-rc-contact > .vd-st { left: 14px; top: -24px; }
    .vd-story .vd-rc-phones { grid-template-columns: 1fr; gap: 12px; }
    .post-content .vd-story .vd-rc-contact p { font-size: 16px; }
}

/* ── 랜딩 페이지 요소 ───────────────────────── */
.post-content .vd-story .vd-rc-hero .vd-link a { background: #FFCE45; color: #151A5E; font-weight: 800; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .6); }
.vd-story .vd-rc-hero.vd-tall { padding-bottom: 250px; }
.vd-story .vd-rc-heroshot { position: relative; z-index: 2; margin: -200px 56px 0; }
.vd-story .vd-rc-heroshot > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 88%; border: 8px solid #fff; border-radius: 32px; box-shadow: 0 34px 60px -30px rgba(21, 26, 94, .8); }
.vd-story .vd-rc-heroshot .vd-hand { margin-top: 14px; text-align: center; color: #5F6788; }
.vd-story .vd-rc-keys.vd-flat { margin-top: 44px; }

/* 숫자로 보는 빈청 */
.vd-story .vd-rc-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 64px 56px 0; border-top: 3px solid #151A5E; border-bottom: 3px solid #151A5E; }
.vd-story .vd-rc-nums > div { padding: 26px 16px 24px; text-align: center; }
.vd-story .vd-rc-nums > div + div { border-left: 1px dashed #B9BEDD; }
.vd-story .vd-rc-nums strong { display: block; font-family: var(--font-heading); font-size: clamp(44px, 6vw, 76px); line-height: 1; color: #1B2290; }
.vd-story .vd-rc-nums strong em { font-style: normal; font-size: .42em; color: #EA7131; }
.vd-story .vd-rc-nums span { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #3A4270; }

/* 활동 사진 카드 */
.vd-story .vd-rc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin: 36px 28px 0; }
.vd-story .vd-rc-card { position: relative; grid-column: span 6; height: 380px; overflow: hidden; border-radius: 30px; background: #151A5E; box-shadow: 0 24px 40px -28px rgba(21, 26, 94, .8); }
.vd-story .vd-rc-card.vd-big { grid-column: span 12; height: 470px; }
.vd-story .vd-rc-card > img { width: 100%; height: 100%; object-fit: cover; }
.vd-story .vd-rc-card.vd-top > img { object-position: 50% 20%; }
.vd-story .vd-rc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 28px 24px; color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 70, .82) 62%, rgba(13, 17, 70, .94) 100%); }
.vd-story .vd-rc-tag { display: inline-block; padding: 4px 13px; border-radius: 999px; background: #FFCE45; font-size: 13.5px; font-weight: 800; line-height: 1.5; color: #151A5E; }
.vd-story .vd-rc-tag.vd-o { background: #FF8A3D; color: #fff; }
.vd-story .vd-rc-tag.vd-s { background: #A9DDF6; }
.vd-story .vd-rc-tag.vd-g { background: #A5E6CB; }
.vd-story .vd-rc-month { margin-left: 8px; font-size: 14px; font-weight: 700; color: #DDE1FF; }
.vd-story .vd-rc-cap strong { display: block; margin-top: 8px; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.3; color: #fff; }
.post-content .vd-story .vd-rc-cap p { margin-top: 6px; font-size: 16.5px; line-height: 1.6; color: #E6E9FF; }

/* 한 해 흐름 */
.vd-story .vd-rc-year { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px 40px 0; }
.vd-story .vd-rc-year > div { padding: 10px 18px; border: 2px solid #151A5E; border-radius: 999px; background: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: #151A5E; }
.vd-story .vd-rc-year b { margin-right: 6px; font-family: var(--font-heading); font-weight: 700; color: #EA7131; }
.vd-story .vd-rc-year > div.vd-soon { border-style: dashed; background: #FFF4C7; }

@media (max-width: 860px) {
    .vd-story .vd-rc-hero.vd-tall { padding-bottom: 150px; }
    .vd-story .vd-rc-heroshot { margin: -110px 14px 0; }
    .vd-story .vd-rc-heroshot > img { aspect-ratio: 4 / 3; border-width: 5px; border-radius: 22px; }
    .vd-story .vd-rc-keys.vd-flat { margin-top: 34px; }
    .vd-story .vd-rc-nums { margin: 44px 18px 0; }
    .vd-story .vd-rc-nums > div { padding: 18px 6px 16px; }
    .vd-story .vd-rc-nums span { font-size: 13px; }
    .vd-story .vd-rc-grid { gap: 12px; margin: 26px 10px 0; }
    .vd-story .vd-rc-card, .vd-story .vd-rc-card.vd-big { grid-column: span 12; height: 300px; border-radius: 22px; }
    .vd-story .vd-rc-cap { padding: 70px 18px 18px; }
    .post-content .vd-story .vd-rc-cap p { font-size: 15px; }
    .vd-story .vd-rc-year { gap: 8px; margin: 26px 14px 0; }
    .vd-story .vd-rc-year > div { padding: 8px 14px; font-size: 14.5px; }
}

/* ── 사진 일기형의 자선 축제 판 (.vd-story 안의 .vd-fest) ─────────────────
   틀은 사진 일기형을 그대로 쓰고, 가랜드 깃발 · 색종이 · 입장권 · 무대 순서판으로 축제 느낌을 낸다. */
.vd-story .vd-fest { background: #FFFBF2; }
.vd-story .vd-fest .vd-hand { color: #F0683C; }
.vd-story .vd-fest .vd-shot .vd-hand { color: #8A6F5C; }
.vd-story .vd-fest .vd-hl,
.vd-story .vd-fest .vd-text p strong { background: linear-gradient(transparent 60%, #FFD86B 60%, #FFD86B 94%, transparent 94%); }
.vd-story .vd-fest .vd-shot > img { background: #FBEFD8; box-shadow: 0 24px 40px -28px rgba(160, 80, 30, .55); }
.vd-story .vd-fest :is(.vd-hero h2, .vd-sec h3, .vd-end h3) { color: #3B2A55; }
.vd-story .vd-fest .vd-lead p { color: #3B2A55; }

/* 가랜드 깃발 띠 */
.vd-story .vd-bunting { height: 46px; background:
    conic-gradient(from -45deg at 50% 100%, #FF7F6B 90deg, transparent 0) 0 8px / 240px 34px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #5CC3EE 90deg, transparent 0) 60px 8px / 240px 34px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #FFCE45 90deg, transparent 0) 120px 8px / 240px 34px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #7FD3B1 90deg, transparent 0) 180px 8px / 240px 34px repeat-x,
    linear-gradient(#3B2A55, #3B2A55) 0 6px / 100% 3px no-repeat; }

/* 첫 화면 — 색종이가 날리는 따뜻한 노랑 */
.vd-story .vd-fest .vd-hero { padding-top: 34px; background:
    radial-gradient(circle, #FF7F6B 5px, transparent 6px) 6% 150px / 210px 190px,
    radial-gradient(circle, #5CC3EE 4px, transparent 5px) 30% 90px / 170px 230px,
    radial-gradient(circle, #7FD3B1 5px, transparent 6px) 78% 120px / 230px 170px,
    radial-gradient(circle, #C9BBF4 4px, transparent 5px) 92% 200px / 190px 210px,
    linear-gradient(180deg, #FFE7A0 0, #FFF3CE 380px, #FFFBF2 720px); }
.vd-story .vd-fest .vd-hero p { color: #6B5560; }
.vd-story .vd-f25 { display: inline-grid; place-items: center; width: 132px; height: 132px; margin-bottom: 14px; border: 5px solid #fff; border-radius: 50%; background: #FF7F6B; font-family: var(--font-heading); font-size: 52px; line-height: 1; color: #fff; rotate: -8deg; box-shadow: 0 16px 26px -14px rgba(160, 60, 30, .8); }
.vd-story .vd-f25 .vd-f25s { display: block; margin-top: -30px; font-size: 19px; color: #FFF3CE; }
.vd-story .vd-fest .vd-hero > .vd-st-balloon { left: 8%; top: 70px; width: 96px; height: 96px; rotate: -8deg; }
.vd-story .vd-fest .vd-hero > .vd-st-popper { right: 8%; top: 76px; width: 96px; height: 96px; rotate: 8deg; }
.vd-story .vd-fest .vd-hero > .vd-st-sunflower { left: 4%; top: 250px; width: 62px; height: 62px; }
.vd-story .vd-fest .vd-hero > .vd-st-gift { right: 4%; top: 256px; width: 62px; height: 62px; rotate: 8deg; }
.vd-story .vd-fest .vd-hero .vd-shot > img { aspect-ratio: 16 / 9; object-position: 50% 80%; }
.vd-story .vd-fest .vd-sec { border-top-color: #F6DDB6; }

/* 입장권 */
.vd-story .vd-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 190px; max-width: 820px; margin: 56px auto 0; border-radius: 22px; background: #fff; box-shadow: 0 20px 34px -24px rgba(160, 80, 30, .7); rotate: -1deg; }
.vd-story .vd-ticket > .vd-st { left: -30px; top: -34px; rotate: -12deg; }
.vd-story .vd-ticket-main { padding: 28px 30px 26px 36px; }
.vd-story .vd-ticket-title { font-family: var(--font-heading); font-size: 24px; line-height: 1.3; color: #3B2A55; }
.vd-story .vd-ticket-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed #F1DDBE; font-size: 16.5px; line-height: 1.55; color: #3A3340; }
.vd-story .vd-ticket-row:last-child { border-bottom: 0; padding-bottom: 0; }
.vd-story .vd-ticket-k { flex: none; width: 3.4em; font-weight: 800; color: #F0683C; }
.vd-story .vd-ticket-stub { display: grid; place-items: center; align-content: center; gap: 4px; padding: 20px 14px; border-left: 3px dashed #F6C9A8; border-radius: 0 22px 22px 0; background: #FFF1DC; text-align: center; }
.vd-story .vd-ticket-stub strong { font-family: var(--font-heading); font-size: 46px; line-height: 1; color: #FF7F6B; }
.vd-story .vd-ticket-stub span { font-size: 14px; font-weight: 800; line-height: 1.5; color: #8A6F5C; }

/* 무대 순서판 */
.vd-story .vd-lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.vd-story .vd-lineup > div { padding: 24px 22px 22px; border-radius: 26px; background: #3B2A55; color: #fff; box-shadow: 0 18px 30px -22px rgba(59, 42, 85, .9); }
.vd-story .vd-lineup > div:nth-child(2) { background: #F0683C; }
.vd-story .vd-lineup > div:nth-child(3) { background: #2F9E7E; }
.vd-story .vd-lu-t { display: block; font-family: var(--font-heading); font-size: 21px; line-height: 1.35; color: #FFE08A; }
.vd-story .vd-lineup > div:nth-child(2) .vd-lu-t, .vd-story .vd-lineup > div:nth-child(3) .vd-lu-t { color: #fff; }
.vd-story .vd-lu-i { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .35); font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.vd-story .vd-lu-t + .vd-lu-i { margin-top: 12px; }

/* 구호 띠 */
.vd-story .vd-cheer { position: relative; margin: 92px 28px 0; padding: 60px 40px 62px; border-radius: 40px; text-align: center; color: #fff; background:
    radial-gradient(circle, rgba(255, 255, 255, .5) 3px, transparent 4px) 0 0 / 90px 80px,
    radial-gradient(circle, rgba(255, 224, 138, .8) 4px, transparent 5px) 40px 30px / 130px 110px,
    linear-gradient(135deg, #FF7F6B 0%, #F0683C 100%); }
.post-content .vd-story .vd-cheer .vd-hand { color: #FFF3CE; }
.post-content .vd-story .vd-cheer h3 { margin-top: 8px; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.35; color: #fff; }
.post-content .vd-story .vd-cheer p { margin-top: 14px; font-size: 18px; font-weight: 600; color: #FFF3CE; }

.vd-story .vd-tape.vd-coral { rotate: -2.5deg; background: repeating-linear-gradient(135deg, #FF9F8F 0 9px, #FFD0C7 9px 18px); }
.vd-story .vd-fest .vd-end { background: #FFE9B8; }
.vd-story .vd-fest .vd-meet { color: #C2542B; }

.vd-story .vd-st-balloon { background-image: url("/images/story/balloon.svg"); }
.vd-story .vd-st-gift { background-image: url("/images/story/gift.svg"); }
.vd-story .vd-st-mic { background-image: url("/images/story/mic.svg"); }
.vd-story .vd-st-sunflower { background-image: url("/images/story/sunflower.svg"); }
.vd-story .vd-st-ticket { background-image: url("/images/story/ticket.svg"); }
.vd-story .vd-st-popper { background-image: url("/images/story/popper.svg"); }
.vd-story .vd-st-cake { background-image: url("/images/story/cake.svg"); }
.vd-story .vd-st-bike { background-image: url("/images/story/bike.svg"); }

@media (max-width: 860px) {
    .vd-story .vd-bunting { height: 34px; background-size: 160px 24px, 160px 24px, 160px 24px, 160px 24px, 100% 3px; background-position: 0 8px, 40px 8px, 80px 8px, 120px 8px, 0 6px; }
    .vd-story .vd-fest .vd-hero { padding-top: 22px; }
    .vd-story .vd-f25 { width: 96px; height: 96px; font-size: 38px; }
    .vd-story .vd-f25 .vd-f25s { margin-top: -22px; font-size: 14px; }
    .vd-story .vd-fest .vd-hero > .vd-st-balloon { left: 6px; top: 44px; width: 52px; height: 52px; }
    .vd-story .vd-fest .vd-hero > .vd-st-popper { right: 6px; top: 46px; width: 52px; height: 52px; }
    .vd-story .vd-fest .vd-hero > .vd-st-sunflower, .vd-story .vd-fest .vd-hero > .vd-st-gift { display: none; }
    .vd-story .vd-fest .vd-hero .vd-shot > img { aspect-ratio: 4 / 3; }
    .vd-story .vd-ticket { grid-template-columns: 1fr; margin: 40px 18px 0; }
    .vd-story .vd-ticket > .vd-st { left: -8px; top: -26px; }
    .vd-story .vd-ticket-main { padding: 22px 20px 18px; }
    .vd-story .vd-ticket-title { font-size: 20px; }
    .vd-story .vd-ticket-row { font-size: 15.5px; gap: 10px; }
    .vd-story .vd-ticket-stub { display: flex; justify-content: center; gap: 12px; border-left: 0; border-top: 3px dashed #F6C9A8; border-radius: 0 0 22px 22px; padding: 14px; }
    .vd-story .vd-ticket-stub strong { font-size: 34px; }
    .vd-story .vd-lineup { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
    .vd-story .vd-lineup > div { padding: 20px 18px 18px; border-radius: 22px; }
    .vd-story .vd-cheer { margin: 60px 10px 0; padding: 42px 18px 44px; border-radius: 30px; }
    .post-content .vd-story .vd-cheer p { font-size: 16px; }
}

/* ── 사진 일기형의 빈마을 가족축제 판 (.vd-story 안의 .vd-vin) ─────────────────
   2026년 축제 포스터(하늘색 · 남색 · 노랑, 1층 → 2층 → 3층으로 쌓인 빈마을 건물)를 그대로 따라,
   글도 한 층씩 올라가며 읽게 만든다. */
.vd-story .vd-vin { background: #F6FBFF; }
.vd-story .vd-vin .vd-hand { color: #E79A12; }
.vd-story .vd-vin .vd-shot .vd-hand { color: #5B7390; }
.vd-story .vd-vin .vd-hl,
.vd-story .vd-vin .vd-text p strong { background: linear-gradient(transparent 60%, #FFD86B 60%, #FFD86B 94%, transparent 94%); }
.vd-story .vd-vin .vd-shot > img { background: #DCEEFB; box-shadow: 0 24px 40px -28px rgba(10, 63, 134, .6); }
.vd-story .vd-vin :is(.vd-sec h3, .vd-end h3) { color: #0D3F86; }
.vd-story .vd-vin .vd-sec { border-top: 0; padding-top: 0; margin-top: 44px; }

/* 삼각 깃발 줄 */
.vd-story .vd-vin .vd-bunting { height: 46px; background:
    conic-gradient(from -45deg at 50% 100%, #F6B32B 90deg, transparent 0) 0 8px / 180px 34px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #0E57A8 90deg, transparent 0) 60px 8px / 180px 34px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #FFD86B 90deg, transparent 0) 120px 8px / 180px 34px repeat-x,
    linear-gradient(#0D3F86, #0D3F86) 0 6px / 100% 3px no-repeat,
    #8CCBF0; }

/* 첫 화면 — 포스터의 하늘 */
.vd-story .vd-vin .vd-hero { padding: 40px 40px 0; background:
    radial-gradient(ellipse 150px 54px at 12% 120px, #fff 98%, transparent 100%),
    radial-gradient(ellipse 110px 44px at 19% 150px, #fff 98%, transparent 100%),
    radial-gradient(ellipse 170px 60px at 88% 330px, #fff 98%, transparent 100%),
    radial-gradient(ellipse 120px 46px at 80% 366px, #fff 98%, transparent 100%),
    radial-gradient(ellipse 140px 50px at 8% 620px, #fff 98%, transparent 100%),
    linear-gradient(180deg, #8CCBF0 0, #A9DAF6 520px, #DDF0FC 860px, #F6FBFF 1040px); }
.vd-story .vd-vin .vd-hero .vd-hand { color: #0D4E9C; }
.post-content .vd-story .vd-vin .vd-hero h2 { margin-top: 10px; font-size: clamp(44px, 7vw, 96px); line-height: 1.1; color: #fff; -webkit-text-stroke: 10px #0D2F5E; paint-order: stroke fill; }
.post-content .vd-story .vd-vin .vd-hero h2 em { font-style: normal; color: #F6B32B; }
.post-content .vd-story .vd-vin .vd-hero p { margin-top: 20px; font-size: 20px; font-weight: 700; color: #0D3F86; }
.vd-story .vd-vin .vd-hero > .vd-st-balloon { left: 2%; top: 22px; width: 76px; height: 76px; rotate: -8deg; }
.vd-story .vd-vin .vd-hero > .vd-st-popper { right: 2%; top: 22px; width: 76px; height: 76px; rotate: 8deg; }
.vd-story .vd-vin .vd-hero > .vd-st-note { left: 5%; top: 420px; width: 62px; height: 62px; rotate: -10deg; }
.vd-story .vd-vin .vd-hero > .vd-st-sparkle { right: 6%; top: 440px; width: 58px; height: 58px; }
.vd-story .vd-poster { position: relative; max-width: 560px; margin: 44px auto 0; }
.vd-story .vd-poster > img { width: 100%; border: 8px solid #fff; border-radius: 26px; box-shadow: 0 36px 60px -30px rgba(10, 63, 134, .8); rotate: -1.5deg; }
.vd-story .vd-poster > .vd-st-guitar { right: -40px; top: 60px; width: 96px; height: 96px; rotate: 14deg; }
.vd-story .vd-poster > .vd-st-ticket { left: -44px; bottom: 80px; width: 96px; height: 96px; rotate: -12deg; }
.vd-story .vd-poster .vd-hand { margin-top: 20px; text-align: center; color: #5B7390; }

/* 초대장 */
.vd-story .vd-vin .vd-ticket { margin-top: 60px; box-shadow: 0 20px 34px -24px rgba(10, 63, 134, .7); }
.vd-story .vd-vin .vd-ticket-title { color: #0D3F86; }
.vd-story .vd-vin .vd-ticket-row { border-bottom-color: #CFE3F5; color: #23324A; }
.vd-story .vd-vin .vd-ticket-k { color: #1B6FC8; }
.vd-story .vd-vin .vd-ticket-stub { border-left-color: #A9CDEE; background: #E6F3FD; }
.vd-story .vd-vin .vd-ticket-stub strong { color: #F6B32B; -webkit-text-stroke: 2px #0D2F5E; }
.vd-story .vd-vin .vd-ticket-stub span { color: #0D3F86; }

/* 초대 글 */
.vd-story .vd-invite { position: relative; max-width: 760px; margin: 76px auto 0; padding: 0 28px; text-align: center; }
.post-content .vd-story .vd-invite p { font-size: clamp(20px, 2.3vw, 27px); font-weight: 600; line-height: 1.7; color: #0D3F86; }
.post-content .vd-story .vd-invite p + p { margin-top: 6px; }
.vd-story .vd-invite .vd-from { display: block; margin-top: 16px; font-size: 15.5px; font-weight: 700; color: #5B7390; }

/* 층 머리말 — 포스터의 쌓인 블록 */
.vd-story .vd-floor { position: relative; display: flex; align-items: center; gap: 26px; margin: 104px 28px 0 48px; padding: 30px 36px; border-radius: 30px; color: #fff; background: #2E7BD0; box-shadow: -12px 0 0 #1B62B4, -24px 0 0 #0E4E9C; }
.vd-story .vd-floor.vd-f2 { background: #F6B32B; box-shadow: -12px 0 0 #E09A12, -24px 0 0 #C98408; }
.vd-story .vd-floor.vd-f3 { background: #0D3F86; box-shadow: -12px 0 0 #0A3270, -24px 0 0 #07265A; }
.vd-story .vd-floor > .vd-st { right: 28px; top: -40px; width: 92px; height: 92px; rotate: 10deg; }
.vd-story .vd-floor-no { flex: none; padding: 10px 24px; border: 4px solid #0D2F5E; border-radius: 18px; background: #fff; font-family: var(--font-heading); font-size: 34px; line-height: 1.2; color: #0D2F5E; rotate: -3deg; }
.vd-story .vd-floor-title { display: block; font-family: var(--font-heading); font-size: clamp(24px, 2.9vw, 36px); line-height: 1.3; color: #fff; }
.vd-story .vd-floor.vd-f2 .vd-floor-title { color: #0D2F5E; }
.vd-story .vd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vd-story .vd-chips span { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 15px; font-weight: 800; line-height: 1.5; color: #0D2F5E; }

/* 나눔 — 왜 자선축제인가 */
.vd-story .vd-give { position: relative; margin: 104px 28px 0; padding: 56px 44px 52px; border-radius: 40px; text-align: center; background: #FFF4D6; }
.vd-story .vd-give > .vd-st-coal { left: 34px; top: -36px; width: 88px; height: 88px; rotate: -10deg; }
.vd-story .vd-give > .vd-st-globe { right: 34px; top: -36px; width: 88px; height: 88px; rotate: 10deg; }
.post-content .vd-story .vd-give h3 { margin-top: 4px; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.35; color: #0D3F86; }
.post-content .vd-story .vd-give > p { margin-top: 16px; font-size: 19px; font-weight: 600; line-height: 1.7; color: #5A4A1E; }
.vd-story .vd-give-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; text-align: left; }
.vd-story .vd-give-card { padding: 26px 28px 28px; border-radius: 26px; background: #fff; box-shadow: 0 16px 30px -22px rgba(160, 110, 20, .7); }
.vd-story .vd-give-k { display: block; font-size: 15px; font-weight: 800; line-height: 1.5; color: #E79A12; }
.vd-story .vd-give-card strong { display: block; margin-top: 2px; font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.35; color: #0D3F86; }
.vd-story .vd-give-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #F1DDA8; font-size: 16px; line-height: 1.5; color: #3A4660; }
.vd-story .vd-give-row b { flex: none; font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #1B6FC8; }

/* 시간표 — 흰 카드에 점선으로 나눈 다섯 줄, 시각은 노란 알약 */
.vd-story .vd-time { max-width: 680px; margin: 40px auto 0; padding: 8px 36px; border-radius: 28px; background: #fff; box-shadow: 0 20px 34px -26px rgba(10, 63, 134, .55); }
.vd-story .vd-time-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px 0; }
.vd-story .vd-time-row + .vd-time-row { border-top: 2px dashed #D6E6F5; }
.vd-story .vd-time-row > div { padding-top: 4px; }
.vd-story .vd-time-t { padding: 5px 0; border-radius: 999px; background: #FFF1CC; font-family: var(--font-heading); font-size: 21px; line-height: 1.4; text-align: center; color: #C77A08; }
.vd-story .vd-time-row strong { display: block; font-family: var(--font-heading); font-size: 21px; font-weight: 700; line-height: 1.5; color: #0D3F86; }
.vd-story .vd-time-row span.vd-time-d { display: block; margin-top: 4px; font-size: 16px; line-height: 1.6; color: #45556E; }
.vd-story .vd-time-tag { display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 999px; background: #E6F3FD; font-size: 13.5px; font-weight: 800; line-height: 1.7; color: #0D4E9C; }

.vd-story .vd-tape.vd-navy { rotate: -2.5deg; background: repeating-linear-gradient(135deg, #6FA8E0 0 9px, #B9D6F2 9px 18px); }
.vd-story .vd-vin .vd-end { background: #DCEEFB; }
/* 맺음 칸의 풍선 — 글을 가리지 않게 칸 위쪽 모서리에 걸친다 */
.vd-story .vd-vin .vd-end > .vd-st-balloon { right: 250px; top: -52px; rotate: 8deg; }
.vd-story .vd-vin .vd-meet { color: #0D4E9C; }

/* 노래 카드 — 글을 읽으며 듣는 노래 한 곡 */
.vd-story .vd-song { position: relative; max-width: 640px; margin: 56px auto 0; padding: 26px 34px 28px 112px; border-radius: 28px; background: #fff; box-shadow: 0 20px 34px -26px rgba(10, 63, 134, .55); }
.vd-story .vd-song > .vd-st { left: 22px; top: 50%; width: 72px; height: 72px; translate: 0 -50%; rotate: -8deg; }
.vd-story .vd-song .vd-hand { font-size: 22px; }
.vd-story .vd-song-title { display: block; font-family: var(--font-heading); font-size: 24px; line-height: 1.4; color: #0D3F86; }
.post-content .vd-story .vd-song audio { display: block; width: 100%; height: 44px; margin-top: 14px; }
/* 자르지 않고 통째로 보여 줄 사진 (끝 단체사진 — 현수막까지) */
.vd-story .vd-vin .vd-shot.vd-full > img { aspect-ratio: auto; }

@media (max-width: 860px) {
    .vd-story .vd-vin .vd-bunting { height: 34px; background-size: 120px 24px, 120px 24px, 120px 24px, 100% 3px, auto; background-position: 0 8px, 40px 8px, 80px 8px, 0 6px, 0 0; }
    .vd-story .vd-vin .vd-hero { padding: 64px 16px 0; }
    .vd-story .vd-song { margin: 40px 12px 0; padding: 22px 18px 22px; border-radius: 22px; }
    .vd-story .vd-song > .vd-st { left: auto; right: 14px; top: -22px; width: 52px; height: 52px; translate: none; rotate: 10deg; }
    .vd-story .vd-song-title { font-size: 21px; }
    .vd-story .vd-vin .vd-end > .vd-st-balloon { right: 16px; top: -34px; }
    .post-content .vd-story .vd-vin .vd-hero h2 { -webkit-text-stroke-width: 7px; }
    .post-content .vd-story .vd-vin .vd-hero p { font-size: 17px; }
    .vd-story .vd-vin .vd-hero > .vd-st-balloon { left: 8px; top: 8px; width: 52px; height: 52px; }
    .vd-story .vd-vin .vd-hero > .vd-st-popper { right: 8px; top: 8px; width: 52px; height: 52px; }
    .vd-story .vd-vin .vd-hero > .vd-st-note, .vd-story .vd-vin .vd-hero > .vd-st-sparkle { display: none; }
    .vd-story .vd-poster { margin-top: 30px; }
    .vd-story .vd-poster > img { border-width: 5px; border-radius: 18px; }
    .vd-story .vd-poster > .vd-st-guitar { right: -8px; top: -24px; width: 60px; height: 60px; }
    .vd-story .vd-poster > .vd-st-ticket { left: -8px; bottom: 60px; width: 60px; height: 60px; }
    .vd-story .vd-invite { margin-top: 52px; padding: 0 18px; }
    .vd-story .vd-floor { flex-direction: column; align-items: flex-start; gap: 14px; margin: 72px 12px 0 28px; padding: 24px 20px 22px; border-radius: 24px; box-shadow: -8px 0 0 #1B62B4, -16px 0 0 #0E4E9C; }
    .vd-story .vd-floor.vd-f2 { box-shadow: -8px 0 0 #E09A12, -16px 0 0 #C98408; }
    .vd-story .vd-floor.vd-f3 { box-shadow: -8px 0 0 #0A3270, -16px 0 0 #07265A; }
    .vd-story .vd-floor > .vd-st { right: 12px; top: -28px; width: 62px; height: 62px; }
    .vd-story .vd-floor-no { padding: 6px 16px; border-width: 3px; font-size: 24px; }
    .vd-story .vd-chips span { font-size: 13.5px; padding: 4px 11px; }
    .vd-story .vd-vin .vd-sec { margin-top: 34px; }
    .vd-story .vd-give { margin: 72px 10px 0; padding: 46px 16px 22px; border-radius: 30px; }
    .vd-story .vd-give > .vd-st-coal { left: 12px; top: -26px; width: 60px; height: 60px; }
    .vd-story .vd-give > .vd-st-globe { right: 12px; top: -26px; width: 60px; height: 60px; }
    .vd-story .vd-give-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
    .vd-story .vd-give-card { padding: 20px 20px 22px; border-radius: 22px; }
    .vd-story .vd-give-card strong { font-size: 20px; }
    .vd-story .vd-give-row { font-size: 15px; }
    .vd-story .vd-give-row b { font-size: 19px; }
    .vd-story .vd-time { margin: 28px 12px 0; padding: 4px 18px; border-radius: 22px; }
    .vd-story .vd-time-row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 15px 0; }
    .vd-story .vd-time-row > div { padding-top: 2px; }
    .vd-story .vd-time-t { padding: 4px 0; font-size: 17px; }
    .vd-story .vd-time-row strong { font-size: 18px; }
    .vd-story .vd-time-row span.vd-time-d { font-size: 15px; }
    .vd-story .vd-time-tag { font-size: 12.5px; padding: 0 8px; margin-right: 6px; }
}

/* ── 사진 일기형의 가을 농원 판 (.vd-story 안의 .vd-fall) ─────────────────────────
   틀은 사진 일기형(.vd-story)을 그대로 쓰고, 색만 가을 하늘빛 · 배 껍질빛으로 바꾼다.
   교육영상 「봉사의 의미」의 말을 담는 손길 카드(.vd-seed)와 나눔 꼬리표(.vd-gift)를 더한다. */
.vd-story .vd-fall { background: #FFFDF6; }
.vd-story .vd-fall .vd-hand { color: #C9772E; }
.vd-story .vd-fall .vd-shot .vd-hand { color: #7C6C58; }
.vd-story .vd-fall .vd-hl,
.vd-story .vd-fall .vd-text p strong { background: linear-gradient(transparent 62%, #FBE3A0 62%, #FBE3A0 94%, transparent 94%); }
.vd-story .vd-fall .vd-shot > img { background: #F6EEDC; box-shadow: 0 24px 40px -28px rgba(120, 84, 40, .55); }

/* 첫 화면 — 가을 하늘에서 배 껍질빛으로 */
.vd-story .vd-fall .vd-hero { background: linear-gradient(180deg, #CDE7FA 0, #E9F5FC 250px, #FFF7E2 520px, #FFFDF6 720px); }
.vd-story .vd-fall .vd-hero p { color: #5F5A52; }
.vd-story .vd-fall .vd-hero .vd-shot > img { object-position: 50% 78%; }
.vd-story .vd-fall .vd-hero > .vd-st-cloud { left: 7%; top: 44px; width: 96px; height: 96px; rotate: -6deg; }
.vd-story .vd-fall .vd-hero > .vd-st-sun { right: 8%; top: 30px; width: 92px; height: 92px; rotate: 8deg; }
.vd-story .vd-fall .vd-hero > .vd-st-cosmos { left: 15%; top: 170px; rotate: -12deg; }
.vd-story .vd-fall .vd-hero > .vd-st-pear { right: 16%; top: 176px; width: 60px; height: 60px; rotate: 14deg; }

.vd-story .vd-fall .vd-meta span { border-color: #EEDDB9; }
.vd-story .vd-fall .vd-sec { border-top-color: #EFDDB8; }
.vd-story .vd-fall .vd-lead p,
.vd-story .vd-fall .vd-sec h3, .vd-story .vd-fall .vd-hero h2,
.vd-story .vd-fall .vd-quote h3, .vd-story .vd-fall .vd-end h3 { color: #3D2E1C; }
.vd-story .vd-fall .vd-quote { background: #FFF3D6; }
.vd-story .vd-fall .vd-quote p { color: #7C6C58; }
.vd-story .vd-fall .vd-end { background: #FDEBD3; }
.vd-story .vd-fall .vd-meet { color: #A65A1C; }

/* 사진 놓기 — 석 장 줄은 가로 사진, 아래쪽을 살려야 하는 사진 */
.vd-story .vd-fall .vd-trio .vd-shot > img { aspect-ratio: 4 / 3; }
.vd-story .vd-shot.vd-low > img { object-position: 50% 80%; }
.vd-story .vd-shot.vd-right > img { object-position: 100% 50%; }
.vd-story .vd-fall .vd-sec > .vd-text { max-width: 720px; }

/* 나눔 꼬리표 — 시간 · 힘 · 땀 · 정성 → 생명 */
.vd-story .vd-gift { margin: 92px 56px 0; padding: 52px 32px 56px; border-radius: 36px; text-align: center; background: #F3F8E6; }
.vd-story .vd-gift h3 { margin-top: 6px; font-size: clamp(24px, 2.9vw, 36px); line-height: 1.4; color: #2F4A2B; }
.vd-story .vd-gift p { margin-top: 26px; font-size: 18px; line-height: 1.8; color: #55624A; }
.vd-story .vd-gift-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; }
.vd-story .vd-gift-row > span { position: relative; padding: 13px 26px 13px 34px; border-radius: 10px 999px 999px 10px; background: #fff; font-family: var(--font-heading); font-size: 21px; line-height: 1.3; color: #6B4A22; box-shadow: 0 12px 22px -18px rgba(120, 84, 40, .8); }
.vd-story .vd-gift-row > span::before { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; translate: 0 -50%; border-radius: 50%; background: #F3F8E6; box-shadow: inset 0 1px 2px rgba(120, 84, 40, .4); }
.vd-story .vd-gift-row > span:nth-child(odd) { rotate: -2deg; }
.vd-story .vd-gift-row > span:nth-child(even) { rotate: 2deg; }
.vd-story .vd-gift-row > .vd-gift-to { margin-left: 34px; rotate: 0deg; background: #5FA348; color: #fff; font-size: 24px; }
.vd-story .vd-gift-row > .vd-gift-to::after { content: "→"; position: absolute; left: -36px; top: 50%; translate: 0 -50%; font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: #7FA05F; }

/* 손길 카드 — 오늘 한 일과 그 뜻 */
.vd-story .vd-seed { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 26px; align-items: center; max-width: 820px; margin: 60px auto 0; padding: 30px 40px 32px 34px; border-radius: 26px; rotate: -.6deg; background: #FBF1DC; box-shadow: inset 0 0 0 2px #FBF1DC, inset 0 0 0 4px rgba(190, 150, 90, .0), 0 18px 30px -24px rgba(120, 84, 40, .7); outline: 2px dashed #E3C79B; outline-offset: -10px; }
.vd-story .vd-seed > .vd-st { position: static; grid-row: 1 / span 3; width: 84px; height: 84px; }
.vd-story .vd-seed-k { font-family: var(--font-hand); font-weight: 700; font-size: 22px; line-height: 1.3; word-spacing: -.14em; color: #C9772E; }
.vd-story .vd-seed-do { font-family: var(--font-heading); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.4; color: #3D2E1C; }
.vd-story .vd-seed-so { font-size: 18px; font-weight: 600; line-height: 1.7; color: #6B5B45; }

@media (max-width: 860px) {
    .vd-story .vd-fall .vd-hero { padding-top: 76px; }
    .vd-story .vd-fall .vd-hero > .vd-st-sun { right: 10px; top: 10px; width: 54px; height: 54px; }
    .vd-story .vd-fall .vd-hero > .vd-st-cloud { left: 10px; top: 12px; width: 54px; height: 54px; }
    .vd-story .vd-fall .vd-hero > .vd-st-cosmos, .vd-story .vd-fall .vd-hero > .vd-st-pear { display: none; }
    .vd-story .vd-gift { margin: 64px 14px 0; padding: 40px 16px 44px; border-radius: 28px; }
    .vd-story .vd-gift p { font-size: 16.5px; }
    .vd-story .vd-gift-row { gap: 10px; }
    .vd-story .vd-gift-row > span { padding: 10px 18px 10px 28px; font-size: 18px; }
    .vd-story .vd-gift-row > .vd-gift-to { margin: 30px 30% 0; font-size: 21px; }
    .vd-story .vd-gift-row > .vd-gift-to::after { content: "↓"; left: 50%; top: -30px; translate: -50% 0; }
    .vd-story .vd-seed { grid-template-columns: 1fr; gap: 4px; margin-top: 40px; padding: 28px 24px 30px; text-align: center; }
    .vd-story .vd-seed > .vd-st { grid-row: auto; width: 64px; height: 64px; margin: 0 auto 4px; }
    .vd-story .vd-seed-so { font-size: 16.5px; }
}

/* ── v02 에서 더한 것 ─────────────────────────────────────────────────────── */
/* 영상 속 한마디 — 장을 여는 쪽지 */
.vd-story .vd-say { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 18px; align-items: center; width: fit-content; max-width: 100%; margin: 0 0 52px; padding: 16px 30px 18px 20px; border-radius: 20px; rotate: -.8deg; background: #FFF3D6; box-shadow: 0 14px 24px -22px rgba(120, 84, 40, .8); }
.vd-story .vd-say > .vd-st { position: static; grid-row: 1 / span 2; width: 58px; height: 58px; }
.vd-story .vd-say-k { font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: #B0762F; }
.vd-story .vd-say-t { font-family: var(--font-hand); font-weight: 700; font-size: 27px; line-height: 1.35; word-spacing: -.12em; color: #3D2E1C; }

/* 성경 말씀 */
.vd-story .vd-verse { margin: 64px auto 0; max-width: 760px; padding: 0 20px; text-align: center; }
.vd-story .vd-verse > .vd-st { position: static; display: block; width: 62px; height: 62px; margin: 0 auto 10px; }
.vd-story .vd-verse-t { display: block; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 31px); line-height: 1.5; color: #2F4A2B; }
.vd-story .vd-verse-c { display: inline-block; margin-top: 14px; padding: 5px 16px; border-radius: 999px; background: #E6F1D2; font-size: 14.5px; font-weight: 700; color: #4E7A3A; }
.vd-story .vd-verse p { margin-top: 22px; font-size: 18px; line-height: 1.85; color: #5B5446; }

/* 사진 벽 — 글 없이 작은 사진을 나란히 */
.vd-story .vd-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.vd-story .vd-wall.vd-w4 { grid-template-columns: repeat(4, 1fr); }
.vd-story .vd-wall .vd-shot > img { border-radius: 16px; border: 6px solid #fff; box-shadow: 0 16px 26px -20px rgba(120, 84, 40, .7); }
.vd-story .vd-wall .vd-shot:nth-child(odd) { rotate: -1deg; }
.vd-story .vd-wall .vd-shot:nth-child(even) { rotate: 1deg; }
.vd-story .vd-fall .vd-quote p + p { margin-top: 4px; }
.vd-story .vd-gift p + p { margin-top: 4px; }

@media (max-width: 860px) {
    .vd-story .vd-say { margin-bottom: 36px; padding: 14px 20px 16px 14px; gap: 2px 12px; }
    .vd-story .vd-say > .vd-st { width: 44px; height: 44px; }
    .vd-story .vd-say-k { font-size: 12.5px; }
    .vd-story .vd-say-t { font-size: 22px; }
    .vd-story .vd-verse { margin-top: 44px; padding: 0; }
    .vd-story .vd-verse p { font-size: 16.5px; }
    .vd-story .vd-wall, .vd-story .vd-wall.vd-w4 { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
    .vd-story .vd-wall .vd-shot > img { border-width: 4px; border-radius: 12px; }
    .vd-story .vd-wall:not(.vd-w4) .vd-shot:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .vd-story .vd-wall:not(.vd-w4) .vd-shot:last-child:nth-child(odd) > img { aspect-ratio: 16 / 9; }
}

/* ── v03 에서 더한 것 — 농촌 풍경 · 가족 봉사 ─────────────────────────────────── */
.vd-story .vd-st-rice { background-image: url("/images/story/rice.svg"); }
.vd-story .vd-st-grape { background-image: url("/images/story/grape.svg"); }
.vd-story .vd-st-crate { background-image: url("/images/story/crate.svg"); }
.vd-story .vd-st-boots { background-image: url("/images/story/boots.svg"); }
.vd-story .vd-st-trowel { background-image: url("/images/story/trowel.svg"); }
.vd-story .vd-st-dragonfly { background-image: url("/images/story/dragonfly.svg"); }

/* 첫 화면 — 가을 하늘 아래로 들판이 펼쳐진다 (농가 · 비닐하우스 · 배나무 · 코스모스) */
.vd-story .vd-fall .vd-hero { padding-bottom: 168px; background: url("/images/story/farm-hills.svg") bottom center / max(100%, 860px) auto no-repeat, linear-gradient(180deg, #BFE1F8 0, #DDF0FB 300px, #F1F8F1 640px, #FFF8E0 100%); }
.vd-story .vd-fall .vd-hero h2 { margin-top: 8px; font-size: clamp(36px, 5.4vw, 66px); }
.vd-story .vd-fall .vd-hero > .vd-hand { font-size: 27px; }
.vd-story .vd-fall .vd-hero > .vd-st-dragonfly { right: 5%; top: 214px; width: 70px; height: 70px; rotate: 24deg; }
.vd-story .vd-fall .vd-hero > .vd-st-cosmos { left: 4%; top: 206px; }
.vd-story .vd-fall .vd-meta { margin-top: 8px; }
/* 나무 문패 — 인애농원 문 앞의 문패처럼 */
.vd-story .vd-sign { position: relative; display: inline-block; margin-bottom: 20px; padding: 11px 38px 12px; border-radius: 12px; rotate: -1.5deg; background: repeating-linear-gradient(92deg, rgba(255, 255, 255, 0) 0 21px, rgba(255, 255, 255, .13) 21px 23px), linear-gradient(180deg, #DDB183, #C8935F); font-family: var(--font-heading); font-size: 19px; line-height: 1.3; letter-spacing: .03em; color: #FFF9EC; text-shadow: 0 1px 0 rgba(120, 72, 30, .5); box-shadow: inset 0 -3px 0 rgba(120, 72, 30, .22), 0 14px 22px -16px rgba(120, 84, 40, .9); }
.vd-story .vd-sign::before, .vd-story .vd-sign::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; translate: 0 -50%; border-radius: 50%; background: #FFF3DC; box-shadow: inset 0 -1px 1px rgba(120, 72, 30, .6); }
.vd-story .vd-sign::before { left: 14px; }
.vd-story .vd-sign::after { right: 14px; }
/* 살랑이는 스티커 — 구름 · 잠자리는 떠다니고 코스모스는 바람에 흔들린다 */
@keyframes vd-float { 0%, 100% { translate: 0 0; } 50% { translate: 12px -7px; } }
@keyframes vd-sway { 0%, 100% { rotate: -14deg; } 50% { rotate: -2deg; } }
@media (prefers-reduced-motion: no-preference) {
    .vd-story .vd-fall .vd-hero > .vd-st-cloud { animation: vd-float 7s ease-in-out infinite; }
    .vd-story .vd-fall .vd-hero > .vd-st-dragonfly { animation: vd-float 5s ease-in-out infinite reverse; }
    .vd-story .vd-fall .vd-hero > .vd-st-cosmos { transform-origin: 50% 100%; animation: vd-sway 4.5s ease-in-out infinite; }
}

/* 구역 사이 — 점선 대신 새싹이 돋은 밭고랑 */
.vd-story .vd-fall .vd-sec { border-top: 0; padding-top: 108px; background: url("/images/story/furrow.svg") top center / 240px 44px repeat-x; }

/* 농촌이 주는 것 — 네 칸 카드 */
.vd-story .vd-why { margin: 84px 56px 0; padding: 56px 36px 52px; border-radius: 36px; text-align: center; background: #F1F7E2; }
.vd-story .vd-why h3 { margin-top: 6px; font-size: clamp(25px, 3.1vw, 38px); line-height: 1.4; color: #2F4A2B; }
.vd-story .vd-why-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.vd-story .vd-why-i { padding: 24px 14px 24px; border-radius: 24px; background: #fff; box-shadow: 0 16px 26px -22px rgba(70, 110, 50, .75); }
.vd-story .vd-why-i:nth-child(odd) { rotate: -1.2deg; }
.vd-story .vd-why-i:nth-child(even) { rotate: 1.2deg; }
.vd-story .vd-why-i > .vd-st { position: static; display: block; width: 74px; height: 74px; margin: 0 auto 10px; }
.vd-story .vd-why-t { display: block; font-family: var(--font-heading); font-size: 20px; line-height: 1.4; color: #3D2E1C; }
.vd-story .vd-why-d { display: block; margin-top: 8px; font-size: 16px; line-height: 1.65; color: #5B6450; }
.vd-story .vd-why > p { margin-top: 32px; font-size: 18px; line-height: 1.8; color: #55624A; }
.vd-story .vd-why > p + p { margin-top: 4px; }

/* 가족 사진 줄 — 빨랫줄에 나무 집게로 건 사진 */
.vd-story .vd-fall .vd-sec > .vd-text.vd-mid { margin: 0 auto; text-align: center; }
.vd-story .vd-line { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 84px; padding: 46px 8px 0; }
.vd-story .vd-line::before { content: ""; position: absolute; left: -26px; right: -26px; top: -26px; height: 60px; border-bottom: 3px solid #CDA77C; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.vd-story .vd-line .vd-shot { position: relative; padding: 12px 12px 14px; border-radius: 6px; background: #fff; text-align: center; transform-origin: 50% 0; box-shadow: 0 0 0 1px rgba(120, 84, 40, .07), 0 24px 34px -24px rgba(120, 84, 40, .8); }
.vd-story .vd-line .vd-shot::before { content: ""; position: absolute; left: 50%; top: -31px; z-index: 4; width: 13px; height: 42px; translate: -50% 0; border-radius: 4px; background: linear-gradient(90deg, #EBC591, #D6A66E); box-shadow: 0 3px 5px -2px rgba(90, 60, 20, .65); }
.vd-story .vd-line .vd-shot:nth-child(1) { rotate: -3deg; }
.vd-story .vd-line .vd-shot:nth-child(2) { margin-top: 16px; rotate: 1.5deg; }
.vd-story .vd-line .vd-shot:nth-child(3) { rotate: 3deg; }
.vd-story .vd-fall .vd-line .vd-shot > img { aspect-ratio: 4 / 3; border-radius: 3px; box-shadow: none; }
.vd-story .vd-fall .vd-line .vd-shot .vd-hand { margin-top: 10px; padding: 0; font-size: 21px; }
.vd-story .vd-line + .vd-shot { margin-top: 72px; }
.vd-story .vd-shot.vd-left > img { object-position: 30% 50%; }

@media (max-width: 860px) {
    .vd-story .vd-fall .vd-hero { padding-top: 40px; padding-bottom: 118px; }
    .vd-story .vd-fall .vd-hero > .vd-hand { font-size: 21px; }
    .vd-story .vd-fall .vd-hero > .vd-st-dragonfly { display: none; }
    .vd-story .vd-fall .vd-hero > .vd-st-sun { right: 8px; top: 8px; width: 48px; height: 48px; }
    .vd-story .vd-fall .vd-hero > .vd-st-cloud { left: 8px; top: 10px; width: 48px; height: 48px; }
    .vd-story .vd-sign { margin-bottom: 14px; padding: 9px 30px 10px; font-size: 16px; }
    .vd-story .vd-fall .vd-meta { margin-top: 4px; }
    .vd-story .vd-fall .vd-sec { padding-top: 76px; background-size: 190px 35px; }
    .vd-story .vd-why { margin: 60px 14px 0; padding: 40px 14px 40px; border-radius: 28px; }
    .vd-story .vd-why-row { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
    .vd-story .vd-why-i { padding: 18px 10px 18px; border-radius: 20px; }
    .vd-story .vd-why-i > .vd-st { width: 58px; height: 58px; }
    .vd-story .vd-why-t { font-size: 17.5px; }
    .vd-story .vd-why-d { font-size: 14.5px; }
    .vd-story .vd-why > p { margin-top: 24px; font-size: 16.5px; }
    .vd-story .vd-line { grid-template-columns: 1fr; gap: 50px; margin-top: 56px; padding: 30px 9% 0; }
    .vd-story .vd-line::before { display: none; }
    .vd-story .vd-line .vd-shot::after { content: ""; position: absolute; left: -14%; right: -14%; top: -14px; border-top: 3px solid #CDA77C; }
    .vd-story .vd-line .vd-shot:nth-child(2) { margin-top: 0; }
    .vd-story .vd-fall .vd-line .vd-shot .vd-hand { font-size: 20px; }
    .vd-story .vd-line + .vd-shot { margin-top: 44px; }
}

/* ── 사진 일기형의 연탄 겨울 판 (.vd-story 안의 .vd-coal) ─────────────────────────
   틀은 사진 일기형(.vd-story) 그대로, 색만 연탄 불씨 · 버터 노랑 · 털실 분홍으로.
   첫 화면 아래는 산비탈 마을(coal-village.svg), 구역 사이는 손에서 손으로 건네는 연탄 줄(coal-row.svg). */
.vd-story .vd-st-coal-stack { background-image: url("/images/story/coal-stack.svg"); }
.vd-story .vd-st-mitten { background-image: url("/images/story/mitten.svg"); }
.vd-story .vd-st-candle { background-image: url("/images/story/candle.svg"); }
.vd-story .vd-st-mug { background-image: url("/images/story/mug.svg"); }

.vd-story .vd-coal { background: #FFFBF2; }
.vd-story .vd-coal .vd-hand { color: #D9743A; }
.vd-story .vd-coal .vd-shot .vd-hand { color: #7A6A5C; }
.vd-story .vd-coal .vd-hl,
.vd-story .vd-coal .vd-text p strong { background: linear-gradient(transparent 62%, #FFE08A 62%, #FFE08A 94%, transparent 94%); }
.vd-story .vd-coal .vd-shot > img { background: #F4EBDD; box-shadow: 0 24px 40px -28px rgba(74, 79, 102, .55); }
.vd-story .vd-coal .vd-lead p,
.vd-story .vd-coal .vd-sec h3, .vd-story .vd-coal .vd-hero h2,
.vd-story .vd-coal .vd-quote h3, .vd-story .vd-coal .vd-end h3 { color: #33354A; }

/* 첫 화면 — 해 질 녘 하늘 아래 산비탈 마을, 굴뚝마다 김이 오른다 */
.vd-story .vd-coal .vd-hero { padding-bottom: 168px; background: url("/images/story/coal-village.svg") bottom center / max(100%, 860px) auto no-repeat, linear-gradient(180deg, #FFE7CF 0, #FFF1DF 300px, #FFF7EA 640px, #FFFBF2 100%); }
.vd-story .vd-coal .vd-hero h2 { margin-top: 8px; font-size: clamp(36px, 5.4vw, 66px); }
.vd-story .vd-coal .vd-hero > .vd-hand { font-size: 27px; }
.vd-story .vd-coal .vd-hero p { color: #5F5A55; }
.vd-story .vd-coal .vd-hero .vd-shot > img { object-position: 50% 40%; }
.vd-story .vd-coal .vd-hero > .vd-st-mug { left: 7%; top: 44px; width: 92px; height: 92px; rotate: -6deg; }
.vd-story .vd-coal .vd-hero > .vd-st-mitten { right: 8%; top: 34px; width: 90px; height: 90px; rotate: 12deg; }
.vd-story .vd-coal .vd-hero > .vd-st-sparkle { right: 6%; top: 214px; width: 58px; height: 58px; }
.vd-story .vd-coal .vd-sign { background: repeating-linear-gradient(92deg, rgba(255, 255, 255, 0) 0 21px, rgba(255, 255, 255, .1) 21px 23px), linear-gradient(180deg, #5E647E, #4A4F66); color: #FFF4E2; text-shadow: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 14px 22px -16px rgba(40, 44, 66, .9); }
.vd-story .vd-coal .vd-sign::before, .vd-story .vd-coal .vd-sign::after { background: #FF9A4D; box-shadow: 0 0 6px #FFB774; }
.vd-story .vd-coal .vd-meta { margin-top: 8px; }
.vd-story .vd-coal .vd-meta span { border-color: #EED9C0; }

/* 살랑이는 스티커 — 머그의 김처럼 둥실 */
@media (prefers-reduced-motion: no-preference) {
    .vd-story .vd-coal .vd-hero > .vd-st-mug { animation: vd-float 7s ease-in-out infinite; }
    .vd-story .vd-coal .vd-hero > .vd-st-mitten { animation: vd-float 6s ease-in-out infinite reverse; }
}

/* 구역 사이 — 연탄을 손에서 손으로 */
.vd-story .vd-coal .vd-sec { border-top: 0; padding-top: 104px; background: url("/images/story/coal-row.svg") top center / 220px 40px repeat-x; }
.vd-story .vd-coal .vd-sec > .vd-text { max-width: 720px; }
.vd-story .vd-coal .vd-sec > .vd-text.vd-mid { margin: 0 auto; text-align: center; }
.vd-story .vd-coal .vd-trio .vd-shot > img { aspect-ratio: 4 / 3; }

/* 오늘의 순서 — 여섯 칸 (세 칸씩 두 줄) */
.vd-story .vd-coal .vd-why { background: #FFF1DC; }
.vd-story .vd-coal .vd-why h3 { color: #33354A; }
.vd-story .vd-coal .vd-why-row { grid-template-columns: repeat(3, 1fr); }
.vd-story .vd-coal .vd-why-i { box-shadow: 0 16px 26px -22px rgba(170, 100, 40, .75); }
.vd-story .vd-coal .vd-why-d { color: #6B5F55; }

/* 숫자 카드 — 연탄 한 장 모양 */
.vd-story .vd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.vd-story .vd-fact { position: relative; padding: 30px 20px 26px; border-radius: 22px; text-align: center; background: #4A4F66; color: #FFF4E2; box-shadow: 0 20px 30px -22px rgba(40, 44, 66, .9); }
.vd-story .vd-fact::before { content: ""; position: absolute; left: 50%; top: 14px; width: 46px; height: 8px; translate: -50% 0; border-radius: 999px; background: radial-gradient(circle, #2E3245 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x; opacity: .9; }
.vd-story .vd-fact:nth-child(odd) { rotate: -1.2deg; }
.vd-story .vd-fact:nth-child(even) { rotate: 1.2deg; background: #FF9A4D; color: #fff; }
.vd-story .vd-fact-k { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; opacity: .85; }
.vd-story .vd-fact-n { display: block; margin-top: 6px; font-family: var(--font-heading); font-size: clamp(26px, 3vw, 36px); line-height: 1.3; }
.vd-story .vd-fact-d { display: block; margin-top: 10px; font-size: 15.5px; line-height: 1.6; opacity: .92; }
.vd-story .vd-note { margin: 18px auto 0; padding: 0; background: none; box-shadow: none; rotate: 0deg; font-size: 13.5px; line-height: 1.6; color: #9A8E82; text-align: center; }

/* 온라인 화면 — 잘라 내지 않고 그대로 */
.vd-story .vd-coal .vd-shot.vd-screen { max-width: 860px; margin: 56px auto 0; }
.vd-story .vd-coal .vd-shot.vd-screen > img { aspect-ratio: auto; height: auto; object-fit: contain; border: 8px solid #fff; }
/* 빨랫줄 사진 */
.vd-story .vd-coal .vd-line .vd-shot > img { aspect-ratio: 4 / 3; border-radius: 3px; box-shadow: none; }
.vd-story .vd-coal .vd-line .vd-shot .vd-hand { margin-top: 10px; padding: 0; font-size: 21px; }

/* 나눔 꼬리표 · 따옴표 카드 · 맺음 */
.vd-story .vd-coal .vd-gift { background: #FFF1DC; }
.vd-story .vd-coal .vd-gift h3 { color: #33354A; }
.vd-story .vd-coal .vd-gift p { color: #6B5F55; }
.vd-story .vd-coal .vd-gift-row > span { color: #4A4F66; }
.vd-story .vd-coal .vd-gift-row > span::before { background: #FFF1DC; }
.vd-story .vd-coal .vd-gift-row > .vd-gift-to { background: #FF9A4D; color: #fff; }
.vd-story .vd-coal .vd-gift-row > .vd-gift-to::after { color: #F2A46B; }
.vd-story .vd-coal .vd-quote { background: #FFF4D2; }
.vd-story .vd-coal .vd-quote p { color: #7A6A5C; }
.vd-story .vd-coal .vd-say { background: #FFF1DC; }
.vd-story .vd-coal .vd-say-k { color: #C46A33; }
.vd-story .vd-coal .vd-end { background: #FDE6D2; }
.vd-story .vd-coal .vd-meet { color: #B65A26; }
.vd-story .vd-coal .vd-line::before { border-bottom-color: #D9B48E; }

@media (max-width: 860px) {
    .vd-story .vd-coal .vd-hero { padding-top: 40px; padding-bottom: 118px; }
    .vd-story .vd-coal .vd-hero > .vd-hand { font-size: 21px; }
    .vd-story .vd-coal .vd-hero > .vd-st-mug { left: 8px; top: 10px; width: 50px; height: 50px; }
    .vd-story .vd-coal .vd-hero > .vd-st-mitten { right: 8px; top: 8px; width: 50px; height: 50px; }
    .vd-story .vd-coal .vd-hero > .vd-st-sparkle { display: none; }
    .vd-story .vd-coal .vd-sec { padding-top: 76px; background-size: 180px 33px; }
    .vd-story .vd-coal .vd-why-row { grid-template-columns: 1fr 1fr; }
    .vd-story .vd-facts { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
    .vd-story .vd-fact { padding: 26px 18px 22px; }
}

/* 사진 벽 — 한 장짜리(넓게) · 다섯 장 줄 */
.vd-story .vd-wall.vd-one { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }
.vd-story .vd-wall.vd-w5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) {
    .vd-story .vd-wall.vd-w5 { grid-template-columns: 1fr 1fr; }
    .vd-story .vd-wall.vd-w5 .vd-shot:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── 사진 일기형의 회원 갱신 안내 판 (.vd-recruit 위에 .vd-renew) ─────────────
   모집 공지의 모눈종이 틀은 그대로 두고, 첫 화면을 밝은 크림 · 노랑으로 바꾼 안내 공지.
   캡처 화면은 휴대폰 틀(.vd-rn-phone)에 넣는다. */
.vd-story .vd-renew .vd-hl { background: linear-gradient(transparent 60%, #FFD9A0 60%, #FFD9A0 94%, transparent 94%); }

/* 첫 화면 — 밝은 노랑 판에 남색 제목 */
.vd-story .vd-rn-hero { color: #151A5E; background:
    radial-gradient(circle at 1px 1px, rgba(27, 34, 144, .07) 1.3px, transparent 0) 0 0 / 24px 24px,
    radial-gradient(80% 120% at 100% 0%, #FFE3A3 0%, transparent 60%),
    #FFF0C4; }
.vd-story .vd-rn-hero > .vd-st-letter { position: absolute; left: 7%; top: 40px; width: 84px; height: 84px; rotate: -10deg; }
.vd-story .vd-rn-hero > .vd-st-pencil { position: absolute; right: 7%; top: 34px; width: 84px; height: 84px; rotate: 14deg; }
.vd-story .vd-rn-hero .vd-rc-badge { background: #1B2290; color: #fff; box-shadow: 0 8px 0 rgba(27, 34, 144, .18); }
.post-content .vd-story .vd-rn-hero h2 { color: #151A5E; }
.post-content .vd-story .vd-rn-hero h2 em { color: #EA7131; }
.post-content .vd-story .vd-rn-hero p { color: #3A4270; }
.vd-story .vd-rn-hero p strong { color: #EA7131; }
.post-content .vd-story .vd-rn-hero .vd-link a { background: #1B2290; color: #fff; box-shadow: 0 14px 24px -14px rgba(21, 26, 94, .8); }

/* 꼭 기억해 주세요 — 면담은 모두 */
.vd-story .vd-rn-must { position: relative; margin: 72px 56px 0; padding: 44px 48px 46px; border: 3px dashed #F2A0B4; border-radius: 36px; background: #FFF4F6; text-align: center; }
.vd-story .vd-rn-must > .vd-st { position: absolute; right: 30px; top: -36px; width: 72px; height: 72px; rotate: 8deg; }
.vd-story .vd-rn-must .vd-hand { color: #D9587A; }
.post-content .vd-story .vd-rn-must h3 { margin-top: 4px; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.3; color: #151A5E; }
.vd-story .vd-rn-must .vd-hl { background: linear-gradient(transparent 60%, #FFC7D5 60%, #FFC7D5 94%, transparent 94%); }
.post-content .vd-story .vd-rn-must p { margin-top: 18px; font-size: 18px; font-weight: 600; line-height: 1.85; color: #3A3F5C; }

/* 면담 일정 — 날짜 네 장 + 시간 칸 */
.vd-story .vd-rn-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 34px 56px 0; }
.vd-story .vd-rn-days > div { padding: 22px 10px 20px; border-radius: 24px; background: #fff; border: 1px solid #E9E4D8; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); text-align: center; }
.vd-story .vd-rn-days > div:nth-child(2) { background: #FFF6D6; }
.vd-story .vd-rn-days b { display: block; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.3; color: #151A5E; }
.vd-story .vd-rn-days span { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; color: #8A93B2; }
.vd-story .vd-rn-times { margin: 18px 56px 0; padding: 24px 28px 22px; border-radius: 24px; background: #EEF3FF; text-align: center; }
.vd-story .vd-rn-times-k { display: block; font-size: 15.5px; font-weight: 800; color: #3A4290; }
.vd-story .vd-rn-times > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.vd-story .vd-rn-times > div span { min-width: 70px; padding: 8px 0; border-radius: 12px; background: #fff; font-family: var(--font-heading); font-size: 19px; line-height: 1.3; font-variant-numeric: tabular-nums; color: #1B2290; }
.post-content .vd-story .vd-rn-times p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: #5F6788; }

/* 나는 어느 쪽 — 두 갈래 */
.vd-story .vd-rn-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 34px 56px 0; }
.vd-story .vd-rn-path { position: relative; padding: 32px 28px 26px; border-radius: 28px; background: #E9F8F0; rotate: -.8deg; }
.vd-story .vd-rn-path.vd-alt { background: #FFF0F3; rotate: .8deg; }
.vd-story .vd-rn-path .vd-tape { top: -13px; }
.vd-story .vd-rn-who { display: block; font-family: var(--font-heading); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; text-align: center; color: #151A5E; }
.vd-story .vd-rn-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 18px; counter-reset: rnflow; }
.vd-story .vd-rn-flow > span { position: relative; padding: 11px 16px 11px 50px; border-radius: 14px; background: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.5; color: #23263F; counter-increment: rnflow; }
.vd-story .vd-rn-flow > span::before { content: counter(rnflow); position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2FA36B; font-size: 14px; color: #fff; }
.vd-story .vd-rn-path.vd-alt .vd-rn-flow > span::before { background: #D9587A; }
.vd-story .vd-rn-flow > span + span { margin-top: 18px; }
.vd-story .vd-rn-flow > span + span::after { content: ""; position: absolute; left: 26px; top: -16px; width: 2px; height: 14px; background: repeating-linear-gradient(#B9C2DA 0 3px, transparent 3px 6px); }
.post-content .vd-story .vd-rn-path p { margin-top: 16px; font-size: 15.5px; line-height: 1.65; text-align: center; color: #4A5070; }
.post-content .vd-story .vd-rn-path p.vd-rn-todo { padding: 8px 12px; border-radius: 12px; background: #FFE27A; font-weight: 800; color: #6A4A00; }

/* 준비물 */
.vd-story .vd-rn-check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 34px 56px 0; }
.vd-story .vd-rn-check > div { position: relative; padding: 18px 20px 18px 58px; border-radius: 20px; background: #fff; border: 1px solid #E9E4D8; }
.vd-story .vd-rn-check > div::before { content: ""; position: absolute; left: 20px; top: 21px; width: 22px; height: 22px; border-radius: 7px; border: 2.5px solid #1B2290; background: #FFF6D6; }
.vd-story .vd-rn-check > div::after { content: ""; position: absolute; left: 27px; top: 24px; width: 7px; height: 12px; border: solid #EA7131; border-width: 0 3px 3px 0; rotate: 45deg; }
.vd-story .vd-rn-check b { display: block; font-size: 17px; font-weight: 800; line-height: 1.45; color: #151A5E; }
.vd-story .vd-rn-check b em { font-style: normal; font-weight: 700; color: #8A93B2; }
.vd-story .vd-rn-check span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.55; color: #5F6788; }
.post-content .vd-story .vd-link.vd-center { text-align: center; }

/* 따라 하기 — 휴대폰 캡처 + 설명 */
.vd-story .vd-rn-steps { display: flex; flex-direction: column; gap: 30px; margin: 40px 56px 0; }
.vd-story .vd-rn-step { display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 44px; padding: 30px 40px; border-radius: 36px; background: #fff; border: 1px solid #E9E4D8; box-shadow: 0 14px 30px -24px rgba(27, 34, 144, .5); }
.vd-story .vd-rn-step:nth-child(even) { grid-template-columns: 1fr 300px; }
.vd-story .vd-rn-step:nth-child(even) .vd-rn-phone { order: 2; }
.vd-story .vd-rn-step.vd-key { background: #FFF8E1; border-color: #F2DFA4; }
.vd-story .vd-rn-phone { position: relative; overflow: hidden; aspect-ratio: 9 / 17; border: 8px solid #151A5E; border-radius: 34px; background: #FFFDF8; box-shadow: 0 26px 40px -26px rgba(21, 26, 94, .7); }
.post-content .vd-story .vd-rn-phone img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: top; }
.post-content .vd-story .vd-rn-phone img.vd-rn-bottom { object-position: bottom; }
.vd-story .vd-rn-empty { display: grid; place-items: center; height: 100%; border: 2px dashed #C9CFE3; border-radius: 24px; font-size: 15px; font-weight: 700; line-height: 1.6; text-align: center; color: #A9B1CC; }
.vd-story .vd-rn-no { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1B2290; font-family: var(--font-heading); font-size: 26px; line-height: 1; color: #fff; rotate: -6deg; }
.vd-story .vd-rn-step.vd-key .vd-rn-no { background: #EA7131; }
.post-content .vd-story .vd-rn-text h4 { margin: 16px 0 0; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.35; color: #151A5E; }
.post-content .vd-story .vd-rn-text p { margin-top: 12px; font-size: 17.5px; line-height: 1.85; color: #3A3F5C; }

.vd-story .vd-rn-text p b { font-weight: 800; color: #151A5E; }

/* 자주 묻는 질문 */
.vd-story .vd-rn-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 56px 0; }
.vd-story .vd-rn-faq > div { padding: 24px 26px; border-radius: 24px; background: #fff; border: 1px solid #E9E4D8; }
.vd-story .vd-rn-faq b { display: block; font-size: 17.5px; font-weight: 800; line-height: 1.5; color: #151A5E; }
.vd-story .vd-rn-faq b::before { content: "Q. "; color: #EA7131; }
.post-content .vd-story .vd-rn-faq p { margin-top: 8px; font-size: 16px; line-height: 1.75; color: #4A5070; }

@media (max-width: 860px) {
    .vd-story .vd-rn-hero > .vd-st-letter { left: 8px; top: 10px; width: 50px; height: 50px; }
    .vd-story .vd-rn-hero > .vd-st-pencil { right: 8px; top: 8px; width: 50px; height: 50px; }
    .vd-story .vd-rn-must { margin: 56px 14px 0; padding: 36px 20px 34px; border-radius: 28px; }
    .vd-story .vd-rn-must > .vd-st { right: 14px; top: -28px; width: 54px; height: 54px; }
    .post-content .vd-story .vd-rn-must p { font-size: 16px; }
    .vd-story .vd-rn-days { grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 18px 0; }
    .vd-story .vd-rn-times { margin: 12px 18px 0; padding: 20px 14px 18px; }
    .vd-story .vd-rn-times > div span { min-width: 62px; font-size: 17px; }
    .vd-story .vd-rn-paths { grid-template-columns: 1fr; gap: 26px; margin: 30px 18px 0; }
    .vd-story .vd-rn-path { padding: 28px 18px 22px; }
    .vd-story .vd-rn-check { grid-template-columns: 1fr; gap: 10px; margin: 26px 18px 0; }
    .vd-story .vd-rn-steps { gap: 22px; margin: 30px 14px 0; }
    .vd-story .vd-rn-step, .vd-story .vd-rn-step:nth-child(even) { grid-template-columns: 1fr; gap: 20px; padding: 24px 18px 26px; border-radius: 28px; }
    .vd-story .vd-rn-step:nth-child(even) .vd-rn-phone { order: 0; }
    .vd-story .vd-rn-phone { width: min(260px, 78%); margin: 0 auto; border-width: 7px; border-radius: 30px; }
    .post-content .vd-story .vd-rn-text p { font-size: 16.5px; }
    .vd-story .vd-rn-faq { grid-template-columns: 1fr; gap: 12px; margin: 26px 18px 0; }
}