@charset "UTF-8";
/* ==========================================================================
   아해뜰 숲 어린이집 — 모바일 대응 (max-width: 900px)
   학부모 대부분이 모바일로 접속하므로 여기가 사실상 주 화면이다.
   ========================================================================== */

:root { --header-h:68px; }

/* 가로 스크롤 방어선.
   원인은 아래 .primary-nav 에서 없앴고, 이건 혹시 모를 다른 넘침에 대한 보조 장치다. */
@supports (overflow-x: clip) {
  html { overflow-x:clip; }
}

.container { padding-inline:16px; }

/* ── 헤더 ──────────────────────────────────────────────────────────────
   ⚠️ backdrop-filter 를 켜두면 안 된다.
      backdrop-filter(그리고 filter·transform)가 있는 요소는 자손의
      position:fixed 기준이 "뷰포트"가 아니라 "그 요소"가 된다.
      드로어가 헤더(69px) 안에 갇혀 화면 전체를 덮지 못한다.
      모바일에서는 장식을 포기하고 불투명 배경으로 대체한다. */
.site-header { backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; }

/* 데스크톱에서는 .primary-nav 의 margin-inline-start:auto 가 우측 요소를 밀어주지만,
   모바일에서는 그 요소가 position:fixed 로 흐름에서 빠지므로 밀어내는 역할을 못 한다.
   언어 선택·햄버거 버튼을 직접 오른쪽으로 붙인다. */
.header-inner { gap:12px; }
.header-actions { margin-inline-start:auto; }
.brand-mark { font-size:27px; }
.brand-text strong { font-size:1.02rem; }
.brand-text small { display:none; }

.nav-toggle { display:flex; }

/* ── 네비게이션 → 전체화면 드로어 ──────────────────────────────────────
   ⚠️ 닫힘 상태를 translateX(100%) 로 만들면 안 된다.
      드로어가 화면 오른쪽 밖에 실재하게 되어 문서 폭이 2배가 되고,
      사이트 전체에 가로 스크롤이 생긴다. position:fixed 라도 마찬가지다.
      그래서 가로로 밀지 않고, 제자리에서 페이드 + 살짝 위에서 내려오게 한다. */
.primary-nav {
  position:fixed; inset-block-start:var(--header-h); inset-inline:0; inset-block-end:0;
  margin:0; padding:12px 16px calc(32px + env(safe-area-inset-bottom));
  background:#fff; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px);
  /* visibility 는 전환에 넣지 않는다 — 중간 상태에서 값이 끼는 경우가 있다 */
  transition:opacity .2s ease, transform .2s ease;
  z-index:99;
}
.primary-nav.is-open {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}
body.nav-open { overflow:hidden; }

.nav-root { flex-direction:column; align-items:stretch; gap:2px; }
.nav-group { border-bottom:1px solid var(--line); }
.nav-group:last-child { border-bottom:0; }

/* 대분류 = 아코디언 토글 */
.nav-top {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 8px; border-radius:0;
  font-size:1.08rem; font-weight:700; color:var(--forest-900); text-align:start;
}
.nav-top::after {
  content:"▾"; font-size:.8rem; color:var(--ink-300);
  transition:transform .2s;
}
.nav-group.is-open .nav-top::after { transform:rotate(180deg); }
.nav-top:hover { background:none; }

/* 하위 메뉴 — 데스크톱의 떠 있는 드롭다운을 펼침 목록으로 전환 */
.nav-sub {
  position:static; transform:none; opacity:1; visibility:visible;
  min-width:0; padding:0 0 10px; margin:0;
  background:none; border:0; box-shadow:none;
  display:none;
}
.nav-group.is-open .nav-sub { display:block; transform:none; }
.nav-group:hover .nav-sub { transform:none; }
.nav-sub a {
  padding:13px 8px 13px 22px; font-size:1rem;
  border-radius:var(--r-sm); white-space:normal;
}

/* ── 언어 스위처 ─────────────────────────────────────────────────────── */
.lang-btn { padding:8px 12px; font-size:.85rem; }
.lang-list {
  position:fixed; inset-inline:16px; inset-block-start:calc(var(--header-h) + 8px);
  min-width:0; max-height:min(60vh, 380px);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:4px;
}
.lang-list a { padding:13px 12px; text-align:center; }

/* ── 히어로 ──────────────────────────────────────────────────────────── */
.hero { padding:48px 0 56px; }
/* .hero.has-photo(클래스 2개)가 .hero 규칙을 이기므로 같은 구체성으로 다시 지정한다.
   모바일에서 히어로가 화면 대부분을 차지하면 아래 내용이 안 보인다. */
.hero.has-photo { padding:56px 0 60px; background-position:center 55%; }
.hero-eyebrow { font-size:.8rem; padding:7px 15px; }
.hero-title { font-size:1.75rem; }
.hero-lead { font-size:1.02rem; }
.hero-desc { font-size:.95rem; }
.hero-cta { gap:10px; margin-top:24px; }
.hero-cta .btn { flex:1 1 100%; }

/* ── 섹션 ────────────────────────────────────────────────────────────── */
.section { padding:44px 0; }
.section-head { margin-bottom:28px; text-align:start; }

