/* ===================================================
   푸른마을요양원 공통 스타일시트
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root{
  --green-900:#243c16;
  --green-800:#33531f;
  --green-700:#436b28;
  --green-600:#568836;
  --green-500:#6fa347;
  --green-100:#eaf2e2;
  --beige:#f6f3ea;
  --cream:#fdfcf9;
  --white:#ffffff;
  --text-dark:#28311f;
  --text-body:#5c6355;
  --text-light:#8b9284;
  --border:#e3e2d8;
  --shadow:0 10px 30px rgba(40,60,20,.08);
  --radius:14px;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  overflow-x:hidden;
  font-family:'Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif;
  color:var(--text-body);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{color:var(--text-dark);font-weight:700;line-height:1.4;}

.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.section--beige{background:var(--beige);}
.section--green{background:linear-gradient(135deg,var(--green-800),var(--green-600));color:#fff;}

.eyebrow{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--green-600);
  background:var(--green-100);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.section-title{font-size:32px;margin-bottom:14px;}
.section-desc{color:var(--text-body);font-size:16px;max-width:640px;}
.section-head{margin-bottom:48px;}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-head.center .section-desc{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:999px;font-weight:700;font-size:15px;
  transition:.2s ease;
}
.btn--primary{background:var(--green-600);color:#fff;}
.btn--primary:hover{background:var(--green-700);}
.btn--outline{border:1.5px solid var(--white);color:#fff;}
.btn--outline:hover{background:rgba(255,255,255,.15);}
/* 어두운 배너 위에 얹는 흰 버튼 (예전엔 페이지마다 인라인 style 로 흩어져 있었다) */
.btn--white{background:#fff;color:var(--green-700);border:1.5px solid #fff;}
.btn--white:hover{background:var(--green-100);color:var(--green-800);}
.btn--dark-outline{border:1.5px solid var(--green-600);color:var(--green-700);}
.btn--dark-outline:hover{background:var(--green-100);}
.btn--sm{padding:10px 20px;font-size:14px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  background:rgba(253,252,249,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:82px;
}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;color:var(--green-800);flex:none;margin-right:20px;}
.logo svg,.logo img{flex:none;}
/* 로고 파일이 원형 도안에 흰 사각 배경이 채워진 형태라, 모서리를 둥글게 깎아
   배경과 자연스럽게 어울리게 합니다. */
.logo img{height:44px;width:auto;border-radius:50%;}
.logo .sub{display:block;font-size:11px;font-weight:500;color:var(--text-light);letter-spacing:.04em;}

.gnb{display:flex;align-items:center;gap:0;flex-wrap:nowrap;}
.gnb a{
  padding:12px 10px;font-size:14.5px;font-weight:500;color:var(--text-dark);
  border-radius:8px;transition:.15s;white-space:nowrap;
}
.gnb a:hover,.gnb a.active{color:var(--green-700);background:var(--green-100);}

.gnb-item{position:relative;}
.gnb-dropdown{
  position:absolute;top:100%;left:0;margin-top:6px;width:max-content;
  background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
  padding:4px;z-index:1010;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.gnb-item:hover .gnb-dropdown,.gnb-item:focus-within .gnb-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.gnb-dropdown a{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--text-dark);white-space:nowrap;
}
.gnb-dropdown a:hover{background:var(--green-100);color:var(--green-700);}

.header-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:20px;}
.tel-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--green-700);color:#fff;padding:11px 20px;border-radius:999px;
  font-weight:700;font-size:14.5px;white-space:nowrap;
}
.tel-btn:hover{background:var(--green-800);}

.hamburger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center;}
.hamburger span{width:22px;height:2px;background:var(--text-dark);border-radius:2px;transition:.2s;}

