@charset "UTF-8";
/* ==========================================================================
   아해뜰 숲 어린이집 — 메인 스타일시트
   컨셉: 놀이중심 · 영아중심 · 자연친화
   ========================================================================== */

/* ── 웹폰트 (학교안심 · KERIS 제작, 무료·상업이용 허용) ──────────────
   · 시간표(Siganpyo)    = 제목·버튼 등 표시용
   · 어항꾸미기(Eohangkkumigi) = 로고용
   두 폰트 모두 한글·영문·러시아어만 온전하고 베트남/중국/태국/크메르 글자가 없다.
   그래서 아래에서 '한국어(.lang-kr)'에만 적용하고, 다른 언어는 각자 폰트로 폴백한다.
   @font-face 는 실제로 쓰일 때만 내려받히므로, 한국어가 아닌 페이지는 이 폰트를 받지 않는다.
   한 파일을 400~800 굵기에 매핑 — 굵은 제목에도 가짜 볼드 없이 원본 글자를 쓴다.
   font-display:swap — 폰트가 늦어도 본문 글꼴로 먼저 보여 준다(빈 화면 방지). */
@font-face {
  font-family:"Hakgyoansim Siganpyo";
  src:url("/assets/fonts/hakgyoansim-siganpyo-r.otf") format("opentype");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Hakgyoansim Eohangkkumigi";
  src:url("/assets/fonts/hakgyoansim-eohangkkumigi-b.otf") format("opentype");
  font-weight:400 800; font-style:normal; font-display:swap;
}

/* ── 디자인 토큰 ─────────────────────────────────────────────────────── */
/*
 * 지정 팔레트 (원 제공):
 *   #FFFAE0 · #EEE59F · #F0F7EA · #AAD480 · #75C97F
 *   #F4C430 · #E0A91F · #6E8F2A · #2F4A1F
 *
 * 흰 배경 대비 실측:
 *   #2F4A1F 9.9:1 ✅ 본문 가능
 *   #6E8F2A 3.7:1 ⚠️ 큰 제목(24px+)·테두리·아이콘 전용, 본문 금지
 *   #75C97F 2.2:1 · #AAD480 1.9:1 · #F4C430 1.8:1 · #E0A91F 2.3:1 → 장식 전용
 *
 * 본문·보조 텍스트용 중간톤(--forest-700, --ink-500)은 팔레트 색감을 유지하되
 * 4.5:1을 넘도록 파생시킨 값이다. 학부모·조부모 가독성 확보가 목적.
 */
:root {
  /* 숲 — 주색 */
  --forest-900:#2F4A1F;   /* 9.9:1 · 본문/제목 */
  --forest-700:#55701F;   /* 5.6:1 · 링크·주요 버튼 배경(흰 글자) — 파생 */
  --forest-500:#6E8F2A;   /* 3.7:1 · 큰 제목·테두리·아이콘 — 지정색 */
  --forest-300:#AAD480;   /* 장식 — 지정색 */
  --forest-100:#F0F7EA;   /* 배경 — 지정색 */
  --forest-050:#F7FBF3;   /* 배경(더 옅게) — 파생 */
  --leaf:#75C97F;         /* 포인트 그린 — 지정색 */

  /* 햇살 — 강조색 */
  --sun-600:#E0A91F;      /* 지정색 */
  --sun-500:#F4C430;      /* 지정색 */
  --sun-200:#EEE59F;      /* 지정색(연노랑) */
  --sun-100:#FFFAE0;      /* 지정색(크림) */

  /* 반 이름 색 — 구름 → 달님 → 하늘 (성장 단계, 연함 → 진함) */
  --cloud:#EEE59F; --moon:#F4C430; --sky:#6E8F2A;

  /* 본문 텍스트 — 짙은 갈색 계열.
     크림·초록 팔레트와 자연스럽게 어울리면서 대비도 넉넉하다.
     제목은 --forest-900(초록), 본문은 갈색으로 역할을 나눈다. */
  --ink-900:#2B2118;      /* 14:1 · 본문 기본 */
  --ink-700:#4A3B2E;      /* 10.7:1 · 본문 강조 */
  --ink-500:#6B5744;      /* 6.8:1 · 보조 텍스트 */
  --ink-300:#7D6754;      /* 5.3:1 · 날짜 등 작은 텍스트 */
  --line:#DDE8D2; --bg:#ffffff; --bg-soft:#F7FBF3;

  --danger:#c0392b;

  /* 타이포 — 영아 학부모·조부모 가독성 고려해 본문 17px */
  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          system-ui, "Malgun Gothic", sans-serif;
  --fs-body:17px; --lh-body:1.75;

  /* 형태 — 영아 대상이라 크게 둥글게 */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
  --shadow-sm:0 1px 3px rgba(34,48,31,.06), 0 1px 2px rgba(34,48,31,.04);
  --shadow-md:0 4px 16px rgba(34,48,31,.08);
  --shadow-lg:0 12px 32px rgba(34,48,31,.12);

  --container:1180px;
  --header-h:84px;

  /* ── 크레용 스케치북 — 멀티컬러 팔레트 (디자인 시안 2) ──
     장식·테두리·아이콘 배경용이다. 본문 글자에는 쓰지 않는다(대비 부족).
     흰 글자를 얹는 배경으로 쓸 때만 대비를 따로 확인했다. */
  --crayon-coral:#EF6D4E;   /* 코랄 — 흰 글자 4.0:1(큰 글자·아이콘만) */
  --crayon-sky:#3FA2D4;     /* 하늘 */
  --crayon-berry:#F386AC;   /* 베리(분홍) */
  --crayon-purple:#9B7EDE;  /* 보라 */
  --crayon-sun:#F4C430;     /* 노랑 = 기존 --sun-500 과 동일 */

  /* 손그림 테두리 색 — 크레용/마커로 그은 듯한 짙은 회갈색 */
  --sketch-ink:#40403A;
  --sketch-bd:2.5px;                       /* 테두리 두께 */
  --sketch-shadow:4px 5px 0 rgba(64,64,58,.13);   /* 종이에서 살짝 뜬 그림자 */

  /* 제목·버튼용 표시 글꼴 — 기본은 본문 글꼴. 한국어에서만 아래 .lang-kr 이 덮어쓴다.
     (--font-logo 는 폰트 블록 근처에서 별도로 정의한다) */
  --font-display: var(--font);
}

/* 한국어에서만 학교안심 폰트를 쓴다 (다른 언어는 글자가 없어 폴백) */
.lang-kr { --font-display: "Hakgyoansim Siganpyo", var(--font); }
/* 로고 글꼴 — 어느 언어 페이지든 '아해뜰 숲 어린이집'(한글)이라 항상 어항꾸미기로 표시한다.
   변수로 두어, 뒤쪽 헤더 규칙에서도 같은 값을 쓰게 한다(중복 규칙에 덮이지 않도록). */
:root { --font-logo: "Hakgyoansim Eohangkkumigi", var(--font); }

/* 언어별 폰트 — header.php가 현재 언어 폰트만 로드한다 */
.lang-en, .lang-tl { --font:"Poppins", "Pretendard", system-ui, sans-serif; }
.lang-vi { --font:"Be Vietnam Pro", "Pretendard", system-ui, sans-serif; }
.lang-cn { --font:"Noto Sans SC", "Pretendard", system-ui, sans-serif; }
.lang-jp { --font:"Noto Sans JP", "Pretendard", system-ui, sans-serif; }
.lang-km { --font:"Noto Sans Khmer", "Pretendard", system-ui, sans-serif; --lh-body:1.95; }
.lang-th { --font:"Noto Sans Thai", "Pretendard", system-ui, sans-serif; --lh-body:1.9; }
.lang-ru { --font:"Roboto", "Pretendard", system-ui, sans-serif; }

/* ── 기본 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  color:var(--ink-900);
  font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  /* 한글은 어절(단어) 단위로 줄바꿈 — "합니다"가 "합니/다"로 잘리지 않게.
     긴 URL·영문 같은 끊을 수 없는 토큰은 overflow-wrap 이 넘침을 막는다. */
  word-break:keep-all; overflow-wrap:break-word;
  /* 스케치북 종이 질감 — 크림색 바탕에 아주 옅은 점무늬.
     기본(다른 페이지)은 크림을 흰색 쪽으로 약 50% 옅게 하고 점도 더 흐리게.
     메인 페이지(.is-home)만 아래에서 진한 크림을 유지한다. */
  background-color:#FFFDF2;
  background-image:radial-gradient(rgba(64,64,58,.028) 1.3px, transparent 1.3px);
  background-size:22px 22px;
}
body.is-home {
  background-color:var(--sun-100);
  background-image:radial-gradient(rgba(64,64,58,.045) 1.3px, transparent 1.3px);
}
img, svg, video { max-width:100%; height:auto; display:block; }
a { color:var(--forest-700); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0 0 .5em; line-height:1.3; font-weight:700; letter-spacing:-.02em; font-family:var(--font-display); }
h1 { font-size:clamp(2rem, 5vw, 3rem); }
h2 { font-size:clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size:1.25rem; }
p  { margin:0 0 1em; }
ul, ol { margin:0; padding:0; list-style:none; }

