/* 제제프렌즈 · 제주 한림쉼터 — 공통 스타일 (아이보리 + 따뜻한 주황 포인트) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  --bg:#F7F4EC;          /* 아이보리 배경 */
  --card:#FFFDF8;        /* 카드 배경 */
  --ink:#2C2A24;         /* 본문 */
  --muted:#8A8161;       /* 보조 텍스트 */
  --line:#E4DECF;        /* 경계선 */
  --line-soft:#EBE4D3;
  --accent:#E7A33E;      /* 포인트 */
  --accent-strong:#C6841A;
  --accent-ink:#3D2705;  /* 포인트 위 텍스트 */
  --sub:#B07C1E;         /* 라벨 */
  --max:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ---------- 헤더 ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(247,244,236,.92); backdrop-filter:blur(8px); border-bottom:.5px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:var(--max); margin:0 auto; padding:0 24px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px}
.brand .logo{width:48px; height:44px; background:url("logo.svg?v=3") center/contain no-repeat !important; font-size:0 !important; color:transparent !important; border-radius:0 !important; flex-shrink:0}
.menu{display:flex; gap:22px; font-size:14.5px; color:var(--muted)}
.menu a:hover{color:var(--ink)}
.menu a.active{color:var(--ink); font-weight:600}
.nav-toggle{display:none; background:none; border:0; font-size:24px; color:var(--ink); cursor:pointer}