/* ---------- Hero / Image placeholder ---------- */
.img-placeholder{
  position:relative;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    repeating-linear-gradient(135deg,var(--green-100) 0 14px,#f1ead9 14px 28px);
  border:2px dashed var(--green-500);
  border-radius:var(--radius);
  color:var(--green-700);
  text-align:center;
  padding:20px;
  overflow:hidden;
}
.img-placeholder svg{width:34px;height:34px;opacity:.7;}
.img-placeholder .ph-label{font-size:14px;font-weight:700;}
.img-placeholder .ph-sub{font-size:12px;color:var(--text-light);}

/* ---------- Page sub-nav (header 드롭다운 하위 메뉴로 바로 이동) ---------- */
.page-subnav{background:#fff;border-bottom:1px solid var(--border);}
.page-subnav .container{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:20px 24px;}
.page-subnav a{
  flex:1 1 160px;max-width:220px;text-align:center;
  padding:14px 18px;border:1.5px solid var(--border);border-radius:var(--radius);
  font-weight:700;font-size:15px;color:var(--green-700);text-decoration:none;
  transition:.2s;
}
.page-subnav a:hover{background:var(--green-100);border-color:var(--green-500);}
.page-subnav a.active{background:var(--green-700);border-color:var(--green-700);color:#fff;}

.hero-slider{
  position:relative;
  height:640px;
  overflow:hidden;
  border-bottom:none;
  background:
    repeating-linear-gradient(135deg,#3a5a26 0 18px,#324e20 18px 36px);
}
.hero-track{
  display:flex;
  width:300%;
  height:100%;
  transition:transform .6s ease;
}
.hero-slide{
  position:relative;
  flex:0 0 33.3333%;
  width:33.3333%;
  height:100%;
  display:flex;align-items:center;
  background:
    repeating-linear-gradient(135deg,#3a5a26 0 18px,#324e20 18px 36px);
}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,32,10,.55),rgba(20,32,10,.75));
}
.hero-content{position:relative;z-index:2;color:#fff;max-width:640px;}
.hero-slide .eyebrow{background:rgba(255,255,255,.15);color:#fff;}
.hero-slide h1{font-size:44px;color:#fff;margin-bottom:20px;}
.hero-slide p{font-size:17px;color:rgba(255,255,255,.88);margin-bottom:34px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero-photo-tools{
  position:absolute;top:18px;right:18px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.hero-ph-tag{
  background:rgba(0,0,0,.35);color:#fff;font-size:12px;
  padding:6px 12px;border-radius:999px;border:1px dashed rgba(255,255,255,.5);
}
.hero-photo-controls{display:none;gap:8px;}
body.edit-mode .hero-photo-controls.notice-admin-only{display:flex;}
.hero-photo-controls .notice-file-label{font-size:12.5px;padding:8px 14px;}
.hero-photo-controls .hero-photo-remove{background:#fff;}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s;
}
.hero-arrow:hover{background:rgba(255,255,255,.3);}
.hero-arrow--prev{left:18px;}
.hero-arrow--next{right:18px;}
.hero-dots{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;
  display:flex;gap:10px;
}
.hero-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;
  transition:background .2s,transform .2s;
}
.hero-dot.is-active{background:#fff;transform:scale(1.2);}

/* page hero (inner pages) */
.page-hero{
  position:relative;min-height:280px;display:flex;align-items:flex-end;
  background:repeating-linear-gradient(135deg,#3a5a26 0 18px,#324e20 18px 36px);
  padding:60px 0 40px;
}
.page-hero::after{content:"";position:absolute;inset:0;background:rgba(20,32,10,.6);}
.page-hero .container{position:relative;z-index:2;color:#fff;}
.page-hero .crumb{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:10px;}
.page-hero h1{color:#fff;font-size:34px;}
.page-hero p{color:rgba(255,255,255,.85);margin-top:12px;max-width:560px;font-size:15px;}

/* ---------- 요양원소개 인사말 (배경 사진 + 글 카드) ---------- */
.greeting-section{position:relative;overflow:hidden;background:var(--cream);}
/* 사진 자리를 섹션 전체에 깔아 배경처럼 쓴다.
   .img-placeholder / .photo-slot-filled 의 점선 테두리·나뭇잎 액자는 여기서만 벗겨낸다. */
.greeting-section .greeting-photo{
  position:absolute;inset:0;z-index:0;
  aspect-ratio:auto !important;border:none !important;border-image:none !important;
  border-radius:0 !important;box-shadow:none !important;
}
.greeting-section .greeting-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 사진 위에 밝은 막을 한 겹 덮어 글씨가 묻히지 않게 한다.
   pointer-events:none 이라야 편집모드에서 아래 업로드 버튼을 누를 수 있다. */
.greeting-section::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(253,252,249,.82) 0%,rgba(253,252,249,.55) 55%,rgba(253,252,249,.35) 100%);
}
.greeting-section > .container{position:relative;z-index:2;}
/* 글은 카드 안에 담아 어떤 사진이 깔려도 확실히 읽히게 한다. */
.greeting-card{
  max-width:680px;background:rgba(255,255,255,.93);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:42px 44px;box-shadow:var(--shadow);
}
.greeting-card .quote-block{background:transparent;padding:0;}
@media (max-width:768px){
  .greeting-card{padding:28px 22px;}
  .greeting-section::before{background:rgba(253,252,249,.8);}
}

/* ---------- Quick info strip ---------- */
.quick-info{background:var(--green-800);color:#fff;}
.quick-info .container{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.quick-item{
  display:flex;align-items:center;gap:14px;
  padding:26px 20px;border-right:1px solid rgba(255,255,255,.15);
}
.quick-item:last-child{border-right:none;}
.quick-item svg{flex:none;width:26px;height:26px;color:var(--green-100);}
.quick-item .label{font-size:12.5px;color:rgba(255,255,255,.65);margin-bottom:3px;}
.quick-item .value{font-size:16px;font-weight:700;}
.quick-item--call{transition:background .15s;cursor:pointer;}
.quick-item--call:hover,.quick-item--call:focus-visible{background:rgba(255,255,255,.08);}
.quick-item--call:active{background:rgba(255,255,255,.14);}

/* ---------- Cards grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}

/* 카드 개수가 3의 배수가 아닐 때, 마지막 줄이 왼쪽으로 쏠려 오른쪽에 빈칸이
   남는 것을 막고 가운데로 모아줍니다. 6칸 그리드에 카드를 2칸씩 놓아
   반 칸 단위로 밀 수 있게 한 방식입니다. (.grid-3 과 함께 써야 합니다) */
.grid-3.grid-center-last{grid-template-columns:repeat(6,1fr);}
.grid-3.grid-center-last>*{grid-column:span 2;}
.grid-3.grid-center-last>:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2;}
.grid-3.grid-center-last>:nth-child(3n+1):nth-last-child(1){grid-column:3/span 2;}

/* ---------- 시설 개별 페이지 사진 갤러리 (장수 제한 없음, 한 줄에 2장씩 큼직하게) ---------- */
.facility-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
@media (max-width:600px){.facility-gallery{grid-template-columns:1fr;}}

/* 사진 한 장 + 그 아래 설명글 */
.fg-item{position:relative;display:flex;flex-direction:column;}
.fg-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--radius);border:1px solid var(--border);background:#fff;
}
.fg-caption{
  margin-top:12px;font-size:14px;line-height:1.7;color:var(--text-body);padding:0 2px;
}
/* 설명글이 비어 있으면 방문자에게는 자리도 차지하지 않게 감춘다. */
.fg-caption--empty{display:none;}
/* 편집모드에서는 빈 설명글도 꺼내 보여 바로 입력할 수 있게 한다. */
body.edit-mode .fg-caption--empty{display:block;}
body.edit-mode .fg-caption[contenteditable="true"]{
  outline:1px dashed var(--green-500);border-radius:6px;padding:6px 8px;min-height:34px;
}
body.edit-mode .fg-caption[contenteditable="true"]:empty::before{
  content:attr(data-placeholder);color:var(--text-light);
}
/* 사진마다 붙는 삭제 버튼 (관리자 편집모드에서만) */
.fg-delete{
  position:absolute;top:10px;right:10px;z-index:2;
  border:1px solid var(--border);background:rgba(255,255,255,.94);color:#c0392b;
  border-radius:8px;padding:6px 10px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.fg-delete:hover{background:#ffe3e3;}
/* 사진 추가 영역 */
.fg-add{margin-top:24px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;}
.fg-status{font-size:13px;color:var(--green-700);font-weight:500;}

/* ---------- 식사서비스 "식단표 보기" — 왼쪽 사진 / 오른쪽 글 ----------
   이 페이지는 위 "이달의 식단표"와 이 섹션, 단 둘뿐이라 사진 칸을 넉넉하게 키웠다.
   사진(3fr)이 글(2fr)보다 넓은 건 의도적 — 사진이 잘 보이는 게 이 섹션의 목적. */
.meal-split{display:grid;grid-template-columns:3fr 2fr;gap:32px;align-items:start;}
.meal-photo-grid{gap:26px;}
/* 사진 칸과 글 칸을 같은 카드 스타일로 감싸, 사진 장수에 따라 두 칸 높이가
   달라져도(예: 사진 4장 2×2 vs 글 3개) 서로 다른 상자처럼 자연스러워 보이게 한다. */
.meal-split-photos,
.meal-split-notes{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);
}
/* 사진에 뚜렷한 테두리 + 은은한 그림자를 주어 허전해 보이지 않게 한다.
   글 칸(오른쪽) 높이와 맞도록 기본 4/3보다 세로로 조금 더 키웠다.
   (다른 페이지의 .fg-item 사진과 공유하는 규칙을 덮어쓰지 않도록 이 섹션에만 적용) */
.meal-photo-grid .fg-item img{
  aspect-ratio:5/4;
  border:2px solid var(--border);
  box-shadow:0 6px 16px rgba(40,60,20,.1);
}
.mn-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;}
.mn-head h3{font-size:18px;color:var(--green-900);}
.mn-list{display:flex;flex-direction:column;gap:14px;}
/* 목록 안의 카드는 바깥 흰 상자와 겹쳐 보이지 않게 테두리만 남긴다 */
.mn-item{padding:18px 20px;box-shadow:none;background:var(--cream);}
.mn-date{font-size:12.5px;color:var(--text-light);}
.mn-content{font-size:14px;line-height:1.75;color:var(--text-body);white-space:pre-wrap;}
.mn-delete{
  border:1px solid var(--border);background:#fff;color:#c0392b;
  border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer;
}
.mn-delete:hover{background:#ffe3e3;}
.meal-split-photos .notice-box,
.meal-split-notes .notice-box{padding:40px 20px;border:none;}
.meal-split-notes .notice-pagination{margin-top:20px;}

@media (max-width:900px){
  .meal-split{grid-template-columns:1fr;gap:28px;}
}

/* 갤러리 사진들 아래에 붙는 공간 소개 부가설명 */
.facility-note{
  margin-top:32px;background:var(--green-100);border-radius:var(--radius);
  padding:32px 36px;
}
.facility-note h3{color:var(--green-900);font-size:19px;margin-bottom:10px;}
.facility-note p{color:var(--text-body);font-size:15px;line-height:1.8;}
.facility-note .note-hint{
  margin-top:14px;font-size:13px;color:var(--green-600);font-weight:500;
}

.service-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:.25s;box-shadow:var(--shadow);
  display:flex;flex-direction:column;height:100%;
}
.service-card:hover{transform:translateY(-6px);}
.service-card .img-placeholder{aspect-ratio:4/3;border-radius:0;border:none;}
.service-card .body{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1;}
.service-card .num{font-size:13px;font-weight:800;color:var(--green-500);letter-spacing:.06em;}
.service-card h3{font-size:20px;margin:8px 0 10px;}
.service-card p{font-size:14.5px;color:var(--text-body);margin-bottom:16px;flex:1;}
.service-card .more{font-size:14px;font-weight:700;color:var(--green-700);display:inline-flex;align-items:center;gap:6px;margin-top:auto;}

.feature-card{
  background:#fff;border-radius:var(--radius);padding:32px 26px;border:1px solid var(--border);
}
.feature-card .icon{
  width:52px;height:52px;border-radius:14px;background:var(--green-100);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--green-700);
}
.feature-card h3{font-size:18px;margin-bottom:10px;}
.feature-card p{font-size:14px;color:var(--text-body);}

/* Premium / why-us numbered rows */
.why-list{display:flex;flex-direction:column;}
.why-row{
  display:grid;grid-template-columns:110px 1fr 1fr;gap:32px;align-items:center;
  padding:36px 0;border-top:1px solid var(--border);
}
.why-row:last-child{border-bottom:1px solid var(--border);}
.why-row .idx{font-size:15px;font-weight:800;color:var(--green-500);}
.why-row .idx span{display:block;font-size:32px;color:var(--green-100);-webkit-text-stroke:1.5px var(--green-500);}
.why-row h3{font-size:21px;margin-bottom:8px;}
.why-row p{font-size:14.5px;color:var(--text-body);}
.why-row .img-placeholder{aspect-ratio:16/9;}

/* Steps */
.steps{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.step{
  flex:1;min-width:130px;text-align:center;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 14px;position:relative;
}
.step .n{
  width:36px;height:36px;border-radius:50%;background:var(--green-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 14px;
}
.step h4{font-size:15px;margin-bottom:6px;}
.step p{font-size:12.5px;color:var(--text-light);}

/* Table */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.info-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.info-table th,.info-table td{padding:16px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--border);color:var(--text-dark);}
.info-table th{background:var(--green-100);color:var(--green-800);width:180px;font-weight:700;}
.info-table tr:last-child td,.info-table tr:last-child th{border-bottom:none;}

.schedule-table{width:100%;border-collapse:collapse;}
.schedule-table th,.schedule-table td{padding:14px 18px;border:1px solid var(--border);font-size:14.5px;text-align:left;}
.schedule-table th{background:var(--green-700);color:#fff;font-weight:700;}
.schedule-table td:first-child{font-weight:700;color:var(--green-700);background:var(--green-100);width:110px;}

/* Stats */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;}
/* 카드가 하나뿐일 때 3칸 격자의 왼쪽에 쏠리지 않도록 가운데로 모은다. */
.stat-row.stat-row--single{grid-template-columns:minmax(0,360px);justify-content:center;}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px 20px;}
.stat .num{font-size:38px;font-weight:900;color:var(--green-700);}
.stat .num small{font-size:16px;font-weight:700;}
.stat .label{margin-top:8px;font-size:14px;color:var(--text-body);}

/* CTA banner */
.cta-banner{
  background:linear-gradient(120deg,var(--green-800),var(--green-600));
  color:#fff;border-radius:24px;padding:56px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-banner h2{color:#fff;font-size:26px;margin-bottom:8px;}
.cta-banner p{color:rgba(255,255,255,.85);font-size:15px;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* Quote / greeting */
.quote-block{
  background:var(--green-100);border-radius:var(--radius);padding:40px;
  font-size:17px;color:var(--green-900);line-height:1.9;font-weight:500;
  position:relative;
}

/* Map link card */
.map-card{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);
}
.map-card .img-placeholder{aspect-ratio:16/7;border-radius:0;}
.map-card .body{padding:26px 28px;}
.map-links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

.kakao-map-box{
  width:100%;aspect-ratio:16/7;position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--green-100) 0 14px,#f1ead9 14px 28px);
}
.kakao-map-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--green-700);text-align:center;padding:20px;border:2px dashed #c9d4b8;
}
.kakao-map-fallback svg{width:34px;height:34px;opacity:.7;}
.kakao-map-fallback .ph-label{font-size:14px;font-weight:700;}
.kakao-map-fallback .ph-sub{font-size:12px;color:var(--text-light);}

/* News placeholder cards */
.news-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.news-card .img-placeholder{aspect-ratio:4/3;border-radius:0;}
.news-card .body{padding:20px 22px 24px;}
.news-card .date{font-size:12.5px;color:var(--text-light);margin-bottom:6px;}
.news-card h4{font-size:16px;}

.notice-admin-only{display:none;}
body.edit-mode .notice-admin-only{display:inline-flex;}

.notice-form{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;box-shadow:var(--shadow);
}
.notice-form input,.notice-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:14.5px;margin-bottom:12px;resize:vertical;color:var(--text-dark);
}
.notice-form input:focus,.notice-form textarea:focus{outline:2px solid var(--green-500);border-color:var(--green-500);}
.notice-form-actions{display:flex;gap:10px;justify-content:flex-end;}

.notice-attach-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.notice-file-label{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;
  border:1px dashed var(--green-500);border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--green-700);cursor:pointer;background:var(--green-100);
}
.notice-file-label:hover{filter:brightness(0.97);}
.notice-attach-preview{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.notice-attach-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--beige);border:1px solid var(--border);
  border-radius:999px;padding:5px 8px 5px 12px;font-size:12.5px;color:var(--text-dark);
}
.notice-attach-chip button{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;}
.notice-attach-chip button:hover{color:#b23b3b;}

.notice-images{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.notice-images img{width:110px;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--border);}
.notice-files{display:flex;flex-direction:column;gap:8px;margin-top:14px;align-items:flex-start;}
.notice-file-link{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--green-700);font-weight:700;
  background:var(--green-100);padding:8px 14px;border-radius:8px;
}
.notice-file-link:hover{text-decoration:underline;}

.notice-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;}
.notice-pagination button{
  min-width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:#fff;
  font-size:13.5px;font-weight:700;color:var(--text-dark);cursor:pointer;
}
.notice-pagination button:hover{background:var(--green-100);}
.notice-pagination button.active{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.notice-pagination button:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- 직원채용 게시판(같은 틀에 직종만 바꿔 여러 건 등록) ---------- */
.recruit-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.recruit-badge{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;
  color:var(--green-700);background:var(--green-100);padding:6px 12px;border-radius:999px;
}
.recruit-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.recruit-form-grid .full{grid-column:1 / -1;}
.recruit-form-grid .stat-fields{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px;}
.recruit-form label{display:block;font-size:13px;font-weight:700;color:var(--text-dark);margin-bottom:6px;}

/* ---------- Meal photo slots ---------- */
/* 여기에 display 를 두면 위쪽 .notice-admin-only{display:none} 을 같은 우선순위로 덮어써서
   업로드·삭제 버튼이 일반 방문자에게도 보인다. 표시 여부는 아래 edit-mode 규칙에만 맡긴다. */
.meal-slot-controls{gap:10px;margin-top:14px;justify-content:center;flex-wrap:wrap;padding:0 4px;}
/* 식단표·프로그램표 사진칸만은 ✏️ 편집모드를 켜지 않아도 바꿀 수 있게 한다.
   매달 갈아끼우는 작업이라 편집모드를 거치게 하면 번거롭기 때문.
   관리자로 로그인하면(body.is-admin) 바로 업로드·삭제 버튼이 보인다.
   일반 방문자에게는 여전히 안 보이고, 실제 저장 권한은 서버(api/slot.php의
   pm_require_admin)가 세션으로 다시 확인하므로 이 CSS만으로 보안이 뚫리지 않는다. */
body.is-admin .meal-slot-controls.notice-admin-only,
body.edit-mode .meal-slot-controls.notice-admin-only{display:flex;}
.meal-slot-image{overflow:hidden;}
.meal-slot-image img{width:100%;height:100%;object-fit:cover;display:block;}
/* 식단표·프로그램표는 사진이 아니라 표라서 잘리면 안 된다.
   기본값인 object-fit:cover 는 칸 비율에 맞춰 가장자리를 잘라내므로,
   이 두 슬롯만 원본 비율 그대로(contain) 보여준다.
   ⚠️ 표 성격의 슬롯을 새로 만들면 여기 선택자에 키를 꼭 추가할 것.
   빠뜨리면 달력 오른쪽이 잘려나가는 식으로 조용히 깨진다. */
.meal-slot[data-meal-key="monthly"] .meal-slot-image,
.meal-slot[data-meal-key="program-monthly"] .meal-slot-image{
  aspect-ratio:auto !important;overflow:visible;
}
.meal-slot[data-meal-key="monthly"] .meal-slot-image img,
.meal-slot[data-meal-key="program-monthly"] .meal-slot-image img{
  height:auto;object-fit:contain;
}
.meal-slot-media--clickable{cursor:pointer;}

/* 식단표·프로그램표를 PDF로 올린 경우 — 사진 대신 뷰어를 끼운다.
   HTML 에 인라인으로 붙은 aspect-ratio 를 이겨야 해서 !important 를 쓴다. */
.meal-slot-pdf{aspect-ratio:auto !important;overflow:visible !important;background:#fff;}
.meal-slot-pdf object{
  width:100%;height:72vh;min-height:420px;display:block;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);
}
/* PDF 를 페이지 안에서 못 여는 기기(주로 휴대폰)에서 대신 보이는 안내 */
.pdf-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  height:100%;padding:40px 24px;text-align:center;
  color:var(--text-body);font-size:14px;line-height:1.7;
}
.pdf-open-link{
  display:block;margin-top:12px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--green-700);text-decoration:none;
}
.pdf-open-link:hover{text-decoration:underline;}
@media (max-width:600px){
  .meal-slot-pdf object{height:60vh;min-height:320px;}
}

