/* ============================================================
   새알곡유치원 공용 스타일. index 와 모든 하위 페이지가 함께 쓴다.
   페이지 고유 스타일은 각 페이지의 <style> 블록에 둔다.
   ============================================================ */

  /* ===========================================================
     새알곡유치원 — 모바일 우선
     사진은 별도 파일 + srcset. 폰에서는 600w만 내려받는다.
     =========================================================== */
  @font-face{font-family:'Recipekorea'; src:url(recipekorea.0a5694fc.woff2) format('woff2');
             font-weight:400 900; font-style:normal; font-display:swap;}
  @font-face{font-family:'NSNeo'; src:url(nsneo-400.ec1613a2.woff2) format('woff2');
             font-weight:400; font-style:normal; font-display:swap;}
  @font-face{font-family:'NSNeo'; src:url(nsneo-600-900.b2ffa897.woff2) format('woff2');
             font-weight:600 900; font-style:normal; font-display:swap;}

  :root{
    --cream:#F8F6EF;   /* 원목 사진과 덜 부딪히도록 초록 기운을 덜어냄 */
    --paper:#FFFFFF;
    --green-900:#0B4E06;
    --green-800:#086603;
    --green-700:#1A7507;
    --green-500:#4E8F1E;
    --green-300:#8FBF4A;
    --green-100:#E4EFCF;
    --accent:#A55823;
    --ink:#23361F;
    --ink-soft:#5C6B57;
    --ink-faint:#667561;
    --line:#DCE8D1;

    --lift-sm:0 1px 2px rgba(11,45,6,.05), 0 3px 10px rgba(11,45,6,.05);
    --lift:0 3px 8px rgba(11,45,6,.06), 0 16px 40px rgba(11,45,6,.09);
    --lift-lg:0 6px 16px rgba(11,45,6,.07), 0 34px 70px rgba(11,45,6,.13);

    --spring:cubic-bezier(.32,.72,0,1);
    --glide:cubic-bezier(.22,1,.36,1);

    --r-s:10px; --r-m:18px; --r-l:22px;

    --pad:20px;
    --z-header:100; --z-menu:110; --z-modal:200; --z-skip:220;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:'NSNeo',sans-serif; font-weight:400;
    font-size:16px; line-height:1.75; letter-spacing:-.01em;
    word-break:keep-all; overflow-wrap:break-word; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Recipekorea',sans-serif; font-weight:400; margin:0; text-wrap:balance;}
  h1 *,h2 *,h3 *,h4 *{font-family:inherit;}
  p{margin:0; text-wrap:pretty;}
  b,strong{font-weight:700;}
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  :focus-visible{outline:3px solid var(--green-800); outline-offset:3px; border-radius:6px;}
  .hero :focus-visible, .panel :focus-visible{outline-color:#fff;}

  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
           overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .skip-link{
    position:fixed; left:var(--pad); top:-100px; z-index:var(--z-skip);
    background:var(--green-800); color:#fff; font-weight:700; font-size:15px;
    padding:12px 20px; border-radius:0 0 var(--r-s) var(--r-s); box-shadow:var(--lift);
    transition:top .2s var(--glide);
  }
  .skip-link:focus{top:0;}

  /* 종이 질감 */
  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- 공통 부품 ---------- */
  .eyebrow{
    display:inline-block; border-radius:999px; padding:5px 13px;
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.2em;
    border:1px solid var(--line); color:var(--accent); background:rgba(255,255,255,.6);
  }
  .eyebrow-light{border-color:rgba(255,255,255,.34); color:#fff; background:rgba(11,20,8,.5);}

  .cta{
    display:inline-flex; align-items:center; gap:12px;
    background:var(--green-800); color:#fff; border:none; cursor:pointer;
    border-radius:999px; padding:9px 9px 9px 24px; min-height:52px;
    font-family:'NSNeo',sans-serif; font-size:16px; font-weight:700; letter-spacing:-.01em;
    box-shadow:var(--lift);
    /* 반응은 색으로, 눌림만 크기로 - 사이트 전체 공통 규칙 */
    transition:background .2s var(--glide), color .2s var(--glide),
               border-color .2s var(--glide), transform .12s var(--glide);
  }
  .cta .knob{
    width:34px; height:34px; border-radius:999px; flex:none;
    background:rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s var(--glide);
  }
  .cta .knob svg{width:15px; height:15px; stroke:#fff; stroke-width:1.6; fill:none;
                 stroke-linecap:round; stroke-linejoin:round;}
  .cta:hover{background:var(--green-700);}
  .cta:hover .knob{background:rgba(255,255,255,.3);}
  .cta:active{transform:scale(.98);}
  .cta-light{background:var(--paper); color:var(--ink);}
  .cta-light .knob{background:rgba(35,54,31,.08);}
  .cta-light .knob svg{stroke:var(--ink);}
  .cta-light:hover{background:var(--green-100); color:var(--green-800);}
  .cta-light:hover .knob{background:rgba(8,102,3,.14);}
  .cta-light:hover .knob svg{stroke:var(--green-800);}
  .cta-line{background:transparent; color:var(--ink); box-shadow:none;
            border:1px solid var(--line); padding-left:22px;}
  .cta-line .knob{background:rgba(35,54,31,.06);}
  .cta-line .knob svg{stroke:var(--ink);}
  .cta-line:hover{background:var(--green-100); border-color:var(--green-800); color:var(--green-800);}
  .cta-line:hover .knob svg{stroke:var(--green-800);}
  /* 버튼을 나란히 놓을 때 */
  .cta-line-light{border-color:rgba(255,255,255,.42); color:#fff;}
  .cta-line-light .knob{background:rgba(255,255,255,.16);}
  .cta-line-light .knob svg{stroke:#fff;}
  .cta-line-light:hover{background:rgba(255,255,255,.16); border-color:#fff; color:#fff;}
  .cta-line-light:hover .knob svg{stroke:#fff;}
  .cta-row{display:flex; flex-wrap:wrap; gap:10px;}
  .cta-row .cta{flex:1 1 158px; padding-left:20px; justify-content:space-between;}

  .js .rise{opacity:0; transform:translateY(26px);
    transition:opacity .8s var(--glide), transform .8s var(--glide);
    transition-delay:var(--d,0ms);}
  .js .rise.in{opacity:1; transform:none;}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation:none !important; transition:none !important;}
    .js .rise{opacity:1 !important; transform:none !important;}
  }

  /* ---------- 헤더 ---------- */
  header{
    position:sticky; top:0; z-index:var(--z-header);
    background:rgba(248,246,239,.92);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between;
       padding:8px var(--pad); max-width:1200px; margin:0 auto;}
  .logo img{height:52px; width:auto;}
  .hamburger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; background:none; border:none; cursor:pointer;
    min-width:48px; min-height:48px; padding:10px; border-radius:var(--r-s);
    transition:background .2s var(--glide);
  }
  .hamburger:hover{background:var(--green-100);}
  .hamburger:active{transform:scale(.98);}
  .hamburger span{width:24px; height:2.5px; background:var(--ink); border-radius:2px;
    transition:transform .3s var(--spring), opacity .2s var(--glide);}
  .hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  nav.links{display:none;}

  /* 900px 부터 가로 메뉴로 바꾼다. 항목 7개라 760px 에서는 자리가 모자란다 */
  @media (min-width:900px){
    .hamburger{display:none;}
    .mobile-menu{display:none !important;}
    .nav{padding:0 var(--pad);}
    .logo{display:flex; align-items:center;}
    .logo img{margin:8px 0;}
    nav.links{display:flex; align-items:stretch; gap:2px;}
    .navitem{position:relative; display:flex; align-items:stretch;}
    .navitem > a{
      display:flex; align-items:center; padding:0 14px; height:68px;
      font-size:15.5px; font-weight:600; color:var(--ink);
      transition:background .2s var(--glide), color .2s var(--glide);
    }
    .navitem > a:hover{background:var(--green-100); color:var(--green-800);}
    .dropdown{
      position:absolute; top:100%; left:0; min-width:180px; z-index:var(--z-menu);
      background:var(--paper); border:1px solid var(--line);
      border-radius:0 0 var(--r-s) var(--r-s); box-shadow:var(--lift);
      padding:6px; display:none; flex-direction:column;
    }
    .navitem:hover .dropdown, .navitem:focus-within .dropdown{display:flex;}
    .dropdown a{
      display:flex; align-items:center; min-height:44px; padding:0 12px;
      font-size:14.5px; font-weight:500; color:var(--ink-soft);
      border-radius:8px; white-space:nowrap;
      transition:background .2s var(--glide), color .2s var(--glide);
    }
    .dropdown a:hover{background:var(--green-100); color:var(--green-800);}
  }

  .mobile-menu{
    display:none; flex-direction:column; background:var(--paper);
    border-top:1px solid var(--line); padding:6px var(--pad) 18px;
    max-height:calc(100dvh - 68px); overflow-y:auto;
  }
  .mobile-menu.open{display:flex;}
  .m-row{border-bottom:1px solid var(--line);}
  .m-row:last-child{border-bottom:none;}
  .m-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .m-top > a{position:relative; display:block; padding:15px 2px;
    font-size:17px; font-weight:600; color:var(--ink); flex:1;}
  .m-toggle{
    flex:none; width:44px; height:44px; padding:0; cursor:pointer;
    border:1px solid var(--line); border-radius:var(--r-s); background:var(--paper);
    color:var(--green-800); font-size:11px; line-height:1; font-family:inherit;
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s var(--spring), background .2s var(--glide), border-color .2s var(--glide);
  }
  .m-toggle:hover{background:var(--green-100); border-color:var(--green-800);}
  .m-toggle:active{transform:scale(.98);}
  .m-row.open .m-toggle{transform:rotate(180deg); background:var(--green-800);
    border-color:var(--green-800); color:#fff;}
  .m-sub{display:none; flex-direction:column; padding:0 0 10px 12px;}
  .m-row.open .m-sub{display:flex;}
  .m-sub a{display:block; padding:12px 2px; font-size:15.5px; font-weight:500; color:var(--ink-soft);}

  /* ---------- 히어로 ---------- */
  .hero{
    position:relative; min-height:100dvh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; background:var(--ink);
  }
  .hero picture, .hero img{position:absolute; inset:0; width:100%; height:100%;}
  .hero img{object-fit:cover; object-position:52% 28%;}
  /* 아래쪽 절반을 눌러 흰 글씨를 확보. 아이 얼굴이 있는 위쪽은 맑게 둔다 */
  .hero .scrim{
    position:absolute; inset:0;
    background:linear-gradient(to top,
      rgba(11,20,8,.95) 0%, rgba(11,20,8,.86) 22%, rgba(11,20,8,.62) 42%,
      rgba(11,20,8,.28) 62%, rgba(11,20,8,.06) 80%, rgba(11,20,8,.22) 100%);
  }
  .hero-in{position:relative; z-index:2; padding:0 var(--pad) 44px; color:#fff;}
  .hero h1{font-size:46px; line-height:1.04; letter-spacing:-.035em; margin:18px 0 0; color:#fff;}
  .hero-lede{font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.88);
             margin:16px 0 26px; max-width:22em;}

  /* ---------- 진초록 띠 ---------- */
  .band{background:var(--green-800); color:#fff; padding:60px var(--pad) 64px; position:relative; z-index:2;}
  .band .eyebrow{margin-bottom:22px;}
  .band-item{padding:21px 0; border-top:1px solid rgba(255,255,255,.2);}
  .band-item:last-child{border-bottom:1px solid rgba(255,255,255,.2);}
  .band-item b{display:block; font-family:'Recipekorea',sans-serif; font-weight:400;
               font-size:29px; line-height:1.15; letter-spacing:-.025em;}
  .band-item span{display:block; margin-top:6px; font-size:14.5px;
                  color:rgba(255,255,255,.84); line-height:1.6;}

  /* ---------- 크림 섹션 ---------- */
  .sec{padding:62px var(--pad) 68px; position:relative; z-index:2;}
  .sec-alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .sec-head{margin-bottom:30px;}
  .sec-head h2{font-size:32px; line-height:1.24; letter-spacing:-.032em; margin:14px 0 12px;}
  .sec-head p{font-size:16px; color:var(--ink-soft); line-height:1.75;}

  /* ---------- 전면 사진 패널 ---------- */
  .panel{
    position:relative; min-height:82dvh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; background:var(--ink); z-index:2;
  }
  .panel picture, .panel img{position:absolute; inset:0; width:100%; height:100%;}
  .panel img{object-fit:cover; object-position:center 42%;}
  .panel .scrim{
    position:absolute; inset:0;
    background:linear-gradient(to top,
      rgba(11,20,8,.94) 0%, rgba(11,20,8,.86) 26%, rgba(11,20,8,.60) 48%,
      rgba(11,20,8,.26) 72%, rgba(11,20,8,.06) 100%);
  }
  .panel-in{position:relative; z-index:2; padding:0 var(--pad) 46px; color:#fff;}
  .panel h2{font-size:32px; line-height:1.22; letter-spacing:-.03em; color:#fff; margin:16px 0 14px;}
  /* .steps li 는 밝은 배경용 어두운 잉크색을 갖는다. 사진 위에서는 뒤집는다 */
  .panel .steps li{color:rgba(255,255,255,.9);}
  .panel .steps b{color:#fff;}

  /* 간판 사진은 밝아서 기존 스크림으로는 글자가 묻힌다 */
  .panel-bright .scrim{background:linear-gradient(to top,
    rgba(11,20,8,.97) 0%, rgba(11,20,8,.93) 30%, rgba(11,20,8,.74) 52%,
    rgba(11,20,8,.34) 76%, rgba(11,20,8,.08) 100%);}

  /* 흰 글씨만 이어지면 밋밋해서, 핵심 구절만 로고의 라임으로 */
  /* em 은 브라우저 기본이 기울임이다. 강조는 색으로만 준다 */
  h1 em, h2 em, h3 em, .say em{font-style:normal;}
  .hero h1 em, .panel h2 em{color:var(--green-300);}
  /* 밝은 바탕에서는 라임이 대비가 안 나오므로 진초록 */
  .sec-head h2 em{color:var(--green-800);}
  .panel p{font-size:16px; line-height:1.75; color:rgba(255,255,255,.86);
           margin-bottom:26px; max-width:24em;}

  /* ---------- 사진 오브젝트 (크림 위) ---------- */
  .plate{border-radius:var(--r-l); overflow:hidden; box-shadow:var(--lift-lg); margin-bottom:26px;}
  .plate img{width:100%; height:auto;}

  /* ---------- 목록 ---------- */
  /* 초록 동그라미 체크는 이 사이트의 각진 어휘와 겉돌아 걷어냈다.
     교육환경 목록과 같은 얇은 선 구조로 맞추고, 표식은 로고의 라임 사각형만 */
  .keypoints{list-style:none; padding:0; margin:0 0 24px;
             border-top:1px solid var(--line);}
  .keypoints li{display:flex; gap:12px; align-items:baseline;
                padding:13px 0; border-bottom:1px solid var(--line);
                font-size:16.5px; font-weight:500; color:var(--ink-soft); line-height:1.5;}
  .keypoints li::before{content:''; flex:none; width:7px; height:7px;
    background:var(--green-300); transform:translateY(-1px);}
  .keypoints b{color:var(--ink); font-weight:700;}
  /* 하위 페이지 목록은 제목 + 설명 구조라 제목이 먼저 읽혀야 한다 */
  .sub .keypoints li{padding:16px 0; align-items:flex-start;}
  .sub .keypoints li::before{width:9px; height:9px; margin-top:11px;}
  .sub .keypoints b{display:block; font-family:'Recipekorea',sans-serif;
                    font-weight:400; font-size:19px; letter-spacing:-.022em;
                    color:var(--ink); margin-bottom:3px;}
  .keypoints i{display:block; font-style:normal; font-weight:400; font-size:14.5px;
               color:var(--ink-faint); line-height:1.68; margin-top:6px;}
  .keypoints li::before{margin-top:9px;}
  /* 메인 소개의 세 줄만 폰에서 짧게 유지한다. 모바일 구성은 확정된 것 */
  @media (max-width:999px){ #about .keypoints i{display:none;} }

  .steps{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:14px;}
  .steps li{display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-soft);}
  .steps b{color:var(--ink); font-weight:700;}
  .steps .no{
    flex:none; width:27px; height:27px; border-radius:50%; background:var(--green-100);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--green-800); font-weight:800; font-variant-numeric:tabular-nums;
  }

  /* ---------- 공간 목록 : 카드 격자와 다른 계열.
     썸네일과 글이 가로로 붙고, 얇은 선으로만 나뉜다 ---------- */
  .places{border-top:1px solid var(--line); list-style:none; padding:0; margin:0;}
  .places li{border-bottom:1px solid var(--line); list-style:none;}
  .places a{display:grid; grid-template-columns:48% 1fr; gap:16px; padding:20px 10px;
    margin:0 -10px; border-radius:var(--r-s); align-items:start;
    transition:background .2s var(--glide), transform .12s var(--glide);}
  .places a:hover{background:var(--green-100);}
  .places a:active{transform:scale(.98);}
  .places img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-s);}
  .places h3{font-size:19px; letter-spacing:-.02em; margin-bottom:6px;}
  .places p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:10px;}
  .places .more{min-height:0;}
  @media (min-width:760px){
    .places a{grid-template-columns:300px 1fr; gap:28px; padding:26px 10px;}
    .places h3{font-size:23px;} .places p{font-size:15.5px;}
  }

  /* ---------- 프로그램 카드 ---------- */
  .prog{display:grid; gap:18px;}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
    overflow:hidden; box-shadow:var(--lift-sm); display:flex; flex-direction:column;
    color:inherit;
    transition:background .2s var(--glide), border-color .2s var(--glide),
               transform .12s var(--glide);
  }
  .card:hover{background:var(--green-100); border-color:var(--green-800);}
  .card:active{transform:scale(.98);}
  .card > img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}

  /* 누를 수 있는 사진만 마우스에 반응한다. 장식이 아니라 신호 */
  .places .shot{display:block; overflow:hidden; border-radius:var(--r-s);}
  @media (hover:hover){
    .card > img, .places .shot img{transition:transform .55s var(--glide);}
    .card:hover > img, .places a:hover .shot img{transform:scale(1.045);}
  }
  .card-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
  .card h3{font-size:21px; letter-spacing:-.025em; line-height:1.3; margin-bottom:10px;}
  .card p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:18px; flex:1;}
  .more{
    display:inline-flex; align-items:center; gap:7px; margin-top:auto;
    font-size:15px; font-weight:700; color:var(--green-800); width:fit-content;
    min-height:44px; align-self:flex-start;
  }
  .more svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none;
            stroke-linecap:round; stroke-linejoin:round;}


  /* ---------- 가로 스냅 갤러리 ---------- */
  .rail{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 var(--pad) 6px; margin:0 calc(var(--pad) * -1);
    -webkit-overflow-scrolling:touch; scrollbar-width:none; list-style:none;
  }
  .rail::-webkit-scrollbar{display:none;}
  /* 화살표는 손가락이 없는 화면에서만. 터치는 밀어서 넘긴다 */
  .rail-nav{display:none; gap:10px;}
  .rail-btn{
    width:48px; height:48px; flex:none; padding:0; cursor:pointer;
    border:1px solid var(--line); border-radius:999px; background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s var(--glide), border-color .2s var(--glide),
               opacity .2s var(--glide), transform .12s var(--glide);
  }
  .rail-btn svg{width:19px; height:19px; stroke:var(--ink); stroke-width:1.7;
                fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .rail-btn:hover{background:var(--green-100); border-color:var(--green-800);}
  .rail-btn:hover svg{stroke:var(--green-800);}
  .rail-btn:active{transform:scale(.98);}
  .rail-btn[disabled]{opacity:.35; cursor:default;}
  .rail-btn[disabled]:hover{background:var(--paper); border-color:var(--line);}
  .rail-btn[disabled]:hover svg{stroke:var(--ink);}
  .rail li{
    flex:0 0 76%; scroll-snap-align:start; border-radius:var(--r-m); overflow:hidden;
    position:relative; aspect-ratio:3/4; background:var(--green-100); box-shadow:var(--lift-sm);
  }
  .rail img{width:100%; height:100%; object-fit:cover;}
  .rail .cap{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:48px 15px 14px; color:#fff; font-size:13.5px; font-weight:600;
    background:linear-gradient(to top, rgba(11,20,8,.94) 0%, rgba(11,20,8,.86) 46%,
                                       rgba(11,20,8,.55) 72%, rgba(11,20,8,0) 100%);
  }

  /* ---------- 소식 · 식단 ---------- */
  .panels{display:grid; gap:16px;}
  .box{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
       padding:24px 22px; box-shadow:var(--lift-sm); display:flex; flex-direction:column;}
  .box h3{font-size:20px; letter-spacing:-.02em; margin-bottom:16px;
          display:flex; align-items:center; gap:9px;}
  .box h3 .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}
  .notice{list-style:none; margin:0; padding:0;}
  .notice li{
    display:flex; justify-content:space-between; gap:12px; padding:13px 10px;
    border-bottom:1px dashed var(--line); font-size:15.5px; cursor:pointer;
    border-radius:var(--r-s); margin:0 -10px; min-height:48px; align-items:center;
    transition:background .2s var(--glide);
  }
  .notice li:hover{background:var(--green-100);}
  .notice li:active{transform:scale(.98);}
  /* 연한 초록 위에서는 날짜가 흐려진다 */
  .notice li:hover .d{color:var(--ink-soft);}
  .notice li:last-of-type{border-bottom:none;}
  .notice .d{color:var(--ink-faint); font-size:13px; flex:none; font-variant-numeric:tabular-nums;}
  .spacer{flex:1;}
  .more-btn{
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:100%; margin-top:16px; padding:14px; border-radius:var(--r-s);
    border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
    font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; min-height:48px;
    transition:border-color .2s var(--glide), color .2s var(--glide), background .2s var(--glide);
  }
  .more-btn svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.8; fill:none;
                stroke-linecap:round; stroke-linejoin:round;}
  .more-btn:hover{border-color:var(--green-800); color:var(--green-800); background:var(--green-100);}
  .meal{background:linear-gradient(135deg, var(--green-100), #F3FADF);
        border-radius:var(--r-s); padding:20px; font-size:15px; line-height:1.75;}
  .meal .day{font-weight:800; color:var(--green-800); margin-bottom:8px; font-variant-numeric:tabular-nums;}
  .note{font-size:13px; color:var(--ink-faint); margin:14px 0 0;}

  /* ---------- 후기 ---------- */
  .quotes{display:grid; gap:14px; margin-bottom:24px;}
  .quote{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
         padding:22px; box-shadow:var(--lift-sm);}
  .quote p{font-size:15.5px; line-height:1.75; color:var(--ink); margin-bottom:14px;}
  .quote .who{font-size:13px; color:var(--ink-faint);}

  /* ---------- 마무리 ---------- */
  .closer{background:var(--green-900); color:#fff; padding:62px var(--pad) 68px;
          text-align:center; position:relative; z-index:2;}
  .closer h2{font-size:31px; line-height:1.24; letter-spacing:-.03em; color:#fff; margin:16px 0 12px;}
  .closer p{font-size:15.5px; color:rgba(255,255,255,.84); margin-bottom:26px;}
  .closer .tel{display:block; margin-top:18px; font-size:14.5px; color:rgba(255,255,255,.8);}
  .closer .tel a{color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:4px;}

  /* ---------- 푸터 ---------- */
  footer{background:var(--ink); color:#cfe0c9; padding:44px var(--pad) 26px;
         font-size:14.5px; position:relative; z-index:2;}
  .foot-logo img{height:38px; width:auto; filter:brightness(0) invert(1); opacity:.95; margin-bottom:12px;}
  .foot-links{display:grid; gap:2px; margin:20px 0 0;}
  /* 터치 영역 44px 확보 — 여백을 바깥으로 빼 시각적 정렬은 유지 */
  .foot-links a{min-height:44px; display:flex; align-items:center; padding:0 6px; margin-left:-6px;}
  footer a{transition:color .2s var(--glide);}
  footer a:hover{color:#fff;}
  /* 어느 페이지에서든 바로 연락할 수 있게 푸터에 둔다 */
  .foot-cta{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0;}
  .foot-cta a{display:inline-flex; align-items:center; gap:9px;
    min-height:46px; padding:0 18px; border-radius:999px;
    border:1px solid rgba(255,255,255,.3); color:#fff;
    font-size:15.5px; font-weight:600; white-space:nowrap;
    transition:background .2s var(--glide), border-color .2s var(--glide),
               transform .12s var(--glide);}
  .foot-cta a:hover{background:rgba(255,255,255,.13);
                    border-color:rgba(255,255,255,.62); color:#fff;}
  .foot-cta a:active{transform:scale(.98);}
  .foot-cta svg{width:16px; height:16px; flex:none; stroke:currentColor;
                stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round;}

  .foot-bottom{margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
               color:#94a68e; font-size:13px; display:grid; gap:4px;}
  .foot-bottom a{text-decoration:underline; text-underline-offset:3px;
                 display:inline-flex; align-items:center; min-height:44px; padding:0 6px; margin-left:-6px;}
  .foot-note{color:#94a68e; font-size:12.5px;}

  /* ---------- 모달 ---------- */
  .modal-overlay{position:fixed; inset:0; background:rgba(35,54,31,.6); z-index:var(--z-modal);
    display:none; align-items:flex-end; justify-content:center; padding:0;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
  .modal-overlay.open{display:flex;}
  .modal-box{background:var(--paper); border-radius:var(--r-l) var(--r-l) 0 0; width:100%;
    max-height:86dvh; overflow-y:auto; padding:26px 22px 32px; position:relative;
    box-shadow:var(--lift-lg);}
  .modal-box h3{font-size:20px; margin-bottom:12px; padding-right:44px; letter-spacing:-.02em;}
  .modal-box .d{font-size:12.5px; color:var(--ink-faint); margin-bottom:10px;
                font-variant-numeric:tabular-nums;}
  .modal-box p{font-size:15px; color:var(--ink-soft); line-height:1.8; white-space:pre-line; margin:0;}
  .modal-close{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
    background:var(--cream); border:1px solid var(--line); cursor:pointer; font-size:17px;
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    transition:background .2s var(--glide);}
  .modal-close:hover{background:var(--green-100);}
  .modal-close:active{transform:scale(.98);}

  /* ===========================================================
     760px 이상 : 태블릿. 한 단을 유지하고 크기만 키운다.
     =========================================================== */
  @media (min-width:760px){
    :root{--pad:40px;}
    .hero h1{font-size:64px;}
    .hero-lede{font-size:18px;}
    .panel h2, .sec-head h2{font-size:42px;}
    .sec > *, .panel-in > *{max-width:820px;}
    .sec{padding-left:max(var(--pad), calc((100% - 900px)/2));
         padding-right:max(var(--pad), calc((100% - 900px)/2));}
    .hero-in, .panel-in{max-width:1200px; margin:0 auto; width:100%;}
    .cta-row{max-width:480px;}
    .panel-in .cta-line-light{max-width:480px;}
    .prog{grid-template-columns:repeat(2,1fr);}
    .panels{grid-template-columns:1.1fr .9fr;}
    .quotes{grid-template-columns:repeat(3,1fr);}
    .rail li{flex-basis:32%;}
    .modal-overlay{align-items:center; padding:24px;}
    .modal-box{border-radius:var(--r-l); max-width:560px;}
  }

  /* ===========================================================
     900px 이상 : 가로 메뉴. 항목이 7개라 760 에서는 자리가 모자란다.
     =========================================================== */
  @media (min-width:900px){
    .hamburger{display:none;}
    .mobile-menu{display:none !important;}
    .nav{padding:0 var(--pad); max-width:none;
         padding-left:max(var(--pad), calc((100% - var(--shell, 1240px))/2));
         padding-right:max(var(--pad), calc((100% - var(--shell, 1240px))/2));}
    .logo{display:flex; align-items:center;}
    .logo img{margin:8px 0;}
    nav.links{display:flex; align-items:stretch; gap:2px;}
    .navitem{position:relative; display:flex; align-items:stretch;}
    .navitem > a{
      display:flex; align-items:center; padding:0 14px; height:68px;
      font-size:15.5px; font-weight:600; color:var(--ink);
      transition:background .2s var(--glide), color .2s var(--glide);
    }
    .navitem > a:hover{background:var(--green-100); color:var(--green-800);}
    .dropdown{
      position:absolute; top:100%; left:0; min-width:180px; z-index:var(--z-menu);
      background:var(--paper); border:1px solid var(--line);
      border-radius:0 0 var(--r-s) var(--r-s); box-shadow:var(--lift);
      padding:6px; display:none; flex-direction:column;
    }
    .navitem:hover .dropdown, .navitem:focus-within .dropdown{display:flex;}
    .dropdown a{
      display:flex; align-items:center; min-height:44px; padding:0 12px;
      font-size:14.5px; font-weight:500; color:var(--ink-soft);
      border-radius:8px; white-space:nowrap;
      transition:background .2s var(--glide), color .2s var(--glide);
    }
    .dropdown a:hover{background:var(--green-100); color:var(--green-800);}
  }

  /* ===========================================================
     1000px 이상 : 데스크톱.
     모바일을 늘린 것이 아니라, 섹션마다 다른 구조를 준다.
     열 개 섹션이 전부 같은 폭 같은 정렬로 내려오면
     화면이 넓어질수록 지루해진다.
     =========================================================== */
  @media (min-width:1000px){
    :root{--pad:48px; --shell:1240px;}
    body{font-size:18px;}

    /* 넓은 화면에서 폰용 글자 크기가 그대로 남아 있었다.
       제목만 커지고 나머지가 작으면 늘려놓은 것처럼 보인다 */
    .eyebrow{font-size:11.5px; padding:6px 15px;}
    .cta{font-size:17px; min-height:56px; padding:10px 10px 10px 26px;}
    .cta .knob{width:36px; height:36px;}
    .cta .knob svg{width:16px; height:16px;}
    .more{font-size:16.5px;}
    .card h3{font-size:27px;} .card p{font-size:17.5px;}
    .places p{font-size:17.5px;}
    .box h3{font-size:23px; margin-bottom:20px;}
    .notice li{font-size:16.5px; padding:16px 12px; min-height:56px;}
    .notice .d{font-size:14px;}
    .more-btn{font-size:16px; padding:17px; margin-top:20px;}
    .more-btn svg{width:16px; height:16px;}
    .meal{font-size:16.5px; padding:26px;}
    .meal .day{font-size:16.5px; margin-bottom:10px;}
    .note{font-size:14.5px; margin-top:18px;}
    .quote{padding:28px;}
    .quote p{font-size:17px;}
    .quote .who{font-size:14.5px;}
    .rail .cap{font-size:15px;}
    footer{font-size:15.5px;}
    .foot-bottom{font-size:14px;} .foot-note{font-size:13.5px;}

    /* ---------- 공통 축 ---------- */
    .sec{
      padding-top:clamp(96px,7.6vw,130px);
      padding-bottom:clamp(102px,8.2vw,138px);
      padding-left:max(var(--pad), calc((100% - var(--shell))/2));
      padding-right:max(var(--pad), calc((100% - var(--shell))/2));
    }
    .sec > *{max-width:none;}

    /* ---------- 타이포 ---------- */
    .sec-head{margin-bottom:clamp(46px,4vw,68px);}
    .sec-head h2{font-size:clamp(40px,3.5vw,54px); line-height:1.14;
                 letter-spacing:-.036em; margin:0 0 18px; max-width:14em;}
    .sec-head p{font-size:17.5px; line-height:1.75; max-width:30em;}
    .panel h2{font-size:clamp(48px,4.4vw,66px); line-height:1.08; margin:22px 0 20px;}
    .panel-in > p{font-size:20px; line-height:1.72; max-width:31em;}
    .panel-in > .cta{margin-top:30px;}

    /* ==========================================================
       1. 히어로 : 사진을 오른쪽으로 밀고 글을 종이 위에 올린다.
       사진 위 흰 글씨는 폰에서는 맞지만, 넓은 화면에서는
       1400px 사진 구석에 글이 웅크린 꼴이 된다.
       두 면이 만나는 자리는 로고의 성벽 톱니로 물린다.
       ========================================================== */
    .hero{
      min-height:min(94dvh, 790px);
      display:grid; align-items:stretch; background:var(--paper);
      border-bottom:1px solid var(--line);
      grid-template-columns:
        max(var(--pad), calc((100% - var(--shell))/2))
        minmax(0, 1fr)
        minmax(0, 1.3fr);
    }
    .hero picture{grid-area:1/3; position:relative; inset:auto;
                  width:100%; height:100%; overflow:hidden;}
    /* 사진과 종이가 만나는 자리를 흐린다.
       사진 안쪽에 그리면 사진과 시작 x 가 같아져(671.84px 같은 소수점 좌표)
       사진의 첫 픽셀을 다 덮지 못하고 선이 남는다.
       그래서 글 영역 쪽에서 40px 앞서 시작해 이음새를 통째로 덮는다.
       끝은 rgba(255,255,255,0) 이라야 회색이 안 낀다 */
    .hero-in::after{
      content:""; position:absolute; top:0; bottom:0;
      left:calc(100% - 40px); width:240px;
      z-index:2; pointer-events:none;
      background:linear-gradient(to right,
        rgba(255,255,255,1)   0px,
        rgba(255,255,255,1)   55px,
        rgba(255,255,255,.97) 78px,
        rgba(255,255,255,.90) 101px,
        rgba(255,255,255,.79) 124px,
        rgba(255,255,255,.64) 147px,
        rgba(255,255,255,.47) 170px,
        rgba(255,255,255,.30) 193px,
        rgba(255,255,255,.14) 216px,
        rgba(255,255,255,.05) 231px,
        rgba(255,255,255,0)   240px);
    }
    .hero img{position:absolute; inset:0; object-position:58% 26%;}
    .hero .scrim{display:none;}
    .hero-in{
      grid-area:1/2; position:relative; z-index:3; color:var(--ink);
      max-width:none; padding:0 clamp(44px,3.6vw,64px) 0 0;
      display:flex; flex-direction:column; justify-content:center;
      align-items:flex-start;
    }
    .hero h1{font-size:clamp(56px,5vw,80px); line-height:1.05; color:var(--ink);
             margin:20px 0 0;}
    .hero h1 em{color:var(--green-800);}
    .hero-lede{color:var(--ink-soft); align-self:stretch; max-width:25em;
               font-size:20px; line-height:1.72; margin-top:26px;}
    /* 종이 위에서는 라벨과 버튼도 밝은 배경용으로 되돌린다 */
    .hero .eyebrow-light{border-color:var(--line); color:var(--accent);
                         background:var(--cream);}
    .hero .cta-light{background:var(--green-800); color:#fff;}
    .hero .cta-light .knob{background:rgba(255,255,255,.16);}
    .hero .cta-light .knob svg{stroke:#fff;}
    .hero .cta-light:hover{background:var(--green-700); color:#fff;}
    .hero .cta-light:hover .knob{background:rgba(255,255,255,.3);}
    .hero .cta-light:hover .knob svg{stroke:#fff;}
    .hero :focus-visible{outline-color:var(--green-800);}

    /* ==========================================================
       2. 소개 : 건물 사진 왼쪽, 세 줄 문장 오른쪽
       ========================================================== */
    #about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
           grid-template-rows:auto auto 1fr;
           column-gap:clamp(48px,4.6vw,80px); align-content:start;}
    #about .sec-head{grid-column:1 / -1; grid-row:1;}
    #about .plate{grid-column:1; grid-row:2 / span 2; margin:0; align-self:start;
                  border-radius:var(--r-m); box-shadow:none;}
    #about .keypoints{grid-column:2; grid-row:2; margin:0 0 28px;}
    #about .cta{grid-column:2; grid-row:3; justify-self:start; align-self:start;}
    #about .keypoints li{font-size:20px; padding:22px 0; align-items:flex-start;}
    #about .keypoints li::before{margin-top:12px;}
    #about .keypoints i{display:block; font-style:normal; font-size:16px;
                        font-weight:400; color:var(--ink-faint);
                        line-height:1.65; margin-top:7px; max-width:28em;}

    /* ==========================================================
       3 · 4. 몬테소리 / AK : 전면 사진. 둘은 한 쌍이라 같은 구조.
       ========================================================== */
    .panel{min-height:min(88dvh, 780px);}
    /* 패널이 커지면서 제목이 위로 올라가 스크림이 얇은 자리에 걸린다 */
    .panel .scrim{background:linear-gradient(to top,
      rgba(11,20,8,.94) 0%, rgba(11,20,8,.88) 30%, rgba(11,20,8,.71) 52%,
      rgba(11,20,8,.36) 74%, rgba(11,20,8,.08) 100%);}
    .panel-in{padding-left:max(var(--pad), calc((100% - var(--shell))/2));
              padding-right:max(var(--pad), calc((100% - var(--shell))/2));
              padding-bottom:clamp(72px,6vw,96px); max-width:none;}
    .panel-in > *{max-width:none;}

    /* ==========================================================
       5. 누리 · 숲 : 두 장짜리 카드
       ========================================================== */
    .prog{gap:clamp(24px,2.4vw,36px);}
    .card > img{aspect-ratio:3/2;}
    .card-body{padding:30px 30px 32px;}
    .card h3{font-size:25px; margin-bottom:12px;}
    .card p{font-size:16.5px;}

    /* ==========================================================
       6. 교육환경 : 두 사진을 어긋나게 놓는다.
       나란히 놓으면 앞의 카드 격자와 같은 그림이 된다.
       ========================================================== */
    .places{display:grid; grid-template-columns:1fr 1fr;
            column-gap:clamp(36px,3.4vw,60px); border-top:none;}
    .places li{border-bottom:none; border-top:1px solid var(--line); padding-top:24px;}
    .places a{display:block; padding:0; margin:0; border-radius:0;}
    .places a:hover{background:none;}
    .places a:hover h3{color:var(--green-800);}
    .places .shot{border-radius:var(--r-m); margin-bottom:20px;}
    .places img{aspect-ratio:16/9; border-radius:var(--r-m);}
    .places h3{font-size:25px; margin-bottom:9px;
               transition:color .2s var(--glide);}
    .places p{font-size:17px; max-width:26em; margin-bottom:12px;}

    /* ==========================================================
       7. 갤러리 : 오른쪽 화면 끝으로 흘려보낸다.
       더 있다는 것을 잘라진 사진이 알려준다.
       ========================================================== */
    #gallery{padding-right:0; overflow:hidden;}
    #gallery .sec-head{padding-right:max(var(--pad), calc(100% - var(--shell)));
                       display:grid; grid-template-columns:1fr auto; align-items:end;}
    #gallery .sec-head h2, #gallery .sec-head p{grid-column:1;}
    .rail-nav{grid-column:2; grid-row:1 / span 2; display:flex; align-self:end;}
    #gallery > div:last-child{padding-right:max(var(--pad), calc(100% - var(--shell)));}
    .rail{gap:22px; margin:0; padding:0 0 10px;}
    .rail li{flex-basis:clamp(280px, 25%, 360px);}

    /* ==========================================================
       8. 소식 : 두 개의 테두리 판
       ========================================================== */
    .panels{gap:clamp(20px,2vw,28px);}
    .box{padding:34px 32px 32px;}

    /* ==========================================================
       9. 후기 : 하나를 크게, 둘을 작게.
       같은 크기 카드 셋은 어느 사이트에나 있다.
       ========================================================== */
    .quotes{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
            grid-template-rows:auto auto; gap:clamp(18px,1.8vw,26px);}
    .quote:first-child{grid-row:1 / span 2; display:flex;
                       flex-direction:column; justify-content:center;
                       padding:clamp(34px,3vw,46px);}
    .quote:first-child p{font-size:22px; line-height:1.66;}

    /* ==========================================================
       10. 입학 : 사진 위가 아니라 짙은 초록 판 위에 올린다.
       상담으로 유도하는 자리라 버튼이 사진과 싸우면 안 된다.
       ========================================================== */
    #admission{
      min-height:0; display:grid; align-items:stretch;
      background:var(--green-900); overflow:hidden;
      grid-template-columns:
        max(var(--pad), calc((100% - var(--shell))/2))
        minmax(0, 1fr)
        minmax(0, .88fr);
    }
    #admission picture{grid-area:1/3; position:relative; inset:auto;
                       width:100%; height:100%; overflow:hidden; min-height:560px;}
    #admission img{position:absolute; inset:0; object-position:50% 20%;}
    #admission .scrim{display:none;}
    #admission .panel-in{
      grid-area:1/2; max-width:none;
      padding:clamp(88px,7vw,116px) clamp(44px,3.6vw,68px) clamp(88px,7vw,116px) 0;
      display:flex; flex-direction:column; justify-content:center;
      align-items:flex-start;
    }
    #admission .eyebrow-light{background:rgba(255,255,255,.1);
                              border-color:rgba(255,255,255,.3);}
    #admission .cta-row{max-width:none; align-self:stretch;}
    #admission .panel-in .cta-line-light{max-width:none;}

    /* ---------- 푸터 ---------- */
    footer{font-size:16.5px; padding:76px var(--pad) 36px;
           padding-left:max(var(--pad), calc((100% - var(--shell))/2));
           padding-right:max(var(--pad), calc((100% - var(--shell))/2));
           display:grid; grid-template-columns:1fr auto; column-gap:64px;
           align-items:start;}
    .foot-logo{grid-column:1; grid-row:1;}
    .foot-addr{grid-column:1; grid-row:2; line-height:1.9;}
    .foot-cta{grid-column:1; grid-row:3; margin-top:24px;}
    .foot-links{grid-column:2; grid-row:1 / span 3; display:flex; flex-wrap:wrap;
                justify-content:flex-end; gap:0 28px; margin:0; max-width:520px;}
    .foot-cta a{font-size:16px; min-height:48px; padding:0 20px;}
    .foot-bottom{grid-column:1 / -1; margin-top:40px; font-size:15px;
                 display:flex; flex-wrap:wrap; align-items:center;
                 justify-content:space-between; gap:0 28px;}
    .foot-note{width:100%;}
  }

  /* ===========================================================
     하위 페이지 공용 부품.
     본문을 읽는 페이지라 큰 사진 대신 글머리로 시작한다.
     =========================================================== */
  .crumb{font-size:14.5px; color:var(--ink-faint);
         display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
  .crumb a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
           min-height:44px; display:inline-flex; align-items:center;}
  .crumb a:hover{color:var(--green-800);}

  /* 하위 페이지 머리. 메인의 사진 칸과 같은 방식이되 높이를 낮춘다 */
  .panel-page{min-height:62dvh;}
  .panel-page .crumb{margin-bottom:6px; color:rgba(255,255,255,.72);}
  .panel-page .crumb a{color:rgba(255,255,255,.82);}
  .panel-page .crumb a:hover{color:#fff;}
  .panel-page h1{font-size:38px; line-height:1.14; letter-spacing:-.035em;
                 color:#fff; margin:12px 0 14px;}
  .panel-page h1 em{color:var(--green-300);}
  .panel-page .lead{font-size:17.5px; color:rgba(255,255,255,.88);
                    line-height:1.75; max-width:32em;}

  .pagehead{padding-top:14px;}
  .pagehead h1{font-size:38px; line-height:1.16; letter-spacing:-.035em; margin:16px 0 16px;}
  .pagehead .lead{font-size:17px; color:var(--ink-soft); line-height:1.78; max-width:34em;}

  /* 한 문단짜리 도입글. 본문과 구분되게 종이 위에 올린다 */
  .callout{background:var(--paper); border:1px solid var(--line);
           border-radius:var(--r-m); padding:26px 22px; box-shadow:var(--lift-sm);}
  .callout h2{font-size:22px; letter-spacing:-.025em; margin-bottom:12px;}
  .callout p{font-size:16px; color:var(--ink-soft); line-height:1.85;}

  /* 번호가 있는 항목 목록. 순서가 뜻을 가지므로 좌우로 번갈지 않고 한 결로 간다 */
  .areas{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
  .areas > li{border-bottom:1px solid var(--line); padding:24px 0; list-style:none;}
  /* 표제와 본문이 붙어 있어 구분이 없던 것을 선으로 끊는다 */
  .area-head{display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;
             padding-bottom:13px; margin-bottom:16px;
             border-bottom:1px solid var(--line);}
  .area-no{font-family:'Recipekorea',sans-serif; font-size:32px; line-height:.9;
           color:var(--green-500); flex:none;}
  .areas h3{font-size:24px; letter-spacing:-.025em; margin:0;}
  .area-en{font-size:12.5px; font-weight:800; letter-spacing:.18em;
           color:var(--accent); margin-left:auto;}
  .areas img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
             border-radius:var(--r-s); margin-bottom:18px;}
  .areas p{font-size:16.5px; color:var(--ink-soft); line-height:1.78;}
  .gear{margin-top:18px; background:var(--green-100); border-radius:var(--r-s);
        padding:15px 17px; font-size:15.5px; color:var(--ink-soft); line-height:1.7;}
  .gear b{display:block; font-size:12px; font-weight:800; letter-spacing:.14em;
          color:var(--green-800); margin-bottom:5px;}

  /* blockquote 는 브라우저 기본 좌우 여백이 40px 이라 전면으로 안 깔린다 */
  /* 새알곡의 문장과 그 뿌리가 된 원문을 한 칸에 둔다 */
  .principle{background:var(--green-900); color:#fff; margin:0;
             padding:50px var(--pad); position:relative; z-index:2;}
  .principle .say{font-family:'Recipekorea',sans-serif; font-weight:400;
                  font-size:30px; line-height:1.32; letter-spacing:-.03em;}
  .principle .say em{color:var(--green-300);}
  .principle .from{margin-top:34px; padding-top:26px;
                   border-top:1px solid rgba(255,255,255,.22);}
  .principle .from p{font-size:18.5px; line-height:1.6;
                     color:rgba(255,255,255,.9); margin-bottom:9px;}
  .principle .from span{font-size:15.5px; color:rgba(255,255,255,.7);}

  .quoteband{background:var(--green-900); color:#fff; margin:0;
             padding:52px var(--pad); position:relative; z-index:2;}
  .quoteband p{font-family:'Recipekorea',sans-serif; font-weight:400; font-size:29px;
               line-height:1.36; letter-spacing:-.03em; margin-bottom:18px;}
  .quoteband span{font-size:14.5px; color:rgba(255,255,255,.76);}

  .duo{display:grid; gap:20px; margin:0; padding:0; list-style:none;}
  .duo figure{margin:0;}
  .duo img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
           border-radius:var(--r-s);}
  .duo figcaption{font-size:15.5px; color:var(--ink-soft); line-height:1.68; margin-top:13px;}

  .linklist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
  .linklist li{border-bottom:1px solid var(--line); list-style:none;}
  .linklist a{display:flex; align-items:center; justify-content:space-between; gap:16px;
              padding:20px 10px; margin:0 -10px; border-radius:var(--r-s);
              font-size:19px; font-weight:600; min-height:58px;
              transition:background .2s var(--glide), color .2s var(--glide),
                         transform .12s var(--glide);}
  .linklist a:hover{background:var(--green-100); color:var(--green-800);}
  .linklist a:active{transform:scale(.98);}
  .linklist svg{width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.8;
                fill:none; stroke-linecap:round; stroke-linejoin:round;}

  /* 페이지 끝 상담 안내. 메인의 입학 섹션과 같은 초록 판 */
  .contact{background:var(--green-900); color:#fff;
           padding:56px var(--pad) 60px; position:relative; z-index:2;}
  .contact h2{font-size:30px; line-height:1.2; letter-spacing:-.03em; color:#fff; margin-bottom:14px;}
  .contact h2 em{color:var(--green-300);}
  .contact > p{font-size:16px; color:rgba(255,255,255,.86); line-height:1.78;
               margin-bottom:26px; max-width:30em;}
  .contact :focus-visible{outline-color:#fff;}

  @media (min-width:1000px){
    .pagehead{padding-top:40px; padding-bottom:clamp(60px,5vw,84px);}
    .crumb{font-size:16px;}
    .pagehead h1{font-size:clamp(46px,4vw,60px); margin:18px 0 20px;}
    .pagehead .lead{font-size:19px;}

    .callout{padding:clamp(34px,3vw,46px);}
    .callout h2{font-size:27px; margin-bottom:14px;}
    .callout p{font-size:18px; max-width:44em;}

    .panel-page{min-height:min(66dvh,560px);}
    .panel-page h1{font-size:clamp(46px,4vw,62px); margin:16px 0 18px;}
    .panel-page .lead{font-size:20.5px; line-height:1.72;}

    /* 읽는 페이지라 랜딩만큼 넉넉할 필요가 없다 */
    .sub .sec{padding-top:clamp(68px,5.2vw,94px);
              padding-bottom:clamp(72px,5.6vw,100px);}
    .sub .sec-head{margin-bottom:clamp(32px,2.7vw,44px);}
    .sub .sec-head p{font-size:19px; max-width:36em;}
    .sub .sec-head h2{margin-bottom:15px;}
    .sub .keypoints li{font-size:17px; padding:22px 0;}
    .sub .keypoints li::before{width:10px; height:10px; margin-top:14px;}
    .sub .keypoints b{font-size:24px; margin-bottom:5px;}
    .sub .keypoints i{font-size:17px; margin-top:0;}
    .areas > li{display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr);
                column-gap:clamp(40px,3.6vw,64px); padding:32px 0; align-items:start;}
    .areas img{margin-bottom:0;}
    .area-head{padding-bottom:15px; margin-bottom:18px;}
    .area-no{font-size:40px;}
    .areas h3{font-size:29px;}
    .gear{padding:19px 22px; font-size:17px;}
    .gear b{font-size:12.5px; margin-bottom:7px;}
    .areas p{font-size:18.5px; line-height:1.78; max-width:34em;}
    .area-en{font-size:13.5px;}
    .gear{font-size:15.5px; margin-top:18px;}

    .principle{padding:clamp(62px,5vw,86px) 0;
               padding-left:max(var(--pad), calc((100% - var(--shell))/2));
               padding-right:max(var(--pad), calc((100% - var(--shell))/2));}
    .principle .say{font-size:clamp(34px,3.2vw,46px); max-width:17em;}
    .principle .from{margin-top:44px; padding-top:32px; max-width:40em;}
    .principle .from p{font-size:21px;}
    .principle .from span{font-size:17px;}

    .quoteband{padding:clamp(84px,7vw,116px) 0;
               padding-left:max(var(--pad), calc((100% - var(--shell))/2));
               padding-right:max(var(--pad), calc((100% - var(--shell))/2));}
    .quoteband p{font-size:clamp(34px,3.2vw,46px); max-width:16em;}
    .quoteband span{font-size:16px;}

    .duo{grid-template-columns:1fr 1fr; gap:clamp(24px,2.4vw,36px);}
    .duo figcaption{font-size:17.5px;}

    .linklist a{padding:27px 12px; font-size:23px;}

    .contact{padding:clamp(84px,7vw,112px) 0 clamp(88px,7.4vw,118px);
             padding-left:max(var(--pad), calc((100% - var(--shell))/2));
             padding-right:max(var(--pad), calc((100% - var(--shell))/2));}
    .contact h2{font-size:clamp(34px,3.2vw,44px); margin-bottom:18px;}
    .contact > p{font-size:19px; margin-bottom:34px;}
    .contact .cta-row{max-width:480px;}
    .contact .cta-line-light{max-width:480px;}
  }

  /* ===========================================================
     한 영역에 사진이 여러 장 붙는 페이지 (누리과정 등)
     =========================================================== */
  .area{border-top:1px solid var(--line); padding-top:26px;}
  /* 목록이 시작되는 자리는 항목 사이보다 진한 선으로 끊는다.
     그냥 이어지면 섹션 설명과 첫 항목의 경계가 안 보인다 */
  .area:first-of-type{border-top:2px solid var(--ink); padding-top:30px;}
  .area + .area{margin-top:30px;}
  .area > p{font-size:16.5px; color:var(--ink-soft); line-height:1.78; max-width:34em;}

  .shots{display:grid; grid-template-columns:1fr 1fr; gap:16px 12px;
         list-style:none; margin:20px 0 0; padding:0;}
  .shots li{list-style:none;}
  /* 세 장짜리는 첫 장을 전체 폭으로 둬서 홀수가 어색하지 않게 */
  .shots.three li:first-child{grid-column:1 / -1;}
  .shots figure{margin:0;}
  .shots img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
             border-radius:var(--r-s);}
  .shots figcaption{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:9px;}

  .ages{display:grid; gap:12px; list-style:none; margin:0; padding:0;}
  .ages li{background:var(--paper); border:1px solid var(--line);
           border-radius:var(--r-m); padding:22px; box-shadow:var(--lift-sm);
           list-style:none;}
  .ages b{display:block; font-family:'Recipekorea',sans-serif; font-weight:400;
          font-size:22px; letter-spacing:-.02em; color:var(--green-800); margin-bottom:7px;}
  .ages span{font-size:15.5px; color:var(--ink-soft); line-height:1.7;}

  @media (min-width:1000px){
    .area{padding-top:36px;}
    .area:first-of-type{padding-top:40px;}
    .area + .area{margin-top:40px;}
    .area > p{font-size:18.5px; line-height:1.78; max-width:36em;}
    .shots{grid-template-columns:repeat(2,1fr); gap:clamp(20px,2vw,30px); margin-top:28px;}
    .shots.three{grid-template-columns:repeat(3,1fr);}
    .shots.three li:first-child{grid-column:auto;}
    .shots figcaption{font-size:16px; margin-top:12px;}

    .ages{grid-template-columns:repeat(3,1fr); gap:clamp(18px,1.8vw,26px);}
    .ages li{padding:30px 28px;}
    .ages b{font-size:26px; margin-bottom:9px;}
    .ages span{font-size:17px;}
  }

  /* ===========================================================
     숲 사진 묶음 : 한 장을 세로로 길게 두고 나머지가 채운다
     =========================================================== */
  .fgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;
         list-style:none; margin:26px 0 0; padding:0;}
  .fgrid li{list-style:none; margin:0;}
  .fgrid li:first-child{grid-row:span 2;}
  .fgrid figure{margin:0; height:100%;}
  .fgrid li:not(:first-child) figure{aspect-ratio:4/3;}
  .fgrid img{width:100%; height:100%; object-fit:cover;
             border-radius:var(--r-s); display:block;}

  /* 반년에 걸친 기록 */
  .record{display:grid; gap:22px;}
  .record img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
              border-radius:var(--r-m); display:block;}
  .record p{font-size:16.5px; color:var(--ink-soft); line-height:1.8;}
  .record .note{font-size:14.5px; color:var(--ink-faint); margin-top:14px;
                padding-top:14px; border-top:1px solid var(--line);}

  @media (min-width:1000px){
    .fgrid{grid-template-columns:repeat(3,1fr); gap:clamp(18px,1.8vw,26px); margin-top:34px;}
    .record{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
            column-gap:clamp(44px,4vw,72px); align-items:center;}
    .record p{font-size:18.5px;}
    .record .note{font-size:16px; margin-top:20px; padding-top:18px;}
  }

  /* ===========================================================
     두 방식을 나란히 놓고 비교 (O · X 이모지 대신 색과 무게로)
     =========================================================== */
  .compare{display:grid; gap:14px; list-style:none; margin:0; padding:0;}
  .compare li{list-style:none; border-radius:var(--r-m); padding:24px 22px;
              border:1px solid var(--line); background:var(--paper);}
  .compare li.no{background:transparent; border-style:dashed;}
  .compare b{display:block; font-family:'Recipekorea',sans-serif; font-weight:400;
             font-size:21px; letter-spacing:-.022em; margin-bottom:9px; color:var(--ink-faint);}
  .compare li.yes{background:var(--green-100); border-color:transparent;}
  .compare li.yes b{color:var(--green-800);}
  .compare p{font-size:16px; color:var(--ink-soft); line-height:1.78;}
  .compare li.yes p{color:var(--ink);}

  @media (min-width:1000px){
    .compare{grid-template-columns:1fr 1fr; gap:clamp(20px,2vw,30px);}
    .compare li{padding:32px 30px;}
    .compare b{font-size:25px; margin-bottom:12px;}
    .compare p{font-size:17.5px;}
  }

  /* ===========================================================
     사진을 눌러 크게 보기.
     격자에서는 다 보이되, 자세히 보고 싶을 때 확대한다.
     =========================================================== */
  .zoom{cursor:zoom-in; display:block; width:100%; padding:0; border:0;
        background:none; font:inherit; text-align:left;
        border-radius:var(--r-s); overflow:hidden;}
  @media (hover:hover){
    .zoom img{transition:transform .55s var(--glide);}
    .zoom:hover img{transform:scale(1.045);}
  }

  .lb{position:fixed; inset:0; z-index:var(--z-modal); display:none;
      background:rgba(11,20,8,.94); backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      flex-direction:column; padding:14px;}
  .lb.open{display:flex;}
  .lb-top{display:flex; align-items:center; justify-content:space-between;
          gap:14px; color:#fff; min-height:48px;}
  .lb-top b{font-family:'Recipekorea',sans-serif; font-weight:400;
            font-size:18px; letter-spacing:-.02em;}
  .lb-top .n{font-size:14px; color:rgba(255,255,255,.62);
             font-variant-numeric:tabular-nums; margin-left:9px;}
  .lb-x{width:48px; height:48px; flex:none; padding:0; cursor:pointer;
        border:1px solid rgba(255,255,255,.3); border-radius:999px;
        background:none; color:#fff; font-size:17px; line-height:1;
        display:flex; align-items:center; justify-content:center;
        transition:background .2s var(--glide), border-color .2s var(--glide);}
  .lb-x:hover{background:rgba(255,255,255,.14); border-color:#fff;}
  .lb-stage{flex:1; min-height:0; display:flex; align-items:center;
            justify-content:center; gap:10px; position:relative;}
  .lb-stage img{max-width:100%; max-height:100%; width:auto; height:auto;
                object-fit:contain; border-radius:var(--r-s);}
  .lb-nav{width:52px; height:52px; flex:none; padding:0; cursor:pointer;
          border:1px solid rgba(255,255,255,.3); border-radius:999px;
          background:rgba(11,20,8,.5); color:#fff;
          display:flex; align-items:center; justify-content:center;
          transition:background .2s var(--glide), border-color .2s var(--glide),
                     opacity .2s var(--glide);}
  .lb-nav svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.7;
              fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .lb-nav:hover{background:rgba(255,255,255,.16); border-color:#fff;}
  .lb-nav[disabled]{opacity:.3; cursor:default;}
  .lb-cap{color:rgba(255,255,255,.88); font-size:14.5px; line-height:1.6;
          text-align:center; margin:12px auto 4px; max-width:44em;}

  @media (min-width:1000px){
    .lb{padding:22px 26px;}
    .lb-top b{font-size:21px;}
    .lb-top .n{font-size:15.5px;}
    .lb-stage{gap:20px;}
    .lb-cap{font-size:16.5px; margin-top:16px;}
  }

  /* ===========================================================
     갤러리. 사진을 갈래별로 골라 볼 수 있게 둔 자리.
     격자는 .shots 를 그대로 쓰되 칸 수만 고르게 맞춘다.
     =========================================================== */
  .chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 18px; padding:0;}
  .chips li{list-style:none;}
  .chips button{font:inherit; font-size:15px; font-weight:600; cursor:pointer;
                padding:10px 18px; min-height:44px; border-radius:999px;
                border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
                transition:background .2s var(--glide), color .2s var(--glide),
                           border-color .2s var(--glide), transform .12s var(--glide);}
  .chips button:hover{background:var(--green-100); color:var(--green-800);
                      border-color:var(--green-500);}
  .chips button:active{transform:scale(.98);}
  .chips button[aria-pressed="true"]{background:var(--green-800); border-color:var(--green-800);
                                     color:#fff;}
  .gal-count{font-size:14.5px; color:var(--ink-soft); margin:0 0 16px;}

  /* 설명을 뗀 자리라 가로세로 틈을 같게 둬 격자를 고르게 둔다 */
  .gal{grid-template-columns:1fr 1fr; gap:12px; margin-top:0;}
  .gal li:first-child{grid-column:auto;}
  .gal li[hidden]{display:none;}
  .gal .zoom{display:block;}

  @media (min-width:1000px){
    .chips{gap:10px; margin-bottom:26px;}
    .chips button{font-size:16.5px; padding:12px 24px;}
    .gal-count{font-size:16px; margin-bottom:22px;}
    .gal{grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.4vw,20px); margin-top:0;}
  }

  /* 좁은 화면에서는 화살표를 나란히 둘 자리가 없다.
     사진 위에 겹쳐 올려 사진이 쓸 수 있는 폭을 다 쓰게 한다. */
  .lb-stage img{min-width:0;}
  @media (max-width:699px){
    .lb-stage{gap:0;}
    .lb-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
            width:46px; height:46px; background:rgba(11,20,8,.62);}
    .lb-prev{left:2px;}
    .lb-next{right:2px;}
  }

  /* ===========================================================
     사진 없이 제목만 두는 페이지 머리.
     게시판이나 후기처럼 대문 사진이 오히려 방해가 되는 자리에 쓴다.
     =========================================================== */
  .page-head{padding:26px var(--pad) 36px; background:var(--cream);
             border-bottom:1px solid var(--line);}
  .page-head .crumb{margin-bottom:12px;}
  .page-head h1{font-size:34px; line-height:1.2; letter-spacing:-.032em; margin:0 0 14px;}
  .page-head .lead{font-size:16.5px; color:var(--ink-soft); line-height:1.78;
                   max-width:34em; margin:0;}

  /* ---------- 게시판 ---------- */
  .board{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink);}
  .board > li{border-bottom:1px solid var(--line); list-style:none;}
  .post summary{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 14px;
                cursor:pointer; padding:16px 4px; min-height:44px; list-style:none;
                transition:background .2s var(--glide);}
  .post summary::-webkit-details-marker{display:none;}
  .post summary::marker{content:"";}
  .post summary:hover{background:var(--green-100);}
  .post[open] summary{background:var(--green-100);}
  .post .no{display:none; font-family:'Recipekorea',sans-serif; font-size:16px;
            color:var(--green-800); flex:none; width:2.2em;}
  .post .ti{flex:1 1 100%; font-size:16px; font-weight:600; line-height:1.55;}
  .post .dt{flex:none; font-size:13.5px; color:var(--ink-faint); margin-top:7px;}
  .post .new{display:inline-block; margin-left:8px; font-size:10px; font-weight:800;
             letter-spacing:.1em; color:#fff; background:var(--green-800);
             border-radius:999px; padding:3px 8px; vertical-align:2px;}
  .post-body{padding:2px 4px 22px; font-size:15.5px; color:var(--ink-soft); line-height:1.8;}
  .post-body p{margin:0 0 10px;}
  .post-body p:last-child{margin-bottom:0;}

  .notebox{margin:26px 0 0; padding:16px 18px; background:var(--green-100);
        border-radius:var(--r-s); font-size:14.5px; color:var(--ink-soft); line-height:1.72;}
  .notebox b{color:var(--green-800);}

  /* ---------- 후기 ---------- */
  .tcards{display:grid; gap:14px; list-style:none; margin:0; padding:0;}
  .tcards > li{list-style:none;}
  .tcard{height:100%; background:var(--paper); border:1px solid var(--line);
         border-radius:var(--r-m); padding:24px 22px; box-shadow:var(--lift-sm);}
  .tcard blockquote{margin:0 0 16px; font-size:16.5px; line-height:1.8; color:var(--ink);}
  .tcard .who{font-size:14.5px; color:var(--ink-faint);}

  @media (min-width:760px){
    .post .no{display:block;}
    .post .ti{flex:1 1 auto;}
    .post .dt{margin-top:0;}
    .tcards{grid-template-columns:1fr 1fr;}
  }

  @media (min-width:1000px){
    .page-head{padding-top:40px; padding-bottom:56px;
               padding-left:max(var(--pad), calc((100% - var(--shell))/2));
               padding-right:max(var(--pad), calc((100% - var(--shell))/2));}
    .page-head h1{font-size:54px; margin-bottom:18px;}
    .page-head .lead{font-size:19px; max-width:38em;}

    .post summary{padding:22px 8px; gap:0 20px;}
    .post .no{font-size:18px;}
    .post .ti{font-size:18.5px;}
    .post .dt{font-size:15px;}
    .post-body{font-size:17px; line-height:1.85; padding:2px 8px 30px; max-width:52em;}
    .notebox{font-size:16px; padding:20px 22px; margin-top:32px;}

    .tcards{grid-template-columns:repeat(3,1fr); gap:clamp(18px,1.8vw,26px);}
    .tcard{padding:32px 30px;}
    .tcard blockquote{font-size:17.5px;}
    .tcard .who{font-size:15.5px;}
  }

  /* 제목만 있는 머리 다음에는 큰 여백이 필요 없다. 바로 본문으로 잇는다 */
  .page-head + .sec{padding-top:38px;}
  @media (min-width:1000px){
    .page-head + .sec{padding-top:clamp(54px,4.4vw,74px);}
    /* 게시판은 눈이 한 줄을 따라갈 수 있을 만큼만 넓힌다 */
    .board, .board + .notebox{max-width:900px;}
  }

  /* ===========================================================
     입학안내. 절차 · 상담 신청 · 오시는 길 · 자주 묻는 질문.
     =========================================================== */
  .steps.row li{flex-direction:column; gap:11px;}

  .adm{display:grid; gap:26px;}
  .adm h3{font-size:21px; letter-spacing:-.025em; margin:0 0 16px;}

  .info{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--line);}
  .info li{border-bottom:1px solid var(--line); padding:14px 2px; display:flex; gap:14px;
           font-size:15.5px; color:var(--ink-soft); line-height:1.7; list-style:none;}
  .info b{flex:none; width:3.6em; color:var(--ink); font-weight:700;}
  .info a{text-decoration:underline; text-underline-offset:3px;}

  .map{border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line);
       aspect-ratio:4/3; background:var(--green-100);}
  .map iframe{width:100%; height:100%; border:0; display:block;}

  .formcard{background:var(--paper); border:1px solid var(--line);
            border-radius:var(--r-m); padding:26px 22px; box-shadow:var(--lift-sm);
            margin-bottom:26px;}
  .formcard h3{margin-bottom:10px;}
  .formcard p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin:0 0 18px;}

  /* 신청서로 보내는 단추. 버튼이 아니라 링크라서 가운데 맞춤을 직접 준다 */
  .send{display:flex; align-items:center; justify-content:center; gap:10px;
        font:inherit; font-size:17px; font-weight:700; cursor:pointer; width:100%;
        min-height:56px; border:0; border-radius:999px; text-decoration:none;
        background:var(--green-800); color:#fff;
        transition:background .2s var(--glide), transform .12s var(--glide);}
  .send:hover{background:var(--green-900); color:#fff;}
  .send:active{transform:scale(.98);}

  .form-msg{font-size:15px; line-height:1.7; color:var(--green-800); margin:14px 0 0;}
  .form-msg:empty{display:none;}

  @media (min-width:760px){
    .steps.row{grid-template-columns:1fr 1fr; gap:20px;}
  }
  @media (min-width:1000px){
    .steps.row{grid-template-columns:repeat(4,1fr); gap:clamp(20px,2vw,30px);}
    .steps.row li{font-size:17px; line-height:1.75;}

    /* 넓은 화면에서는 글과 단추를 좌우로 눕힌다. 세로로 세우면 오른쪽이 빈다 */
    .formcard{display:grid; grid-template-columns:minmax(0,1fr) 300px;
              column-gap:clamp(32px,3vw,56px); align-items:center;
              padding:34px 36px; margin-bottom:clamp(30px,3vw,46px);}
    .formcard-txt{grid-column:1;}
    .formcard h3{margin-bottom:12px;}
    .formcard p{font-size:17px; margin:0; max-width:36em;}
    .formcard .send{grid-column:2; grid-row:1;}
    .formcard .form-msg{grid-column:1 / -1; margin-top:20px;}

    .adm{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
         gap:clamp(28px,3vw,52px); align-items:start;}
    .adm h3{font-size:25px; margin-bottom:20px;}
    .info li{font-size:17px; padding:16px 2px;}
    .info{margin-bottom:0;}
  }

  /* 목록 안의 전화번호는 그 자체로 누르는 자리다. 손가락 크기를 준다 */
  .info a{display:inline-flex; align-items:center; min-height:44px;}

  /* 빵 부스러기는 스크림이 옅은 자리에 놓인다. 간판 사진처럼 밝은 사진 위에서는
     흰 글씨가 묻히므로, 글자마다 그림자를 깔아 바탕과 떼어 놓는다 */
  .panel-page .crumb{color:#fff;
    text-shadow:0 1px 2px rgba(11,20,8,.75), 0 0 10px rgba(11,20,8,.6);}
  .panel-page .crumb a{color:#fff;}

  /* hidden 은 어떤 display 규칙보다 세야 한다.
     .cta 처럼 display 를 지정하는 부품에 hidden 을 걸면 그냥 무시되기 때문이다 */
  [hidden]{display:none !important;}

  /* ===========================================================
     후기. 흰 상자에 글만 있으면 읽히지 않는다.
     원의 글꼴로 큰 따옴표를 깔고, 첫 장만 연한 초록으로 눕혀
     시선이 앉을 자리를 만든다. 메인과 후기 페이지가 같은 규칙을 쓴다.
     =========================================================== */
  .quote, .tcard{position:relative; overflow:hidden;}
  .quote::before, .tcard::before{
    content:"”"; position:absolute; top:10px; right:14px;
    font-family:'Recipekorea',sans-serif; font-size:118px;
    /* 이 글꼴은 위아래 여백이 1.3em 이다. 줄 높이를 그만큼 줘야
       따옴표 잉크가 제 상자 안에 들어오고 카드 위로 잘려 나가지 않는다 */
    line-height:1.3;
    color:var(--green-100); pointer-events:none; z-index:0;
  }
  .quote > *, .tcard > *{position:relative; z-index:1;}

  .quote .who, .tcard .who{
    display:flex; align-items:center; gap:9px; color:var(--ink-soft);
  }
  .quote .who::before, .tcard .who::before{
    content:""; flex:none; width:20px; height:2px; border-radius:2px;
    background:var(--green-500);
  }

  /* 첫 장은 바탕을 눕혀 무리에서 한 장을 앞으로 꺼낸다 */
  .quotes .quote:first-child, .tcards > li:first-child .tcard{
    background:var(--green-100); border-color:var(--green-300);
  }
  .quotes .quote:first-child::before, .tcards > li:first-child .tcard::before{
    color:var(--paper);
  }

  @media (min-width:1000px){
    .quote::before, .tcard::before{font-size:146px; top:12px; right:18px;}
    .quotes .quote:first-child::before{font-size:200px; top:10px; right:24px;}
  }

  /* 좁은 폰에서 '카카오톡 상담' 이 두 줄로 접힌다. 그럴 땐 위아래로 쌓는다 */
  .cta-stack{display:grid; gap:10px;}
  .cta-stack .cta{width:100%;}
  @media (min-width:520px){ .cta-stack{grid-template-columns:1fr 1fr;} }

  /* 후기가 세 장뿐이라 그냥 끝나면 뚝 끊긴다.
     카드를 좀 더 키우고, 아래에 한 줄을 두어 다음 칸으로 넘어가는 계단을 만든다 */
  .tcard{padding:28px 24px;}
  .tcard blockquote{font-size:17px; line-height:1.85;}
  .sayend{margin-top:34px; padding-top:30px; text-align:center; position:relative;}
  .sayend::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
                  width:56px; height:3px; border-radius:3px; background:var(--green-300);}
  .sayend p{margin:0; font-size:15.5px; line-height:1.8; color:var(--ink-soft);}

  /* 후기 끝의 상담 칸은 사진을 크게 펼칠 자리가 아니다. 글 높이만큼만 쓴다 */
  .panel-slim{min-height:0;}
  .panel-slim .panel-in{padding-top:40px; padding-bottom:40px;}

  @media (min-width:1000px){
    .tcard{padding:34px 30px;}
    .tcard blockquote{font-size:18px;}
    .sayend{margin-top:46px; padding-top:38px;}
    .sayend p{font-size:17.5px;}

    #admission.panel-slim picture{min-height:0;}
    #admission.panel-slim .panel-in{padding-top:clamp(52px,4.2vw,68px);
                                    padding-bottom:clamp(52px,4.2vw,68px);
                                    padding-right:clamp(40px,3.2vw,60px);}
    #admission.panel-slim h2{font-size:clamp(30px,2.4vw,38px);}
  }

  /* ===========================================================
     입학 절차. 번호 네 개만 늘어놓으면 어디까지 왔는지 읽히지 않는다.
     칸마다 카드를 씌우고, 위 띠 색을 단계마다 짙게 해서
     1에서 4로 갈수록 가까워지는 것이 눈에 보이게 한다.
     =========================================================== */
  .steps.row{gap:12px;}
  .steps.row li{
    position:relative; overflow:hidden; gap:9px;
    background:var(--cream); border:1px solid var(--line);
    border-radius:var(--r-m); padding:26px 20px 24px;
  }
  .steps.row li::after{content:""; position:absolute; left:0; right:0; top:0; height:5px;}
  .steps.row li:nth-child(1)::after{background:var(--green-300);}
  .steps.row li:nth-child(2)::after{background:var(--green-500);}
  .steps.row li:nth-child(3)::after{background:var(--green-800);}
  .steps.row li:nth-child(4)::after{background:var(--green-900);}

  /* 작은 동그라미 대신 원의 글꼴로 크게. 숫자가 먼저 눈에 들어와야 한다 */
  .steps.row .no{
    width:auto; height:auto; flex:none; display:block;
    background:none; border-radius:0;
    font-family:'Recipekorea',sans-serif; font-weight:400; font-size:30px;
    line-height:.9; letter-spacing:-.02em; color:var(--green-800);
  }
  .steps.row b{display:block; font-size:17px; letter-spacing:-.02em; margin-bottom:5px;}

  @media (min-width:760px){
    .steps.row{gap:14px;}
  }
  @media (min-width:1000px){
    .steps.row{gap:clamp(14px,1.4vw,20px);}
    .steps.row li{padding:30px 24px 28px; gap:11px;}
    .steps.row li::after{height:6px;}
    .steps.row .no{font-size:38px;}
    .steps.row b{font-size:19px;}
  }

  /* 작성자 줄을 뗐으니 마지막 문단 밑에 남는 여백을 거둔다 */
  .quote p:last-child, .tcard blockquote:last-child{margin-bottom:0;}

  /* 아직 올릴 글이 없는 자리. 빈 칸을 그냥 두지 않고 무엇을 기다리는지 말해 준다 */
  .emptybox{background:var(--green-100); border-radius:var(--r-m);
            padding:34px 24px 36px; text-align:center;}
  .emptybox-t{font-family:'Recipekorea',sans-serif; font-weight:400;
              font-size:23px; letter-spacing:-.025em; color:var(--green-800);
              margin:0 0 10px;}
  .emptybox p{font-size:15.5px; line-height:1.78; color:var(--ink-soft);
              margin:0 auto; max-width:28em;}

  .notice li.empty{cursor:default; color:var(--ink-soft); border-bottom:none;
                   justify-content:flex-start;}
  .notice li.empty:hover{background:none;}
  .notice li.empty:active{transform:none;}

  @media (min-width:1000px){
    .emptybox{padding:52px 32px 54px; max-width:900px;}
    .emptybox-t{font-size:29px; margin-bottom:13px;}
    .emptybox p{font-size:17.5px;}
  }

  /* 본문을 받쳐 주는 사진 두 장. 넓은 화면에서는 나란히 서서
     글 옆의 빈자리를 메우고, 좁은 화면에서는 위아래로 떨어진다 */
  .figpair{display:grid; gap:12px; margin:22px 0 0; list-style:none; padding:0;}
  .figpair li{list-style:none;}
  .figpair img{width:100%; height:auto; aspect-ratio:5/4; object-fit:cover;
               border-radius:var(--r-m); display:block;}
  @media (min-width:1000px){
    .figpair{grid-template-columns:1fr 1fr; gap:clamp(18px,1.8vw,26px); margin-top:30px;}
  }

  /* 로고에서 여백을 걷어냈으니 넓은 화면에서는 한 치수 더 키워도 답답하지 않다 */
  @media (min-width:900px){
    .logo img{height:56px;}
  }

  /* 사진 없이 제목만 두는 머리에서도 강조는 같은 규칙으로 */
  .page-head h1 em{color:var(--green-800);}

  /* 빈 칸에 올리는 원의 표식. 글보다 앞서지 않게 흐리게 둔다 */
  .emptybox-mark{display:block; width:72px; height:auto; margin:0 auto 16px;
                 opacity:.5;}
  @media (min-width:1000px){
    .emptybox-mark{width:92px; margin-bottom:20px;}
  }

  /* 밝은 사진용 스크림이 넓은 화면에서 뒤에 오는 .panel .scrim 에 덮이고 있었다.
     같은 세기라 순서로 정해지므로 여기서 다시 얹는다 */
  @media (min-width:1000px){
    .panel-bright .scrim{background:linear-gradient(to top,
      rgba(11,20,8,.97) 0%, rgba(11,20,8,.93) 32%, rgba(11,20,8,.80) 56%,
      rgba(11,20,8,.48) 78%, rgba(11,20,8,.14) 100%);}
  }

  /* 빵 부스러기는 스크림이 가장 옅은 자리에 놓인다. 밝은 사진 위에서는
     그림자를 더 조여 글자 획마다 바탕과 떨어지게 한다 */
  .panel-page .crumb{
    text-shadow:0 1px 2px rgba(11,20,8,.9),
                0 0 6px  rgba(11,20,8,.75),
                0 0 14px rgba(11,20,8,.5);
  }

  /* ===========================================================
     지금 시즌에만 뜨는 알림 칸 (입학설명회 신청).
     사진 대문과 흰 칸 사이에 진한 초록을 끼워 시선을 붙든다.
     시즌이 끝나면 이 규칙은 남겨두고 HTML 의 section 만 지우면 된다.
     =========================================================== */
  .briefing{
    background:var(--green-900); color:#fff; position:relative; z-index:2;
    padding:44px var(--pad) 48px; text-align:center;
    border-bottom:1px solid var(--line);
  }
  .briefing-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:800; letter-spacing:.06em;
    color:#fff; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.26); border-radius:6px;
    padding:7px 15px; margin-bottom:16px;
  }
  /* 지금 열려 있다는 표시. 조용히 깜박인다 */
  .briefing-tag::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:var(--green-300); flex:none;
    animation:blip 2.4s ease-in-out infinite;
  }
  @keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.25} }
  @media (prefers-reduced-motion:reduce){ .briefing-tag::before{animation:none} }

  .briefing h2{
    font-size:29px; line-height:1.26; letter-spacing:-.03em;
    color:#fff; margin:0 0 14px;
  }
  .briefing h2 em{color:var(--green-300);}
  .briefing p{
    font-size:16px; line-height:1.8; color:rgba(255,255,255,.88);
    margin:0 auto 24px; max-width:30em;
  }
  .briefing p b{color:#fff;}

  .briefing-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--paper); color:var(--green-900);
    font-size:17px; font-weight:800; text-decoration:none;
    border-radius:999px; padding:12px 12px 12px 26px; min-height:56px;
    transition:background .2s var(--glide), color .2s var(--glide),
               transform .12s var(--glide);
  }
  .briefing-btn:hover{background:var(--green-100); color:var(--green-900);}
  .briefing-btn:active{transform:scale(.98);}
  .briefing-btn .knob{
    width:34px; height:34px; border-radius:50%; flex:none;
    background:var(--green-800); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .briefing-btn .knob svg{
    width:17px; height:17px; stroke:currentColor; stroke-width:2;
    fill:none; stroke-linecap:round; stroke-linejoin:round;
  }
  .briefing :focus-visible{outline-color:#fff;}

  @media (min-width:1000px){
    .briefing{padding:clamp(58px,5vw,78px) var(--pad) clamp(62px,5.4vw,84px);}
    .briefing-tag{font-size:13.5px; padding:8px 17px; margin-bottom:20px;}
    .briefing h2{font-size:clamp(34px,3vw,44px); margin-bottom:18px;}
    .briefing p{font-size:18.5px; margin-bottom:30px; max-width:34em;}
    .briefing-btn{font-size:19px; min-height:62px; padding:13px 13px 13px 32px;}
    .briefing-btn .knob{width:38px; height:38px;}
  }

  /* 대문의 설명회 버튼. 흰 버튼 옆에서 구분되도록 초록으로 채운다 */
  .cta-brief{background:var(--green-800); color:#fff; border:1px solid var(--green-800);}
  .cta-brief:hover{background:var(--green-900); border-color:var(--green-900); color:#fff;}
  .cta-brief .knob{background:rgba(255,255,255,.16); color:#fff;}
  /* 대문 버튼 두 개는 좁은 폰에서 위아래로 */
  .hero-in .cta-row{display:grid; gap:10px;}
  .hero-in .cta-row .cta{width:100%;}
  @media (min-width:520px){
    .hero-in .cta-row{display:flex; flex-wrap:wrap;}
    .hero-in .cta-row .cta{width:auto;}
  }

  /* 대문 버튼이 둘이 되면서 생긴 문제 둘.
     하나, 글자가 두 줄로 접힌다. 둘, 넓은 화면에선 둘 다 초록이라 구분이 없다.
     설명회가 지금 가장 중요한 행동이므로 그쪽을 채우고 둘러보기는 테두리만 남긴다 */
  .hero-in .cta-row .cta{white-space:nowrap;}
  @media (min-width:1000px){
    .hero-in .cta-row{flex-wrap:wrap; gap:10px;}
    .hero-in .cta-row .cta-light{
      background:var(--paper); color:var(--green-900);
      box-shadow:inset 0 0 0 1.5px var(--green-800);
    }
    .hero-in .cta-row .cta-light:hover{background:var(--green-100); color:var(--green-900);}
    .hero-in .cta-row .cta-light .knob{background:var(--green-800); color:#fff;}
  }