@charset "utf-8";

/* ===== 공통 변수 ===== */
.meal {
	--teal:#00889f;
	--navy:#0d326d;
	--navy2:#16345f;
	--mpurple:#7b4ea8;
}

.meal .img,
.meal .ic,
.meal .companyImg,
.meal .bottomImg {background:#efefef; border-radius:0 0 12px 12px;}

/* 이미지 자리(placeholder) 비율 유지용 */
.meal .img {position:relative; width:100%; padding-top:62%;}


/* ============================================================
   1. 인트로
============================================================ */
.meal .mealIntro {display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.4fr); align-items: end; gap:60px; margin-bottom:20px;}
.meal .mealIntro .introText .badge {display:inline-block; padding:8px 22px; border:1px solid #ccc; border-radius:100px; font-size:var(--fs16); color:#555; margin-bottom:25px;}
.meal .mealIntro .introTit {font-size:var(--fs50); font-weight:800; line-height:1.2; color:#222; margin:0 0 30px;}
.meal .mealIntro .introTit b {color:var(--teal);}
.meal .mealIntro .introText p {color:#666; margin:0 0 6px;}
.meal .mealIntro .introText p:last-child {margin-bottom:0;}

.meal .mealIntro .introImg {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.meal .mealIntro .introImg figure {margin:0; text-align:center;}
.meal .mealIntro .introImg .label {display:inline-block; width:100%; padding:5px 30px; background:#3b3b3b; color:#fff; border-radius:10px 10px 0 0; font-size:var(--fs16); font-weight:600;}
.meal .mealIntro .introImg .label.pink {background:#e2697e;}
.meal .mealIntro .introImg .img img {position:absolute; top:10px; left:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain;}


/* ============================================================
   2. 위탁운영 안내 배너
============================================================ */
.meal .mealNotice {display:flex; align-items:center; justify-content:center; gap:18px; margin:140px 0 26px 0;}
.meal .mealNotice .ic {flex:0 0 auto; width:34px; height:34px; background:rgba(255,255,255,.18); border-radius:8px;}
.meal .mealNotice p {color: #000; font-size:var(--fs24); font-weight:500; margin:0;}
.meal .mealNotice b {font-weight:800;}


/* ============================================================
   공통 박스 / 타이틀
============================================================ */
.meal .mealBox {background:#f6f8fb; border-radius:30px; padding:80px 50px; border: 1px solid #ddd;}
.meal .boxTit {text-align:center; font-size:var(--fs30); font-weight:800; color:#222; margin:0 0 45px; line-height:1.2;}
.meal .boxTit.deco {position:relative;}
.meal .boxTit.deco:before {box-shadow:-14px 0 0 var(--teal);}


/* ============================================================
   2. 운영중인 환자식 (간단소개 + 식사구성 통합)
============================================================ */
.meal .dishList {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.meal .dishItem {display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden; box-shadow:6px 8px 24px rgba(0,0,0,.07);}
.meal .dishItem .img {width:100%;border-radius:0;}
.meal .dishItem .img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.meal .dishItem .dishBody {padding:28px 30px 32px;}
.meal .dishItem .num { background: var(--base1); flex:0 0 auto; width:34px; height:34px; border-radius:10px; color:#fff; font-weight:800; font-size:var(--fs14); display:flex; align-items:center; justify-content:center;}
.meal .dishItem .dishTit {display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.meal .dishItem .dishTit strong {font-size:var(--fs22); font-weight:800; color:#222;}
.meal .dishItem .tag {display:inline-block; margin-left:auto; padding:4px 16px; border-radius:100px; font-size:var(--fs14); font-weight:700;}
.meal .dishItem .tag.blue {background:#e6ecf8; color:var(--base1);}
.meal .dishItem .tag.teal {background:#e6ecf8; color:var(--base1);}
.meal .dishItem .tag.purple {background:#e6ecf8; color:var(--base1);}
.meal .dishItem .dishDesc {color:#666; font-size:var(--fs16); margin:0 0 16px; line-height:1.45;}
.meal .dishItem .points {display:flex; flex-wrap:wrap; gap:6px;}
.meal .dishItem .points li {background:#f3f6fb; border:1px solid #e5eaf2; border-radius:100px; padding:7px 16px; font-size:var(--fs14); font-weight:600; color:#444;}
.meal .dishItem .points li b {color:var(--base1); margin-right:5px;}


/* ============================================================
   3. 위탁운영사 소개
============================================================ */
.meal .companyIntro {margin-left: 50px;}
.meal .mealCompany {position:relative; background:url(/images/use/sajo_logo.svg) no-repeat right 100px top 100px / 140px auto, linear-gradient(135deg, #0a2552 0%, #0d326d 45%, #16447f 100%); border-radius:30px; padding:100px; color:#fff; overflow:hidden;}
.meal .mealCompany:before {content:""; position:absolute; top:-190px; left:-190px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(0,196,229,.18) 0%, rgba(0,196,229,0) 70%); pointer-events:none;}
.meal .mealCompany:after {content:""; position:absolute; bottom:-150px; left:-100px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(0,136,159,.16) 0%, rgba(0,136,159,0) 70%); pointer-events:none;}
.meal .mealCompany > * {position:relative; z-index:1;}
.meal .mealCompany .companyHead {display:grid; align-items: center; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:60px; padding-bottom:10px;}
.meal .mealCompany .companyIntro .label {display:inline-block; font-size:var(--fs18); font-weight:600; color:#b9c7e2; margin-bottom:20px;}
.meal .mealCompany .companyIntro h3 {font-size:var(--fs32); font-weight:800; line-height:1.3; margin:0 0 24px;}
.meal .mealCompany .companyIntro h3 b {color:#00c4e5;}
.meal .mealCompany .companyIntro p {color:#c6d0e3; font-size:var(--fs16); margin:0;}

.meal .mealCompany .companyHistory {display:flex; flex-direction:column; gap:18px; padding-left:24px; border-left:2px solid rgba(255,255,255,.2);}
.meal .mealCompany .companyHistory li {position:relative;}
.meal .mealCompany .companyHistory li:before {content:""; position:absolute; left:-29px; top:7px; width:8px; height:8px; border-radius:50%; background:#fff;}
.meal .mealCompany .companyHistory .year {line-height: 1; display:block; font-size:var(--fs20); font-weight:800;}
.meal .mealCompany .companyHistory .desc {display:block; font-size:var(--fs15); color:#c6d0e3;}

.meal .mealCompany .companyBody {display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap:40px; padding-top:90px; align-items:stretch;}
.meal .mealCompany .companyImg {position:relative; width:100%; padding-top:55%; background:rgba(255,255,255,.08); border-radius:12px; overflow:hidden;    border: 4px solid #fff;}
.meal .mealCompany .companyImg img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.meal .mealCompany .companyStats {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; height:100%; align-content:space-between;}
.meal .mealCompany .companyStats li {display:flex; gap:10px; min-width:0; background:rgba(255,255,255,.07); border-radius:12px; padding:16px 30px;}
.meal .mealCompany .companyStats .ic {flex:0 0 auto; width:10px; height:2px; background:#fff; margin-top:9px;}
.meal .mealCompany .companyStats .txt {min-width:0;}
.meal .mealCompany .companyStats strong {display:block; font-size:var(--fs18); font-weight:800; line-height:1.25; overflow-wrap:anywhere;}
.meal .mealCompany .companyStats span {font-size:var(--fs16); color:#c6d0e3; overflow-wrap:anywhere;}


/* ============================================================
   4. 하단 배너
============================================================ */
.meal .mealBottom {position:relative; display:flex; align-items:center; justify-content:center; gap:40px; background:var(--navy2); border-radius:30px; padding:45px 60px; overflow:hidden;}
.meal .mealBottom .bottomImg {position:absolute; left:0; top:0; bottom:0; width:230px; background:rgba(255,255,255,.08); border-radius:0;}
.meal .mealBottom .bottomTxt {text-align:center; color:#fff; font-size:var(--fs30); font-weight:500; margin:0; line-height:1.35;}
.meal .mealBottom .bottomTxt b {color:#7fd0ff; font-weight:800;}
.meal .mealBottom .bottomRight {display:flex; align-items:center; gap:16px;}
.meal .mealBottom .bottomRight .heart {width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12);}
.meal .mealBottom .bottomRight .badge {display:inline-block; padding:10px 22px; border:1px solid rgba(255,255,255,.4); border-radius:100px; color:#fff; font-size:var(--fs16); font-weight:600; white-space:nowrap;}


/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	.meal .mealIntro {grid-template-columns:1fr; gap:40px;}
	.meal .mealBox {padding:45px 30px; border-radius:24px;}
	.meal .mealCompany {padding:45px 35px;}
	.meal .mealCompany .companyIntro {margin-left:0;}
	.meal .mealCompany .companyHead {grid-template-columns:1fr; gap:40px;}
	.meal .mealCompany .companyBody {grid-template-columns:1fr; padding-top:40px;}
	.meal .mealCompany .companyStats {grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ************************ 모바일(~767) ************************ */
@media (max-width: 767px) {
	.meal .mealIntro .introImg {grid-template-columns:1fr;}
	.meal .mealIntro .introImg .label {padding:5px 8px;}
	.meal .mealNotice {flex-direction:column; text-align:center; gap:12px; margin:50px 0 30px;}
	.meal .mealBox {padding:35px 18px; border-radius:18px;}
	.meal .dishList {grid-template-columns:1fr; gap:18px;}
	.meal .mealCompany {background:linear-gradient(135deg, #0a2552 0%, #0d326d 45%, #16447f 100%); padding:35px 20px; border-radius:18px;}
	.meal .mealCompany .companyBody {padding-top:30px;}
	.meal .mealCompany .companyStats {grid-template-columns:1fr; gap:12px;}
}