/* ---------- Meal photo gallery (모아보기) ---------- */
.meal-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}
.meal-gallery-item{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);}
.meal-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.meal-gallery-item .meta{padding:10px 12px;font-size:12.5px;color:var(--text-light);display:flex;justify-content:space-between;align-items:center;}
.meal-gallery-item .meal-label{font-weight:700;color:var(--green-700);}
.meal-gallery-delete{
  position:absolute;top:8px;right:8px;z-index:2;
  background:#fff5f5;color:#b23b3b;border:1px solid #e7c6c6;
  border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;
}
.meal-gallery-delete:hover{background:#ffe3e3;}

/* 지난 식단표 보관함 — 식사 사진과 달리 "문서"라서 잘라내면 내용이 안 보인다.
   칸을 크게 잡고 object-fit:contain 으로 표 전체가 들어오게 한다. */
.meal-monthly-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.meal-monthly-grid .meal-gallery-item img{
  aspect-ratio:4/3;object-fit:contain;background:#fff;padding:8px;
}
@media (max-width:600px){
  .meal-monthly-grid{grid-template-columns:1fr;}
}

/* ---------- Generic "사진 준비중" photo slots ---------- */
.photo-slot-filled{
  border:14px solid transparent !important;
  border-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Cdefs%3E%3Cpath%20id='leaf'%20d='M0%20-6c3%202%203%207%200%209c-3-2-3-7%200-9z'%20fill='%23eaf2e2'/%3E%3C/defs%3E%3Crect%20width='60'%20height='60'%20fill='%23436b28'/%3E%3Cuse%20href='%23leaf'%20x='10'%20y='10'/%3E%3Cuse%20href='%23leaf'%20x='50'%20y='10'/%3E%3Cuse%20href='%23leaf'%20x='10'%20y='50'/%3E%3Cuse%20href='%23leaf'%20x='50'%20y='50'/%3E%3C/svg%3E") 20 stretch !important;
  border-radius:0 !important;
  box-shadow:0 10px 26px rgba(36,60,22,.25) !important;
  background:#fff !important;
  padding:0 !important;
}
.photo-slot-filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo-slot-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:none;gap:8px;justify-content:center;align-items:center;
  padding:12px;background:linear-gradient(transparent,rgba(15,25,8,.6));
}
body.edit-mode .photo-slot-controls.notice-admin-only{display:flex;}
.photo-slot-controls .notice-file-label{background:#fff;color:var(--green-700);padding:8px 14px;font-size:12.5px;}
.photo-slot-controls .photo-slot-remove{background:#fff;padding:8px 14px;font-size:12.5px;}

#notice-list{display:flex;flex-direction:column;gap:16px;margin-bottom:8px;}
.notice-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);}
.notice-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.notice-date{font-size:12.5px;color:var(--text-light);font-weight:700;}
.notice-item h4{font-size:17px;margin-bottom:8px;}
.notice-item-title{display:inline-block;color:inherit;text-decoration:none;cursor:pointer;}
.notice-item-title:hover{text-decoration:underline;color:var(--green-700);}
.notice-content{font-size:14.5px;color:var(--text-body);white-space:pre-wrap;}

