/* 모바일 초대장 공용 스타일 — 폰프레임 스테이지 + 위젯 공통 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.invite-page {
	background: #e9ecef;
	font-family: var(--iv-font-body);
	color: #333;
	-webkit-text-size-adjust: 100%;
}

body.invite-page, .iv-phone {
	--iv-font-body: 'Nanum Gothic', '나눔고딕', sans-serif;
	--iv-font-title: 'Nanum Myeongjo', serif;
	--iv-font-display: 'Nanum Myeongjo', serif;
	--iv-font-en: 'Nanum Myeongjo', serif;
	--iv-title-size: 18px;
	--iv-title-spacing: .25em;
	--iv-title-weight: 400;
	--iv-en-size: 14px;
	--iv-en-spacing: .1em;
	--iv-en-case: none;
	--iv-en-first: none;
	--iv-en-color: #c9c9c9;
	--iv-display-size: 26px;
	--iv-display-weight: 400;
	--iv-display-spacing: 0;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }

/* 폰프레임 스테이지 — PC=중앙 카드, 모바일=풀폭 */
.invite-stage {
	font-family: var(--iv-font-body);
	max-width: 440px;
	margin: 0 auto;
	min-height: 100vh;
	background: #fff;
	box-shadow: 0 0 40px rgba(0,0,0,.12);
	overflow-x: hidden;
	position: relative;
}
.invite-body { position: relative; }

