@charset "utf-8";

/* ==========================================================================
   인사말 페이지 전용 스타일 (greeting.html)
   --------------------------------------------------------------------------
   구조
     .greeting_wrap
       .greeting_head    .greeting_tit (제목 + 도입 인사) | .greeting_bg (사진)
       .greeting_body    본문 + 서명
   --------------------------------------------------------------------------
   디자인 의도
     상단을 옅은 포인트색 카드로 묶어 '표지' 역할을 주고, 본문은 흰 바탕에서
     읽기에 집중시킨다. 카드 모서리(우하단 큰 곡률)는 사진 모서리와 호응한다.
     배치 기준은 뷰포트가 아니라 컨테이너 폭(좌측메뉴 유무에 따라 달라짐).
   --------------------------------------------------------------------------
   서명 필기체
     .ceo_name 은 'Cafe24Shiningstar'. 선언은 레이아웃 css/webfonts.css 에 있어야 한다.
   ========================================================================== */


/* ==========================================================================
   1. 레이아웃
   ========================================================================== */

.greeting_wrap{
	display:block;
	padding:0;
	margin:20px 10px 0;
	container-type:inline-size;
}

/* ---- 상단 카드 : 제목 + 도입 인사 / 사진 ---- */
.greeting_head{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	column-gap:50px;
	row-gap:28px;
	margin:0;                /* v7: 다른 콘텐츠와 동일하게 본문 컬럼 전체 폭 사용 */
	padding:48px 52px;
	box-sizing:border-box;
	background:linear-gradient(135deg,
	           color-mix(in srgb, var(--point-color, #669900) 9%, #fff) 0%,
	           #ffffff 62%);
	border-radius:28px 28px 96px 28px;
	box-shadow:0 2px 20px rgba(0,0,0,0.05);
	overflow:hidden;
}
/* 우상단 연한 원형 장식 */
.greeting_head::before{
	content:'';
	position:absolute;
	width:230px; height:230px;
	right:-70px; top:-90px;
	border-radius:50%;
	background:color-mix(in srgb, var(--point-color, #669900) 12%, #fff);
	opacity:.55;
	pointer-events:none;
}

.greeting_tit{
	position:relative;
	z-index:1;
	flex:1 1 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:0;
}

.greeting_bg{
	position:relative;
	z-index:1;
	flex:0 0 clamp(210px, 34%, 330px);
	display:flex;
	flex-direction:column;
	padding:0;
	margin:0;
}
.greeting_bg::before{
	content:'';
	display:block;
	width:100%;
	aspect-ratio:320 / 403;
	background:url(../img/greeting2026.jpg) no-repeat center top;
	background-size:cover;
	border-radius:110px 22px 22px 22px;
	box-shadow:0 14px 30px rgba(0,0,0,0.18);
}

/* ---- 본문 ---- */
.greeting_body{
	margin:50px 0 0;
	padding:0;
	box-sizing:border-box;
	line-height:1.85;
}


/* ==========================================================================
   2. 타이포
   ========================================================================== */

/* 제목 위 포인트 막대 */
.greeting_tit .tit:first-child{
	position:relative;
	padding-top:24px;
}
.greeting_tit .tit:first-child::before{
	content:'';
	position:absolute;
	left:0; top:0;
	width:46px; height:5px;
	border-radius:3px;
	background:var(--point-color, #669900);
}

.tit{
	font-size:clamp(21px, 3.4vw, 32px);
	font-weight:700;
	line-height:1.45;
	padding:0;
	margin:0;
	color:#252525;
	word-break:keep-all;
	letter-spacing:-0.02em;
}
.tit_point{ color:var(--point-color, #669900); }

/* 도입 인사 — 좌측 세로선으로 제목과 구분 */
.tit_lead{
	max-width:640px;         /* 카드가 넓어져도 한 줄이 과하게 길어지지 않게 */
	margin:26px 0 0;
	padding:2px 0 2px 16px;
	border-left:3px solid color-mix(in srgb, var(--point-color, #669900) 35%, #fff);
	line-height:1.8;
	color:#555;
	word-break:keep-all;
}
.tit_lead b{ font-weight:700; color:#222; }

.greeting_body p{
	margin:0 0 1.7em;
	padding:0;
	color:#454545;
}
.greeting_body p:last-of-type{ margin-bottom:0; }

.greeting_body strong{
	color:var(--point-color2, #557f00);
	font-weight:700;
}

.highlight{ background:linear-gradient(transparent 30%, #fcfec0 30%); }


/* ==========================================================================
   3. 서명
   ========================================================================== */

.sign_box{
	display:block;
	text-align:right;
	line-height:1.6;
	padding:26px 0 0;
	margin:40px 0 0;
	border-top:1px solid #ececec;
}
.sign_box b{ color:#333; font-weight:500; }
.ceo_name{
	font-family:'Cafe24Shiningstar', 'Pretendard', sans-serif;
	font-size:52px;
	font-weight:normal;
	letter-spacing:1px;
	vertical-align:-4px;
	padding:0 0 0 15px;
	margin:0;
	color:#222;
}


/* ==========================================================================
   4. 반응형 — 본문 컬럼 폭 기준
   좁아지면 사진이 위로(order:-1), 제목·인사가 아래에 붙는다.
   ========================================================================== */

@container (max-width:620px){
	.greeting_head{
		padding:32px 24px 38px;
		border-radius:20px 20px 60px 20px;
		column-gap:0;
	}
	.greeting_head::before{ width:150px; height:150px; right:-50px; top:-60px; }
	.greeting_bg{ flex:0 0 100%; order:-1; align-items:center; }
	.greeting_bg::before{ width:min(300px, 74%); border-radius:90px 18px 18px 18px; }
	.greeting_tit{ flex:0 0 100%; }
	.greeting_body{ margin-top:32px; }
}

/* 컨테이너 쿼리 미지원 브라우저 폴백 */
@supports not (container-type: inline-size){
	@media screen and (max-width:768px){
		.greeting_head{ padding:32px 24px 38px; border-radius:20px 20px 60px 20px; }
		.greeting_bg{ flex:0 0 100%; order:-1; align-items:center; }
		.greeting_bg::before{ width:min(300px, 74%); }
		.greeting_tit{ flex:0 0 100%; }
	}
}

/* 화면이 좁아지면 여백·글자 크기만 조정 */
@media screen and (max-width:900px){
	.greeting_wrap{ margin:20px 0 0; padding:0 15px 20px; box-sizing:border-box; }
	.sign_box{ font-size:15px; margin-top:30px; padding-top:20px; }
	.ceo_name{ font-size:36px; }
}