:focus-visible { outline:3px solid var(--sun-500); outline-offset:2px; border-radius:4px; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.site-main { flex:1; }

.skip-link {
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--forest-700); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus { inset-inline-start:0; }

/* 눈으로는 안 보이지만 읽어 주는 기기에는 전달되는 텍스트.
   '—' 같은 기호만으로는 뜻이 전해지지 않는 자리에 함께 둔다. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── 헤더 ────────────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; gap:24px; min-height:var(--header-h); }

.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand:hover { text-decoration:none; }
/* 로고 마크 — 손그림 원 안에 이모지, 살짝 기울여 스티커처럼 */
.brand-mark { width:54px; height:54px; flex-shrink:0; object-fit:contain; }
.brand-text { display:flex; flex-direction:column; }
.brand-text strong { font-size:1.2rem; color:var(--forest-900); letter-spacing:-.03em; font-family:var(--font-logo); }
.brand-text small { font-size:.75rem; color:var(--ink-500); font-weight:500; }

/* 네비게이션 */
.primary-nav { margin-inline-start:auto; }
.nav-root { display:flex; align-items:center; gap:4px; }
.nav-group { position:relative; }

.nav-top {
  font:inherit; font-weight:700; color:var(--ink-700);
  background:none; border:0; cursor:pointer;
  padding:10px 15px; border-radius:14px;
  transition:background .15s, color .15s, transform .12s;
}
/* 시안 2 — 노란 태그처럼 살짝 기울며 강조 */
.nav-top:hover { background:var(--sun-200); color:var(--forest-900); transform:rotate(-2deg); }
.nav-group.is-active > .nav-top { color:var(--forest-900); background:var(--sun-100); }

/* 단일 링크(블로그) — a 태그라 버튼과 기본 표시가 달라 맞춰준다 */
a.nav-top { display:inline-block; text-decoration:none; }
a.nav-top:hover { text-decoration:none; }

.nav-sub {
  position:absolute; top:calc(100% + 8px); inset-inline-start:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:210px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s;
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub,
.nav-group.is-open .nav-sub {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-sub a {
  display:block; padding:10px 14px; border-radius:var(--r-sm);
  color:var(--ink-700); font-size:.95rem; font-weight:500; white-space:nowrap;
}
.nav-sub a:hover { background:var(--forest-050); color:var(--forest-900); text-decoration:none; }

/* 헤더 우측 */
.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.lang-switcher { position:relative; }
.lang-btn {
  font:inherit; font-size:.9rem; font-weight:600; color:var(--ink-700);
  background:var(--bg-soft); border:1px solid var(--line); cursor:pointer;
  padding:9px 14px; border-radius:var(--r-full);
  display:flex; align-items:center; gap:6px;
}
.lang-btn:hover { background:var(--forest-100); border-color:var(--forest-300); }
.lang-list {
  position:absolute; top:calc(100% + 8px); inset-inline-end:0;
  min-width:170px; max-height:min(70vh, 420px); overflow-y:auto; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.lang-switcher:hover .lang-list,
.lang-switcher:focus-within .lang-list,
.lang-switcher.is-open .lang-list { opacity:1; visibility:visible; transform:translateY(0); }
.lang-list a { display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:.92rem; color:var(--ink-700); }
.lang-list a:hover { background:var(--forest-050); text-decoration:none; }
.lang-list a[aria-current="true"] { background:var(--forest-100); color:var(--forest-900); font-weight:700; }

.nav-toggle {
  display:none; width:46px; height:46px; padding:11px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span { display:block; height:2px; background:var(--ink-700); border-radius:2px; transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-10px) rotate(-45deg); }

/* ── 히어로 (크레용 스케치북) ─────────────────────────────────────────
   하늘색 그라디언트 위에 손그림 해·구름·별이 떠 있고, 아래는 잔디로 마감.
   가운데 정렬로 그림책 표지 같은 느낌을 준다. */
.hero-sketch {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #EAF7FB 0%, #F4FBEF 55%, var(--sun-100) 100%);
  padding:clamp(40px, 7vw, 84px) 0 0;
  text-align:center;
}
.hero-sketch .hero-inner {
  position:relative; z-index:3; max-width:720px; margin-inline:auto;
  padding-bottom:clamp(30px, 5vw, 56px);
}
.hero-sketch .hero-title {
  color:var(--forest-900); margin:18px 0 14px;
  font-size:clamp(2.1rem, 5.5vw, 3.6rem); line-height:1.18;
}
.hero-sketch .hero-lead { margin-inline:auto; }
.hero-sketch .hero-desc { margin-inline:auto; }
.hero-sketch .hero-cta { justify-content:center; }

/* 떠다니는 손그림 장식 */
.hero-sketch .doodle { position:absolute; z-index:1; }
.hero-sketch .d-sun   { top:24px;  left:6%;  width:88px;  animation:hs-sway 7s ease-in-out infinite; }
.hero-sketch .d-cloud { top:38px;  right:7%; width:120px; animation:hs-floatx 11s ease-in-out infinite; }
.hero-sketch .d-star1 { top:130px; left:14%; width:34px;  animation:hs-pop 4s ease-in-out infinite; }
.hero-sketch .d-star2 { top:70px;  right:24%;width:26px;  animation:hs-pop 5s ease-in-out infinite .6s; }
@keyframes hs-sway   { 50%{ transform:rotate(12deg); } }
@keyframes hs-floatx { 50%{ transform:translateX(14px); } }
@keyframes hs-pop    { 50%{ transform:scale(1.3) rotate(15deg); } }

/* 잔디 손그림 — 히어로 바닥 */
.hero-sketch .grass-strip { display:block; width:100%; height:56px; margin-bottom:-1px; position:relative; z-index:2; }

/* ── 사진 히어로 ──────────────────────────────────────────────────
   배경을 사진으로 깔 때: 손그림 장식·잔디는 숨기고, 어두운 막 위에 흰 글자.
   아래 가장자리는 크림색 물결로 다음 섹션에 자연스럽게 이어진다. */
.hero-sketch.has-photo {
  padding:clamp(84px, 12vw, 152px) 0 clamp(56px, 8vw, 96px);
}
/* 슬라이드 층 — 사진들을 겹쳐 두고 교차 페이드로 전환한다 */
.hero-slides { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity:1; }
.hero-sketch.has-photo::before {                 /* 어두운 막 — 사진은 밝게 두되 글자 가독성 확보 */
  content:""; position:absolute; inset:0; z-index:1;
  /* 위(하늘)는 옅게, 글자 있는 가운데~아래는 조금 더 — 사진이 훨씬 밝아 보인다 */
  background:linear-gradient(180deg, rgba(20,30,14,.12) 0%, rgba(20,30,14,.30) 48%, rgba(20,30,14,.42) 100%);
}
.hero-sketch.has-photo .doodle,
.hero-sketch.has-photo .grass-strip { display:none; }
/* 막을 줄인 만큼 글자 그림자를 진하게 해 밝은 사진 위에서도 흰 글자가 읽히게 한다 */
.hero-sketch.has-photo .hero-title { color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5); }
.hero-sketch.has-photo .hero-lead  { color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }
.hero-sketch.has-photo .hero-desc  { color:#F4F3EA; text-shadow:0 1px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); }
/* 아래 크림색 물결 — 사진과 크림 배경 사이를 부드럽게 잇는다 */
.hero-sketch.has-photo::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:40px; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L1200 40 L1200 18 C1050 34 900 34 750 20 C600 8 450 8 300 20 C150 32 50 28 0 22 Z' fill='%23FFFAE0'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}

/* 좁은 화면·모션 최소화 배려 */
@media (max-width: 640px) {
  .hero-sketch .d-star1, .hero-sketch .d-star2 { display:none; }
  .hero-sketch .d-sun { width:64px; }
  .hero-sketch .d-cloud { width:88px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sketch .doodle { animation:none !important; }
}

/* 손글씨 밑줄 낙서 — 섹션 제목 아래 */
.scribble { display:block; margin:8px auto 0; width:200px; max-width:60%; height:14px; }

/* (구) 사진 히어로 스타일 — 다른 화면이 아직 쓸 수 있어 남겨둔다 */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(170deg, var(--forest-050) 0%, var(--forest-100) 55%, var(--sun-100) 100%);
  padding:clamp(56px, 9vw, 108px) 0;
}
.hero::after {
  /* 언덕 실루엣 — 사진 없이 CSS만으로 자연 느낌 */
  content:""; position:absolute; inset-inline:0; bottom:-1px; height:80px;
  background:radial-gradient(ellipse 60% 100% at 20% 100%, var(--forest-300) 0%, transparent 60%),
             radial-gradient(ellipse 70% 100% at 75% 100%, var(--forest-300) 0%, transparent 60%);
  opacity:.5; pointer-events:none;
}
/* ── 사진 히어로 ──────────────────────────────────────────────────────
   사진 위에 글자를 얹으면 배경 밝기에 따라 대비가 무너진다.
   어두운 그라디언트를 덮어 흰 글자가 어떤 사진에서도 읽히게 한다. */
.hero.has-photo {
  background-size:cover; background-position:center 60%; background-repeat:no-repeat;
  padding:clamp(88px, 13vw, 168px) 0;
}
.hero.has-photo::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(22,34,16,.86) 0%, rgba(22,34,16,.72) 42%, rgba(22,34,16,.32) 100%);
}
.hero.has-photo::after { display:none; }              /* 언덕 실루엣은 사진과 겹치므로 끈다 */
.hero.has-photo .hero-title,
.hero.has-photo .hero-lead { color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.hero.has-photo .hero-desc { color:#E8EFD8; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hero.has-photo .hero-eyebrow { background:rgba(255,255,255,.94); }
.hero.has-photo .btn-ghost {
  background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.hero.has-photo .btn-ghost:hover { background:rgba(255,255,255,.24); border-color:#fff; }

.hero-inner { position:relative; z-index:1; max-width:760px; }
/* 히어로 눈썹말 — 노란 테이프에 손으로 쓴 듯한 태그 */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  background:var(--sun-200); color:#3B2A08; font-size:.9rem; font-weight:800;
  padding:8px 20px;
  border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  transform:rotate(-2deg);
}
.hero-title { color:var(--forest-900); margin-bottom:20px; }
.hero-lead { font-size:clamp(1.05rem, 2.2vw, 1.3rem); color:var(--ink-700); margin-bottom:16px; font-weight:500; }
.hero-desc { color:var(--ink-500); max-width:600px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ── 버튼 ────────────────────────────────────────────────────────────── */
/* 크레용 버튼 — 짙은 테두리 + 종이에서 뜬 듯한 딱딱한 그림자.
   누르면 그림자가 줄며 눌리는 장난감 같은 느낌을 준다. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:14px 30px;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  border-radius:var(--r-full);
  border:var(--sketch-bd) solid var(--sketch-ink); cursor:pointer;
  box-shadow:var(--sketch-shadow);
  transition:transform .1s, box-shadow .1s, background .15s;
}
.btn:hover { text-decoration:none; transform:translate(1px, 2px); box-shadow:2px 3px 0 rgba(64,64,58,.13); }
.btn:active { transform:translate(2px, 3px); box-shadow:1px 1px 0 rgba(64,64,58,.13); }
.btn-primary { background:var(--forest-700); color:#fff; }
.btn-primary:hover { background:var(--forest-900); }
/* 골드 배경은 밝아서 흰 글자가 안 읽힌다 — 짙은 갈색 글자로 (10:1) */
.btn-accent { background:var(--sun-500); color:#3B2A08; }
.btn-accent:hover { background:var(--sun-600); color:#3B2A08; }
.btn-ghost { background:#fff; color:var(--forest-700); }
.btn-ghost:hover { background:var(--forest-050); }
.btn-sm { min-height:42px; padding:10px 20px; font-size:.92rem; box-shadow:3px 4px 0 rgba(64,64,58,.13); }

/* ── 섹션 공통 ───────────────────────────────────────────────────────── */
.section { padding:clamp(52px, 7vw, 90px) 0; }

/* ── 물결 경계 (시안 1) ──────────────────────────────────────────────
   연한 섹션(section-soft)을 크림 배경 위의 '초록 섬'으로 보고,
   그 위·아래 가장자리를 물결 SVG 로 감싸 딱딱한 직선 경계를 없앤다.
   섹션이 크림 ↔ 연초록으로 번갈아 나오므로, section-soft 에만 붙이면 모든 경계가 물결이 된다.
   색 차이가 보이도록 연한 섹션을 살짝 더 초록빛(#EAF3DD)으로 올렸다. */
.section-soft { position:relative; background:#EAF3DD; }
.section-soft::before,
.section-soft::after {
  content:""; position:absolute; left:0; right:0; height:34px; z-index:1;
  pointer-events:none; background-repeat:no-repeat; background-size:100% 100%;
}
/* 위 가장자리 — 평평한 아래가 섹션에 붙고 물결친 위가 크림 쪽으로 솟는다 */
.section-soft::before {
  top:0; transform:translateY(-100%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L0 22 C150 6 300 6 450 20 C600 34 750 34 900 20 C1050 8 1150 14 1200 20 L1200 40 Z' fill='%23EAF3DD'/%3E%3C/svg%3E");
}
/* 아래 가장자리 — 평평한 위가 섹션에 붙고 물결친 아래가 크림 쪽으로 내려온다 */
.section-soft::after {
  bottom:0; transform:translateY(100%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 18 C1050 34 900 34 750 20 C600 8 450 8 300 20 C150 32 50 28 0 22 Z' fill='%23EAF3DD'/%3E%3C/svg%3E");
}
/* 맨 끝 연한 섹션(입학 CTA) 아래는 곧바로 푸터라 물결을 넣지 않는다 */
.site-main > .section-soft:last-child::after { display:none; }
.section-head { text-align:center; max-width:660px; margin:0 auto clamp(36px, 5vw, 56px); }
.section-head h2 { color:var(--forest-900); }
.section-head p { color:var(--ink-500); margin:0; }
.section-label {
  display:inline-block; margin-bottom:12px;
  color:var(--crayon-coral); font-size:.85rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}

/* ── 컨셉 3분할 ──────────────────────────────────────────────────────── */
.concept-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:30px; }
/* 손그림 카드 — 삐뚤빼뚤한 테두리(불규칙 border-radius)에 살짝 기울여 종이에 붙인 느낌 */
.concept-card {
  position:relative;
  background:#fffdf7; border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow:var(--sketch-shadow);
  padding:48px 30px 32px; text-align:center; transition:transform .18s, box-shadow .18s;
}
.concept-card:nth-child(2) { border-radius:15px 225px 15px 255px / 225px 15px 255px 15px; }
.concept-card:nth-child(3) { border-radius:225px 15px 255px 15px / 15px 255px 15px 225px; }
.concept-card:hover { transform:translateY(-5px) rotate(0); box-shadow:6px 8px 0 rgba(64,64,58,.14); }
/* 아이콘 원을 카드 위 테두리에 살짝 걸쳐 스티커처럼 */
.concept-icon {
  position:absolute; top:-32px; left:50%; transform:translateX(-50%);
  width:66px; height:66px;
  display:grid; place-items:center; font-size:32px;
  background:var(--forest-500); color:#fff;
  border:var(--sketch-bd) solid var(--sketch-ink); border-radius:50%;
}
.concept-card:nth-child(2) .concept-icon { background:var(--crayon-coral); }
.concept-card:nth-child(3) .concept-icon { background:var(--crayon-sky); }
.concept-card h3 { color:var(--forest-900); }
.concept-card p { color:var(--ink-500); font-size:.98rem; margin:0; word-break:keep-all; }

/* 데스크톱에서만 카드를 살짝 기울이고 높낮이를 준다 — 그림일기처럼 */
@media (min-width: 821px) {
  .concept-grid { align-items:start; }
  .concept-card:nth-child(1) { transform:rotate(-1.5deg); margin-top:40px; }
  .concept-card:nth-child(3) { transform:rotate(1.5deg);  margin-top:40px; }
}

/* ── 아이콘 없는 버전 (색 + 글자만) ──────────────────────────────────
   이모지 대신 카드 상단 색띠 + 제목 아래 색 밑줄로 카드를 구분한다. */
.concept-grid--plain .concept-card {
  overflow:hidden; padding:34px 30px 30px;      /* 아이콘 자리(위쪽 여백) 제거 */
}
.concept-grid--plain .concept-card::before {
  content:""; position:absolute; top:0; inset-inline:0; height:9px;
}
.concept-grid--plain .concept-card:nth-child(1)::before { background:var(--forest-500); }
.concept-grid--plain .concept-card:nth-child(2)::before { background:var(--crayon-coral); }
.concept-grid--plain .concept-card:nth-child(3)::before { background:var(--crayon-sky); }
.concept-grid--plain .concept-card h3 {
  display:inline-block; margin-top:6px; padding-bottom:8px; position:relative;
}
.concept-grid--plain .concept-card h3::after {
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:30px; height:4px; border-radius:4px;
}
.concept-grid--plain .concept-card:nth-child(1) h3::after { background:var(--forest-300); }
.concept-grid--plain .concept-card:nth-child(2) h3::after { background:var(--crayon-coral); }
.concept-grid--plain .concept-card:nth-child(3) h3::after { background:var(--crayon-sky); }

/* ── 아이콘 없는 버전 2 (번호 01 / 02 / 03) ─────────────────────────
   이모지 자리에 큰 순번을 넣는다. 번호는 CSS counter 로 자동 매김. */
.concept-grid--num { counter-reset:concept; }
.concept-grid--num .concept-card {
  overflow:hidden; padding:40px 30px 30px; counter-increment:concept;
}
.concept-grid--num .concept-card::before {          /* 큰 순번 */
  content:"0" counter(concept);
  display:block; margin-bottom:10px;
  font-family:var(--font-display); font-size:2.6rem; line-height:1;
  color:var(--forest-500);
}
.concept-grid--num .concept-card:nth-child(2)::before { color:var(--crayon-coral); }
.concept-grid--num .concept-card:nth-child(3)::before { color:var(--crayon-sky); }
/* 번호 아래 짧은 색 줄로 마무리 */
.concept-grid--num .concept-card h3 { margin-top:4px; }

/* ── 버전 3: 찢긴 초록 밴드 위 제목 (사용자 시안 1) ──────────────────
   카드 위쪽을 초록 띠로 채우고 아래를 톱니처럼 찢어, 그 위에 흰 제목을 얹는다. */
.concept-grid--band .concept-card { overflow:hidden; padding:0 26px 30px; }
.concept-grid--band .concept-card::before {   /* 초록 밴드 — 아래를 부드러운 물결로 */
  content:""; display:block; height:104px; margin:0 -26px 20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 104' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H300 V80 C275 96 250 96 225 86 C200 76 175 76 150 86 C125 96 100 96 75 86 C50 76 25 76 0 84 Z' fill='%2355701F'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}
.concept-grid--band .concept-card:nth-child(2)::before { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 104' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H300 V80 C275 96 250 96 225 86 C200 76 175 76 150 86 C125 96 100 96 75 86 C50 76 25 76 0 84 Z' fill='%23C85A3E'/%3E%3C/svg%3E") no-repeat; background-size:100% 100%; }
.concept-grid--band .concept-card:nth-child(3)::before { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 104' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H300 V80 C275 96 250 96 225 86 C200 76 175 76 150 86 C125 96 100 96 75 86 C50 76 25 76 0 84 Z' fill='%23328FBE'/%3E%3C/svg%3E") no-repeat; background-size:100% 100%; }
.concept-grid--band .concept-card h3 {
  position:absolute; top:28px; inset-inline:0; text-align:center; z-index:1;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.28);
  font-family:var(--font-logo);          /* 제목만 로고 글꼴(어항꾸미기)로 — 본문과 다르게 */
  letter-spacing:.01em;
}

/* ── 버전 4: 집게에 걸린 카드 (사용자 시안 2) ───────────────────────
   그리드 위에 초록 줄을 긋고, 카드마다 나무집게 둘로 걸어 둔다. */
.concept-grid--pin { position:relative; }
.concept-grid--pin .concept-card {
  overflow:visible;
  padding:34px 30px 30px;
}
/* 양옆 카드(놀이·자연)는 안쪽을 향해 기울여 빨랫줄에 걸려 흔들리는 느낌.
   가운데(영아)는 반듯하게. 기울기 기준점을 위쪽 집게 근처로 둔다. */
/* 빨랫줄이 가운데로 처지므로 옆 카드는 안쪽(가운데)이 아래로 기운다.
   놀이중심=오른쪽이 아래(시계방향 +), 자연친화=왼쪽이 아래(반시계 -). */
.concept-grid--pin .concept-card:nth-child(1) { transform:rotate(4deg)  !important; transform-origin:top center; }
.concept-grid--pin .concept-card:nth-child(2) { transform:none !important; }
.concept-grid--pin .concept-card:nth-child(3) { transform:rotate(-4deg) !important; transform-origin:top center; }
/* 집게 — 직접 그린 PNG (assets/img/clip.png) 를 좌우 위 모서리에 얹는다.
   파일이 없으면 빈 칸(투명)으로 아무것도 안 보인다. 크기·위치는 실제 그림에 맞춰 조정. */
.concept-grid--pin .concept-card::before,
.concept-grid--pin .concept-card::after {
  content:""; position:absolute; top:-36px; width:30px; height:66px; z-index:3;
  background:url("/assets/img/clip.png") no-repeat center / contain;
}
.concept-grid--pin .concept-card::before { left:6px;   transform:rotate(-10deg); }
.concept-grid--pin .concept-card::after  { right:6px;  transform:rotate(10deg) scaleX(-1); }
/* 데스크톱: 가운데(영아중심) 카드를 제일 아래로, 양옆은 위로 — 걸려 있는 높낮이 */
@media (min-width:821px) {
  .concept-grid--pin .concept-card:nth-child(1),
  .concept-grid--pin .concept-card:nth-child(3) { margin-top:0; }
  .concept-grid--pin .concept-card:nth-child(2) { margin-top:46px; }
}
/* 모바일 대응(기울기 펴기·간격)은 assets/css/mobile.css 에서 처리한다 */
/* 제목은 아래 색 밑줄로 (1번안과 동일한 담백함) */
.concept-grid--pin .concept-card h3 {
  display:inline-block; position:relative; padding-bottom:14px; margin-bottom:10px;
  font-size:1.55rem;
}
.concept-grid--pin .concept-card h3::after {
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:30px; height:4px; border-radius:4px; background:var(--forest-300);
}
.concept-grid--pin .concept-card:nth-child(2) h3::after { background:var(--crayon-coral); }
.concept-grid--pin .concept-card:nth-child(3) h3::after { background:var(--crayon-sky); }

/* ── 반 구성 (구름 → 달님 → 하늘) ────────────────────────────────────── */
.class-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:24px; }
/* 반 카드 — 손그림 테두리 + 위쪽 색 띠(반별 색). 카드마다 번갈아 기울인다. */
/* 상단 색 띠는 배경 그라디언트로 — 사각형 ::before 와 달리 둥근 모서리에 저절로 맞춰 잘린다.
   그 덕에 overflow:visible 로 두어 테이프가 카드 위로 삐져나올 수 있다. */
.class-card {
  position:relative; overflow:visible;
  background:linear-gradient(to bottom, var(--cloud) 8px, #fffdf7 8px);
  border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:225px 28px 255px 28px / 28px 255px 28px 225px;
  box-shadow:var(--sketch-shadow);
  padding:30px 24px 26px; transition:transform .18s, box-shadow .18s;
}
.class-card:nth-child(even) { border-radius:28px 225px 28px 255px / 225px 28px 255px 28px; }
.class-card:hover { transform:translateY(-5px) rotate(0); box-shadow:6px 8px 0 rgba(64,64,58,.14); }
.class-card[data-group="moon"] { background:linear-gradient(to bottom, var(--moon) 8px, #fffdf7 8px); }
.class-card[data-group="sky"]  { background:linear-gradient(to bottom, var(--sky) 8px, #fffdf7 8px); }
/* 상단 중앙에 마스킹 테이프 — 카드 위로 삐져나오게 (직접 그린 tape.png, 129x198 ≈ 1.53:1) */
.class-card::after {
  content:""; position:absolute; top:-34px; left:50%; z-index:2;
  transform:translateX(-50%) rotate(-3deg);
  width:42px; height:64px;
  background:url("/assets/img/tape.png") no-repeat center / contain;
  opacity:.92; pointer-events:none;
}
.class-card:nth-child(even)::after { transform:translateX(-50%) rotate(3deg); }
/* 반 이름 + 나이 칩을 한 줄에 */
.class-name {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:1.35rem; font-weight:700; color:var(--forest-900); margin-bottom:6px;
  font-family:var(--font-display);
}
.class-age {
  padding:3px 10px;
  background:var(--forest-100); color:var(--forest-700);
  font-size:.72rem; font-weight:700; border-radius:var(--r-full);
  font-family:var(--font); white-space:nowrap;
}
.class-teacher { color:var(--ink-500); font-size:.95rem; margin:0; }

@media (min-width: 821px) {
  .class-grid { align-items:start; }
  .class-card:nth-child(odd)  { transform:rotate(-1.4deg); }
  .class-card:nth-child(even) { transform:rotate(1.4deg); margin-top:40px; }
}

/* ── 알림마당 (게시판 2단) ───────────────────────────────────────────── */
.board-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:28px; }
.card {
  background:#fffdf7; border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow:var(--sketch-shadow); padding:28px 26px;
}
.board-grid .card:nth-child(even) { border-radius:15px 225px 15px 255px / 225px 15px 255px 15px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; padding-bottom:12px; border-bottom:2px dashed var(--line); }
.card-head h2, .card-head h3 { margin:0; font-size:1.5rem; color:var(--forest-900); }
.card-head .link { font-size:.9rem; font-weight:700; color:var(--crayon-coral); }

.post-list li { border-bottom:1px solid var(--line); }
.post-list li:last-child { border-bottom:0; }
.post-list a {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 2px; color:var(--ink-700);
}
.post-list a:hover { color:var(--forest-700); text-decoration:none; }
.post-list .title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-list time { flex-shrink:0; font-size:.85rem; color:var(--ink-300); font-variant-numeric:tabular-nums; }
.post-list .muted { padding:28px 0; text-align:center; color:var(--ink-300); }

/* 메인 유튜브 소개 영상 — 알림마당에서 게시판 카드 한 칸을 대신한다 */
.video-card .card-head { border-bottom-color:transparent; margin-bottom:12px; }
.video-embed {
  position:relative; aspect-ratio:16 / 9;
  border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:18px; overflow:hidden; background:#000;
}
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@supports not (aspect-ratio: 1) {           /* 구형 브라우저용 16:9 폴백 */
  .video-embed { height:0; padding-bottom:56.25%; }
}

/* ── 활동 앨범 ───────────────────────────────────────────────────────── */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; }
.photo-item { border-radius:var(--r-md); overflow:hidden; background:var(--forest-100); aspect-ratio:4/3; position:relative; }
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.photo-item:hover img { transform:scale(1.05); }
.photo-caption {
  position:absolute; inset-inline:0; bottom:0; padding:24px 14px 12px;
  background:linear-gradient(transparent, rgba(34,48,31,.75));
  color:#fff; font-size:.9rem; font-weight:600;
}
.photo-placeholder { display:grid; place-items:center; height:100%; font-size:40px; opacity:.35; }

/* ── 아이들 사진 안내 (메인) ──
   사진 대신 "학부모만 볼 수 있다"는 정책을 안내하는 카드.
   빈 자리처럼 보이지 않도록 카드로 확실히 채운다. */
.private-album {
  max-width:620px; margin-inline:auto; text-align:center;
  background:#fffdf7; border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:15px 225px 15px 255px / 225px 15px 255px 15px;
  box-shadow:var(--sketch-shadow); padding:44px 32px;
}
.private-album-icon {
  width:74px; height:74px; margin:0 auto 20px;
  display:grid; place-items:center; font-size:32px;
  background:var(--crayon-berry); color:#fff;
  border:var(--sketch-bd) solid var(--sketch-ink); border-radius:50%;
}
.private-album-desc {
  color:var(--ink-700); font-size:1.02rem; line-height:1.7;
  margin:0 0 28px; word-break:keep-all;
}
@media (max-width: 640px) {
  .private-album { padding:34px 22px; }
  .private-album-icon { width:62px; height:62px; font-size:27px; }
  .private-album-desc { font-size:.97rem; }
}

/* ── 바로가기 타일 ───────────────────────────────────────────────────── */
.tile-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; }
/* 아이콘 없는 타일 — 글자 아래 색 바 + 상단 양쪽 압정(배경 radial-gradient) */
.tile {
  --pin:var(--sun-500);                 /* 압정·색바 색 (타일별로 아래에서 지정) */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-height:96px; padding:24px 18px; text-align:center;
  /* 압정 머리 두 개(색점 + 검은 테두리)를 카드 위 양쪽 모서리에 찍는다 */
  background:
    radial-gradient(circle at 17px 14px, var(--pin) 0 4.5px, var(--sketch-ink) 4.5px 5.8px, transparent 6px),
    radial-gradient(circle at calc(100% - 17px) 14px, var(--pin) 0 4.5px, var(--sketch-ink) 4.5px 5.8px, transparent 6px),
    #fffdf7;
  border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:225px 15px 255px 15px / 15px 255px 15px 225px;
  box-shadow:var(--sketch-shadow);
  color:var(--forest-900); font-family:var(--font-display); font-size:1.55rem; font-weight:700;
  /* 통통 튀는 느낌 — 되돌아올 때 살짝 오버슈트(bounce) */
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s;
}
.tile:nth-child(even) { border-radius:15px 225px 15px 255px / 225px 15px 255px 15px; }
/* 마우스 올리면 살짝 튀어오르며 기울고, 그림자가 커진다 */
.tile:hover {
  transform:translateY(-8px) rotate(-1.5deg);
  box-shadow:6px 10px 0 rgba(64,64,58,.14);
  text-decoration:none; color:var(--forest-900);
}
.tile:nth-child(even):hover { transform:translateY(-8px) rotate(1.5deg); }
.tile:active { transform:translateY(-3px) rotate(0); box-shadow:3px 4px 0 rgba(64,64,58,.14); }

/* 글자 아래 색 바 — 압정과 같은 색(--pin)을 쓴다. hover 시 옆으로 쭉 늘어난다 */
.tile::after {
  content:""; width:26px; height:4px; border-radius:4px; background:var(--pin);
  transition:width .26s cubic-bezier(.34,1.56,.64,1);
}
.tile:hover::after { width:52px; }
/* 타일별 색 — 압정·색바가 함께 이 색을 쓴다 */
.tile:nth-child(4n+1) { --pin:var(--sun-500); }
.tile:nth-child(4n+2) { --pin:var(--forest-500); }
.tile:nth-child(4n+3) { --pin:var(--crayon-sky); }
.tile:nth-child(4n)   { --pin:var(--crayon-berry); }

/* 움직임에 민감한 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .tile, .tile::after { transition:none; }
  .tile:hover { transform:translateY(-3px); }
}

/* ── 본문 페이지 ─────────────────────────────────────────────────────── */
/* 페이지 배너 — 하늘색 그라디언트에 점무늬가 비치는 크레용 배너 */
.page-hero {
  position:relative;
  /* 옅어진 크림 배경 위에서도 배너가 또렷하게 보이도록 아래쪽을 확실한 연초록으로 */
  background:linear-gradient(180deg, #E6F4F1 0%, #DFEECB 100%);
  border-bottom:var(--sketch-bd) dashed var(--forest-300);
  padding:44px 0;
}
.page-hero h1 { color:var(--forest-900); margin:0; }
.breadcrumb { display:flex; gap:8px; font-size:.88rem; color:var(--ink-500); margin-bottom:10px; }
.breadcrumb a { color:var(--crayon-coral); font-weight:700; }
.prose { max-width:780px; margin-inline:auto; }

/* 오시는 길 구글 지도 — 크레용 프레임에 크게 */
.page-map {
  max-width:900px; margin:0 auto;
  border:var(--sketch-bd) solid var(--sketch-ink); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--sketch-shadow); background:#fff;
}
.page-map iframe { display:block; width:100%; height:460px; border:0; }
@media (max-width:640px) { .page-map iframe { height:340px; } }
.prose h2 { margin-top:2em; color:var(--forest-900); }
.prose img { border-radius:var(--r-md); margin:1.5em 0; }
/* 인용문 — 세로선 대신 큰 따옴표, 표시 글꼴로 키워 눈에 띄게.
   본문은 .prose 안의 .post-body 로 렌더되므로 두 셀렉터를 함께 지정한다. */
.prose blockquote,
.post-body blockquote {
  position:relative;
  margin:1.8em 0; padding:18px 28px 18px 58px;
  background:#EAF3DD; border:0;                 /* 확실한 연초록 — 옅어진 배경 위에서도 박스가 또렷 */
  border-radius:var(--r-md);
  color:var(--forest-900); font-weight:500;
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.7vw, 1.7rem); line-height:1.55; word-break:keep-all;
}
.prose blockquote::before,
.post-body blockquote::before {
  content:"\201C";                 /* 큰 왼쪽 따옴표 */
  position:absolute; left:14px; top:0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:3.6rem; line-height:1; color:var(--forest-300);
}
@media (max-width:640px) {
  .prose blockquote, .post-body blockquote { padding-left:46px; }
  .prose blockquote::before, .post-body blockquote::before { font-size:2.9rem; left:10px; }
}
/* 본문 사진 — 세로 사진도 잘리지 않게 원본 비율을 유지한다.
   가로 사진과 섞여도 자연스럽도록 최대 높이만 제한한다.
   ※ 인접 선택자(+)로 2단 배치를 시도하면 사진 개수에 따라 폭이 제각각이 된다.
      묶음은 .photo-pair 로 명시적으로 감싼다. */
.page-photo { margin:1.8em 0; }
.page-photo img {
  display:block; width:100%; max-height:560px; object-fit:contain;
  border-radius:var(--r-md); background:var(--forest-050);
}
.page-photo figcaption {
  margin-top:10px; text-align:center;
  font-size:.9rem; color:var(--ink-300);
}

/* 사진 두 장을 나란히 */
.photo-pair { display:grid; gap:14px; margin:1.8em 0; }
.photo-pair .page-photo { margin:0; }
.photo-pair .page-photo img { max-height:420px; }
@media (min-width:720px) {
  .photo-pair { grid-template-columns:1fr 1fr; }
}

.prose table { width:100%; border-collapse:collapse; margin:1.5em 0; }
.prose th, .prose td { padding:12px 14px; border:1px solid var(--line); text-align:start; }
.prose th { background:var(--forest-050); font-weight:700; }

/* ── 알림 배너 ───────────────────────────────────────────────────────── */
.notice-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 22px; border-radius:var(--r-md);
  background:var(--sun-100); border:1px solid var(--sun-200); color:#4A3608;
}
.notice-bar.is-info { background:var(--forest-100); border-color:var(--forest-300); color:var(--forest-900); }

/* ── 푸터 ────────────────────────────────────────────────────────────── */
/* 짙은 초록(#2F4A1F) 배경 — 그 위 텍스트는 크림 계열로.
   본문 대비 기준(흰 배경)이 아니라 어두운 배경 기준으로 따로 잡았다.
   #E8EFD8 는 --forest-900 대비 약 11:1. */
/* 푸터 — 짙은 숲색. 위에 울타리(fence) 장식 띠를 얹어 시안 2 느낌을 준다 */
/* 본문과 푸터 사이 숨 쉴 여백 (울타리 장식이 22px 올라오므로 그만큼 더 얹었다) */
.site-footer { position:relative; margin-top:52px; background:var(--forest-900); color:#E8EFD8; padding:64px 0 32px; }
.site-footer::before {
  content:""; position:absolute; top:0; inset-inline:0; height:22px;
  background:repeating-linear-gradient(90deg, var(--forest-900) 0 38px, transparent 38px 66px);
  transform:translateY(-100%);
}
.footer-top { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:36px; margin-bottom:36px; }
.footer-brand strong { display:flex; align-items:center; gap:8px; color:var(--sun-100); font-size:1.15rem; margin-bottom:10px; }
.footer-logo { height:30px; width:auto; flex-shrink:0; }
.footer-brand p { color:#C4D3AE; font-size:.94rem; margin:0; }
.footer-col h4 { color:var(--sun-100); font-size:.95rem; margin-bottom:14px; }
.footer-col li { margin-bottom:9px; }
.footer-col a { color:#E8EFD8; font-size:.92rem; }
.footer-col a:hover { color:var(--sun-500); }
.footer-info { font-size:.9rem; line-height:1.9; color:#C4D3AE; margin:0; }
.footer-info div { margin-bottom:4px; }
.footer-info b { color:#E8EFD8; font-weight:600; }
.footer-bottom {
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem; color:#B3C49B;
}
.footer-bottom a { color:#C4D3AE; }
.footer-bottom .sep { opacity:.4; }

/* ══════════════════════════════════════════════════════════════════════
   게시판 · 글보기 · 달력 · 글쓰기
   boards/skin/*.tpl.php, boards/view.php, boards/write.php, page.php 대응
   ══════════════════════════════════════════════════════════════════════ */

.board-page { padding:clamp(36px, 5vw, 64px) 20px clamp(52px, 7vw, 88px); }
.narrow { max-width:820px; margin-inline:auto; }

.crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:.88rem; color:var(--ink-300); margin-bottom:12px; }
.crumbs a { color:var(--ink-300); }

/* ── 게시판 헤더 ───────────────────────────────────────────────────────
   제목 위계: 히어로(48px) > 페이지 제목(28px) > 섹션(20px).
   게시판 제목이 h1 기본값(최대 48px)을 그대로 쓰면 히어로와 같은 급이 되어
   화면이 제목만 큰 미완성처럼 보인다. */
.board-head { margin-bottom:26px; padding-bottom:20px; border-bottom:2px solid var(--forest-100); }
.board-title { font-size:clamp(1.5rem, 3vw, 1.85rem); color:var(--forest-900); margin-bottom:6px; }
.board-desc { color:var(--ink-500); font-size:.96rem; margin-bottom:18px; }
.board-desc:empty { display:none; }
/* 내용이 공백뿐인 경우도 접는다 (PHP 가 빈 문자열을 출력하는 경우) */
.board-desc:blank { display:none; }

/* 제목은 상단 초록 배너(page-hero)로 옮겼고, 배너~검색 사이는 board-page 상단 패딩이 벌려 준다 */
.board-tools { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.search { display:flex; gap:8px; align-items:center; }
.search input[type="search"] {
  font:inherit; font-size:.95rem; min-width:200px; padding:11px 18px;
  border:2px solid var(--sketch-ink); border-radius:var(--r-full); background:#fff; color:var(--ink-900);
}
.search input[type="search"]:focus { border-color:var(--forest-700); outline:none; box-shadow:0 0 0 3px rgba(110,143,42,.18); }
.search button {
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:11px 22px; cursor:pointer; white-space:nowrap; flex-shrink:0;
  background:var(--forest-700); color:#fff;
  border:2px solid var(--sketch-ink); border-radius:var(--r-full);
  box-shadow:2px 3px 0 rgba(64,64,58,.14); transition:transform .12s, background .12s;
}
.search button:hover { background:var(--forest-900); transform:translate(-1px,-1px); }
.search button:active { transform:translate(1px,1px); }

/* 템플릿이 .btn 없이 .btn-primary 만 쓰는 곳이 있어 단독으로도 동작하게 한다 */
.btn-primary, .btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:46px; padding:12px 24px;
  font-family:var(--font-display); font-weight:700;  /* font:inherit 는 표시 글꼴을 지워버려 금지 */
  border:2px solid transparent; border-radius:var(--r-full); cursor:pointer; text-decoration:none;
}
.btn-primary { background:var(--forest-700); color:#fff; }
.btn-primary:hover { background:var(--forest-900); text-decoration:none; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#96271c; text-decoration:none; }
.btn.small, .small { font-size:.88rem; }
.btn.small { min-height:38px; padding:8px 16px; }

/* ── 목록 표 (크레용 카드 프레임) ────────────────────────────────────── */
.board-table {
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fffdf7; border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:16px; overflow:hidden; box-shadow:var(--sketch-shadow);
}
.board-table thead th {
  padding:14px 12px; text-align:center;
  background:var(--forest-100); color:var(--forest-900);
  font-family:var(--font-display); font-size:.95rem; font-weight:700;
  border-bottom:2px solid var(--sketch-ink);
}
.board-table tbody td {
  padding:15px 12px; text-align:center;
  border-bottom:1px solid var(--line); color:var(--ink-500); font-size:.95rem;
}
.board-table tbody tr:last-child td { border-bottom:0; }
.board-table .subj { text-align:start; }
.board-table .subj a { color:var(--ink-900); font-weight:600; }
.board-table .subj a:hover { color:var(--forest-700); }
.board-table tbody tr:hover { background:var(--forest-050); }
.adm-col { width:44px; }
.num-col { width:70px; }
.meta-col { width:110px; }
.board-table .empty, .empty { padding:64px 12px !important; text-align:center; color:var(--ink-300); }

.notice-row { background:var(--sun-100); }
.notice-row:hover { background:var(--sun-200) !important; }
.notice-row .subj a { color:var(--forest-900); font-weight:700; }

.badge {
  display:inline-block; margin-inline-start:6px; padding:2px 8px;
  background:var(--forest-100); color:var(--forest-900);
  font-size:.78rem; font-weight:700; border-radius:var(--r-full);
}

.admin-bulk {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:18px; padding:14px 18px;
  background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--r-md);
  font-size:.9rem; color:var(--ink-500);
}

/* ── 페이지네이션 ────────────────────────────────────────────────────── */
.pager { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:36px; }
.pager a {
  min-width:44px; min-height:44px; padding:10px 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-500); font-weight:600; font-size:.94rem;
}
.pager a:hover { background:var(--forest-050); border-color:var(--forest-300); text-decoration:none; }
.pager a.on { background:var(--forest-700); border-color:var(--forest-700); color:#fff; }

/* ── 글보기 ──────────────────────────────────────────────────────────── */
/* 본문 폭은 읽기 편한 길이로 통일한다 (한글 기준 한 줄 40~50자) */
.post-view, .post { max-width:760px; margin-inline:auto; }
.post-head { padding-bottom:18px; margin-bottom:26px; border-bottom:2px solid var(--forest-100); }
.post-head h1, .post-head h2 { font-size:clamp(1.4rem, 3vw, 1.75rem); color:var(--forest-900); margin-bottom:10px; }
.post-meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.88rem; color:var(--ink-300); }
.post-meta .row { display:flex; gap:6px; }
.post-meta > span::after { content:"·"; margin-inline-start:16px; opacity:.4; }
.post-meta > span:last-child::after { content:""; }

.post-body { font-size:1.05rem; line-height:1.9; color:var(--ink-700); padding:8px 0 40px; }
.post-body img { border-radius:var(--r-md); margin:1.5em 0; }
.post-body h2, .post-body h3 { color:var(--forest-900); margin-top:1.8em; }
/* .post-body blockquote 스타일은 위 '인용문' 규칙으로 통합됨 */
.post-body table { width:100%; border-collapse:collapse; margin:1.5em 0; }
.post-body th, .post-body td { padding:12px 14px; border:1px solid var(--line); text-align:start; }
.post-body th { background:var(--forest-050); }

/* 첨부파일 */
.attachments, .attachments-block { margin:28px 0; padding:20px 22px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-md); }
.attachments h3, .attachments-block h3 { font-size:1rem; color:var(--forest-900); margin-bottom:12px; }
.att-list { display:flex; flex-direction:column; gap:8px; }
.file-row { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.92rem; }
.file-row a { font-weight:600; }
.att-thumb { width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; }

.post-actions, .form-actions { display:flex; flex-wrap:wrap; gap:10px; margin:32px 0; }
.form-actions { justify-content:flex-end; }

.prev-next { border-block:1px solid var(--line); margin:32px 0; }
.prev-next a, .prev-next div { display:flex; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line); color:var(--ink-500); }
.prev-next > *:last-child { border-bottom:0; }
.prev-next a:hover { color:var(--forest-700); background:var(--forest-050); text-decoration:none; }

/* ── 댓글 ────────────────────────────────────────────────────────────── */
.comments { margin-top:44px; }
.comments h3 { font-size:1.1rem; color:var(--forest-900); margin-bottom:18px; }
.comments > ul > li, .comments .comment {
  padding:18px 20px; margin-bottom:12px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-md);
}
.comment-form { display:flex; flex-direction:column; gap:12px; margin-top:20px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); }

/* ── 폼 공통 ───────────────────────────────────────────────────────────
   폼은 반드시 카드에 담는다. 배경 위에 입력칸만 떠 있으면
   "어디까지가 한 덩어리인지" 읽히지 않아 미완성으로 보인다.
   로그인·가입(.auth-card)과 같은 형태로 통일한다. */
.post-write { max-width:760px; margin-inline:auto; }
.write-form {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:32px 30px;
}

/* 입력 요소 — 라벨과 칸 사이 간격, 칸 사이 리듬을 한곳에서 관리한다 */
.write-form label, .comment-form label, .auth-form label {
  display:block; font-weight:700; color:var(--ink-700);
  margin-bottom:8px; font-size:.92rem; letter-spacing:-.01em;
}
.write-form > label, .write-form > div, .write-form > fieldset { margin-bottom:22px; }
.write-form > *:last-child { margin-bottom:0; }

/* 이 템플릿은 <label>제목 <input></label> 처럼 라벨이 입력칸을 감싼다.
   그래서 label 의 margin-bottom 은 "필드 사이 간격"이 되고,
   라벨 글자와 입력칸 사이 간격은 입력칸 쪽에서 따로 줘야 한다. */
.write-form label > input,
.write-form label > select,
.write-form label > textarea,
.comment-form label > input,
.comment-form label > textarea { margin-top:8px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="tel"], input[type="search"], input[type="datetime-local"],
input[type="number"], input[type="url"], select, textarea {
  width:100%; font:inherit; font-size:1rem; padding:14px 16px;
  background:#fff; color:var(--ink-900);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:var(--ink-300); opacity:.75; }
input:hover, select:hover, textarea:hover { border-color:var(--forest-300); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--forest-500); box-shadow:0 0 0 3px rgba(110,143,42,.18);
}
textarea { min-height:180px; resize:vertical; line-height:1.7; }

/* 파일 입력 — 기본 스타일이 제각각이라 최소한만 맞춘다 */
input[type="file"] {
  width:100%; font:inherit; font-size:.92rem; padding:11px 14px;
  background:var(--bg-soft); border:1.5px dashed var(--line); border-radius:var(--r-sm);
}
input[type="file"]:hover { border-color:var(--forest-300); }

/* 묶음 필드 */
fieldset.attachments { border:0; padding:0; margin:0 0 22px; }
fieldset.attachments legend {
  padding:0; margin-bottom:8px;
  font-weight:700; font-size:.92rem; color:var(--ink-700);
}

/* ── 포토 게시판 ─────────────────────────────────────────────────────── */
.photo-board .photo-grid { margin-top:8px; }
.photo-card {
  position:relative; display:block; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .18s, box-shadow .18s;
}
.photo-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none; }
.photo-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--forest-100); }
.photo-meta { padding:14px 16px; }
.photo-card .photo-title { font-weight:700; color:var(--ink-900); font-size:.98rem; margin-bottom:4px; }
.photo-sub { font-size:.85rem; color:var(--ink-300); }
.photo-check { position:absolute; top:10px; inset-inline-start:10px; width:20px; height:20px; z-index:2; }

/* ── 일정 달력 ───────────────────────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; gap:14px; }
.cal-nav span { font-size:1.2rem; font-weight:700; color:var(--forest-900); font-variant-numeric:tabular-nums; }

.calendar { width:100%; border-collapse:collapse; table-layout:fixed; }
.calendar th {
  padding:12px 6px; text-align:center; font-size:.9rem; font-weight:700;
  background:var(--forest-050); color:var(--forest-900); border:1px solid var(--line);
}
.calendar td {
  height:118px; padding:8px; vertical-align:top;
  border:1px solid var(--line); background:#fff;
}
.calendar td.empty { background:var(--bg-soft); padding:0 !important; }
.calendar td.today { background:var(--sun-100); box-shadow:inset 0 0 0 2px var(--sun-500); }
.calendar .d { display:block; font-size:.9rem; font-weight:700; color:var(--ink-500); margin-bottom:6px; }
.calendar td.today .d { color:var(--sun-600); }
/* 주말 — 색만으로 구분하지 않도록 요일 헤더 텍스트도 함께 강조된다 */
.calendar .sun, .calendar td.sun .d { color:#B3402E; }
.calendar .sat, .calendar td.sat .d { color:#2B6CA3; }

.cal-event {
  display:block; margin-bottom:4px; padding:4px 8px;
  background:var(--forest-100); color:var(--forest-900);
  font-size:.8rem; font-weight:600; border-radius:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-event:hover { background:var(--forest-300); text-decoration:none; }
.event-bar { display:block; height:4px; border-radius:2px; background:var(--forest-500); margin-bottom:4px; }

/* ══════════════════════════════════════════════════════════════════════
   학부모 계정 · 알림장 · 식단표
   ══════════════════════════════════════════════════════════════════════ */

/* ── 로그인 / 가입 카드 ──────────────────────────────────────────────── */
.auth-card {
  max-width:480px; margin-inline:auto; padding:40px 36px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.auth-card-wide { max-width:640px; }
.auth-card h1 { font-size:1.7rem; color:var(--forest-900); margin-bottom:10px; }
.auth-lead { color:var(--ink-500); font-size:.95rem; margin-bottom:28px; }
.auth-form label { display:block; font-weight:600; color:var(--ink-700); font-size:.93rem; margin:18px 0 6px; }
.auth-form label:first-of-type { margin-top:0; }
.auth-alt { margin:24px 0 0; text-align:center; font-size:.93rem; }

.form-section {
  font-size:1rem; color:var(--forest-900);
  margin:32px 0 4px; padding-bottom:10px; border-bottom:2px solid var(--forest-100);
}
.field-hint { font-size:.85rem; color:var(--ink-300); margin:6px 0 0; }

/* 허니팟 — 화면에서 감추되 스크린리더도 읽지 않도록 */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 동의 항목 */
.consent-box {
  margin-top:14px; padding:16px 18px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-md);
}
.consent-line { display:flex; align-items:flex-start; gap:10px; margin:0 !important; cursor:pointer; }
.consent-line input[type="checkbox"] { width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--forest-700); }
.consent-line span { font-weight:600; color:var(--ink-700); font-size:.93rem; }

/* ── 알림장 ──────────────────────────────────────────────────────────── */
.class-banner {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 30px 26px 36px; margin-bottom:28px;
  background:linear-gradient(180deg, #fffef9 0%, #fdf7e6 100%);
  border:var(--sketch-bd) solid var(--sketch-ink); border-radius:28px 10px 28px 10px / 10px 28px 10px 28px;
  box-shadow:var(--sketch-shadow);
}
/* 반 색상 — 왼쪽 굵은 크레용 띠 (구름=연노랑 · 달님=노랑 · 하늘=초록) */
.class-banner::before {
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:15px;
  background:var(--cloud); border-inline-end:var(--sketch-bd) solid var(--sketch-ink);
}
.class-banner[data-group="moon"]::before { background:var(--moon); }
.class-banner[data-group="sky"]::before  { background:var(--sky); }
/* 구름 그림 속에 '반 이름 · 나이' 를 얹는다 (이름 영역을 세로로 정렬) */
.class-banner > div:first-child { display:flex; flex-direction:column; align-items:center; gap:2px; }
.class-cloud {
  width:236px; aspect-ratio:600 / 280;
  background:url("/assets/img/cloud.png") no-repeat center / contain;
  display:flex; align-items:center; justify-content:center; padding:6px 30px 0;
}
.class-banner .class-cloud .class-name {
  margin:0; justify-content:center; flex-wrap:nowrap; gap:5px; font-size:1.2rem;
}
/* 나이 — 둥근 배지가 아니라 '· 만 1세' 로, 이름과 같은 글꼴·크기(조금 옅게) */
.class-banner .class-cloud .class-age {
  background:none; border:0; padding:0; border-radius:0;
  font-family:var(--font-display); font-size:1em; font-weight:700;
  color:var(--forest-500); white-space:nowrap;
}
.class-banner .class-cloud .class-age::before { content:"·"; color:var(--ink-300); margin-inline-end:5px; }
.class-banner .class-teacher { font-size:1rem; color:var(--ink-700); text-align:center; }
.class-banner .class-teacher .sep { opacity:.4; margin-inline:6px; }

/* 관리자 미리보기 안내 — 학부모 화면과 구분되도록 한 줄로 */
.admin-preview-bar {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px; padding:11px 18px;
  background:var(--sun-100); border:1px dashed var(--sun-600); border-radius:var(--r-sm);
  font-size:.88rem; color:#6B5744;
}
.admin-preview-bar strong { color:#3B2A08; }
.admin-preview-bar a { font-weight:600; white-space:nowrap; }

/* 반 선택 버튼 줄 (관리자 전용) */
.class-switch { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.class-switch-label { font-size:.85rem; font-weight:700; color:var(--ink-300); flex-shrink:0; }
.class-switch-btns { display:flex; gap:8px; flex-wrap:wrap; }
.class-switch-btns a {
  padding:10px 20px; border-radius:var(--r-full);
  background:#fff; border:1.5px solid var(--line);
  color:var(--ink-700); font-weight:600; font-size:.94rem;
}
.class-switch-btns a:hover { border-color:var(--forest-300); background:var(--forest-050); text-decoration:none; }
.class-switch-btns a.is-on {
  background:var(--forest-700); border-color:var(--forest-700); color:#fff;
}

/* 알림장 / 앨범 전환 탭 */
.class-tabs { display:flex; gap:6px; margin-bottom:22px; border-bottom:2px solid var(--line); }
.tab-write {
  margin-inline-start:auto; align-self:center; margin-bottom:6px;
  padding:9px 18px !important; border-radius:var(--r-full) !important;
  background:var(--sun-500); color:#3B2A08 !important; font-weight:700; font-size:.9rem;
  border-bottom:0 !important;
}
.tab-write:hover { background:var(--sun-600); color:#fff !important; text-decoration:none; }
.class-tabs a {
  display:flex; align-items:center; gap:8px;
  padding:12px 20px; margin-bottom:-2px;
  border-bottom:3px solid transparent; border-radius:var(--r-sm) var(--r-sm) 0 0;
  color:var(--ink-500); font-weight:600; font-size:.98rem;
}
.class-tabs a:hover { background:var(--forest-050); color:var(--forest-900); text-decoration:none; }
.class-tabs a.is-on { color:var(--forest-900); border-bottom-color:var(--forest-500); background:var(--forest-050); }
.tab-count {
  min-width:22px; padding:1px 7px; border-radius:var(--r-full);
  background:var(--forest-100); color:var(--forest-900);
  font-size:.78rem; font-weight:700; text-align:center;
}
.class-tabs a.is-on .tab-count { background:var(--forest-300); }

/* 앨범 격자 */
.album-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.album-card {
  display:block; overflow:hidden; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.album-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--forest-300); text-decoration:none; }
.album-cover { position:relative; aspect-ratio:4/3; background:var(--forest-100); }
.album-cover img { width:100%; height:100%; object-fit:cover; }
.album-count {
  position:absolute; inset-block-end:10px; inset-inline-end:10px;
  padding:4px 11px; border-radius:var(--r-full);
  background:rgba(34,48,31,.78); color:#fff; font-size:.8rem; font-weight:700;
}
.album-meta { padding:14px 16px; }
.album-title { font-weight:700; color:var(--ink-900); font-size:1rem; margin-bottom:4px; }
.album-meta time { font-size:.85rem; color:var(--ink-300); }

.note-list { display:flex; flex-direction:column; gap:12px; }
.note-item { border:1px solid var(--line); border-radius:var(--r-md); background:#fff; transition:box-shadow .18s, border-color .18s; }
.note-item:hover { box-shadow:var(--shadow-md); border-color:var(--forest-300); }
.note-item.is-unread { border-inline-start:4px solid var(--sun-500); }
.note-item > a { display:block; padding:20px 22px; color:inherit; }
.note-item > a:hover { text-decoration:none; }
.note-title { font-size:1.08rem; color:var(--ink-900); margin:0 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.note-new {
  padding:2px 8px; border-radius:var(--r-full);
  background:var(--sun-500); color:#3B2A08; font-size:.7rem; font-weight:800; letter-spacing:.04em;
}
.note-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.86rem; color:var(--ink-300); }

.note-photos { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin:8px 0 28px; }
.note-photos figure { margin:0; }
.note-photos img { width:100%; border-radius:var(--r-md); background:var(--forest-100); }
.note-photos figcaption { margin-top:8px; font-size:.87rem; color:var(--ink-500); text-align:center; }

.comment-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:.9rem; }
.comment-head strong { color:var(--ink-900); }
.comment-head time { color:var(--ink-300); font-size:.84rem; }

/* ── 식단표 (급식지원센터 공식 이미지를 월별로 게시) ─────────────────── */
.meal-head { margin-bottom:22px; }
.meal-month {
  display:block; font-family:var(--font-display); font-size:1.7rem;
  color:var(--forest-900); font-variant-numeric:tabular-nums; margin-bottom:14px;
}
.meal-months { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.meal-months-label { font-size:.9rem; font-weight:700; color:var(--ink-500); margin-inline-end:4px; }
.meal-month-btn {
  padding:7px 14px; border:2px solid var(--sketch-ink); border-radius:var(--r-full);
  background:#fffdf7; color:var(--forest-900); font-weight:700; font-size:.92rem;
  box-shadow:2px 2px 0 rgba(64,64,58,.10); transition:transform .12s;
}
.meal-month-btn:hover { transform:translate(-1px,-1px); text-decoration:none; }
.meal-month-btn.is-active { background:var(--forest-700); color:#fff; border-color:var(--sketch-ink); }

/* 세로로 긴 공식 문서라 폭을 제한해 가운데 정렬한다. 원본은 '크게 보기'로 새 탭에서. */
.meal-figure {
  max-width:840px; margin:0 auto; text-align:center;
  background:#fff; border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:var(--r-md); box-shadow:var(--sketch-shadow); overflow:hidden;
}
.meal-image { display:block; width:100%; height:auto; }
.meal-figcap { padding:12px; background:var(--forest-050); border-top:2px dashed var(--line); }
.meal-note {
  max-width:840px; margin:16px auto 0; padding:12px 16px; border-radius:var(--r-md);
  background:var(--sun-100); border:1px solid var(--sun-200);
  font-size:.92rem; color:var(--ink-700); line-height:1.6;
}
.meal-empty {
  text-align:center; padding:64px 20px; color:var(--ink-500);
  background:#fffdf7; border:2px dashed var(--line); border-radius:var(--r-md);
}
.meal-empty-icon { font-size:48px; display:block; margin-bottom:12px; opacity:.6; }

/* ── 교육철학 페이지 본문 다듬기 (DB 본문이라 CSS 로만) ───────────────
   제목은 가운데 정렬, '세 가지 약속'의 소제목+문단을 색 카드로 묶고,
   '바라는 아이의 모습' 목록은 잎사귀 2열 카드로. */
.page-philosophy .post-body h2 {
  text-align:center; margin-top:2.6em; padding-bottom:2px;
}
.page-philosophy .post-body h2::after {
  content:""; display:block; width:52px; height:4px; margin:14px auto 0;
  background:var(--forest-300); border-radius:4px;
}
/* 세 가지 약속 — 인접한 소제목(h3)+문단(p)을 하나의 카드로 */
.page-philosophy .post-body h3 {
  position:relative;
  margin:20px 0 0; padding:20px 26px 13px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  color:var(--forest-900); font-size:1.55rem;
}
/* 제목·본문 사이 점선 — 양 끝에 여백을 두려고 테두리 대신 짧은 선으로 */
.page-philosophy .post-body h3::after {
  content:""; position:absolute; left:26px; right:26px; bottom:0;
  border-top:2px dashed rgba(47,74,31,.22);
}
.page-philosophy .post-body h3 + p {
  margin:0 0 18px; padding:16px 26px 22px;
  border-radius:0 0 var(--r-md) var(--r-md);
  color:var(--ink-700);
}
/* 카드마다 다른 파스텔 톤 (놀이=초록, 영아=노랑, 자연=하늘) */
.page-philosophy .post-body h3:nth-of-type(1),
.page-philosophy .post-body h3:nth-of-type(1) + p { background:#EEF6E4; }
.page-philosophy .post-body h3:nth-of-type(2),
.page-philosophy .post-body h3:nth-of-type(2) + p { background:#FBF6DD; }
.page-philosophy .post-body h3:nth-of-type(3),
.page-philosophy .post-body h3:nth-of-type(3) + p { background:#E9F3FA; }

/* 우리가 바라는 아이의 모습 — 잎사귀 2열 카드 */
.page-philosophy .post-body h2 + ul {
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0 0; padding:0;
}
.page-philosophy .post-body h2 + ul li {
  position:relative; padding:16px 18px 16px 46px;
  background:#fffdf7; border:var(--sketch-bd) solid var(--line); border-radius:var(--r-md);
  color:var(--ink-700); font-weight:500; line-height:1.5;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s, border-color .2s;
}
/* 마우스 올리면 살짝 튀어오르며 기울고 잎사귀가 커진다 (타일과 같은 톤) */
.page-philosophy .post-body h2 + ul li:hover {
  transform:translateY(-5px) rotate(-1deg);
  border-color:var(--forest-300); box-shadow:5px 7px 0 rgba(64,64,58,.1);
}
.page-philosophy .post-body h2 + ul li:nth-child(even):hover { transform:translateY(-5px) rotate(1deg); }
.page-philosophy .post-body h2 + ul li::before {
  content:"🌿"; position:absolute; left:15px; top:14px; font-size:1.05rem;
  transform-origin:center; transition:transform .24s cubic-bezier(.34,1.56,.64,1);
}
.page-philosophy .post-body h2 + ul li:hover::before { transform:scale(1.3) rotate(-14deg); }
@media (prefers-reduced-motion: reduce) {
  .page-philosophy .post-body h2 + ul li,
  .page-philosophy .post-body h2 + ul li::before { transition:none; }
  .page-philosophy .post-body h2 + ul li:hover { transform:translateY(-3px); }
}
@media (max-width:600px) {
  .page-philosophy .post-body h2 + ul { grid-template-columns:1fr; }
}

/* ── 원훈 · 어린이상 · 교사상 (교육철학 페이지) ─────────────────────── */
.motto-section { border-top:2px dashed var(--line); }

/* 원훈 3장 — 색이 다른 손그림 카드 */
.motto-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:52px; }
.motto-card {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:34px 42px; text-align:center;
  background:#fffdf7; border:5px solid var(--sketch-ink);
  border-radius:999px;                 /* 박스 대신 긴 원(알약) 모양 */
  box-shadow:var(--sketch-shadow);
}
/* 이모지·밑줄 대신, 알약 테두리를 두껍게 + 반별 색으로 (노랑·분홍·하늘) */
.motto-word {
  font-family:var(--font-display); color:var(--forest-900);
  font-size:clamp(1.15rem, 2.4vw, 1.5rem); line-height:1.4; word-break:keep-all;
}
.motto-c1 { border-color:var(--sun-500); }
.motto-c2 { border-color:var(--crayon-berry); }
.motto-c3 { border-color:var(--crayon-sky); }
@media (min-width:821px) {
  .motto-cards { align-items:start; }
  .motto-card:nth-child(1) { transform:rotate(-1.5deg); }
  .motto-card:nth-child(3) { transform:rotate(1.5deg); }
}

/* 어린이상 · 교사상 — 두 블록 */
.motto-ideals { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.motto-block {
  background:#fffdf7; border:var(--sketch-bd) solid var(--sketch-ink);
  border-radius:var(--r-lg); box-shadow:var(--sketch-shadow);
  padding:28px 30px;
}
/* 제목 앞 작은 색 점(이모지 대신) + 제목 아래 물결선 */
.motto-block h3 {
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  padding-bottom:15px; color:var(--forest-900); font-size:1.35rem;
  background-repeat:repeat-x; background-position:left bottom;
}
.motto-child h3   { background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='6'%3E%3Cpath%20d='M0%203%20Q6%200%2012%203%20T24%203'%20fill='none'%20stroke='%23E0A91F'%20stroke-width='1.8'/%3E%3C/svg%3E"); }
.motto-teacher h3 { background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='6'%3E%3Cpath%20d='M0%203%20Q6%200%2012%203%20T24%203'%20fill='none'%20stroke='%236E8F2A'%20stroke-width='1.8'/%3E%3C/svg%3E"); }
.motto-block h3::before {
  content:""; width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--sketch-ink);
}
.motto-child h3::before   { background:var(--sun-500); }
.motto-teacher h3::before { background:var(--forest-300); }
.motto-block ul { display:flex; flex-direction:column; gap:14px; }
/* 노트에 적은 것처럼 각 줄 아래 밑줄 */
.motto-block li {
  position:relative; padding-left:22px; padding-bottom:9px;
  border-bottom:1.5px solid var(--line);
  color:var(--ink-700); font-size:1.02rem; line-height:1.6; word-break:keep-all;
}
/* 🌱 대신 작은 색 점 불릿 */
.motto-block li::before {
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--forest-500);
}
.motto-child li::before   { background:var(--sun-600); }
.motto-teacher li::before { background:var(--forest-500); }

@media (max-width:820px) {
  .motto-cards { grid-template-columns:1fr; gap:18px; }
  .motto-card { flex-direction:row; text-align:start; transform:none !important; }
  .motto-ideals { grid-template-columns:1fr; }
}

/* 화면이 좁아지면 5칸 → 3칸 → 2칸 → 1칸으로 접힌다.
   1칸이 되면 요일 머리를 왼쪽에 두어 세로로 길어지는 것을 줄인다. */
@media (max-width: 1100px) { .meal-week { grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 760px)  { .meal-week { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 520px) {
  .meal-week { grid-template-columns:1fr; gap:12px; }
  .meal-day-head {
    display:flex; align-items:baseline; gap:8px;
    text-align:start; padding:11px 14px;
  }
  .meal-date { margin-top:0; }
  .meal-slot { padding:11px 14px; }
}

/* ── 접근성: 모션 최소화 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .btn:hover, .tile:hover, .class-card:hover, .concept-card:hover { transform:none; }
}

/* ── 푸터: 전화·지번·관리자 링크 ─────────────────────────────────── */
.footer-sub { font-size:.85rem; opacity:.75; }
.footer-tel { margin-top:6px; }
.footer-tel a {
  display:inline-flex; align-items:center; gap:6px;
  font-size:1.05rem; font-weight:700; color:var(--sun-500);
}
.footer-tel a:hover { color:var(--sun-200); }
.footer-admin { white-space:nowrap; opacity:.75; }
.footer-admin:hover { opacity:1; color:var(--sun-500); }