/* 위젯(섹션) 공통 */
.iw {
	position: relative;
	padding: 44px 24px;
	text-align: center;
}
.iw + .iw { border-top: 1px solid #f2f2f2; }
.iw-title {
	font-family: var(--iv-font-title);
	font-size: var(--iv-title-size);
	letter-spacing: var(--iv-title-spacing);
	font-weight: var(--iv-title-weight);
	color: #b48a5a;
	margin: 0 0 26px;
}
.iw-title small {
	display: block;
	font-family: var(--iv-font-en);
	font-size: var(--iv-en-size);
	letter-spacing: var(--iv-en-spacing);
	text-transform: var(--iv-en-case);
	color: var(--iv-en-color);
	margin-top: 6px;
	font-weight: 400;
}
.iw-title small::first-letter { text-transform: var(--iv-en-first); }

/* 표지(cover) */
.iw-cover { padding: 0; text-align: center; }
.iw-cover .cover-image img { width: 100%; }
.iw-cover .cover-meta { padding: 30px 24px 40px; }
.iw-cover .cover-date { font-size: 16px; letter-spacing: .1em; color: #888; }
.iw-cover .cover-names {
	font-family: var(--iv-font-display); font-size: var(--iv-display-size);
	font-weight: var(--iv-display-weight); letter-spacing: var(--iv-display-spacing);
	line-height: 1.3;
	margin: 14px 0;
}
.iw-cover .cover-names .amp { color: #d99; margin: 0 10px; }
.iw-cover .cover-place { font-size: 15px; color: #999; }
.iw-cover .cover-dday { display:inline-block; margin-top:20px; font-size:14px; color:#b48a5a; letter-spacing:.1em; }
.iw-cover .cover-dday strong { font-size:18px; }

/* 인사말(greeting) */
.iw-greeting .greeting-text { font-size: 15px; line-height: 2; color:#555; white-space: pre-line; }

/* 연락처(contact) */
.iw-contact .contact-row { display:flex; align-items:center; justify-content:space-between; max-width: 300px; margin: 0 auto; padding: 12px 0; border-bottom: 1px dashed #eee; }
.iw-contact .contact-info { text-align:left; }
.iw-contact .contact-label { font-size: 13px; color:#aaa; }
.iw-contact .contact-name { font-size: 15px; }
/* 이름 옆 연락처 번호 — 전화/문자 아이콘 버튼은 그대로 두고 번호도 노출. */
.iw-contact .contact-tel { margin-left:8px; font-size:14px; color:#888; letter-spacing:.02em; }
.iw-contact .contact-actions a { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; background:#f5efe8; color:#b48a5a; margin-left:6px; font-size:16px; }

/* 갤러리(gallery) */
.iw-gallery .gallery-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.iw-gallery .gallery-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; display:block; border-radius:2px; }

/* 동영상(movie) */
.iw-movie .movie-frame { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; }
.iw-movie .movie-frame iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* 오시는길(location) */
.iw-location .location-map { width:100%; height:240px; background:#f4f4f4; border-radius:8px; overflow:hidden; }
.iw-location .location-name { font-size:16px; margin: 18px 0 6px; }
.iw-location .location-address { font-size:14px; color:#888; }
.iw-location .location-navi { margin-top: 16px; }
.iw-location .location-navi a { display:inline-block; padding:8px 16px; margin:0 4px; border:1px solid #e2d6c6; border-radius:20px; font-size:13px; color:#b48a5a; }
/* 항목별 교통안내(지하철/버스/자가용/주차) — 방문객이 빠르게 오는길 확인 */
.iw-location .location-transit { margin-top:22px; text-align:left; border-top:1px solid #efe7db; }
.iw-location .transit-item { padding:14px 2px; border-bottom:1px solid #efe7db; }
.iw-location .transit-label { display:block; font-size:14px; font-weight:600; color:#b48a5a; margin-bottom:5px; }
.iw-location .transit-label i { margin-right:4px; }
.iw-location .transit-desc { display:block; font-size:15px; line-height:1.5; color:#444; white-space:pre-line; }

/* 방명록(guestbook) */
.iw-guestbook .gb-write { max-width: 380px; margin: 0 auto 20px; }
.iw-guestbook .gb-guest-fields { display:flex; gap:6px; margin-bottom:6px; }
.iw-guestbook .gb-guest-fields input { flex:1; min-width:0; padding:8px 10px; border:1px solid #e5e5e5; border-radius:6px; font-size:13px; }
.iw-guestbook .gb-item .gb-profile { width:24px; height:24px; border-radius:50%; object-fit:cover; float:left; margin-right:8px; background:#eee; }
.iw-guestbook .gb-item .gb-initial { display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; box-sizing:border-box; }
.iw-guestbook .gb-item .gb-del { color:#ccc; cursor:pointer; font-size:15px; }
.iw-guestbook .gb-item .gb-del:hover { color:#e57373; }
.iw-guestbook .gb-reply-toggle { color:#b48a5a; font-size:12px; cursor:pointer; margin-top:4px; display:block; text-align:right; }
.iw-guestbook .gb-replies { margin:8px 0 0 36px; }
.iw-guestbook .gb-replies .gb-item { border-bottom:1px dashed #f2f2f2; }
.iw-guestbook .gb-reply-write { display:flex; gap:6px; margin:6px 0 0 36px; }
.iw-guestbook .gb-reply-write input { flex:1; min-width:0; padding:6px 8px; border:1px solid #eee; border-radius:6px; font-size:13px; }
.iw-guestbook .gb-write textarea { width:100%; height:70px; padding:10px; border:1px solid #e5e5e5; border-radius:6px; resize:none; font-family:inherit; font-size:14px; }
.iw-guestbook .gb-write .gb-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:6px; }
/* a·button 혼용이라 inline-flex+동일 높이로 정렬(등록=button, 로그인=a 가 어긋나던… */
.iw-guestbook .gb-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:34px; padding:0 14px; box-sizing:border-box; border:0; border-radius:6px; background:#b48a5a; color:#fff; font-size:13px; line-height:1; cursor:pointer; text-decoration:none; vertical-align:middle; }
.iw-guestbook .gb-btn.sub { background:#fff; color:#888; border:1px solid #e0e0e0; }
.iw-guestbook .gb-btn.sub:hover { border-color:#c9c9c9; color:#666; }
.iw-guestbook .gb-list { max-width: 380px; margin: 0 auto; text-align:left; }
.iw-guestbook .gb-item { padding:12px 0; border-bottom:1px solid #f2f2f2; }
.iw-guestbook .gb-item .gb-head { display:flex; justify-content:space-between; font-size:14px; color:#999; margin-top:3px; margin-bottom:10px; }
.iw-guestbook .gb-item .gb-name { color:#b48a5a; font-weight:bold; }
.iw-guestbook .gb-item .gb-body { font-size:15px; line-height:1.7; color:#555; white-space:pre-line; }
.iw-guestbook .gb-more { display:block; width:100%; margin-top:12px; padding:8px; background:#faf7f3; border:1px solid #eee; border-radius:6px; color:#999; font-size:13px; cursor:pointer; }

/* SNS 공유(share) */
.iw-share { padding: 30px 24px; }
.iw-share .share-native { display:inline-flex; align-items:center; gap:6px; padding:11px 22px; border:0; border-radius:24px; background:#b48a5a; color:#fff; font-size:14px; cursor:pointer; margin-bottom:16px; }
.iw-share .share-native:active { transform:translateY(1px); }
.iw-share .share-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
/* flex-shrink:0 — 좁은 카드(예: baby_3 .iw margin)에서 아이콘이 가로로 눌려… */
.iw-share .share-btns a { flex:0 0 auto; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:50%; font-size:18px; color:#fff; }
.iw-share .sh-kakao { background:#FEE500; color:#3C1E1E; }
/* 네이버/밴드 = RemixIcon 미제공 → 브랜드 이미지(자체 완결 원형이라 배경 제거). */
.iw-share .share-btns a.sh-img { background:transparent; }
.iw-share .share-btns a.sh-img img { width:40px; height:40px; display:block; border-radius:50%; }
.iw-share .sh-naver { background:#03c75a; }
.iw-share .sh-band { background:#00c73c; }
.iw-share .sh-facebook { background:#3b5998; }
.iw-share .sh-x { background:#000; }
.iw-share .sh-link { background:#888; }

/* 상품홍보(product_promo) — 하단 강제탑재 */
.iw-promo { background:#faf8f5; padding: 34px 20px 46px; }
.iw-promo .promo-head { color:#b48a5a; margin-bottom:16px; }
.iw-promo .promo-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.iw-promo .promo-card { background:#fff; border:1px solid #f0e9e0; border-radius:8px; overflow:hidden; text-align:left; }
.iw-promo .promo-card img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.iw-promo .promo-card .p-name { font-size:12px; padding:8px; color:#555; height:52px; overflow:hidden; }
.iw-promo .promo-more { display:block; text-align:center; margin-top:16px; color:#aaa; }

/* 광고훅 inline 모델 — 첫 방명록 위 한줄 상품 스트립(가로 스크롤) ── */
.iw-adline { padding: 22px 0 20px; background: #fbfaf8; border-top: 1px solid #f2ede6; border-bottom: 1px solid #f2ede6; }
.iw-adline .adline-head { font-size: 13px; color: #b48a5a; letter-spacing: .06em; margin: 0 0 12px; padding: 0 18px; }
/* 반응형 4열 그리드 — 폭에 맞춰 채워 마지막 카드가 잘리지 않게(예전 고정96px 가로스크롤은 끝이 반쯤… */
.iw-adline .adline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; }
.iw-adline .adline-card { text-decoration: none; min-width: 0; }
.iw-adline .adline-thumb { display: block; width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; border: 1px solid #f0e9e0; background: #fff; }
.iw-adline .adline-thumb img { width: 100%; height: 100%; object-fit: cover; }
.iw-adline .adline-name { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; color: #666; max-height: 31px; overflow: hidden; }

/* 광고훅 bar 모델 — 하단 고정 바(왼쪽 로고 + 오른쪽 바로가기) ── */
body.has-adbar .invite-stage { padding-bottom: 60px; }   /* 고정 바에 본문 안 가리게 여백 */
.iv-adbar {
	position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 900;
	width: 100%; max-width: 440px; height: 54px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 0 14px; background: rgba(255,255,255,.97); border-top: 1px solid #ececec;
	box-shadow: 0 -2px 12px rgba(0,0,0,.06); backdrop-filter: saturate(1.1) blur(2px);
}
.iv-adbar .adbar-brand { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.iv-adbar .adbar-brand img { max-height: 30px; max-width: 170px; width: auto; height: auto; }
.iv-adbar .adbar-brand .adbar-name { font-size: 14px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-adbar .adbar-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 16px; border-radius: 18px; background: #111; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; }
.iv-adbar .adbar-go i { font-size: 15px; }

/* 방명록 캡챠 모달 — 이미지+새로고침+입력 한 줄 정렬(Fomantic .inline.fields 줄바꿈… */
.iv-prompt-modal .iv-captcha-row { display: flex; align-items: center; gap: 6px; }
.iv-prompt-modal .iv-captcha-row #captcha-image { flex: 0 0 auto; height: 40px; border: 1px solid #e2e2e2; border-radius: 4px; background: #fff; }
.iv-prompt-modal .iv-captcha-row .iv-captcha-reload { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.iv-prompt-modal .iv-captcha-row .iv-captcha-reload i { margin: 0; }
.iv-prompt-modal .iv-captcha-row #captcha-key { flex: 1 1 auto; min-width: 0; height: 40px; border: 1px solid #d9d9d9; border-radius: 4px; padding: 0 10px; font-size: 14px; }