/* ---------- 버튼 ---------- */
.btn{display:inline-block; padding:12px 24px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:.15s}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-strong); color:#fff}
.btn-ghost{background:transparent; border:.5px solid #C9BF9E; color:var(--muted)}
.btn-ghost:hover{border-color:var(--accent-strong); color:var(--ink)}

/* ---------- 히어로 ---------- */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding:56px 0 40px}
.hero .eyebrow{font-size:13px; letter-spacing:.08em; color:var(--sub); margin:0 0 14px}
.hero h1{font-size:34px; line-height:1.32; margin:0 0 18px; font-weight:700}
.hero p.lead{font-size:16px; color:var(--muted); margin:0 0 26px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-media{height:300px; background:#EDE7D6; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#A89B76; font-size:14px; border:1px dashed #CDC3A0}
.hero-media img{width:100%; height:100%; object-fit:cover}

/* ---------- 통계 밴드 ---------- */
.stats{background:var(--card); border:.5px solid var(--line); border-radius:14px; padding:26px 20px; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; margin:8px 0 56px}
.stats .stat{padding:0 8px}
.stats .stat + .stat{border-left:.5px solid var(--line-soft)}
.stats .num{font-size:34px; font-weight:700; color:var(--accent-strong); line-height:1.1}
.stats .num small{font-size:16px; font-weight:600}
.stats .label{font-size:13px; color:var(--muted); margin-top:6px}

/* ---------- 섹션 공통 ---------- */
section.block{padding:16px 0 40px}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px}
.section-head h2{font-size:22px; font-weight:700; margin:0}
.section-head a{font-size:13px; color:var(--sub)}
.lead-narrow{max-width:680px; color:var(--muted); font-size:16px}

/* 페이지 헤더(서브페이지 상단) */
.page-hero{padding:48px 0 8px}
.page-hero .eyebrow{font-size:13px; letter-spacing:.08em; color:var(--sub); margin:0 0 10px}
.page-hero h1{font-size:30px; font-weight:700; margin:0 0 12px}
.page-hero p{color:var(--muted); font-size:16px; max-width:720px; margin:0}

/* ---------- 카드 그리드 ---------- */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:.5px solid var(--line); border-radius:14px; overflow:hidden}
.card .thumb{height:150px; background:#EDE7D6; display:flex; align-items:center; justify-content:center; color:#A89B76; font-size:13px}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .body{padding:16px 18px}
.card .body h3{font-size:16px; font-weight:600; margin:0 0 6px}
.card .body p{font-size:14px; color:var(--muted); margin:0}
.card .date{font-size:12.5px; color:#A89B76; margin-top:8px}

/* ---------- 기록 사진 — 장수가 적으면 조금만 키웁니다 ---------- */
.pgal:not(:has(.t:nth-child(2))){grid-template-columns:minmax(0,320px)}
.pgal:not(:has(.t:nth-child(2))) .t{aspect-ratio:3/2}
.pgal:has(.t:nth-child(2)):not(:has(.t:nth-child(3))){grid-template-columns:repeat(2,minmax(0,240px))}
.pgal:has(.t:nth-child(3)):not(:has(.t:nth-child(4))){grid-template-columns:repeat(3,minmax(0,210px))}

/* 강조 박스 / 후원 계좌 등 */
.note{background:#FBF3E1; border:.5px solid #EBD9B0; border-radius:12px; padding:18px 20px; font-size:14.5px; color:#6B5A2E}
.placeholder{color:#B7A97D; font-style:normal}

/* 정보 리스트 */
.info-list{list-style:none; padding:0; margin:0}
.info-list li{display:flex; gap:12px; padding:12px 0; border-bottom:.5px solid var(--line-soft); font-size:15px}
.info-list li i{color:var(--accent-strong); width:20px; text-align:center; margin-top:2px}
.info-list li span.k{color:var(--muted); min-width:88px}

/* 프로세스 스텝 */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.step{background:var(--card); border:.5px solid var(--line); border-radius:12px; padding:18px}
.step .n{width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.step h4{margin:0 0 6px; font-size:15px; font-weight:600}
.step p{margin:0; font-size:13.5px; color:var(--muted)}

/* ---------- 푸터 ---------- */
.site-footer{background:#F0EBDD; border-top:.5px solid var(--line); margin-top:40px; padding:40px 0 48px; font-size:14px; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px}
.site-footer h4{color:var(--ink); font-size:15px; margin:0 0 12px; font-weight:600}
.site-footer a:hover{color:var(--ink)}
.sns{display:flex; gap:14px; font-size:22px; margin-top:12px}
.copyright{margin-top:28px; padding-top:18px; border-top:.5px solid var(--line); font-size:12.5px; color:#A89B76}

/* ---------- 사진 크게 보기 ---------- */
.lbx{position:fixed; inset:0; background:rgba(20,18,14,.92); display:none; align-items:center; justify-content:center; z-index:100}
.lbx.on{display:flex}
.lbx img{max-width:88vw; max-height:86vh; border-radius:8px}
.lbx .nav-btn{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s}
.lbx .nav-btn:hover{background:rgba(255,255,255,.32)}
.lbx .prev{left:22px} .lbx .next{right:22px}
.lbx .close{position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:22px; cursor:pointer}
.lbx .close:hover{background:rgba(255,255,255,.32)}
.lbx .count{position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:#EFEBDD; font-size:13.5px; background:rgba(0,0,0,.4); padding:6px 14px; border-radius:999px}
.lbx .nav-btn[hidden]{display:none}

/* ---------- 반응형 ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:24px; padding:36px 0 28px}
  .hero-media{height:220px; order:-1}
  .hero h1{font-size:28px}
  .grid-3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .menu{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:.5px solid var(--line); padding:8px 24px}
  .menu.open{display:flex}
  .menu a{padding:12px 0; border-bottom:.5px solid var(--line-soft)}
  .nav-toggle{display:block}
}
@media (max-width:640px){
  .pgal:not(:has(.t:nth-child(2))),
  .pgal:has(.t:nth-child(2)):not(:has(.t:nth-child(3))),
  .pgal:has(.t:nth-child(3)):not(:has(.t:nth-child(4))){grid-template-columns:repeat(2,1fr)}
  .lbx .nav-btn{width:44px; height:44px; font-size:22px}
  .lbx .prev{left:8px} .lbx .next{right:8px}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr; gap:18px}
  .stats .stat + .stat{border-left:0; border-top:.5px solid var(--line-soft); padding-top:18px}
  .grid-3,.grid-2{grid-template-columns:1fr}
}