/* ================================================
main 섹션 전용 스타일
(뮤직바, 히어로, 스토리, 위치, 갤러리, 계좌, 축하, 푸터)
================================================ */
/* ================================================
뮤직바 — 미니멀 투명 음파 버튼 (우상단 고정)
================================================ */
.music-bar {
position: fixed;
top: 16px;
right: 16px;
z-index: 400;
background: rgba(0, 0, 0, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 9px 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* 초기 숨김 — RSVP 팝업이 닫힌 뒤 .is-visible 추가로 등장 */
opacity: 0;
pointer-events: none;
transition: background .2s, transform .15s, opacity .5s ease;
}
.music-bar.is-visible {
opacity: 1;
pointer-events: auto;
}
.music-bar:hover {
background: rgba(0, 0, 0, 0.42);
transform: scale(1.06);
}
.music-bar:active { transform: scale(.94); }
/* 음파 바 5개 */
.music-bar__wave {
display: flex;
align-items: center;
gap: 3px;
height: 18px;
}
.music-bar__wave span {
display: block;
width: 2.5px;
height: 4px;
background: rgba(255, 255, 255, 0.90);
border-radius: 2px;
transition: height .2s ease;
}
/* 재생 중: 음파 춤 */
.music-bar__wave.active span:nth-child(1) { animation: wavebar .85s .00s ease-in-out infinite; }
.music-bar__wave.active span:nth-child(2) { animation: wavebar .85s .17s ease-in-out infinite; }
.music-bar__wave.active span:nth-child(3) { animation: wavebar .85s .34s ease-in-out infinite; }
.music-bar__wave.active span:nth-child(4) { animation: wavebar .85s .51s ease-in-out infinite; }
.music-bar__wave.active span:nth-child(5) { animation: wavebar .85s .68s ease-in-out infinite; }
@keyframes wavebar { 0%,100%{ height:3px } 50%{ height:16px } }
/* ================================================
히어로 — 피그마 first 프레임 1:1 구현
팔레트: #4B164C(딥퍼플) / #C9909A(로즈) / #E6C0E6(라이트퍼플)
레이아웃 (412×686 기준):
① 이름 top≈88px (12.8%)
② 보태니컬 left≈13px, top≈208px (30.3%)
③ WE ARE top≈410px (59.8%)
④ 날짜 top≈530px (77.3%)
⑤ 네비 top≈619px (90.2%)
================================================ */
/* ── 컨테이너 ──
height: auto → 첫 슬라이드 이미지 비율로 자동 확장
배경 #FAF7F4 → contain 시 생기는 여백(레터박스)을 사진 톤과 맞춤 */
.hero {
position: relative;
width: 100%;
height: auto; /* 이미지 비율에 따라 자동 높이 */
min-height: 0; /* 고정 min-height 제거 */
background: #FAF7F4; /* 웜 아이보리 — 레터박스 여백 자연스럽게 채움 */
overflow: hidden;
}
/* ── 배경 슬라이드 래퍼 ──
position: relative → 첫 슬라이드가 흐름에 포함되어 부모 높이 결정 */
.hero__slides {
position: relative; /* 기존 absolute → relative: 높이 드라이버 역할 */
width: 100%;
line-height: 0; /* img 하단 인라인 여백 제거 */
background: #FAF7F4;
}
/* ── 슬라이드 공통 ── */
.hero__slide {
display: block;
object-fit: contain; /* 잘림 없이 전체 사진 표시 */
object-position: center center;
opacity: 0;
filter: brightness(.80) contrast(1.05);
transition: opacity 1.8s ease-in-out;
}
/* 첫 슬라이드: 흐름(in-flow)에 포함 → 이미지 원본 비율로 높이 결정
max-height: 90vh → PC·대형 화면에서 과도하게 커지는 것 방지 */
.hero__slide:first-child {
position: relative;
width: 100%;
height: auto;
max-height: 90vh;
}
/* 나머지 슬라이드: 첫 슬라이드 위에 절대 위치로 겹침
→ 첫 슬라이드가 정한 높이 안에서 동일하게 contain 표시 */
.hero__slide:not(:first-child) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero__slide--active { opacity: 1; }
/* ── 보라빛 그라디언트 오버레이 ── */
.hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(75,22,76,.20) 0%, rgba(75,22,76,.01) 40%),
linear-gradient(180deg, rgba(75,22,76,0) 0%, rgba(75,22,76,.50) 56%, rgba(75,22,76,.95) 100%);
z-index: 1;
}
/* ── 필름 그레인 ── */
.hero__grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.03'/%3E%3C/svg%3E");
background-size: 200px;
opacity: .35;
mix-blend-mode: overlay;
}
/* ── 공통 fade-in ── */
@keyframes hero-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
/* ─────────────────────────────────────────────
① 최상단: 이름 블록 — Split & Merge 효과
⚠ overflow:hidden 절대 금지 — 자식 translate를 클리핑해 버림
───────────────────────────────────────────── */
.hero__names-block {
position: absolute;
top: 12.8%;
left: 0; right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* ── 공통 이름 스타일 + 초기 숨김 ── */
.hero__name {
font-family: 'NohHaeChan', var(--f-kr), serif;
font-size: clamp(26px, 7vw, 32px);
font-weight: 900;
letter-spacing: .18em;
color: rgba(255, 255, 255, .92);
line-height: 1.3;
display: inline-block;
will-change: transform, opacity;
/* 트랜지션: JS가 is-flying 클래스를 더하는 순간부터 동작 */
transition:
transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.8s ease;
}
/* ── 초기 위치: 사선 바깥, 불투명도 0 ── */
.hero__name--groom {
opacity: 0;
transform: translate(-100px, -100px);
}
.hero__name--bride {
opacity: 0;
transform: translate(100px, -100px);
}
/* ── is-flying: 두 이름이 중앙으로 미끄러져 들어옴 ── */
.hero__names-block.is-flying .hero__name--groom,
.hero__names-block.is-flying .hero__name--bride {
opacity: 1;
transform: translate(0, 0);
}
/* ── 하트: 합체 전 완전 숨김 ── */
.hero__names-heart {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(28px, 8vw, 36px);
color: rgba(252, 200, 252, 0.95);
display: inline-block;
opacity: 0;
transform: scale(0);
will-change: transform, opacity;
}
/* ── 하트 팡 키프레임 ──
0s : scale 0 (안 보임)
0.7× : scale 1.25 (피크, '팡')
1.0× : scale 1.0 (정착) */
@keyframes heart-pop {
0% { opacity: 0; transform: scale(0) rotate(-15deg); }
65% { opacity: 1; transform: scale(1.25) rotate(8deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* ── is-merged: 하트 팡 실행 ── */
.hero__names-block.is-merged .hero__names-heart {
animation: heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* ─────────────────────────────────────────────
보태니컬 장식 (피그마 left=13, top=208, rotate -8deg)
───────────────────────────────────────────── */
/* 숨쉬기 키프레임:
opacity 0.50 ↔ 1.0 을 천천히 오감 (alternate 로 부드럽게 왕복)
scale 0.97 ↔ 1.02: 살짝 부풀었다 가라앉는 생동감 추가 */
@keyframes deco-breathe {
from {
opacity: 0.50;
transform: rotate(-8deg) scale(0.97) translateZ(0);
}
to {
opacity: 1;
transform: rotate(-8deg) scale(1.02) translateZ(0);
}
}
.hero__deco {
position: absolute;
left: 3.2%; /* 13px / 412px */
top: 30.4%; /* 208px / 686px */
z-index: 3;
width: 8.5%; /* 35px / 412px */
transform-origin: top left;
filter: drop-shadow(0 2px 8px rgba(75,22,76,.4));
pointer-events: none;
/* GPU 레이어 위임 — 모바일 버벅임 방지 */
will-change: opacity, transform;
/* ① hero-in: 진입 애니메이션 (1.4s, 딜레이 0.3s)
② deco-breathe: 진입 완료 후(1.7s) 숨쉬기 무한 반복
2.6s · ease-in-out · infinite · alternate = 끊김 없이 왕복 */
animation:
hero-in 1.4s 0.3s ease-out both,
deco-breathe 2.6s 1.7s ease-in-out infinite alternate;
}
.hero__deco img { width: 100%; height: auto; display: block; }
/* ─────────────────────────────────────────────
② 중앙: WE ARE GETTING MARRIED
⚠ bottom 고정px 금지 — 브라우저 확대 시 사진과 어긋남
top: % 상대값으로 히어로 높이에 비례해 항상 같은 자리에 위치
───────────────────────────────────────────── */
.hero__we-are {
position: absolute;
top: calc(60% + 30px); /* 히어로 높이 기준 60% + 30px 하향 */
left: 0; right: 0;
z-index: 3;
display: flex;
justify-content: center; /* SVG를 가로 중앙 정렬 */
}
/* 인라인 SVG 컨테이너:
너비를 % + max-width 로 제한해 와이드 화면에서 잘리지 않음 */
.we-are-svg {
display: block;
width: 70%;
max-width: 500px;
height: auto;
overflow: visible;
/* preserveAspectRatio="xMidYMid meet" 은 SVG 마크업 속성으로 명시됨 */
}
/* ── WE ARE 드로잉 애니메이션 키프레임 ──
animation 속성은 CSS에 두지 않음 (0s 기본값 + forwards = 즉시 완료 버그)
JS가 트리거 시점에 path.style.animation 으로 일괄 주입 */
@keyframes wa-draw {
from { stroke-dashoffset: var(--dash-len); fill-opacity: 0; }
to { stroke-dashoffset: 0; fill-opacity: 1; }
}
.we-are-svg .wa-path {
/* 기본 상태: 완전 비가시 (stroke & fill 모두 숨김) */
fill: white;
fill-opacity: 0;
stroke: white;
stroke-width: 1.1;
stroke-linecap: round;
stroke-linejoin: round;
/* animation 은 JS에서만 설정 — CSS에 두면 duration=0s 즉시 완료 버그 발생 */
}
/* ─────────────────────────────────────────────
③ 최하단 텍스트: 날짜·장소 ★ 단일 선언 ★
bottom: 40px — 기기 무관하게 히어로 하단에 고정
(복잡한 calc/env/var 불필요 — 직관적 수치 하나만 사용)
───────────────────────────────────────────── */
.hero__content {
position: absolute;
bottom: 60px;
left: 0; right: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
animation: hero-in 1.2s .25s both;
}
.hero__meta-date,
.hero__meta-day {
font-family: 'OngleipWFontList', var(--f-ui), sans-serif;
font-size: clamp(12px, 4.0vw, 260px);
font-weight: 700;
letter-spacing: .10em;
color: rgba(255, 255, 255, .90);
line-height: 1.6;
/* translateY(-30px) 제거 — 위로 솟구치는 원인이었음 */
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.hero__meta-venue {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(16px, 4vw, 20px);
font-weight: 500;
letter-spacing: .06em;
color: rgba(230, 192, 230, .90);
line-height: 1.7;
margin-top: 2px;
/* translateY(-30px) 제거 — 위로 솟구치는 원인이었음 */
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
/* hero__nav — 히어로 내부 중복 네비바 제거됨 (bottom-nav로 통합) */
/* ── 슬라이드 인디케이터 (우측) ── */
.hero__indicators {
position: absolute;
right: clamp(14px, 3.5vw, 22px);
bottom: calc(59px + 16px); /* 네비바 높이(59px) + 여백 */
z-index: 4;
display: flex;
flex-direction: column;
gap: 6px;
}
.hero__dot {
width: 2px; height: 20px;
background: rgba(255,255,255,.22);
border-radius: 1px;
transition: height .4s var(--ease), background .4s;
}
.hero__dot--active { height: 36px; background: rgba(230, 192, 230, .85); }
/* ================================================
02 · OUR STORY — 흰 종이 섹션
================================================ */
.our-story {
background: #FFFDFD;
color: var(--ink);
padding: var(--sec-v) var(--pad-h);
position: relative;
content-visibility: auto;
contain-intrinsic-size: 0 800px;
}
.our-story__inner { max-width: 600px; margin: 0 auto; position: relative; }
/* 섹션 제목 (피그마: NanumMyeongjo Bold, #90203C) */
.our-story__title {
text-align: center;
color: #000000;
font-family: 'Nanum Myeongjo', serif;
font-size: 13.7px;
font-weight: 700;
letter-spacing: 0.12em;
padding-top: 28px;
padding-bottom: 6px;
}
/* 인트로 시 */
.our-story__poem {
text-align: center;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: var(--gray-5);
line-height: 26px;
padding-bottom: clamp(28px, 5vw, 40px);
word-break: keep-all;
}
.our-story__poem_b {
text-align: center;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
font-weight: 700;
color: var(--gray-5);
line-height: 26px;
padding-bottom: clamp(28px, 5vw, 40px);
word-break: keep-all;
}
/* ── cat'text: cats.svg 위에 텍스트 오버레이 ─────────────────
SVG viewBox: 537×365
텍스트 블록 중심: x=268.5(50%), y=287(78.6%)
→ 컨테이너에 aspect-ratio:537/365 고정 후
img/verse 모두 컨테이너 기준 % 포지셔닝
→ 어떤 해상도·줌에서도 이미지:텍스트 비율이 동일하게 유지
───────────────────────────────────────────────────────────── */
/* 1. 컨테이너: SVG 비율 고정 + 자식 포지셔닝 기준 */
.cat-text {
position: relative;
width: 100%;
/* SVG 원본 비율 537:365 → 이미지 크기가 변해도 컨테이너 높이가 같은 비율로 연동 */
aspect-ratio: 537 / 365;
margin-bottom: clamp(36px, 8vw, 52px);
/* 최대 너비 제한 + 중앙 정렬 */
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* 2. 이미지: 컨테이너를 완전히 채움 */
.cat-text__img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
/* SVG 자체가 이미 정확한 비율이므로 fill */
object-fit: fill;
}
/* 3. 텍스트: 컨테이너(=이미지) 기준 % 포지셔닝
SVG 내 텍스트 블록 중심 y=287/365=78.6%, x=268.5/537=50%
→ translate(-50%,-50%)로 중심점 자체를 해당 좌표에 고정 */
.cat-text__verse {
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
/* 텍스트 허용 너비: SVG 내 텍스트 블록 271/537 = 50.5% */
width: 85%;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
/* 폰트: SVG 원본 12.5px/537px = 2.33% 비율 → vw 비중 높여 반응형 강화 */
font-size: clamp(9px, 3.2vw, 13px);
font-weight: 400;
color: #4D4C4C;
line-height: 1.9;
word-break: keep-all;
text-align: center;
/* nowrap 제거: 작은 화면에서 줄바꿈 허용해 오버플로 방지 */
white-space: normal;
}
/* ── 달력 날짜 헤더 (타임라인 하단) ── */
.story-dates {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: transparent;
border: none;
padding: clamp(12px, 3vw, 18px) 0 clamp(8px, 2vw, 12px);
margin-top: clamp(4px, 1.5vw, 8px);
margin-bottom: 0;
}
/* 월/연도 레이블 */
.story-dates__month {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 11px;
letter-spacing: 0.12em;
color: #b99ade;
text-transform: uppercase;
line-height: 1;
}
/* 날짜 행 */
.story-dates__row {
display: flex;
align-items: flex-end;
gap: clamp(14px, 5vw, 26px);
}
/* 일반 날짜 숫자 */
.story-dates__num {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 16px;
color: #c4aed4;
line-height: 1;
padding-bottom: 7px;
min-width: 20px;
text-align: center;
}
/* 중앙 하트 */
.story-dates__num--center { padding-bottom: 0; }
.story-dates__heart {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 46px;
}
.story-dates__heart-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* filter는 부모 .story-dates__heart 애니메이션이 통합 관리 */
}
.story-dates__heart-num {
position: relative;
z-index: 1;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 18px;
font-weight: 700;
color: #fff;
line-height: 1;
margin-top: 2px; /* 하트 SVG 시각 중심 보정 */
}
/* ── 달력 하트 — 기본 글로우 */
.story-dates__heart {
filter: drop-shadow(0 2px 6px rgba(154, 123, 154, 0.28));
}
/* 프로그레스 선 도달 시 — 1회 확대 후 원래 크기로 복귀, 멈춤 */
@keyframes heart-once-pop {
0% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(154, 123, 154, 0.28)); }
50% { transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(154, 123, 154, 0.65)); }
100% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(154, 123, 154, 0.28)); }
}
.story-dates__heart.is-active {
animation: heart-once-pop 0.65s ease-in-out forwards;
}
/* ── story-dates — 주간달력과 여백 확보 ── */
.story-dates {
margin-bottom: clamp(28px, 6vw, 40px);
}
/* ════════════════════════════════════════
전체 달력 — 초투명 Glassmorphism
════════════════════════════════════════ */
.full-calendar {
margin-top: clamp(20px, 5vw, 28px);
background: rgba(255, 255, 255, 0.05); /* 초투명 */
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: none;
border-radius: 22px;
padding: clamp(12px, 3vw, 18px) clamp(6px, 1.5vw, 12px) clamp(10px, 2.5vw, 14px);
position: relative;
}
/* 그리드 — 요일 헤더 + 날짜 공통 */
.cal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.cal__grid--head {
margin-bottom: 4px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(196, 174, 212, 0.18); /* 요일/날짜 구분선만 유지 */
}
/* 요일 헤더 */
.cal__dow {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 11px;
text-align: center;
color: #c4aed4;
letter-spacing: 0.12em;
line-height: 1;
}
.cal__dow--sun { color: rgba(205, 110, 130, 0.70); }
.cal__dow--sat { color: rgba(110, 130, 205, 0.70); }
/* 날짜 셀 */
.cal__day {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: #b8a0cc;
text-align: center;
padding: 7px 0;
position: relative;
line-height: 1;
}
.cal__day--empty { visibility: hidden; }
.cal__day--sun { color: rgba(205, 110, 130, 0.65); }
.cal__day--sat { color: rgba(110, 130, 205, 0.65); }
/* ── 결혼식 날 (6일) — 반짝임 강조 ── */
.cal__day--wedding {
font-weight: 700;
color: #9A7B9A; /* 토요일 색상 덮어쓰기 */
animation: cal-wedding-sparkle 2.2s ease-in-out infinite;
}
/* 확장되는 글로우 링 */
.cal__day--wedding::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(154, 123, 154, 0);
transform: translate(-50%, -50%) scale(0.8);
animation: cal-glow-ring 2.2s ease-in-out infinite;
z-index: 0;
}
/* 숫자를 링 위에 표시 */
.cal__day--wedding > span {
position: relative;
z-index: 1;
color: #9A7B9A;
font-size: 13px;
font-weight: 700;
}
@keyframes cal-wedding-sparkle {
0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(154,123,154,0.00)); }
40% { transform: scale(1.14); filter: drop-shadow(0 0 8px rgba(154,123,154,0.72)); }
60% { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(154,123,154,0.50)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(154,123,154,0.00)); }
}
@keyframes cal-glow-ring {
0% { transform: translate(-50%,-50%) scale(0.6); background: rgba(154,123,154,0.00); }
40% { transform: translate(-50%,-50%) scale(1.1); background: rgba(154,123,154,0.14); }
70% { transform: translate(-50%,-50%) scale(1.5); background: rgba(154,123,154,0.04); }
100% { transform: translate(-50%,-50%) scale(1.9); background: rgba(154,123,154,0.00); }
}
/* ── 타임라인 ── */
.story-timeline {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(56px, 10vw, 88px); /* 타이틀 커짐에 맞춰 아이템 간격 확대 */
}
/* 중앙 세로선 — JS가 --tl-start / --tl-line-height 주입 */
.story-timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: var(--tl-start, 13px);
height: var(--tl-line-height, calc(100% - 13px));
bottom: auto;
width: 1px;
background: rgba(140, 176, 193, 0.35);
pointer-events: none;
}
/* ── 스크롤 진행 선 (top은 JS가 직접 설정) ── */
.story-progress {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: var(--tl-start, 13px);
width: 2px;
height: 0;
background: #d7c0e7;
border-radius: 1px;
pointer-events: none;
z-index: 1;
}
/* 타임라인 아이템 */
.story-item {
position: relative; /* dot 절대 위치 기준 */
z-index: 2; /* data-reveal transform이 stacking context 생성 →
z-index: 2 로 story-progress(z-index:1) 위에 배치 */
display: flex;
gap: clamp(20px, 5vw, 32px); /* 최소 20px 보장 — 중앙선 양쪽 10px 여백 확보 */
align-items: flex-start;
}
/* ── 타임라인 동그라미 dot ── */
.story-dot {
position: absolute;
left: 50%;
top: 7px;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: none;
border: none;
border-radius: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
/* 동그라미 본체 — 기본 상태 */
.story-dot::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #9A7B9A;
opacity: 0.35;
transform: scale(1);
transform-origin: center;
transition: transform .35s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s ease,
opacity .35s ease;
box-shadow: 0 0 0 3px #FFFBFA; /* 진행선이 dot 뒤로 숨도록 배경색 링 */
}
/* 진행선이 dot 중심을 지나침 → scale + 보라 글로우 */
.story-item.is-active .story-dot::before {
transform: scale(1.2);
opacity: 1;
box-shadow: 0 0 0 3px #bcb2b2, 0 0 15px #A78BFA;
}
/* 이미지 영역 */
.story-item__img { flex: 1; flex-shrink: 0; min-width: 0; }
.story-item__img img {
width: 100%;
aspect-ratio: 1; /* 정사각 크롭 */
object-fit: cover;
border-radius: 10px;
display: block;
}
/* 텍스트 영역 */
.story-item__text {
flex: 1;
padding-top: 4px;
height: auto;
min-height: 0;
min-width: 0; /* flex 자식 overflow 방지 */
overflow: hidden;
}
/* 짝수 아이템: 텍스트 우측 정렬 */
.story-item__text--right { text-align: right; }
/* 날짜 뱃지 (pill) */
.story-item__badge {
display: inline-block;
background: #9A7B9A;
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 11px;
line-height: 1.5;
white-space: nowrap;
}
/* 이벤트 제목 */
.story-item__title {
margin-top: 10px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: clamp(12px, 3.5vw, 22px);
font-weight: 700;
color: #1A1A1A;
line-height: 1.45;
white-space: nowrap; /* 자동 줄바꿈 금지 —
만 허용 */
height: auto;
}
/* 이벤트 설명 */
.story-item__desc {
margin-top: 10px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: clamp(11px, 2.8vw, 20px);
color: #4D4C4C;
line-height: 1.9;
white-space: nowrap; /* 자동 줄바꿈 금지 —
만 허용 */
height: auto;
font-weight: 500;
}
/* ================================================
03 · LOCATION — 흰 배경 (location.html 디자인 적용)
================================================ */
.location {
background: #FFF9FB;
color: var(--ink);
padding: var(--sec-v) var(--pad-h);
content-visibility: auto;
contain-intrinsic-size: 0 700px;
}
.location__inner { max-width: 600px; margin: 0 auto; }
/* 장소명·주소 (가운데 정렬) */
.location__hero {
text-align: center;
margin-bottom: clamp(20px, 4vw, 28px);
}
/* "오시는 길" 한글 부제목 */
.location__ko-title {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 19px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 14px;
}
/* 장소명 (크게) */
.location__venue {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: clamp(22px, 6vw, 28px);
font-weight: 500;
color: #1A1A1A;
line-height: 1.4;
margin-bottom: 2px;
}
/* 층 정보 */
.location__floor {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 15px;
color: #4D4C4C;
margin-bottom: 10px;
}
/* 주소 */
.location__address {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 15px;
font-weight: 500;
color: #000000;
line-height: 1.7;
}
.location__address--sub {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: #383131;
margin-bottom: 8px;
font-weight: 500;
}
/* 전화번호 */
.location__phone {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 14px;
color: #4D4C4C;
margin-top: 4px;
}
/* 지도 래퍼 */
.location__map {
width: 100%;
overflow: hidden;
border: 1px solid #EEEEEE;
border-radius: 4px;
margin-bottom: clamp(20px, 4vw, 28px);
position: relative; /* 바로가기 버튼 절대 위치 기준 */
}
/* ── 커스텀 말풍선 오버레이 ── */
.map-bubble {
background: #fff;
border-radius: 25px; /* 아주 둥근 칩 모양 */
padding: 7px 15px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
font-weight: 700;
color: #222;
white-space: nowrap;
/* 몽글몽글 소프트 그림자 */
box-shadow: 0 4px 14px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.07);
position: relative;
cursor: default;
user-select: none;
}
/* 말풍선 꼬리 (아래 삼각형) */
.map-bubble::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #fff;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.07));
}
/* 하트 포인트 컬러 */
.map-bubble__heart {
color: #ff4d4f;
}
/* ── 지도 바로가기 버튼 (우측 상단 플로팅) ── */
.map__kakao-link {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
display: flex;
align-items: center;
gap: 5px;
padding: 7px 13px;
background: #ff4d4f;
border: none;
border-radius: 20px; /* 캡슐 모양 */
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 12px;
font-weight: 700;
color: #fffefe;
text-decoration: none;
white-space: nowrap;
transition: box-shadow .2s, filter .2s;
}
.map__kakao-link:hover {
filter: brightness(0.95);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
/* 카카오맵 div */
#map {
width: 100%;
height: 300px;
border-radius: 4px;
display: block;
min-height: 300px !important;
}
/* ── 내비게이션 섹션 ── */
.location__nav {
margin-bottom: clamp(20px, 4vw, 28px);
}
.location__nav-title {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 15px;
color: #1A1A1A;
margin-bottom: 5px;
font-weight: 600;
}
.location__nav-desc {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: #4D4C4C;
margin-bottom: 12px;
font-weight: 500;
}
/* 내비 앱 3버튼 (동일 너비) */
.location__nav-btns {
display: flex;
gap: 6px;
}
.location__nav-btn {
flex: 1;
height: 44px;
padding: 0 4px;
background: #fff;
border-radius: 8px;
border: 1px solid #EAEAEA;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: #1A1A1A;
text-decoration: none;
transition: border-color .2s, background .2s;
}
.location__nav-btn:hover {
border-color: var(--rose);
background: rgba(201, 144, 154, .05);
}
/* 내비 버튼 PNG 아이콘 크기 */
.location__nav-icon {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
/* ── 셔틀버스 버튼 (내비 버튼 하단) ── */
.location__shuttle-row {
margin-top: 8px;
}
.location__shuttle-btn {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #fff;
border: 1px solid #EAEAEA;
border-radius: 8px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: #1A1A1A;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.location__shuttle-btn:hover {
border-color: var(--rose);
background: rgba(201, 144, 154, .05);
}
/* ── 셔틀버스 모달 ── */
.shuttle-modal {
display: none;
position: fixed;
inset: 0;
z-index: 500;
align-items: flex-end;
justify-content: center;
}
.shuttle-modal.is-open {
display: flex;
}
.shuttle-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.shuttle-modal__box {
position: relative;
background: #fff;
border-radius: 22px 22px 0 0;
width: 100%;
max-width: 600px;
max-height: 90dvh;
overflow-y: auto;
padding: 30px 22px 52px;
animation: slideUp .3s cubic-bezier(.16, 1, .3, 1);
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* 헤더 */
.shuttle-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1.5px solid #F0E8EA;
}
.shuttle-modal__title {
font-family: 'Noto Serif KR', serif;
font-size: 17px;
font-weight: 400;
color: #9C7A82;
letter-spacing: .04em;
}
.shuttle-modal__close {
background: none;
border: none;
font-size: 20px;
color: #999;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
transition: color .15s;
}
.shuttle-modal__close:hover { color: #333; }
/* ── 티맵 커스텀 확인 모달 ── */
.tmap-modal {
display: none;
position: fixed;
inset: 0;
z-index: 900;
align-items: center;
justify-content: center;
padding: 24px;
}
.tmap-modal.is-open { display: flex; }
.tmap-modal__overlay {
position: absolute;
inset: 0;
background: rgba(44, 26, 30, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.tmap-modal__box {
position: relative;
background: #fff;
border-radius: 24px;
width: min(320px, 100%);
padding: 32px 28px 24px;
text-align: center;
box-shadow: 0 20px 60px rgba(44, 26, 30, 0.18);
animation: tmap-pop .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes tmap-pop {
from { opacity: 0; transform: scale(.88) translateY(12px); }
to { opacity: 1; transform: none; }
}
/* 아이콘 영역 */
.tmap-modal__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 16px;
}
.tmap-modal__car {
font-size: 44px;
display: inline-block;
animation: tmap-car-go 1.4s ease-in-out infinite alternate;
}
@keyframes tmap-car-go {
from { transform: translateX(-4px); }
to { transform: translateX(4px); }
}
.tmap-modal__road {
font-size: 14px;
letter-spacing: 4px;
color: #E6C0E6;
font-weight: 700;
margin-left: 2px;
animation: tmap-road-blink 1.4s ease-in-out infinite alternate;
}
@keyframes tmap-road-blink {
from { opacity: 0.3; }
to { opacity: 1; }
}
/* 텍스트 */
.tmap-modal__title {
font-family: 'Noto Serif KR', serif;
font-size: 18px;
font-weight: 700;
color: #2C1A1E;
letter-spacing: .03em;
margin-bottom: 10px;
}
.tmap-modal__desc {
font-family: 'Noto Serif KR', serif;
font-size: 14px;
font-weight: 300;
color: #9C7A82;
line-height: 1.7;
margin-bottom: 24px;
}
.tmap-modal__copy-note {
display: inline-block;
margin-top: 6px;
font-size: 12px;
color: #C9909A;
background: rgba(201, 144, 154, 0.08);
border-radius: 20px;
padding: 3px 10px;
}
/* 버튼 */
.tmap-modal__btns {
display: flex;
gap: 10px;
}
.tmap-modal__btn {
flex: 1;
padding: 13px 0;
border: none;
border-radius: 14px;
font-family: 'Noto Serif KR', serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform .12s, opacity .12s;
}
.tmap-modal__btn:active { transform: scale(.96); opacity: .85; }
a.tmap-modal__btn { display: block; text-decoration: none; text-align: center; }
.tmap-modal__btn--cancel {
background: #F5F0F1;
color: #9C7A82;
}
.tmap-modal__btn--confirm {
background: linear-gradient(135deg, #C9909A 0%, #b07abf 100%);
color: #fff;
box-shadow: 0 4px 16px rgba(201, 144, 154, 0.35);
}
/* ── 티맵 앱 미설치 팝업 ──────────────────────────────────── */
.tmap-noapp-popup {
display: none;
position: fixed;
inset: 0;
z-index: 950;
align-items: center;
justify-content: center;
padding: 24px;
}
.tmap-noapp-popup.is-open { display: flex; }
.tmap-noapp-popup__overlay {
position: absolute;
inset: 0;
background: rgba(44, 26, 30, 0.50);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.tmap-noapp-popup__box {
position: relative;
background: #fff;
border-radius: 24px;
width: min(300px, 100%);
padding: 32px 24px 24px;
text-align: center;
box-shadow: 0 20px 60px rgba(44, 26, 30, 0.20);
animation: tmap-pop .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tmap-noapp-popup__icon {
font-size: 48px;
display: block;
margin-bottom: 14px;
}
.tmap-noapp-popup__title {
font-family: 'Noto Serif KR', serif;
font-size: 17px;
font-weight: 700;
color: #2C1A1E;
letter-spacing: .02em;
margin-bottom: 10px;
}
.tmap-noapp-popup__desc {
font-family: 'Noto Serif KR', serif;
font-size: 13.5px;
font-weight: 300;
color: #9C7A82;
line-height: 1.75;
margin-bottom: 24px;
}
.tmap-noapp-popup__btns {
display: flex;
gap: 10px;
}
.tmap-noapp-popup__btn {
flex: 1;
padding: 13px 0;
border: none;
border-radius: 14px;
font-family: 'Noto Serif KR', serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform .12s, opacity .12s;
text-decoration: none;
display: block;
text-align: center;
line-height: 1;
}
.tmap-noapp-popup__btn:active { transform: scale(.96); opacity: .85; }
.tmap-noapp-popup__btn--close {
background: #F5F0F1;
color: #9C7A82;
}
.tmap-noapp-popup__btn--install {
background: linear-gradient(135deg, #C9909A 0%, #b07abf 100%);
color: #fff;
box-shadow: 0 4px 16px rgba(201, 144, 154, 0.35);
}
/* 카드 래퍼: v2로 대체됨 (아래 ══ 셔틀 모달 v2 ══ 블록 참고) */
/* 개별 카드 */
.shuttle-card {
background: #FBF7F8;
border: 1.5px solid rgba(156, 122, 130, 0.28);
border-radius: 14px;
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* 카드 상단: 아이콘 + 레이블 */
.shuttle-card__head {
display: flex;
align-items: center;
gap: 8px;
}
.shuttle-card__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #9C7A82;
}
.shuttle-card__label {
font-family: 'Gowun Dodum', sans-serif;
font-size: 12px;
font-weight: 700;
color: #9C7A82;
letter-spacing: .12em;
text-transform: uppercase;
}
/* 방향 블록 (가는 길 / 오는 길) */
.shuttle-card__direction {
display: flex;
flex-direction: column;
gap: 8px;
}
.shuttle-card__dir-title {
font-family: 'Gowun Dodum', sans-serif;
font-size: 15px;
font-weight: 700;
color: #333;
margin: 0;
}
/* 출발지·시간 행 */
.shuttle-card__row {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: #fff;
border-radius: 10px;
border: 1px solid rgba(156, 122, 130, 0.2);
}
.shuttle-card__point {
font-family: 'Gowun Dodum', sans-serif;
font-size: 16px;
font-weight: 700;
color: #9C7A82;
line-height: 1.4;
}
.shuttle-card__time {
font-family: 'Gowun Dodum', sans-serif;
font-size: 16px;
font-weight: 700;
color: #9C7A82;
line-height: 1.4;
}
.shuttle-card__sub {
font-family: 'Gowun Dodum', sans-serif;
font-size: 14px;
font-weight: 700;
color: #333;
}
/* 탑승 위치 사진 */
.shuttle-card__figure {
margin: 0;
padding: 12px;
background: #fff;
border-radius: 10px;
border: 1px solid rgba(156, 122, 130, 0.2);
}
.shuttle-card__img {
width: 100%;
display: block;
border-radius: 8px;
object-fit: cover;
}
.shuttle-card__caption {
font-family: 'Gowun Dodum', sans-serif;
font-size: 12px;
color: #9C7A82;
text-align: center;
margin-top: 8px;
letter-spacing: .02em;
}
/* 안내 문구 (카드1 하단) */
.shuttle-card__message {
font-family: 'Gowun Dodum', sans-serif;
font-size: 14px;
font-weight: 700;
color: #333;
line-height: 1.7;
padding: 14px 16px;
background: #fff;
border-radius: 10px;
border: 1px solid rgba(156, 122, 130, 0.2);
margin: 0;
}
/* 주의 문구 (카드2 — 진하게 강조) */
.shuttle-card__warning {
font-family: 'Gowun Dodum', sans-serif;
font-size: 14px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.75;
padding: 14px 16px;
background: #FFF3F4;
border-left: 3px solid #9C7A82;
border-radius: 0 10px 10px 0;
margin: 0;
}
/* 하단 노트 */
.shuttle-card__note {
font-family: 'Gowun Dodum', sans-serif;
font-size: 13px;
color: #666;
border-top: 1px dashed rgba(156, 122, 130, 0.35);
padding-top: 10px;
margin: 0;
}
/* ══ 셔틀 모달 v2 카드 (image-first 2열 그리드) ══ */
/* 카드 래퍼: 모바일 1열, 태블릿+ 2열 */
.shuttle-modal__cards {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
/* 개별 카드 */
.shuttle-card-v2 {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 14px rgba(156, 122, 130, 0.14);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 상단 이미지 영역 — 16:9 비율 */
.card__image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 248 / 183;
overflow: hidden;
background: #FCE4EC;
}
.card__image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 이미지 미삽입 플레이스홀더 */
.card__image-wrapper--empty {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #FCE4EC 0%, #F0D4DC 100%);
}
.card__image-placeholder {
font-size: 42px;
opacity: 0.45;
}
/* 하단 콘텐츠 */
.card__content {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}
/* 카드 레이블 (SHUTTLE / VEHICLE 등) */
.card__label {
font-family: 'Noto Serif KR', serif;
font-size: 11px;
font-weight: 400;
letter-spacing: .18em;
color: #9C7A82;
text-transform: uppercase;
margin-bottom: 2px;
}
/* 아이콘 + 텍스트 행 */
.card__info-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.card__info-icon {
font-size: 13px;
flex-shrink: 0;
line-height: 1.5;
}
.card__info-text {
font-family: 'Gowun Dodum', sans-serif;
font-size: 14px;
color: #444;
line-height: 1.55;
}
.card__info-text--bold {
font-weight: 700;
color: #9C7A82;
font-size: 15px;
}
/* 설명 보조 텍스트 */
.card__sub {
font-family: 'Gowun Dodum', sans-serif;
font-size: 13px;
color: #666;
line-height: 1.75;
}
/* 하단 노트 */
.card__note {
font-family: 'Gowun Dodum', sans-serif;
font-size: 12px;
color: #999;
border-top: 1px dashed rgba(156, 122, 130, 0.3);
padding-top: 9px;
margin-top: 2px;
line-height: 1.65;
}
/* 태블릿·데스크탑: 2열 나란히 */
@media (min-width: 540px) {
.shuttle-modal__cards {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
}
/* ── 교통 안내 ── */
.location__transport { display: flex; flex-direction: column; }
/* 각 교통 카드: 상단 구분선 + 제목-내용 그리드 */
.transport-card {
padding: 18px 0;
border-top: 1px solid #E0E0E0;
display: grid;
grid-template-columns: 60px 1fr;
gap: 12px;
align-items: start;
}
.transport-card:last-child { border-bottom: 1px solid #E0E0E0; }
/* 교통 카드 제목 */
.transport-card__title {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 15px;
font-weight: 500;
color: #1A1A1A;
padding-top: 2px;
}
/* 교통 카드 본문 */
.transport-card__body {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 14px;
color: #4D4C4C;
line-height: 1.9;
font-weight: 600;
}
/* 노선 색상 점 */
.line-dot { font-style: normal; }
.line-dot--busan1 { color: #f06a00; } /* 부산 1호선 주황 */
.line-dot--busan3 { color: #bb730b; } /* 부산 3호선 갈색 */
.line-dot--bus-city { color: #0068b7; } /* 일반버스 파란색 */
.line-dot--bus-village { color: #5bb025; } /* 마을버스 연두색 */
/* 들여쓰기 안내 */
.transport-sub {
color: #4D4C4C;
padding-left: 2px;
font-weight: 700;
}
.transport-sub-s {
color: #4D4C4C;
padding-left: 2px;
font-size: 12px;
font-weight: 500;
white-space: nowrap; /* Z플립에서도 절대 줄바꿈 안 되게 고정 */
letter-spacing: -0.5px; /* 글자 사이를 살짝 조여서 가로 폭 확보 */
}
/* 역/정류장 간 줄 간격 */
.transport-row-gap { margin-top: 7px; }
/* 도보 시간 보조 텍스트 */
.transport-walk {
font-size: 12px;
color: #999;
margin-left: 2px;
}
/* 정류장명 */
.transport-stop {
font-size: 13px;
color: #666;
margin-bottom: 3px;
font-weight: 700;
}
/* 노선 종류 뱃지 (일반/마을) */
.transport-route-type {
display: inline-block;
font-size: 11px;
padding: 1px 6px;
border-radius: 3px;
margin-right: 3px;
vertical-align: middle;
line-height: 1.7;
font-weight: 700;
}
.transport-route-type--city { background: #e8f0fb; color: #0068b7; } /* 일반버스 */
.transport-route-type--village { background: #eaf5e1; color: #3d8a10; } /* 마을버스 */
/* 마지막 교통 카드 하단 구분선 (tip 박스가 :last-child를 대체하므로 명시) */
.transport-card--last { border-bottom: 1px solid #E0E0E0; }
/* 팁 강조 박스 */
.transport-tip {
background: rgba(201, 144, 154, 0.09); /* 연한 로즈 */
border-left: 3px solid #C9909A;
border-radius: 0 8px 8px 0;
padding: 11px 14px;
margin: 14px 0 18px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 13px;
color: #4D4C4C;
line-height: 1.75;
}
.transport-tip__icon { margin-right: 3px; }
.transport-tip strong { color: #9C7A82; font-weight: 700; }
/* ================================================
04 · GALLERY — 사진 그리드
================================================ */
.gallery {
background: #FFFBFB;
color: var(--ink);
padding: var(--sec-v) var(--pad-h);
position: relative;
isolation: isolate;
content-visibility: auto;
contain-intrinsic-size: 0 600px;
}
.gallery__inner { max-width: 660px; margin: 0 auto; position: relative; }
/* ── 뷰어 래퍼 ── */
.gallery__viewer {
margin-top: clamp(20px, 4vw, 32px);
}
/* 큰 사진 래퍼 */
.gallery__main {
position: relative;
width: 100%;
aspect-ratio: 3/4; /* 세로형 포트레이트 (g.html 비율 기준) */
background: #F9FAFB;
border-radius: 12px;
border: 1px solid #E5E7EB;
overflow: hidden;
margin-bottom: 8px;
}
/* 메인 이미지 */
.gallery__main-img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: opacity 0.25s ease;
}
/* 좌우 화살표 버튼 */
.gallery__arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 40px; height: 40px;
background: rgba(0,0,0,0.20);
border: none; border-radius: 9999px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 2;
transition: background .2s;
}
.gallery__arrow:hover { background: rgba(0,0,0,0.42); }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
/* 페이지 카운터 (좌하단 pill) */
.gallery__counter {
position: absolute;
bottom: 14px; left: 14px; z-index: 2;
background: rgba(0,0,0,0.35);
border-radius: 9999px;
padding: 4px 10px;
font-family: Arial, sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.95);
line-height: 1.4;
pointer-events: none;
}
/* 전체보기 버튼 (우하단 pill) */
.gallery__viewall {
position: absolute;
bottom: 14px; right: 14px; z-index: 2;
height: 32px;
padding: 0 14px;
background: rgba(255,255,255,0.85);
border: none; border-radius: 9999px;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 12px; color: #515151;
cursor: pointer;
transition: background .2s;
}
.gallery__viewall:hover { background: rgba(255,255,255,1); }
/* 썸네일 스트립 */
.gallery__thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none; /* Firefox */
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
/* 썸네일 버튼 */
.gallery__thumb {
flex-shrink: 0;
width: 64px; height: 64px;
border-radius: 6px;
border: 2px solid transparent;
outline: 1px solid rgba(0,0,0,0.10);
overflow: hidden; padding: 0;
cursor: pointer; background: none;
opacity: 0.65;
transition: border-color .2s, opacity .2s;
}
.gallery__thumb img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
/* 활성 썸네일 */
.gallery__thumb--active {
border-color: #C9909A; /* 로즈 포인트 */
outline-color: transparent;
opacity: 1;
}
.gallery__thumb:hover { opacity: 0.85; }
/* ── 전체보기 모달 (Bottom Sheet) ── */
.gal-modal {
display: none;
position: fixed; inset: 0; z-index: 9000;
}
.gal-modal.is-open { display: flex; align-items: flex-end; }
.gal-modal__overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.50);
}
.gal-modal__box {
position: relative; width: 100%;
max-height: 90vh;
background: #F8F5F2; /* 연한 크림 — 사진이 돋보이는 배경 */
border-radius: 20px 20px 0 0;
display: flex; flex-direction: column;
z-index: 1; overflow: hidden;
}
.gal-modal__header {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 20px 12px;
border-bottom: 1px solid #F0F0F0;
flex-shrink: 0;
}
.gal-modal__title {
font-family: var(--f-display);
font-size: 14px; color: #1A1A1A;
letter-spacing: .1em; text-transform: uppercase;
}
.gal-modal__close {
width: 32px; height: 32px;
border: none; background: none;
font-size: 18px; color: #666;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
/* ── 전체보기 모달 — Masonry (CSS columns) ──
원본 비율을 그대로 유지하며 2열로 자연스럽게 쌓임 */
.gal-modal__grid {
overflow-y: auto;
padding: 16px;
/* CSS columns masonry: 외부 라이브러리 없이 원본 비율 유지 */
columns: 2;
column-gap: 14px;
}
.gal-modal__item {
/* 열 중간에서 잘리지 않도록 */
break-inside: avoid;
margin-bottom: 14px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
/* hover: 아이템 전체를 살짝 띄우기 — 이미지 잘림 없음 */
transition: transform .22s ease, box-shadow .22s ease;
}
.gal-modal__item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.gal-modal__item img {
width: 100%;
height: auto; /* ← 핵심: 원본 비율 그대로 */
display: block;
}
/* 라이트박스 */
.lightbox {
display: none;
position: fixed; inset: 0; z-index: 9999;
background: rgba(8,8,7,.97);
align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox__img {
max-width: 92vw; max-height: 82vh;
object-fit: contain; filter: grayscale(.3);
transition: opacity .25s ease;
}
.lightbox__nav {
position: fixed; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,.12); border: none;
color: rgba(255,255,255,.75);
font-size: 44px; line-height: 1;
width: 52px; height: 72px;
display: flex; align-items: center; justify-content: center;
border-radius: 3px; cursor: pointer;
transition: background .2s, color .2s;
z-index: 10000;
padding: 0;
}
.lightbox__nav:hover { background: rgba(255,255,255,.25); color: #fff; }
.lightbox__prev { left: 10px; }
.lightbox__next { right: 10px; }
.lightbox__counter {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
font-family: 'Noto Serif KR', serif; font-size: 12px; font-weight: 200;
color: rgba(255,255,255,.45); letter-spacing: .15em;
}
.lightbox__close {
position: fixed; top: 20px; right: 24px;
font-family: var(--f-ui); font-weight: 100; font-size: 24px;
background: none;
color: rgba(255,255,255,.5);
width: 40px; height: 40px;
border: .5px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: color .2s, border-color .2s;
}
.lightbox__close:hover { color: var(--white); border-color: var(--white); }
/* ================================================
05 · ACCOUNT DETAILS — 화이트 섹션
================================================ */
.account {
background: #F3ECF3;
color: var(--ink);
padding: var(--sec-v) var(--pad-h);
position: relative;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
.account__inner { max-width: 600px; margin: 0 auto; position: relative; }
/* ──────────────────────────────────────────
화환 사양 안내 — Layered Glassmorphism
꽃 색감 팔레트:
연분홍 #F9C5D1 / 딥로즈 #C9909A
민트그린 #B9E4C9 / 라벤더 #D4C0E8
────────────────────────────────────────── */
/* 1. 최외곽 래퍼 — 꽃 이미지 포지셔닝 컨텍스트 */
.no-wreath {
position: relative;
margin-bottom: clamp(28px, 6vw, 40px);
/* 꽃이 넘칠 수 있도록 overflow 허용 */
overflow: visible;
}
/* 2. 꽃 이미지 — 좌상단 & 우하단 레이어 */
.no-wreath__flower {
position: absolute;
width: clamp(90px, 28vw, 130px);
pointer-events: none;
user-select: none;
z-index: 2;
}
.no-wreath__flower--tl {
top: -22px;
left: -18px;
transform: rotate(-20deg) scaleX(-1);
opacity: 0.82;
}
.no-wreath__flower--br {
bottom: -22px;
right: -18px;
transform: rotate(160deg) scaleX(-1);
opacity: 0.75;
}
/* 3. 글래스 내부 컨테이너 */
.no-wreath__glass {
position: relative;
z-index: 1;
background: rgba(255, 248, 250, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(249, 197, 209, 0.55);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(201, 144, 154, 0.14),
0 2px 8px rgba(201, 144, 154, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
padding: clamp(22px, 5vw, 32px) clamp(18px, 4vw, 26px);
text-align: center;
}
/* 4. 헤더 영역 */
.no-wreath__header {
margin-bottom: 18px;
}
/* 영문 배지 */
.no-wreath__badge {
display: inline-block;
font-family: 'Playfair Display', serif;
font-size: clamp(9px, 2.2vw, 10.5px);
font-style: italic;
letter-spacing: 0.14em;
color: #fff;
background: linear-gradient(120deg, #D4A0AA 0%, #C9909A 100%);
border-radius: 20px;
padding: 3px 12px;
margin-bottom: 10px;
}
.no-wreath__title {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: clamp(15px, 3.8vw, 17px);
font-weight: 700;
color: #B87280;
margin-bottom: 8px;
word-break: keep-all;
}
.no-wreath__body {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: clamp(12px, 2.8vw, 13.5px);
color: #8a7070;
line-height: 1.95;
word-break: keep-all;
}
/* 5. 구분선 */
.no-wreath__divider {
display: flex;
align-items: center;
justify-content: center;
margin: 14px 0 16px;
}
.no-wreath__divider span {
display: block;
width: 48px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,144,154,0.5), transparent);
}
/* 6. 카드 3개 */
.no-wreath__cards {
display: flex;
gap: 8px;
}
/* 카드 3개 — 단일 통일 스타일
색상 분리 제거, 로즈 팔레트로 통합
상단 2px 포인트 선으로 구조감, 이모지가 시각 차별화 담당 */
.no-wreath__card {
flex: 1;
border-radius: 20px;
padding: clamp(18px, 4.5vw, 24px) clamp(10px, 2.5vw, 14px);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #FFFFFF;
border: 1px solid #F5E6E8;
border-top: 2px solid #D4A0A8;
box-shadow: 0 2px 12px rgba(180, 120, 138, 0.06);
}
/* 컬러 모디파이어 제거 — 세 카드 동일 스타일로 통일 */
.no-wreath__card--green,
.no-wreath__card--pink,
.no-wreath__card--purple { /* intentionally empty */ }
/* 아이콘: 로즈 틴트 원형 배경으로 의도된 느낌 부여 */
.no-wreath__card-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #FDF0F2;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
flex-shrink: 0;
}
.no-wreath__card-title {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: clamp(10px, 2.6vw, 11.5px);
font-weight: 700;
color: #B87280;
}
.no-wreath__card-desc {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: clamp(9px, 2.1vw, 10.5px);
color: #8a7a7a;
line-height: 1.7;
word-break: keep-all;
text-align: center;
}
/* ─────────────────────────────────────────────────
화환 사양 2안 — 심플 & 큐트 감성 공지형
class="wreath-reject-v2"
───────────────────────────────────────────────── */
.wreath-reject-v2 {
margin-bottom: clamp(28px, 6vw, 40px);
padding: clamp(28px, 6vw, 40px) clamp(16px, 4vw, 28px);
background: #FFFFFF;
border-radius: 20px;
border: 1px solid #F9E8E8;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
text-align: center;
position: relative;
}
/* 상단 중앙 포인트 꽃 (flower02.png) */
.wrv2__top-flower {
display: block;
width: clamp(52px, 13vw, 72px);
height: auto;
margin: 0 auto clamp(14px, 3.5vw, 20px);
opacity: 0.88;
filter: drop-shadow(0 2px 6px rgba(201,144,154,0.18));
}
/* 좌·우 꽃 + 텍스트를 가로로 배치 */
.wrv2__body {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 3vw, 20px);
}
/* 좌우 사이드 꽃 공통 */
.wrv2__side-flower {
width: clamp(36px, 9vw, 54px);
height: auto;
flex-shrink: 0;
opacity: 0.82;
filter: drop-shadow(0 2px 5px rgba(201,144,154,0.14));
}
.wrv2__side-flower--left { transform: rotate(-12deg); }
.wrv2__side-flower--right { transform: rotate( 14deg); }
/* 텍스트 블록 */
.wrv2__text {
flex: 1;
min-width: 0;
}
/* 제목 */
.wrv2__title {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(16px, 4.2vw, 20px);
color: #7a5060;
line-height: 1.55;
word-break: keep-all;
margin-bottom: clamp(10px, 2.5vw, 14px);
font-weight: 600;
}
/* 구분선 */
.wrv2__line {
display: block;
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,144,154,0.45), transparent);
margin: 0 auto clamp(10px, 2.5vw, 14px);
}
/* 본문 */
.wrv2__desc {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(11px, 2.6vw, 13px);
color: #8a7070;
line-height: 2;
word-break: keep-all;
}
/* 아코디언 */
.accordion { display: flex; flex-direction: column; }
.accordion-item {
border-top: 1px solid #F0E8EC;
background: #fff;
border-radius: 12px;
margin-bottom: 8px;
overflow: hidden;
box-shadow: 0 1px 6px rgba(201, 144, 154, 0.08);
}
.accordion-item:last-child { margin-bottom: 0; }
.accordion-trigger {
width: 100%;
padding: clamp(16px, 3.2vw, 22px) clamp(16px, 4vw, 22px);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background .2s;
background: transparent;
}
.accordion-trigger:hover { background: #EEE5EE; }
.accordion-trigger__label {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: clamp(15px, 3.5vw, 18px);
font-weight: 600;
color: #1A1A1A;
letter-spacing: .02em;
}
.accordion-trigger__en {
font-family: var(--f-ui);
font-size: .6em;
font-weight: 300;
letter-spacing: .18em;
color: #C9909A;
margin-left: .7em;
font-style: normal;
}
.accordion-trigger__chevron {
width: 18px; height: 18px;
color: #C9909A;
transition: transform .4s var(--ease);
flex-shrink: 0;
}
.accordion-item.open .accordion-trigger__chevron { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.accordion-item.open .accordion-body { max-height: 900px; }
.accordion-body__inner {
padding: 0 clamp(16px, 4vw, 22px) clamp(16px, 3.5vw, 22px);
display: flex;
flex-direction: column;
}
/* 계좌 카드 */
.account-card {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 0 14px;
padding: clamp(12px, 2.5vw, 16px) 0;
border-bottom: 1px solid #F5EEF0;
}
.account-card:last-child { border-bottom: none; }
.account-card__role {
font-family: var(--f-ui);
font-size: 9px;
font-weight: 400;
letter-spacing: .22em;
color: #C9909A;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
.account-card__info { display: flex; flex-direction: column; gap: 3px; }
.account-card__name {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: clamp(15px, 3.2vw, 19px);
font-weight: 600;
color: #1A1A1A;
}
.account-card__number {
font-family: var(--f-ui);
font-size: clamp(11px, 1.8vw, 13px);
font-weight: 300;
color: #999;
letter-spacing: .05em;
}
/* 복사 버튼 */
.copy-btn {
font-family: var(--f-ui);
font-size: 10px;
font-weight: 400;
letter-spacing: .18em;
text-transform: uppercase;
color: #C9909A;
padding: 7px 13px;
border: 1px solid #EACCD2;
border-radius: 100px;
flex-shrink: 0;
transition: all .2s;
background: transparent;
}
.copy-btn:hover { border-color: #C9909A; background: #FFF0F3; }
.copy-btn.copied {
color: #fff;
background: #C9909A;
border-color: #C9909A;
}
/* ================================================
통합 아코디언 — greetings-accordions
연락처(contact) + 계좌(account) 세트
JS: 기존 .accordion-trigger / .accordion-item 재사용
================================================ */
/* 래퍼 */
.greetings-accordions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: clamp(28px, 6vw, 40px);
}
/* 아이템 — 배경/테두리 없음, 트리거가 버튼 역할 */
.greetings-accordions .accordion-item {
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
margin: 0;
}
/* ── 트리거 버튼: 필(pill) 모양의 독립 버튼 ── */
.av2__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(16px, 4vw, 22px); /* 세로 패딩 제거 → height로 통일 */
height: 62px; /* 세 버튼 고정 높이 */
box-sizing: border-box;
background: rgba(154, 123, 154, 0.08);
border: 1.5px solid rgba(154, 123, 154, 0.38);
border-radius: 50px;
cursor: pointer;
gap: 12px;
text-align: left;
transition:
background 0.25s ease,
border-color 0.25s ease,
border-radius 0.25s ease;
}
.av2__trigger:hover {
background: rgba(154, 123, 154, 0.13);
}
/* 열렸을 때 — 위 모서리만 둥글게, 아래는 내용과 연결 */
.greetings-accordions .accordion-item.open .av2__trigger {
background: rgba(154, 123, 154, 0.14);
border-color: rgba(154, 123, 154, 0.55);
border-radius: 18px 18px 0 0;
border-bottom-color: transparent;
}
/* 트리거 좌측: 꽃 아이콘 + 텍스트 */
.av2__trigger-content {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
/* 꽃 포인트 아이콘 */
.av2__icon {
width: clamp(30px, 7.5vw, 40px);
height: auto;
flex-shrink: 0;
opacity: 0.9;
filter: drop-shadow(0 1px 3px rgba(201,144,154,0.2));
}
/* 라벨 텍스트 블록 — 세 버튼 모두 동일 크기 */
.av2__label {
display: flex;
flex-direction: column;
gap: 3px;
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(15px, 3.8vw, 17px); /* 세 버튼 완전 통일 */
color: #3D1A40;
font-weight: 700;
letter-spacing: 0.02em;
}
.av2__sublabel {
font-family: var(--f-ui), sans-serif;
font-size: clamp(10px, 2.2vw, 12px);
color: rgba(154, 123, 154, 0.85);
letter-spacing: 0.14em;
font-weight: 400;
}
/* 화살표 */
.av2__chevron {
width: 22px;
height: 22px;
flex-shrink: 0;
color: rgba(154, 123, 154, 0.8);
transition: transform 0.3s ease;
}
/* 아코디언 바디 */
.greetings-accordions .accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
border: none;
background: transparent;
}
.greetings-accordions .accordion-item.open .accordion-body {
max-height: 1000px;
background: #ffffff;
border: 1.5px solid rgba(154, 123, 154, 0.55);
border-top: none;
border-radius: 0 0 18px 18px;
}
/* 내부 콘텐츠 */
.av2__body-inner {
padding: 8px clamp(18px, 4.5vw, 24px) clamp(16px, 4vw, 22px);
display: flex;
flex-direction: column;
gap: 0;
}
/* 연락처 body: 두 컬럼 그리드 */
.ctv2__body-inner {
padding: 10px 10px 12px;
}
/* 계좌 카드 한 줄 */
.av2__card {
display: flex;
align-items: center;
gap: 14px;
padding: clamp(16px, 4vw, 20px) 0;
border-bottom: 1px solid rgba(201, 144, 154, 0.15);
}
.av2__card:last-child { border-bottom: none; }
/* 역할 뱃지 (부친·모친·신랑·신부) */
.av2__role {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(13px, 3vw, 15px);
color: #C9909A;
white-space: nowrap;
width: 34px;
flex-shrink: 0;
font-weight: 700;
}
/* 이름 + 계좌번호 */
.av2__info {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 0;
}
.av2__name {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(16px, 3.8vw, 19px);
color: #222222;
font-weight: 700;
}
.av2__bank {
font-family: var(--f-ui), sans-serif;
font-size: clamp(13px, 3.2vw, 16px);
color: #C9909A;;
font-weight: 400;
white-space: normal;
word-break: break-all;
overflow: visible;
text-overflow: clip;
letter-spacing: 0.03em;
}
.av2__bank_num {
font-family: var(--f-ui), sans-serif;
font-size: clamp(13px, 3.2vw, 16px);
color: #211738;
font-weight: 500;
white-space: normal;
word-break: break-all;
overflow: visible;
text-overflow: clip;
letter-spacing: 0.03em;
}
/* 복사 버튼 — 크고 누르기 쉬운 터치 영역 */
.av2__copy {
flex-shrink: 0;
padding: 11px 18px;
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(13px, 3vw, 15px);
color: #C9909A;
background: transparent;
border: 1.5px solid rgba(201, 144, 154, 0.5);
border-radius: 24px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
font-weight: 700;
min-width: 60px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.av2__copy:hover { background: #FFF0F3; border-color: #C9909A; }
.av2__copy.copied { background: #C9909A; color: #fff; border-color: #C9909A; }
/* ================================================
연락처 내부 (ctv2__)
greetings-accordions 아코디언 바디 내부
================================================ */
/* 2열 그리드 */
.ctv2__sides {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* 각 사이드 — 배경 없음, 구분선으로만 분리 */
.ctv2__side {
background: transparent;
border: none;
padding: 0;
}
/* 신랑측 / 신부측 라벨 */
.ctv2__side-label {
display: flex;
align-items: center;
gap: 5px;
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(13px, 3vw, 15px);
color: #C9909A;
font-weight: 700;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(201, 144, 154, 0.2);
}
.ctv2__side-flower {
width: 18px;
height: auto;
flex-shrink: 0;
}
/* 연락처 카드 한 줄 */
.ctv2__card {
display: flex;
align-items: center;
gap: 4px;
padding: 9px 0;
border-bottom: 1px solid rgba(201, 144, 154, 0.1);
}
.ctv2__card:last-child { border-bottom: none; }
/* 역할 뱃지 */
.ctv2__role {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: 11px;
color: #C9909A;
font-weight: 700;
width: 22px;
flex-shrink: 0;
text-align: center;
}
/* 이름 */
.ctv2__name {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(16px, 3.8vw, 19px);
color: #222222;
font-weight: 700;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 버튼 묶음 */
.ctv2__btns {
display: flex;
gap: 3px;
flex-shrink: 0;
}
/* 전화 / 카카오 버튼 공통 */
.ctv2__btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 10px;
transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
flex-shrink: 0;
}
.ctv2__btn:active { transform: scale(0.88); }
/* 전화 — 로즈 핑크 */
.ctv2__btn--phone {
background: rgba(201, 144, 154, 0.12);
color: #C9909A;
border: 1.5px solid rgba(201, 144, 154, 0.45);
}
.ctv2__btn--phone:hover { background: rgba(201, 144, 154, 0.22); }
/* 카카오톡 — 카카오 브랜드 옐로우 */
.ctv2__btn--kakao {
background: #FEE500;
color: #3A1D1D;
border: none;
}
.ctv2__btn--kakao:hover { background: #f5db00; }
/* 카카오 이미지 아이콘 — 버튼(26px)에 꽉 차게, 다른 아이콘과 높이 일치 */
.ctv2__kakao-img {
width: 16px;
height: 16px;
object-fit: contain;
display: block;
}
/* ── 이름 검색 바 (ctv2 내부) ── */
.ctv2__search {
margin-bottom: 2px;
}
.ctv2__search-row {
display: flex;
gap: 6px;
align-items: center;
}
.ctv2__search-input {
flex: 1;
height: 34px;
padding: 0 10px;
border: 1.5px solid rgba(201, 144, 154, 0.35);
border-radius: 20px;
background: rgba(255,255,255,0.75);
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 12px;
color: #5a3d45;
outline: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.ctv2__search-input::placeholder { color: #c4aab4; }
.ctv2__search-input:focus {
border-color: rgba(201, 144, 154, 0.7);
box-shadow: 0 0 0 3px rgba(201, 144, 154, 0.12);
}
.ctv2__search-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: rgba(201, 144, 154, 0.15);
color: #C9909A;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.ctv2__search-btn:hover { background: rgba(201, 144, 154, 0.28); }
.ctv2__search-btn:active { transform: scale(0.88); }
/* 검색 결과 행 */
.ctv2__search-result {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 8px;
padding: 7px 10px;
background: rgba(201, 144, 154, 0.07);
border-radius: 12px;
border: 1px solid rgba(201, 144, 154, 0.2);
}
.ctv2__result-info {
display: flex;
align-items: baseline;
gap: 5px;
flex: 1;
min-width: 0;
}
.ctv2__result-role {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: 10px;
color: #C9909A;
flex-shrink: 0;
}
.ctv2__result-name {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: 13px;
color: #5a3d45;
font-weight: 600;
flex-shrink: 0;
}
.ctv2__result-msg {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 10px;
color: #b08090;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 구분선 */
.ctv2__search-divider {
margin: 10px 0 8px;
height: 1px;
background: rgba(201, 144, 154, 0.15);
}
/* ================================================
06 · CONGRATULATIONS — 화이트 게스트북
================================================ */
.congrats {
background: #E7DAE7;
color: var(--ink);
padding: var(--sec-v) var(--pad-h);
position: relative;
content-visibility: auto;
contain-intrinsic-size: 0 600px;
}
.congrats__inner { max-width: 580px; margin: 0 auto; }
/* 헤더 영역 */
.congrats__top {
margin-bottom: clamp(16px, 4vw, 24px);
}
.congrats__header { text-align: left; }
/* 작성하기 버튼 — 우측 정렬 */
.congrats__write-row {
display: flex;
justify-content: flex-end;
margin-bottom: clamp(16px, 4vw, 24px);
}
.congrats__en-title {
font-family: 'Nanum Myeongjo', serif;
font-size: clamp(26px, 7vw, 34px);
font-weight: 400;
font-style: italic;
color: #C9909A;
letter-spacing: .04em;
margin-bottom: 6px;
}
.congrats__ko-title {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: clamp(11px, 2.6vw, 13px);
font-weight: 400;
color: #bbb;
letter-spacing: .35em;
text-transform: uppercase;
margin-bottom: 18px;
}
.congrats__desc {
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: clamp(12.5px, 2.8vw, 14px);
color: #999;
line-height: 2;
letter-spacing: .02em;
}
/* 메시지 목록 */
.message-list {
display: flex;
flex-direction: column;
gap: 8px;
height: auto; /* 자식 합산 높이로 자동 확장 */
margin-bottom: clamp(20px, 5vw, 32px);
}
/* ──────────────────────────────────────────────────
댓글 카드 — Figma [co] 정밀 수치 적용
name: 15.3px #1a1a1a / date: 13.1px #999
content: 15.3px #4d4c4c / lh: 27px
────────────────────────────────────────────────── */
.message-card {
display: flex;
flex-direction: column; /* flex로 order 제어 */
flex-shrink: 0; /* 댓글 수 증가 시 카드 높이 압축 방지 */
background: #ffffff;
border-radius: 14px;
border: 1px solid rgba(201, 144, 154, 0.15);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
padding: 16px 16px 12px;
position: relative;
gap: 0;
}
/* 작성자+날짜 행 → order: -1로 카드 최상단에 배치 */
.message-card__bottom {
order: -1;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 11px;
margin-bottom: 11px;
border-bottom: 1px solid rgba(201, 144, 154, 0.12);
/* 삭제 버튼 공간 확보 */
padding-right: 24px;
}
/* 작성자 이름 — 15.3px #1a1a1a (Figma 수치 그대로) */
.message-card__from {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 15.3px;
color: #1a1a1a;
font-weight: 600;
letter-spacing: .01em;
}
/* "From " 접두 레이블 — 축소, 보조색 */
.message-card__from-label {
font-size: 10px;
font-style: italic;
font-weight: 400;
color: #c4a8e0;
margin-right: 3px;
letter-spacing: .06em;
}
/* 날짜 — 13.1px #999 (Figma 수치 그대로) */
.message-card__date {
font-size: 13.1px;
color: #999;
letter-spacing: .02em;
white-space: nowrap;
flex-shrink: 0;
}
/* 본문 텍스트 — 15.3px #4d4c4c lh:27px (Figma 수치 그대로) */
.message-card__text {
order: 0;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 12px;
color: #4d4c4c;
line-height: 27px;
word-break: keep-all;
margin-bottom: 8px;
}
/* 삭제 버튼 — 우상단 절대 위치, 심플 × */
.message-card__delete {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
color: #d8d8d8;
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color .15s, background .15s;
}
.message-card__delete:hover {
color: #b99ade;
background: rgba(185, 154, 222, 0.1);
}
/* 답글 버튼 — 카드 하단 우측, 캡슐형 */
.reply-btn {
order: 1;
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: 1px solid rgba(201, 144, 154, 0.25);
border-radius: 9999px;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 11.5px;
color: #bbb;
cursor: pointer;
padding: 5px 12px;
margin-top: 12px;
transition: color .15s, border-color .15s, background .15s;
}
.reply-btn .fa-reply {
font-size: 9px;
line-height: 1;
}
.reply-btn:hover {
color: #b99ade;
border-color: rgba(185, 154, 222, 0.45);
background: rgba(185, 154, 222, 0.06);
}
/* ──────────────────────────────────────────────────
대댓글 카드 — 들여쓰기로 계층 구분
부모 카드 디자인 베이스, 축소 버전
────────────────────────────────────────────────── */
.reply-card {
display: flex;
flex-direction: column;
flex-shrink: 0; /* 대댓글 수 증가 시 카드 높이 압축 방지 */
margin-top: 0;
margin-left: 20px;
padding: 13px 14px 10px;
background: #faf7ff;
border-radius: 12px;
border: 1px solid rgba(185, 154, 222, 0.2);
border-left: 2px solid rgba(185, 154, 222, 0.55);
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
gap: 0;
}
/* ── 숨김 대댓글 컨테이너 (답글 더보기/접기로 제어) ──
JS가 display:none ↔ flex 를 토글하므로
flex 상태일 때의 레이아웃을 미리 선언해 둠.
display:none → inline style로 덮어써지므로 항상 flex 정의만 유지. */
.reply-hidden-wrap {
display: none; /* 기본 숨김 (JS inline style과 동일) */
flex-direction: column;
gap: 8px; /* 내부 reply-card 간 간격 — message-list와 동일하게 */
flex-shrink: 0;
width: 100%;
height: auto;
}
/* 대댓글: name/date도 상단으로 */
.reply-card .message-card__bottom {
order: -1;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(185, 154, 222, 0.15);
padding-right: 22px;
}
/* 대댓글 텍스트 — 부모보다 살짝 축소 */
.reply-card .message-card__text {
font-size: 12px;
line-height: 24px;
margin-bottom: 0;
}
/* 대댓글 이름 */
.reply-card .message-card__from {
font-size: 13.5px;
}
/* 대댓글 날짜 */
.reply-card .message-card__date {
font-size: 12px;
}
/* ㄴ 접두 아이콘 */
.reply-card__prefix {
display: inline-block;
font-size: 11px;
color: #b99ade;
margin-right: 3px;
opacity: .8;
}
/* 답글 더보기/접기 토글 버튼 */
.reply-toggle-btn {
display: inline-flex;
flex-shrink: 0; /* flex 컨테이너 내 압축 방지 */
align-items: center;
gap: 4px;
margin: 2px 0 2px 20px;
background: none;
border: none;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 11.5px;
color: #bbb;
cursor: pointer;
padding: 4px 0;
letter-spacing: .02em;
transition: color .15s;
}
.reply-toggle-btn:hover { color: #b99ade; }
.reply-toggle-count { font-size: 10px; color: inherit; opacity: .8; }
/* ──────────────────────────────────────────────────
대댓글 입력폼 — 메인 폼 축소 버전, 일체감
────────────────────────────────────────────────── */
.reply-form {
margin-top: 6px;
margin-left: 20px;
padding: 0 14px;
background: #faf7ff;
border: 1px solid rgba(185, 154, 222, 0.22);
border-left: 2px solid #b99ade;
border-radius: 0 12px 12px 0;
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height .38s ease, opacity .3s ease, padding .32s ease;
}
.reply-form.open {
max-height: 360px;
opacity: 1;
padding: 14px 14px 12px;
}
.reply-form__input {
width: 100%;
padding: 8px 0;
margin-bottom: 6px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(201, 144, 154, 0.18);
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: 16px; /* iOS 자동 확대 방지: 16px 미만이면 포커스 시 zoom */
color: #1a1a1a;
outline: none;
resize: none;
box-sizing: border-box;
transition: border-color .2s;
}
.reply-form__input::placeholder { color: #ccc; }
.reply-form__input:focus { border-bottom-color: #b99ade; }
.reply-form__textarea { height: 60px; line-height: 22px; }
.reply-form__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.reply-form__anon {
display: flex; align-items: center; gap: 6px;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 11px;
color: #aaa; cursor: pointer;
}
.reply-form__anon input { accent-color: #b99ade; width: 16px; height: 16px; cursor: pointer; }
.reply-form__submit {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 11.5px;
font-weight: 500;
letter-spacing: .06em;
color: #fff;
background: #b99ade;
padding: 7px 18px;
border: none;
border-radius: 9999px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(185, 154, 222, 0.3);
transition: background .2s, box-shadow .2s;
}
.reply-form__submit:hover { background: #a485cf; box-shadow: 0 4px 12px rgba(185,154,222,.4); }
.reply-form__submit:disabled { opacity: .5; cursor: not-allowed; }
/* 작성하기 버튼 */
.congrats__write-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 13px;
font-weight: 500;
color: #fff;
background: #C3A5C3;
border: none;
border-radius: 9999px;
padding: 10px 18px;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 3px 12px rgba(185,154,222,0.35);
transition: background .2s, box-shadow .2s, transform .15s;
}
.congrats__write-toggle:hover {
background: #9A7B9A;
box-shadow: 0 5px 16px rgba(185,154,222,0.45);
transform: translateY(-1px);
}
.congrats__write-toggle svg {
flex-shrink: 0;
}
/* 더보기 / 접기 버튼 (full-width pill, #b99ade) */
.congrats__loadmore-wrap {
display: flex;
gap: 8px;
margin: clamp(12px, 3vw, 20px) 0 clamp(4px, 1vw, 8px);
}
.congrats__loadmore-btn,
.congrats__collapse-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 13px 0;
background: #C3A5C3;
border: none;
border-radius: 9999px;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 13px;
font-weight: 500;
color: #fff;
cursor: pointer;
letter-spacing: .04em;
box-shadow: 0 3px 12px rgba(185,154,222,0.3);
transition: background .2s, box-shadow .2s, transform .15s;
}
.congrats__loadmore-btn:hover,
.congrats__collapse-btn:hover {
background: #9A7B9A;
box-shadow: 0 5px 16px rgba(185,154,222,0.4);
transform: translateY(-1px);
}
.btn-icon {
font-size: 12px;
line-height: 1;
}
/* 메시지 작성 폼 — 기본 숨김, .open 시 슬라이드 다운 */
.congrats-form {
background: #FFFFFF; /* #F3ECF3 섹션 위에서 흰 카드로 선명히 부각 */
border: 1px solid rgba(185,154,222,0.25);
border-radius: 12px;
padding: 0 clamp(16px, 4vw, 24px);
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
opacity: 0;
box-shadow: 0 2px 10px rgba(185,154,222,0.08);
transition: max-height .45s ease, opacity .35s ease, padding .4s ease;
}
.congrats-form.open {
max-height: 700px;
opacity: 1;
padding: clamp(20px, 4vw, 28px) clamp(16px, 4vw, 24px);
margin-bottom: clamp(20px, 4vw, 32px);
}
/* 폼 내부 */
.form-group { position: relative; padding-top: 20px; margin-bottom: clamp(18px, 4vw, 26px); }
.form-label {
position: absolute; top: 0; left: 0;
font-family: var(--f-ui);
font-size: 9px;
font-weight: 400;
letter-spacing: .4em;
text-transform: uppercase;
color: #b99ade;
}
.form-input, .form-textarea {
width: 100%;
padding: 10px 0;
background: transparent;
border: none;
border-bottom: 1px solid #F0E8EC;
font-family: 'Gowun Dodum', var(--f-kr-body), serif;
font-size: clamp(13px, 2.8vw, 14.5px);
color: #1A1A1A;
outline: none;
resize: none;
transition: border-color .25s;
}
.form-input::placeholder, .form-textarea::placeholder { color: #ccc; }
.form-input:focus, .form-textarea:focus { border-bottom-color: #b99ade; }
.form-textarea { height: 88px; }
.char-count { text-align: right; font-size: 10px; color: #bbb; margin-top: 0; }
.form-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-top: clamp(14px, 3vw, 20px);
}
.anonymous-check {
display: flex; align-items: center; gap: 8px;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 12px;
color: #aaa; cursor: pointer;
}
.anonymous-check input { accent-color: #b99ade; width: 18px; height: 18px; cursor: pointer; }
/* 전송 버튼 */
.submit-btn {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
color: #fff;
background: #b99ade;
padding: clamp(11px, 2.5vw, 15px) clamp(28px, 5vw, 44px);
border-radius: 100px;
box-shadow: 0 4px 14px rgba(185,154,222,.3);
transition: background .2s, transform .15s, box-shadow .2s;
}
.submit-btn:hover { background: #a485cf; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(185,154,222,.4); }
.submit-btn:active { transform: none; box-shadow: none; }
.submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* ── 이모지 피커 ──────────────────────────────────────── */
/* textarea 하단 행: 이모지 버튼(좌) + 글자 수(우) */
.emoji-field-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.emoji-field-footer .char-count { margin-top: 0; }
/* 캡슐형 이모지 트리거 버튼 */
.emoji-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(185, 154, 222, 0.08);
border: 1px solid rgba(185, 154, 222, 0.35);
border-radius: 9999px;
padding: 5px 12px 5px 9px;
cursor: pointer;
transition: background .2s, border-color .2s, transform .15s, box-shadow .15s;
line-height: 1;
}
.emoji-trigger:hover {
background: rgba(185, 154, 222, 0.16);
border-color: rgba(185, 154, 222, 0.6);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(185, 154, 222, 0.2);
}
.emoji-trigger:active { transform: none; box-shadow: none; }
.emoji-trigger__icon { font-size: 15px; line-height: 1; }
.emoji-trigger__label {
font-family: 'Gowun Dodum', sans-serif;
font-size: 11px;
color: #b99ade;
letter-spacing: .04em;
font-weight: 500;
}
/* 이모지 팝업 래퍼 (position: fixed는 JS가 세팅) */
.emoji-popup {
position: fixed;
z-index: 9999;
display: none;
filter: drop-shadow(0 8px 28px rgba(0,0,0,0.11));
}
.emoji-popup.is-open { display: block; }
/* 이모지 팝업 닫기 버튼 */
.emoji-popup__close {
position: absolute;
top: -10px;
right: -10px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fffdf9;
border: 1px solid rgba(185, 154, 222, 0.4);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #b99ade;
cursor: pointer;
z-index: 1;
line-height: 1;
padding: 0;
transition: background .15s, color .15s;
}
.emoji-popup__close:hover {
background: rgba(185, 154, 222, 0.15);
color: #9a78c4;
}
/* emoji-picker-element CSS 커스텀 변수 — 콤팩트 + 사이트 톤 */
emoji-picker {
--background: #fffdf9;
--border-color: rgba(201, 144, 154, 0.35);
--indicator-color: #b99ade;
--input-border-color: rgba(201, 144, 154, 0.3);
--input-font-color: #1a1a1a;
--input-placeholder-color: #c0b0c8;
--outline-color: rgba(185, 154, 222, 0.4);
--category-emoji-padding: 0.25rem;
--emoji-padding: 0.22rem;
--num-columns: 7;
height: 220px;
width: 100%;
border-radius: 20px;
border: 1px solid rgba(201, 144, 154, 0.35);
font-family: 'Gowun Dodum', sans-serif;
}
/* ─────────────────────────────────────────────────── */
/* ── 커스텀 다이얼로그 ────────────────────────────── */
.custom-dialog {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(4px);
padding: 20px;
}
.custom-dialog[hidden] { display: none; }
.custom-dialog__box {
background: #fffdf9;
border: 1px solid rgba(201, 144, 154, 0.3);
border-radius: 20px;
padding: clamp(24px, 6vw, 36px) clamp(20px, 5vw, 32px);
width: 100%;
max-width: 320px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
animation: dialog-in .22s ease;
}
@keyframes dialog-in {
from { opacity: 0; transform: scale(.92) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.custom-dialog__msg {
font-family: 'Gowun Dodum', serif;
font-size: 15px;
color: #333;
line-height: 1.7;
text-align: center;
margin-bottom: 20px;
word-break: keep-all;
}
.custom-dialog__input {
width: 100%;
padding: 11px 14px;
background: #fff;
border: 1px solid rgba(185, 154, 222, 0.4);
border-radius: 10px;
font-family: 'Gowun Dodum', serif;
font-size: 14px;
color: #1a1a1a;
outline: none;
margin-bottom: 16px;
transition: border-color .2s;
box-sizing: border-box;
}
.custom-dialog__input:focus { border-color: #b99ade; }
.custom-dialog__btns {
display: flex;
gap: 10px;
}
.custom-dialog__btn {
flex: 1;
padding: 11px 0;
border: none;
border-radius: 9999px;
font-family: 'Gowun Dodum', serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .18s, transform .12s;
}
.custom-dialog__btn:active { transform: scale(.97); }
.custom-dialog__btn--cancel {
background: #f0ecf5;
color: #888;
}
.custom-dialog__btn--cancel:hover { background: #e5e0ee; }
.custom-dialog__btn--ok {
background: #b99ade;
color: #fff;
box-shadow: 0 3px 12px rgba(185, 154, 222, 0.35);
}
.custom-dialog__btn--ok:hover {
background: #a485cf;
box-shadow: 0 5px 16px rgba(185, 154, 222, 0.45);
}
/* ─────────────────────────────────────────────────── */
/* ================================================
푸터
================================================ */
/* ──────────────────────────────────────────
Footer — 화사한 핑크 화이트 리뉴얼
bg: #FFF0F5 / text: #555 · rose계열
────────────────────────────────────────── */
footer {
background: linear-gradient(175deg, #fff8fb 0%, #FFF0F5 55%, #fce8f0 100%);
/* 네비바(59px) + 안전 여백 확보 */
padding: 0 var(--pad-h) calc(59px + clamp(40px, 8vw, 64px));
text-align: center;
position: relative;
overflow: hidden;
}
/* 하단 ❀ 장식 */
footer::after {
content: '❀';
position: absolute;
bottom: clamp(14px, 3vw, 22px);
left: 50%; transform: translateX(-50%);
font-size: 14px;
color: rgba(201, 144, 154, .45);
pointer-events: none;
}
/* SVG 웨이브 래퍼 */
.footer__curve {
width: 100%;
line-height: 0;
margin-bottom: clamp(18px, 4vw, 28px);
}
.footer__curve svg {
display: block;
width: 100%;
height: clamp(32px, 8vw, 52px);
}
/* cats.svg 래퍼: 푸터 안에서 마진 조정 */
.footer__cat-wrap {
margin-bottom: clamp(24px, 6vw, 36px);
margin-top: clamp(4px, 2vw, 12px);
}
/* 이름·날짜·웨딩홀·감사 블록 */
.footer__info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* 구분선 */
.footer__rule {
width: 40px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,144,154,0.5), transparent);
margin: clamp(12px, 3vw, 18px) auto;
}
/* 이름 */
.footer__names {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(17px, 4vw, 22px);
font-weight: 600;
color: #7a5060;
letter-spacing: .22em;
}
/* 날짜 */
.footer__date {
font-family: 'OngleipWFontList', var(--f-ui), sans-serif;
font-size: clamp(12px, 2.8vw, 14px);
font-weight: 600;
letter-spacing: .3em;
color: rgba(180, 120, 138, .8);
margin-top: clamp(8px, 2vw, 12px);
}
/* 웨딩홀 */
.footer__venue {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(11px, 2.4vw, 13px);
font-weight: 600;
letter-spacing: .18em;
color: rgba(180, 120, 138, .6);
margin-top: 4px;
}
/* 클로징 메시지 */
.footer__closing {
font-family: 'OngleipWFontList', var(--f-kr), serif;
font-size: clamp(14px, 2.8vw, 20px);
font-weight: 600;
letter-spacing: .1em;
color: rgba(180, 120, 138, .65);
margin-top: clamp(14px, 3vw, 20px);
word-break: keep-all;
}
/* ══════════════════════════════════════════
주간 미니 달력
══════════════════════════════════════════ */
.week-calendar {
margin: 0 0 20px;
padding: 18px 20px 20px;
background: rgba(255, 255, 255, 0.72);
border-radius: 28px;
box-shadow:
0 4px 24px rgba(154, 123, 154, 0.18),
0 1px 6px rgba(154, 123, 154, 0.10),
inset 0 1px 0 rgba(255,255,255,0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.week-calendar__label {
font-family: 'Playfair Display', serif;
font-size: 11px;
font-style: italic;
letter-spacing: .18em;
color: #b899cc;
text-align: center;
margin: 0 0 12px;
text-transform: uppercase;
}
.week-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center; /* 6일 셀을 다른 날짜와 세로 중앙 정렬 */
}
.week-calendar__grid--head {
margin-bottom: 6px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(196, 174, 212, 0.22);
}
.week-calendar__dow {
font-family: 'Gowun Dodum', serif;
font-size: 11px;
text-align: center;
color: #c4aed4;
letter-spacing: .1em;
line-height: 1;
}
.week-calendar__dow--sun { color: rgba(205, 110, 130, 0.75); }
.week-calendar__dow--sat { color: rgba(110, 130, 205, 0.75); }
.week-calendar__day {
font-family: 'Gowun Dodum', serif;
font-size: 18px;
font-weight: 500;
color: #b8a0cc;
text-align: center;
padding: 8px 0 4px;
position: relative;
line-height: 1;
}
.week-calendar__day--sun { color: rgba(205, 110, 130, 0.70); }
.week-calendar__day--prev { color: rgba(196, 174, 212, 0.38); font-size: 15px; }
/* 6일 — 확대/축소 + 블러 글로우 무한 반복 (상하 흔들림 없음) */
.week-calendar__day--wedding {
font-size: 22px;
font-weight: 700;
color: #9A7B9A;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0 4px;
animation: wc-breathe 2.2s ease-in-out infinite alternate;
}
.week-calendar__day--wedding::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(154, 123, 154, 0);
transform: translate(-50%, -50%) scale(0.8);
animation: wc-ring-breathe 2.2s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes wc-breathe {
0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(154,123,154,0.00)); }
100% { transform: scale(1.16); filter: drop-shadow(0 0 10px rgba(154,123,154,0.68)); }
}
@keyframes wc-ring-breathe {
0% { transform: translate(-50%,-50%) scale(0.7); background: rgba(154,123,154,0.00); }
100% { transform: translate(-50%,-50%) scale(1.15); background: rgba(154,123,154,0.15); }
}
.week-calendar__day--wedding > span {
position: relative;
z-index: 1;
color: #9A7B9A;
font-size: 18px;
font-weight: 600;
}
/* ══════════════════════════════════════════
푸터 카카오 공유 버튼 — 우측 상단 캡슐
══════════════════════════════════════════ */
.footer__kakao-float {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px 6px 9px;
background: #FEE500;
border: none;
border-radius: 50px;
cursor: pointer;
font-family: 'Gowun Dodum', serif;
font-size: 11px;
font-weight: 700;
color: #3C1E1E;
letter-spacing: .03em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transition: transform .18s ease, box-shadow .18s ease;
}
.footer__kakao-float:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 16px rgba(254, 229, 0, 0.45), 0 2px 6px rgba(0,0,0,.10);
}
.footer__kakao-float:active {
transform: scale(.95);
box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.footer__kakao-float-logo {
width: 16px;
height: 16px;
object-fit: contain;
}
/* =====================================================
반응형 미디어 쿼리 전면 정비
320px(소형) → 430px(일반 모바일) → 768px(태블릿)
→ 1024px(데스크탑) + landscape·safe-area
===================================================== */
/* ── ① 소형 폰 (< 360px): 이름 오버플로 방지 ── */
@media (max-width: 359px) {
.hero__name {
font-size: 20px;
letter-spacing: .12em;
}
.hero__names-heart { font-size: 18px; }
/* 작은 화면에서 translate 범위 축소 */
.hero__name--groom { transform: translate(-60px, -70px); }
.hero__name--bride { transform: translate( 60px, -70px); }
.hero__names-block.is-flying .hero__name--groom,
.hero__names-block.is-flying .hero__name--bride {
transform: translate(0, 0);
}
.bottom-nav__label { font-size: 8px; }
.bottom-nav__icon { width: 26px; height: 26px; }
.bottom-nav__icon img { width: 14px; height: 14px; }
}
/* ── ② 일반 모바일 (360px ~ 480px): 기본 설계 그대로 ── */
@media (max-width: 480px) {
.gallery__main { aspect-ratio: 3/4; }
}
/* ── ③ 큰 모바일 (480px ~ 767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
.gallery__main { aspect-ratio: 4/5; }
.hero__name { font-size: clamp(28px, 6.5vw, 34px); }
/* 더 넓은 화면 → 이름 translate 범위 확대 */
.hero__name--groom { transform: translate(-120px, -100px); }
.hero__name--bride { transform: translate( 120px, -100px); }
.hero__names-block.is-flying .hero__name--groom,
.hero__names-block.is-flying .hero__name--bride {
transform: translate(0, 0);
}
}
/* ── ④ 태블릿 (768px+) ── */
@media (min-width: 768px) {
/* 뮤직바: 뷰포트가 800px 초과할 때 콘텐츠 영역 안으로 고정 */
.music-bar {
right: max(16px, calc((100vw - var(--max-w)) / 2 + 16px));
top: 20px;
}
/* 이름 크기·이동 거리 증가 */
.hero__name {
font-size: clamp(30px, 4vw, 38px);
letter-spacing: .20em;
}
.hero__names-heart { font-size: clamp(26px, 3.5vw, 32px); }
.hero__name--groom { transform: translate(-160px, -100px); }
.hero__name--bride { transform: translate( 160px, -100px); }
.hero__names-block.is-flying .hero__name--groom,
.hero__names-block.is-flying .hero__name--bride {
transform: translate(0, 0);
}
/* 히어로 높이 태블릿 캡 */
.hero { height: max(100svh, 820px); }
/* 히어로 텍스트: 이미지 하단 안으로 끌어올림
bottom: 40px(모바일)은 히어로 바닥 기준이라 이미지 아래 공백에 떠버림
→ 히어로 높이의 12%로 변경해 이미지 영역 안에 자리잡도록 보정 */
.hero__content { bottom: 12%; }
/* WE ARE — 태블릿에서 SVG 폭 살짝 확장 */
.we-are-svg { max-width: 560px; }
/* 갤러리 */
.gallery__main { aspect-ratio: 4/5; }
.gallery__thumb { width: 72px; height: 72px; }
/* 지도 높이 */
#map { height: 360px; }
/* 이야기 섹션 시 크기 */
.our-story__poem { font-size: 15px; }
/* 내비 아이콘 살짝 키움 */
.bottom-nav__icon { width: 32px; height: 32px; }
.bottom-nav__icon img { width: 18px; height: 18px; }
.bottom-nav__label { font-size: 10px; }
}
/* ── ⑤ 데스크탑 (1024px+) ── */
@media (min-width: 1024px) {
.music-bar {
right: max(16px, calc((100vw - var(--max-w)) / 2 + 20px));
padding: 10px 18px;
}
/* 히어로 높이 데스크탑 캡 */
.hero { height: max(100svh, 860px); }
/* 이름 최대 크기 */
.hero__name { font-size: 38px; }
.hero__names-heart { font-size: 32px; }
.hero__name--groom { transform: translate(-200px, -100px); }
.hero__name--bride { transform: translate( 200px, -100px); }
.hero__names-block.is-flying .hero__name--groom,
.hero__names-block.is-flying .hero__name--bride {
transform: translate(0, 0);
}
/* 갤러리 최대 비율 */
.gallery__main { aspect-ratio: 3/4; }
.gallery__thumb { width: 76px; height: 76px; }
/* 지도 높이 */
#map { height: 420px; }
/* 이야기 섹션 */
.our-story__poem { font-size: 17px; }
/* 모달 폭 제한 */
.shuttle-modal__box { max-width: 540px; margin: 0 auto; }
.gal-modal__grid { columns: 3; column-gap: 16px; padding: 20px; }
.gal-modal__item { margin-bottom: 16px; }
}
/* ── ⑥ iOS 홈바·노치 Safe Area ── */
@supports (padding: env(safe-area-inset-bottom)) {
.bottom-nav {
height: calc(var(--nav-h) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
}
/* .hero__content 는 기본 선언에 env(safe-area-inset-bottom, 0px) 통합 완료
→ 이 @supports 블록에서 별도 오버라이드 불필요 */
/* .hero__we-are 는 top: % 로 고정 — safe-area 별도 오버라이드 불필요 */
.hero__indicators {
bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}
footer {
padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + clamp(40px, 8vw, 64px));
}
}
/* ── ⑦ 모바일 가로 모드 — 스크롤 허용, 사진 원본 비율 유지 ──
세로 사진이 가로폭 100%로 꽉 차면 이미지가 위아래로 길어짐.
높이를 auto로 풀어 스크롤로 이름·텍스트·날짜를 모두 볼 수 있게 함.
(방법 A: 사진 위 → 텍스트 오버레이 → 스크롤) */
@media (orientation: landscape) and (max-width: 1024px) {
/* 핵심: 높이 고정 해제 → 이미지 원본 비율대로 hero가 늘어남 */
.hero {
height: auto;
min-height: unset;
}
/* max-height 제한 해제 — 가로 모드에서 max-height: 90vh가 이미지 박스를
viewport 높이로 잘라내어 object-fit: contain이 세로 사진을
좁은 박스에 맞추느라 양옆에 빈 공간(레터박스)을 만드는 현상 수정.
width: 100% + height: auto → 가로폭 꽉 채우고 원본 비율로 아래로 늘어남 */
.hero__slide:first-child {
max-height: none;
width: 100%;
height: auto;
}
/* 텍스트 위치 — 이미지가 길어진 만큼 비율 조정 */
.hero__names-block { top: 8%; }
.hero__we-are { top: calc(58% + 30px); }
.hero__content { bottom: 40px; }
/* 인디케이터: 가로 모드에선 숨김 */
.hero__indicators { display: none; }
/* 이름 진입 애니메이션 translate 거리 축소 */
.hero__name--groom { transform: translate(-80px, -60px); }
.hero__name--bride { transform: translate( 80px, -60px); }
.hero__names-block.is-flying .hero__name--groom,
.hero__names-block.is-flying .hero__name--bride {
transform: translate(0, 0);
}
}
/* ── ⑧ 와이드 데스크탑 (1400px+): 뮤직바 위치 안정화 ── */
@media (min-width: 1400px) {
.music-bar {
right: calc((100vw - var(--max-w)) / 2 + 20px);
}
}
/* ================================================
전역 고정 네비게이션 바 (bottom-nav)
★ 뮤직바와 동일한 높이(59px) · 글라스 스타일
★ border-radius: 20px 20px 0 0 (상단만 둥글게)
================================================ */
.bottom-nav {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--max-w);
height: 59px; /* 뮤직바와 동일 */
z-index: 300; /* 뮤직바(200)보다 위 */
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 clamp(6px, 2vw, 16px);
background: rgba(255, 255, 255, .22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px 20px 0 0; /* 상단만 둥글게 */
border-top: 1px solid rgba(196, 131, 142, .18);
box-shadow: 0 -4px 20px rgba(75, 22, 76, .13);
}
/* 버튼 */
.bottom-nav__btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: clamp(40px, 14vw, 56px);
height: 100%;
background: none;
border: none;
cursor: pointer;
padding: 6px 0;
border-radius: 8px;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
/* opacity/transform 은 아이콘 레벨에서 처리 */
}
/* ── 호버·클릭 피드백 ──
아이콘 영역만 스케일, 버튼 전체가 아님 */
.bottom-nav__btn:hover .bottom-nav__icon { transform: scale(1.12); }
.bottom-nav__btn:active .bottom-nav__icon { transform: scale(.88); }
/* ── 아이콘 컨테이너 ──
::before = 보라색 원(뒤), img = 아이콘(앞)
flexbox 이중 중앙 정렬로 원·아이콘 위치 완벽 일치 */
.bottom-nav__icon {
position: relative; /* ::before 기준점 */
display: flex;
align-items: center; /* 세로 중앙 */
justify-content: center; /* 가로 중앙 */
width: 30px; height: 30px;
flex-shrink: 0;
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
/* ── 보라색 원 인디케이터 ──
inset: 0 → 컨테이너와 정확히 같은 크기·위치
transform-origin 기본값(center) → 정중앙에서 확장 */
.bottom-nav__icon::before {
content: '';
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
border-radius: 50%;
background: #4B164C;
/* 기본: 숨김 */
transform: scale(0);
opacity: 0;
transition:
transform .32s cubic-bezier(.34, 1.56, .64, 1), /* 스프링 탄성 */
opacity .18s ease;
z-index: 0; /* 아이콘보다 뒤 */
}
/* ── 아이콘 img ──
z-index: 1 → 원 앞
비활성: 진한 보라-회색 (배경과 충분한 대비)
filter 설명: brightness(0) = 검정, 그 위에 보라-회색 혼합 */
.bottom-nav__icon img {
position: relative;
z-index: 1; /* 원(::before) 앞에 표시 */
width: 17px; height: 17px; /* 원(30px) 안에 여백 확보 */
object-fit: contain;
display: block;
/* 비활성: 진한 보라-회색 #3D1A40 느낌 (65% 불투명 흑) */
filter: brightness(0) opacity(.62);
transition: filter .22s ease, opacity .22s ease;
}
/* ── Font Awesome 아이콘 (img 대신 사용 시) ── */
.bottom-nav__icon i {
position: relative;
z-index: 1;
font-size: 15px;
color: rgba(61, 26, 64, 0.62);
transition: color .22s ease;
}
.bottom-nav__btn--active .bottom-nav__icon i {
color: #ffffff;
}
/* ── 인라인 SVG 아이콘 (편지봉투 등) ── */
.bottom-nav__icon svg.nav-wine-icon {
position: relative;
z-index: 1;
width: 17px;
height: 17px;
color: rgba(108, 108, 109, 0.62);
transition: color .22s ease;
stroke: currentColor;
}
.bottom-nav__btn--active .bottom-nav__icon svg.nav-wine-icon {
color: #ffffff;
stroke: currentColor;
}
/* ── 라벨 ── */
.bottom-nav__label {
font-family: var(--f-ui);
font-size: 9px;
font-weight: 400;
letter-spacing: .05em;
color: rgba(75, 22, 76, .50);
transition: color .22s, font-weight .22s;
white-space: nowrap;
}
/* ══════════════════════════════════
활성 상태 (보라색 원 + 흰 아이콘)
══════════════════════════════════ */
/* 보라색 원: 중앙에서 스프링 등장 */
.bottom-nav__btn--active .bottom-nav__icon::before {
transform: scale(1);
opacity: 1;
}
/* 아이콘: 흰색으로 반전 (보라색 원 위에서 선명한 대비) */
.bottom-nav__btn--active .bottom-nav__icon img {
filter: brightness(0) invert(1); /* 완전 흰색 */
opacity: 1;
}
/* 라벨: 진한 보라색 + 굵게 */
.bottom-nav__btn--active .bottom-nav__label {
color: #4B164C;
font-weight: 600;
}
/* ================================================
화환 배너 — 하단 앵커 메뉴 위 아코디언 바
================================================ */
/* ── 키프레임 ── */
@keyframes wreathBannerEnter {
0% { transform: translateX(-50%) translateY(26px); opacity: 0; }
60% { transform: translateX(-50%) translateY(-5px); opacity: 1; }
80% { transform: translateX(-50%) translateY(2px); }
100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes auroraText {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ── 배너 래퍼 ── */
.wreath-banner {
position: fixed;
bottom: 67px;
left: 50%;
transform: translateX(-50%) translateY(0px);
width: calc(100% - 28px);
max-width: 460px;
z-index: 250;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.wreath-banner.is-visible {
opacity: 1;
pointer-events: auto;
animation:
wreathBannerEnter 0.62s cubic-bezier(0.34, 1.4, 0.64, 1) forwards,
}
.wreath-banner.is-visible.is-open {
animation: none;
transform: translateX(-50%) translateY(0);
}
/* ── 펼침 패널 ── */
.wreath-banner__panel {
overflow: hidden;
max-height: 0;
opacity: 0;
border-radius: 10px 10px 0 0;
/* 배너 바와 동일한 선명도 */
background: rgb(248 242 243);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: none;
transition:
max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s ease;
}
.wreath-banner.is-open .wreath-banner__panel {
max-height: 340px;
opacity: 1;
}
/* ── 패널 내부 ── */
.wreath-banner__panel-inner {
padding: 16px 14px 14px;
}
.wreath-banner__panel-title {
font-family: 'OngleipWFontList', 'Gowun Dodum', var(--f-kr), serif;
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0.05em;
color: rgba(75, 30, 105, 0.9);
text-align: center;
margin-bottom: 4px;
}
.wreath-banner__panel-sub {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 10px;
font-weight: 300;
color: rgba(110, 55, 150, 0.7);
text-align: center;
line-height: 1.55;
margin-bottom: 12px;
}
/* ── 패널 카드 ── */
.wreath-banner__cards {
display: flex;
gap: 6px;
}
.wreath-banner__cards .no-wreath__card {
flex: 1;
padding: 10px 5px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.55);
}
.wreath-banner__cards .no-wreath__card-icon {
width: 30px;
height: 30px;
font-size: 14px;
}
.wreath-banner__cards .no-wreath__card-title { font-size: 9.5px; }
.wreath-banner__cards .no-wreath__card-desc { font-size: 8.5px; }
/* ── [기존] 꽃 이미지 슬롯 원본 코드 ── */
.wreath-banner__img {
/* 배너 높이에 맞춰 꽉 차게 */
height: 80%;
max-height: 40px;
width: auto;
object-fit: contain;
object-position: center bottom;
flex-shrink: 0;
pointer-events: none;
/* 4. 배치: 텍스트가 왼쪽에 있으니 아이콘은 오른쪽에 위치 */
margin-left: 4px;
/* 5. 투명도: 자연스러운 조화를 위해 살짝 조절 */
opacity: 0.9;
}
/* ── 배너 바 ── */
.wreath-banner__bar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px; /* 높이 키움 */
border-radius: 8px;
background: rgb(248 242 243);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 2px 16px rgba(140, 80, 200, 0.1);
color: rgb(99 78 107);
cursor: pointer;
transition:
background 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease,
border-radius 0.32s ease;
animation: wreath-bar-pulse 2.6s ease-in-out infinite;
}
/* 호버: 살짝 떠오름 + 진해짐 — 애니메이션 일시 중지 */
.wreath-banner__bar:hover {
background: rgb(248 242 243);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(140, 80, 200, 0.18);
animation-play-state: paused;
}
/* 패널 열리면 상단 radius 제거 + 애니메이션 중지 */
.wreath-banner.is-open .wreath-banner__bar {
border-radius: 0 0 8px 8px;
border-top-color: transparent;
transform: none;
animation-play-state: paused;
}
@keyframes wreath-bar-pulse {
0% { box-shadow: 0 2px 16px rgba(140, 80, 200, 0.10); }
40% { box-shadow: 0 2px 20px rgba(140, 80, 200, 0.28), 0 0 0 6px rgba(154,123,154,0.14); }
60% { box-shadow: 0 2px 20px rgba(140, 80, 200, 0.20), 0 0 0 10px rgba(154,123,154,0.06); }
100% { box-shadow: 0 2px 16px rgba(128, 0, 255, 0.1), 0 0 0 16px rgba(154,123,154,0.00); }
}
/* ── 꽃 SVG ── */
.wreath-banner__flower {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ── 텍스트 ── */
.wreath-banner__text {
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0.07em;
white-space: nowrap;
}
/* ── 화환 배너 닫기 버튼 ── */
.wreath-banner__dismiss {
position: absolute;
top: -9px;
right: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fffdf9;
border: 1px solid rgba(185, 154, 222, 0.45);
box-shadow: 0 2px 8px rgba(140, 80, 200, 0.14);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #b99ade;
cursor: pointer;
z-index: 5;
padding: 0;
line-height: 1;
transition: background .18s, color .18s, transform .15s;
}
.wreath-banner__dismiss:hover {
background: rgba(185, 154, 222, 0.18);
color: #9a78c4;
transform: scale(1.12);
}
/* ── 모달 오버레이 (비교용 — 현재 JS 미사용) ── */
.wreath-modal-overlay {
position: fixed; inset: 0; z-index: 800;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(70, 20, 90, 0.38);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.wreath-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.wreath-modal-sheet {
width: min(92vw, 420px); max-height: 80vh; overflow-y: auto;
border-radius: 24px; background: rgba(255,253,255,0.94);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
box-shadow: 0 20px 60px rgba(100,40,130,0.25);
transform: translateY(24px) scale(0.97);
transition: transform 0.38s cubic-bezier(0.34,1.25,0.64,1);
}
.wreath-modal-overlay.is-open .wreath-modal-sheet { transform: translateY(0) scale(1); }
.wreath-modal-sheet .wreath-reject-v2 { margin-bottom: 0; }
.wreath-modal__close-btn {
display: block; margin: 0 auto 20px; padding: 9px 32px;
border-radius: 999px; border: 1.5px solid rgba(160,100,200,0.4);
background: transparent; color: #7a3d8f;
font-family: 'Gowun Dodum', var(--f-kr), serif;
font-size: 13px; cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.wreath-modal__close-btn:hover {
background: rgba(160,100,200,0.1); border-color: rgba(160,100,200,0.6);
}
/* ── iOS safe area 보정 ── */
@supports (padding: env(safe-area-inset-bottom)) {
.wreath-banner {
bottom: calc(59px + env(safe-area-inset-bottom) + 8px);
}
}