.notice-preview-thumbs{display:inline-flex;align-items:center;gap:8px;margin-top:14px;cursor:pointer;}
.notice-preview-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border);}
.notice-preview-more{
  font-size:12px;font-weight:700;color:var(--green-700);background:var(--green-100);
  border-radius:999px;padding:4px 10px;
}
.notice-toggle-btn{
  display:block;margin-top:10px;background:none;border:none;color:var(--green-700);
  font-weight:700;font-size:13px;cursor:pointer;padding:2px 0;
}
.notice-toggle-btn:hover{text-decoration:underline;}

.notice-delete{
  font-size:12px;color:#b23b3b;border:1px solid #e7c6c6;padding:4px 12px;
  border-radius:999px;background:#fff5f5;font-weight:700;
}
.notice-delete:hover{background:#ffe3e3;}

.notice-box{
  text-align:center;padding:70px 30px;background:#fff;border:1px dashed var(--border);
  border-radius:var(--radius);color:var(--text-light);
}
.notice-box svg{width:44px;height:44px;color:var(--green-500);margin-bottom:16px;}
.notice-box h3{color:var(--text-dark);margin-bottom:8px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.7);padding:56px 0 28px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:24px;}
.footer-logo{color:#fff;font-size:19px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
/* 예전 로고는 단색 도안이라 흰색으로 반전시켜 어두운 푸터에 얹었지만,
   지금 로고는 색이 있는 도안이라 반전을 걸면 흰 덩어리로 뭉개진다. 원색 그대로 쓴다. */
.footer-logo img{height:30px;width:auto;flex:none;border-radius:50%;}
.footer-info div{font-size:13.5px;margin-bottom:6px;}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;}
.footer-nav a{font-size:14px;}
.footer-nav a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.45);}
.footer-admin-link{font-size:12px;color:rgba(255,255,255,.35);text-decoration:underline;padding:0;}
.footer-admin-link:hover{color:rgba(255,255,255,.7);}