.board-grid { grid-template-columns:1fr; gap:16px; }
/* 집게/테이프가 위 카드와 겹치지 않도록 세로 간격을 장식 높이보다 넓게 둔다 */
.concept-grid { grid-template-columns:1fr; gap:50px; margin-top:14px; }
.class-grid   { grid-template-columns:1fr; gap:48px; margin-top:10px; }
/* 세로로 쌓이면 카드 기울기는 편다 (:nth-child 로 우선순위를 맞춰 덮는다) */
.concept-grid--pin .concept-card:nth-child(1n) { transform:none !important; }
.concept-card { padding:28px 22px; }
.class-card { padding:22px 20px; }
.card { padding:22px 20px; }

.photo-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
.tile-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
.tile { padding:22px 14px; font-size:1.2rem; }

/* ── 게시글 목록 ─────────────────────────────────────────────────────── */
.post-list a { flex-direction:column; align-items:flex-start; gap:4px; padding:13px 2px; }
.post-list .title { white-space:normal; }

/* ── 본문 ────────────────────────────────────────────────────────────── */
.page-hero { padding:32px 0; }
.prose blockquote { padding:16px 18px; }
/* 표는 가로 스크롤 — 본문이 통째로 밀리는 것 방지 */
.prose table { display:block; overflow-x:auto; white-space:nowrap; }

/* ── 게시판 ──────────────────────────────────────────────────────────── */
.board-page { padding:28px 16px 48px; }
.board-head { margin-bottom:20px; padding-bottom:18px; }
.board-tools { flex-direction:column; align-items:stretch; }
.search { width:100%; }
.search input[type="search"] { min-width:0; flex:1; }
.board-tools .btn-primary { width:100%; }

/* 목록 표 — 작성자/조회수 열을 숨기고 제목 중심으로.
   가로 스크롤보다 정보를 줄이는 편이 모바일에서 읽기 쉽다. */
.board-table thead { display:none; }
.board-table tbody tr { display:block; padding:14px 4px; border-bottom:1px solid var(--line); }
.board-table tbody td { display:none; border:0; padding:0; text-align:start; }
.board-table tbody td.subj { display:block; margin-bottom:6px; }
/* 글 제목은 목록에서 가장 많이 누르는 곳이다 */
.board-table tbody td.subj a { display:flex; align-items:center; min-height:44px; font-size:1.02rem; }
/* 작성자 · 날짜만 한 줄로 */
.board-table tbody td:nth-last-child(3),
.board-table tbody td:nth-last-child(2) {
  display:inline; font-size:.85rem; color:var(--ink-300);
}
.board-table tbody td:nth-last-child(3)::after { content:" · "; }
.board-table .empty { display:block !important; padding:48px 0 !important; }

.pager a { min-width:42px; min-height:42px; padding:8px 12px; font-size:.9rem; }

/* ── 글보기 ──────────────────────────────────────────────────────────── */
.post-body { font-size:1rem; line-height:1.85; }
.post-body table { display:block; overflow-x:auto; white-space:nowrap; }
.post-actions, .form-actions { flex-direction:column; }
.post-actions > *, .form-actions > * { width:100%; }

/* ── 달력 — 가로 스크롤 (요일 7칸은 줄일 수 없음) ───────────────────── */
.schedule-board { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.calendar { min-width:600px; }
.calendar td { height:92px; padding:6px; }
.cal-event { font-size:.72rem; padding:3px 6px; }
.cal-nav span { font-size:1.05rem; }

/* ── 포토 게시판 ─────────────────────────────────────────────────────── */
.photo-meta { padding:11px 12px; }
.photo-card .photo-title { font-size:.92rem; }

/* ── 터치 타깃 ───────────────────────────────────────────────────────
   손가락 접촉면은 대략 7~9mm(약 44px). 그보다 작으면 옆 링크를 잘못 누른다.
   글자 크기는 그대로 두고 여백으로 누를 면적만 넓힌다. */
.brand { min-height:44px; padding:7px 0; }
.lang-btn { min-height:44px; }
.card-head .link { display:inline-flex; align-items:center; min-height:44px; padding:0 2px; }
.breadcrumb { align-items:center; }
.breadcrumb a { display:inline-flex; align-items:center; min-height:44px; padding-inline-end:2px; }
/* 가입·로그인 화면의 보조 링크 (방침 전문 보기, 로그인으로 이동) */
.field-hint a, .auth-alt a { display:inline-flex; align-items:center; min-height:44px; }
.pager a { min-height:44px; min-width:44px; }
.class-tabs a { min-height:48px; }
.class-switch-btns a { min-height:44px; display:inline-flex; align-items:center; }

/* ── 푸터 ────────────────────────────────────────────────────────────── */
.site-footer { padding:40px 0 24px; }
.footer-top { grid-template-columns:1fr; gap:26px; margin-bottom:26px; }

/* 사이트맵 링크 — 세로로 촘촘히 붙어 있어 오탭이 가장 잘 나는 곳 */
.footer-col li { margin-bottom:0; }
.footer-col a { display:flex; align-items:center; min-height:44px; }

.footer-tel a { min-height:44px; }
.footer-bottom { flex-direction:column; align-items:flex-start; gap:4px; }
.footer-bottom p:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; }
.footer-bottom a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
.footer-bottom .sep { display:none; }   /* 링크가 커져서 구분점이 필요 없다 */