/* ---------- Quick nav (전화 / 카페 / 밴드 / 맨위로 - 우측 하단 고정 노출, 관리자 편집 버튼 위쪽) ---------- */
#pm-quick-nav{position:fixed;right:20px;bottom:92px;z-index:9997;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:'Noto Sans KR',sans-serif;}
#pm-quick-nav .qn-btn{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.18);color:#fff;text-decoration:none;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
#pm-quick-nav .qn-btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.24);}
#pm-quick-nav .qn-call{background:var(--green-600);}
#pm-quick-nav .qn-cafe{background:#03c75a;}
#pm-quick-nav .qn-band{background:var(--green-900);flex-direction:column;gap:2px;}
#pm-quick-nav .qn-band-text{font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;}
#pm-quick-nav .qn-band-bar{width:24px;height:3px;background:var(--green-500);border-radius:2px;}
#pm-quick-nav .qn-top{background:var(--green-700);margin-top:6px;}
@media (max-width:480px){
  #pm-quick-nav{right:14px;bottom:84px;}
  #pm-quick-nav .qn-btn{width:46px;height:46px;}
}

/* ---------- 직원 채용 안내 팝업 (모달 패널 아님 - 배경 페이지를 자유롭게 조작 가능) ---------- */
.rp-panel{position:fixed;top:110px;left:24px;z-index:10000;width:340px;max-width:calc(100% - 40px);animation:rpPanelIn .35s ease-out both;}
@keyframes rpPanelIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}
.rp-card{position:relative;background:#fff;border-radius:16px;padding:28px 26px 22px;box-shadow:0 20px 50px rgba(0,0,0,.28);border:1px solid var(--border);font-family:'Noto Sans KR',sans-serif;}
.rp-close{position:absolute;top:10px;right:12px;width:32px;height:32px;background:none;border:none;font-size:22px;line-height:1;color:var(--text-light);cursor:pointer;border-radius:50%;}
.rp-close:hover{color:var(--text-dark);background:var(--beige);}
.rp-drag-handle{cursor:grab;touch-action:none;margin:-4px -4px 0;padding:4px;border-radius:10px;}
.rp-drag-handle:hover{background:var(--beige);}
.rp-drag-handle.is-dragging{cursor:grabbing;background:var(--beige);}
.rp-badge{display:inline-block;background:var(--green-100);color:var(--green-700);font-size:12px;font-weight:800;letter-spacing:.5px;padding:4px 10px;border-radius:999px;margin-bottom:12px;}
.rp-card h3{font-size:20px;line-height:1.4;color:var(--text-dark);margin-bottom:16px;}
.rp-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px;}
.rp-list li{font-size:13.5px;color:var(--text-dark);line-height:1.5;}
.rp-list li strong{display:inline-block;min-width:64px;color:var(--green-700);font-weight:700;margin-right:4px;}
.rp-more{display:block;text-align:center;background:var(--green-700);color:#fff;font-weight:700;font-size:15px;padding:12px;border-radius:10px;text-decoration:none;margin-bottom:14px;transition:background .15s;}
.rp-more:hover{background:var(--green-800);}
.rp-footer{display:flex;gap:8px;border-top:1px solid var(--border);padding-top:14px;}
.rp-hide{flex:1;background:none;border:none;font-size:12.5px;color:var(--text-light);cursor:pointer;padding:4px;}
.rp-hide:hover{color:var(--text-dark);text-decoration:underline;}
@media (max-width:480px){
  .rp-panel{top:90px;left:12px;right:12px;width:auto;max-width:none;}
  .rp-card{padding:22px 18px 16px;}
}

/* ---------- Edit mode ---------- */
body.edit-mode .edit-target{outline:1.5px dashed #9db98a;outline-offset:3px;border-radius:4px;cursor:text;transition:outline-color .15s;}
body.edit-mode .edit-target:hover{outline-color:var(--green-600);}
body.edit-mode .edit-target:focus{outline:2px solid var(--green-700);background:rgba(111,163,71,.08);}
body.edit-mode a{cursor:text;}

/* ✏️ 편집 버튼은 원형 바로가기(#pm-quick-nav) 묶음 안 맨 위에 들어간다(js/edit-mode.js).
   화면 구석에 따로 고정하면 브라우저·메신저 알림창에 자주 가려지기 때문. */
#pm-edit-toolbar{position:relative;z-index:9999;font-family:'Noto Sans KR',sans-serif;}
/* 바로가기 묶음이 없는 페이지에서는 예전처럼 우측 하단에 단독으로 뜬다(예비 규칙) */
body > #pm-edit-toolbar{position:fixed;right:20px;bottom:20px;}
#pm-edit-fab{
  width:52px;height:52px;border-radius:50%;background:var(--green-700);color:#fff;font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
}
#pm-edit-fab:hover{background:var(--green-800);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.24);}
/* 패널은 버튼 위치와 무관하게 화면 기준으로 띄운다.
   버튼이 위로 올라갔으므로 버튼 기준으로 펼치면 화면 밖으로 넘칠 수 있다. */
#pm-edit-panel{
  position:fixed;right:20px;bottom:20px;width:280px;background:#fff;border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.2);padding:18px;border:1px solid var(--border);
  max-height:calc(100vh - 40px);overflow-y:auto;z-index:10001;
}
#pm-edit-panel[hidden]{display:none;}
@media (max-width:480px){
  #pm-edit-fab{width:46px;height:46px;font-size:20px;}
  #pm-edit-panel{right:14px;left:14px;width:auto;bottom:14px;max-height:calc(100vh - 28px);}
}
.pm-row{margin-bottom:10px;font-size:15px;color:var(--text-dark);}
.pm-switch{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px;cursor:pointer;color:var(--text-dark);}
.pm-hint{font-size:12px;color:var(--text-light);line-height:1.6;margin-bottom:14px;}
.pm-actions{display:flex;flex-direction:column;gap:8px;}
.pm-actions button{padding:10px;border-radius:8px;font-size:13.5px;font-weight:700;border:1px solid var(--border);background:var(--beige);cursor:pointer;color:var(--text-dark);}
.pm-actions button:hover{background:var(--green-100);}

/* ---------- Scroll reveal (아래로 스크롤하면 슬라이드-업으로 나타남) ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.2s ease-in-out,transform 1.2s ease-in-out;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Hero 텍스트 슬라이드 인 (페이지 이동 시 사진과 글자가 이어서 나타남) ---------- */
.page-hero .container,
.hero-content{opacity:0;transform:translateY(26px);transition:opacity 1s ease-out,transform 1s ease-out;}
.page-hero .container.hero-in,
.hero-content.hero-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .page-hero .container,
  .hero-content{opacity:1;transform:none;transition:none;}
}
#pm-save{background:var(--green-600);color:#fff;border:none;}
#pm-save:hover{background:var(--green-700);}
.pm-status{margin-top:10px;font-size:12px;color:var(--text-light);min-height:16px;line-height:1.5;}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .container{padding:0 16px;}
  .logo{font-size:17px;gap:7px;}
  .logo .sub{display:none;}
  .tel-btn{padding:10px;gap:0;border-radius:50%;}
  .tel-btn .tel-text{display:none;}
}
@media (max-width:960px){
  .gnb{
    position:fixed;top:82px;left:0;right:0;bottom:0;
    height:calc(100vh - 82px);height:calc(100dvh - 82px);
    background:#fff;flex-direction:column;align-items:stretch;padding:20px;gap:4px;
    transform:translateX(100%);transition:.25s;overflow-y:auto;z-index:1001;
  }
  .gnb.open{transform:translateX(0);}
  .gnb a{display:block;width:100%;padding:16px;font-size:17px;border-bottom:1px solid var(--border);border-radius:0;border-left:3px solid transparent;}
  .gnb a:hover,.gnb a.active{background:rgba(111,163,71,.08);border-left-color:var(--green-600);}
  .gnb-item{display:flex;flex-direction:column;}
  .gnb-dropdown{
    position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;
    box-shadow:none;border:none;padding:0;margin-top:0;background:transparent;
    width:100% !important;
  }
  .gnb-dropdown a{width:100%;padding:14px 16px 14px 32px;font-size:15.5px;color:var(--text-light);border-bottom:1px solid var(--border);}
  .gnb-dropdown a:hover{background:rgba(111,163,71,.08);}
  .hamburger{display:flex;}
  .quick-info .container{grid-template-columns:1fr;}
  .quick-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.15);}
  .quick-item:last-child{border-bottom:none;}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  /* 한 줄 1장으로 접히는 폭에서는 가운데 정렬 배치를 되돌립니다. */
  .grid-3.grid-center-last{grid-template-columns:1fr;}
  .grid-3.grid-center-last>*,
  .grid-3.grid-center-last>:nth-child(3n+1):nth-last-child(2),
  .grid-3.grid-center-last>:nth-child(3n+1):nth-last-child(1){grid-column:auto;}
  .recruit-form-grid,.recruit-form-grid .stat-fields{grid-template-columns:1fr;}
  .why-row{grid-template-columns:1fr;gap:16px;}
  .stat-row{grid-template-columns:1fr;}
  .hero-slider{height:600px;}
  .hero-slide h1{font-size:32px;}
  .hero-arrow{width:36px;height:36px;}
  .hero-arrow--prev{left:8px;}
  .hero-arrow--next{right:8px;}
  .section{padding:64px 0;}
  .cta-banner{padding:36px 24px;}
  .footer-top{flex-direction:column;}
}

/* ---------- 휴대폰 전용 축소 (2026-08-07) ----------
   위 960px 블록은 "격자를 1열로 접는" 일만 하고 글자 크기·여백은 데스크톱 값을
   그대로 물려받는다. 그래서 1180px 폭에 어울리던 32px 제목이 343px 화면에
   그대로 들어와 한 화면에 두세 덩어리밖에 안 보였다.
   여기서 타이포와 여백만 한 단계 줄인다 — 레이아웃·색은 건드리지 않는다.
   반드시 960px 블록보다 뒤에 있어야 덮어쓴다. 태블릿(768px)은 제외. */
@media (max-width:600px){
  /* 공통 타이포 */
  .section{padding:44px 0;}
  .section--tight{padding:34px 0;}
  .section-title{font-size:23px;margin-bottom:14px;}
  .eyebrow{font-size:11.5px;padding:5px 12px;margin-bottom:14px;}

  /* 본문 행간 — 한글은 글자가 작아질수록 행간이 넓어야 시원해 보인다.
     제목(h1~h4)은 자체 line-height:1.4 를 쓰므로 영향받지 않고,
     버튼·칩 같은 조밀한 UI 는 main 바깥이거나 자체 값을 쓰므로 안전하다. */
  main p,main li,.page-hero p,.fg-caption{line-height:1.9;}

  /* 메인 히어로 — 세로 640px은 휴대폰 첫 화면을 통째로 먹는다 */
  .hero-slider{height:430px;}
  .hero-slide h1{font-size:25px;margin-bottom:14px;}
  .hero-slide p{font-size:14.5px;margin-bottom:22px;}

  /* 하위 페이지 히어로 */
  .page-hero{min-height:170px;padding:34px 0 24px;}
  .page-hero h1{font-size:23px;}
  .page-hero p{font-size:14px;margin-top:8px;}
  .page-hero .crumb{font-size:12px;margin-bottom:6px;}

  /* 퀵인포 4칸 — 세로로 쌓이면서 416px을 차지하던 곳 */
  .quick-item{padding:20px 18px;gap:14px;}
  .quick-item svg{width:22px;height:22px;}
  .quick-item .value{font-size:15px;}

  /* 카드 — 글자를 줄인 만큼 안쪽 여백은 오히려 넉넉히 둬야 답답하지 않다 */
  .grid-3,.grid-2,.grid-4{gap:22px;}
  .service-card .body{padding:24px 22px 26px;}
  .service-card h3{font-size:18px;margin:10px 0 12px;}
  .service-card p{margin-bottom:18px;}

  /* 왜 푸른마을인가 */
  .why-row{padding:30px 0;gap:18px;}
  .why-row h3{font-size:18px;margin-bottom:10px;}
  .why-row .idx span{font-size:26px;}

  /* 하단 상담 배너 */
  .cta-banner{padding:34px 24px;border-radius:18px;gap:18px;}
  .cta-banner h2{font-size:20px;margin-bottom:10px;}
  .cta-banner p{font-size:14px;}

  /* 인사말 인용 블록 */
  .quote-block{padding:28px 24px;}

  /* 푸터 */
  .site-footer{padding:36px 0 20px;}
  .footer-top{gap:20px;padding-bottom:22px;margin-bottom:18px;}
}