/* 유아스토리 홈 개편 (2026-10) — 홈 전용 모양. templates/fo/index.html 의 <main id="main" class="nh"> 안에서만 먹는다.
   · 새 class 는 모두 nh- 로 시작한다. 공통 파일(style.css · ui.js)은 건드리지 않았고, style.css 의 옛 홈 규칙
     (.main-banner · .suggestion-wrap · .story-shop …)은 새 화면에서 쓰지 않는다(그 class 를 안 쓴다).
   · 본문 너비는 머리글과 같다(.container 와 같은 1396 칸 · 양옆 30px, 992 아래 16px).
   · 노리야 영역(#cj-noriya-home)의 모양은 찬진 스크립트가 스스로 갖고 온다(.cjnh) — 여기서는 자리만 준다. */
.nh {
  --nh-yellow: #f1cd3b; --nh-yellow-deep: #e0b51a;
  --nh-ink: #222222; --nh-ink-2: #5d5e5e; --nh-ink-3: #8a8b8e; --nh-accent: #4a4b4b;
  --nh-paper: #ffffff; --nh-mist: #f7f7f7; --nh-line: #ececec;
  --nh-r-lg: 20px; --nh-r-md: 14px;
  color: var(--nh-ink); font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
#main.nh { padding-bottom: 0; }
.nh a { color: inherit; text-decoration: none; }
.nh img { max-width: 100%; }
/* 글씨는 모두 Pretendard 가는 글씨(300)로 통일 — NEW · BEST 딱지만 굵게 둔다 (Jay 2026-10-13) */
.nh, .nh button, .nh input { font-family: "Pretendard", sans-serif; font-weight: 300; }
.nh font, .nh b, .nh strong { font-weight: inherit; }   /* 관리자에서 넣은 글자 꾸밈(<font> · <b>)도 같은 굵기로 */
.nh [hidden] { display: none !important; }
.nh :focus-visible { outline: 3px solid var(--nh-accent); outline-offset: 2px; border-radius: 6px; }
.nh-wrap { width: 100%; max-width: 1396px; margin: 0 auto; padding-left: 30px; padding-right: 30px; }
@media (max-width: 991px) { .nh-wrap { padding-left: 16px; padding-right: 16px; } }

/* ① 노리야 영역 + 메인 배너 */
.nh-hero { background: var(--nh-paper); border-bottom: 1px solid var(--nh-line); }
.nh-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; padding-top: 44px; padding-bottom: 40px; align-items: stretch; }
.nh-nori { display: flex; align-items: center; min-width: 0; min-height: 300px; }
.nh-nori > #cj-noriya-home { width: 100%; }
/* 노리야 칸 자리를 미리 잡아 둔다(10/16 점검) — 휴대폰 · 태블릿에서는 배너 위에 쌓이는데, 스크립트가 그리기 전엔 24px 이라
   다 그리고 나면(375~463px) 배너부터 아래가 한꺼번에 500px 가까이 밀려 내려갔다(화면 밀림 점수 0.54 → '나쁨').
   그린 높이보다 조금 낮게 잡아 남는 칸이 생기지 않게 한다. PC 는 배너 옆에 나란히 서서 해당 없음 */
@media (max-width: 991px) { .nh-nori > #cj-noriya-home { min-height: 360px; } }
@media (max-width: 560px) { .nh-nori > #cj-noriya-home { min-height: 440px; } }
.nh-offer { position: relative; border-radius: var(--nh-r-lg); overflow: hidden; min-height: 260px; background: var(--nh-mist); }
.nh-banner.swiper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.nh-banner .swiper-slide { height: 100%; overflow: hidden; background: var(--nh-mist); }
.nh-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; color: var(--nh-ink); overflow: hidden; }
.nh-slide-img img, .nh-slide-img video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* 메인 배너가 한 장도 없을 때 — 배너 자리를 접고 노리야 영역을 넓게 쓴다(index.js 가 nh-hero-solo 를 붙인다) */
.nh-hero-solo .nh-hero-in { grid-template-columns: minmax(0, 1fr); }
.nh-hero-solo .nh-offer { display: none; }
/* 글자 카드 — 상단 · 중단 · 하단 내용 */
.nh-cap { position: absolute; left: 14px; bottom: 14px; right: 14px; max-width: 340px; background: rgba(255,255,255,.95); border-radius: var(--nh-r-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.nh-cap p:empty { display: none; }
.nh-cap-head { font-size: 12px; color: var(--nh-ink-2); font-weight: 300; }
.nh-cap-title { font-size: clamp(17px, 1.8vw, 20px); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; }
.nh-cap-desc { font-size: 13px; color: var(--nh-ink-2); }
/* HTML 내용으로 넣은 배너 — 내용을 그대로 찍는다. 자리 밖으로 넘치지만 않게 */
.nh-slide-html { display: grid; place-items: center; }
.nh-slide-html img, .nh-slide-html video { max-width: 100%; height: auto; }
/* 점 · 좌우 화살표 */
.nh-banner > .nh-dots.swiper-pagination { position: absolute; top: 14px; right: 14px; bottom: auto; left: auto; width: auto; display: flex; gap: 6px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 6px 9px; z-index: 2; line-height: 0; }
.nh-dots .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; border-radius: 50%; background: rgba(27,26,27,.25); opacity: 1; }
.nh-dots .swiper-pagination-bullet-active { background: var(--nh-ink); width: 20px; border-radius: 4px; }
.nh-offer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0 0 3px; background: rgba(255,255,255,.94); color: var(--nh-ink); font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.nh-offer-nav.nh-prev { left: 12px; } .nh-offer-nav.nh-next { right: 12px; }
.nh-offer-nav:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
/* 992 아래(머리글이 휴대폰용으로 바뀌는 너비와 같다)에서는 노리야 영역과 배너를 위아래로 놓는다.
   전에는 900 이었는데, 901~991 에서 두 칸이 너무 좁아 배너 자리가 세로로 길쭉해졌다(350×478) */
@media (max-width: 991px) { .nh-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 28px; } .nh-nori { min-height: 0; } .nh-offer { min-height: 0; aspect-ratio: 2 / 1; } }
/* 휴대폰: 배너가 낮아 화살표를 가운데 두면 글자 카드를 가린다 → 위쪽 양 끝에, 점은 그 사이에 */
@media (max-width: 600px) {
  .nh-offer-nav { top: 8px; transform: none; width: 32px; height: 32px; font-size: 19px; } .nh-offer-nav.nh-prev { left: 8px; } .nh-offer-nav.nh-next { right: 8px; }
  .nh-banner > .nh-dots.swiper-pagination { top: 14px; right: auto; left: 50%; transform: translateX(-50%); }
}

/* ② 이벤트 띠 */
.nh-evt { background: var(--nh-mist); border-bottom: 1px solid var(--nh-line); }
.nh-evt .nh-wrap { display: flex; align-items: center; gap: 10px 18px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.nh-evt ul { display: flex; gap: 6px 18px; flex-wrap: wrap; flex: 1; min-width: 0; }
/* 혜택 글 = 둥근 단추(10/16) — 눌러지는 것이 보이게. 색은 저희 관리자 ⑲(--nh-evt-c 글자 · --nh-evt-bg 바탕) */
.nh-evt li a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 300; line-height: 1.3; color: var(--nh-evt-c, var(--nh-ink)); background: var(--nh-evt-bg, #fff); border: 1px solid var(--nh-evt-bg, #dcdcdc); border-radius: 999px; padding: 6px 14px; transition: border-color .2s, box-shadow .2s; }
.nh-evt li a::after { content: "›"; font-size: 15px; opacity: .7; }
.nh-evt li a:hover { border-color: var(--nh-evt-c, var(--nh-ink)); box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; }
.nh-evt ul { gap: 8px 8px !important; }
/* 휴대폰(10/16) — 단추가 여러 줄로 쌓이고 글도 꺾여 줄이 500px 넘게 길어지던 것. 한 줄로 두고 옆으로 밀어 보게 한다.
   오른쪽 끝 [회원가입 하러가기]는 그 자리에 둔다. 밀 수 있다는 것이 보이게 오른쪽 끝을 흐리게 */
@media (max-width: 760px) {
  .nh-evt .nh-wrap { flex-wrap: nowrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; padding-right: 12px; }
  .nh-evt ul { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
  .nh-evt ul::-webkit-scrollbar { display: none; }
  .nh-evt li { flex: none; scroll-snap-align: start; }
  .nh-evt li a { white-space: nowrap; font-size: 13px; padding: 7px 12px; }
  .nh-evt-join { font-size: 12.5px; padding: 7px 12px; white-space: nowrap; }
}
.nh-evt-join { flex: none; font-size: 13.5px; font-weight: 300; border: 1.5px solid var(--nh-ink); border-radius: 999px; padding: 6px 16px; }
.nh-evt-join:hover { background: var(--nh-ink); color: #fff !important; }

/* 공통 — 영역 머리 · 옆으로 넘기는 줄 */
/* 영역 머리 — 가늘고 큰 제목 · 알약 단추 · 테두리 있는 동그란 화살표 (시안 3 의 모양, 제목은 최대 52px — Jay 2026-10-13). 가는 글씨(300)는 style.css 가 이미 불러온다 */
.nh-sec { padding-top: clamp(36px, 5vw, 72px); padding-bottom: 8px; }
.nh-title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 300; line-height: 1.08; letter-spacing: -0.045em; margin: 0; }
.nh-sub { font-size: 14.5px; line-height: 1.5; color: #767777; margin-top: 10px; }
.nh-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: clamp(16px, 2.2vw, 28px); }
.nh-sec-head.nh-only-tools { justify-content: flex-end; margin-bottom: 10px; }
.nh-sec-tools { display: flex; gap: 8px; align-items: center; flex: none; }
/* 휴대폰에서 제목이 한 글자씩 세로로 서던 것(10/16) — 오른쪽 단추 묶음(영아 · 유아 + 전체 소개 페이지)이 줄지 않아 제목 칸이 눌렸다.
   제목은 적어도 8글자 너비를 갖고, 단추가 모자라면 다음 줄로 내려간다. 한국말은 낱말 중간에서 끊지 않는다 */
.nh-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* 화면에는 안 보이고 읽기만(h1) */
.nh-sec-head { flex-wrap: wrap; }
.nh-sec-head > .nh-title { flex: 1 1 auto; min-width: min(100%, 8em); word-break: keep-all; }
.nh-sec-tools { flex-wrap: wrap; justify-content: flex-end; }
.nh-more { font-size: 13px; line-height: 1.4; color: var(--nh-ink) !important; font-weight: 300; border: 1px solid var(--nh-key, var(--nh-ink)); border-radius: 999px; padding: 7px 16px; background: var(--nh-paper); white-space: nowrap; }
.nh-more:hover { background: var(--nh-key, var(--nh-ink)); border-color: var(--nh-key, var(--nh-ink)); color: #fff !important; }
.nh-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--nh-key, var(--nh-ink)); background: var(--nh-paper); cursor: pointer; font-size: 18px; line-height: 1; color: var(--nh-key, var(--nh-ink)); display: grid; place-items: center; padding: 0; }
.nh-arrow:hover { background: var(--nh-key, var(--nh-ink)); border-color: var(--nh-key, var(--nh-ink)); color: #fff; }
.nh-rail { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.nh-rail > * { scroll-snap-align: start; }
.nh-go { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 300; color: var(--nh-accent); margin-top: 4px; }
.nh-go .icon-more-arrow { flex: none; }
@media (max-width: 700px) { .nh-arrow { width: 38px; height: 38px; } }
/* 화살표는 손가락으로 미는 기기(휴대폰 · 태블릿)에서만 감춘다. 화면을 크게 확대해 쓰는 PC 는 좁아도 마우스라서 화살표가 있어야 넘길 수 있다 */
@media (hover: none) and (pointer: coarse) { .nh-arrow { display: none; } }

/* ③ 바로가기 — 기본 칸과 HTML 내용으로 넣은 칸이 같은 모양이 되게 li 안의 .img · .desc 로 건다 */
.nh-quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin; }
/* 바로가기 — 아이콘 바탕(회색 둥근 네모)을 없애고 아이콘 · 글씨를 키움 (Jay 2026-10-15 뉴홈 PPT 1) */
.nh-quick > li > a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 15px; font-weight: 300; padding: 6px 2px; }
.nh-quick .img { width: 76px; height: 76px; border-radius: 0; background: none; display: grid; place-items: center; transition: transform .2s; }
.nh-quick .img img { width: 76px; height: 76px; object-fit: contain; }
.nh-quick > li > a:hover .img { transform: translateY(-3px); }
.nh-quick .desc { font-size: 15px; line-height: 1.45; }
@media (max-width: 700px) {   /* 휴대폰: 다섯 칸씩 줄바꿈 */
  .nh-quick { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; gap: 14px 6px; padding-bottom: 0; }
  .nh-quick .img { width: 56px; height: 56px; } .nh-quick .img img { width: 56px; height: 56px; } .nh-quick .desc { font-size: 13px; }
}

/* ④ 이달의 추천놀이 — 탭 + 한 줄에 4장. 한 탭의 카드가 4장을 넘으면 옆으로 넘기고(화살표가 생긴다), 좁은 화면은 2칸씩 아래로 놓는다 */
/* 추천놀이 탭 — 글씨 한 단계 키우고 가운데로 (Jay 2026-10-15 뉴홈 PPT 2) */
.nh-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 18px; }
.nh-tag { font-size: 14px; padding: 6px 14px !important; line-height: 1.6; color: var(--nh-ink-2); background: var(--nh-mist); border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.nh-tag:hover { color: var(--nh-accent); }
.nh-tag.active { background: var(--nh-key, var(--nh-ink)); color: #fff; font-weight: 300; }
.nh-picks { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; min-height: 120px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-top: 4px; margin-top: -4px; }
.nh-picks::-webkit-scrollbar { display: none; }
.nh-picks > * { scroll-snap-align: start; }
.nh-picks.nh-picks-none { display: block; overflow: visible; }
.nh-pick { display: block; border-radius: var(--nh-r-md); overflow: hidden; background: var(--nh-paper); border: 1px solid var(--nh-line); transition: transform .2s, border-color .2s; }
a.nh-pick:hover { transform: translateY(-3px); border-color: #d9d9d9; }
.nh-pick img { display: block; width: 100%; aspect-ratio: 272 / 206; object-fit: contain; }
.nh-pick-text { display: grid; place-items: center; text-align: center; aspect-ratio: 272 / 206; padding: 14px; font-weight: 300; background: var(--nh-mist); }
.nh-picks-empty { display: grid; place-items: center; min-height: 120px; color: var(--nh-ink-2); background: var(--nh-mist); border-radius: var(--nh-r-md); }
@media (max-width: 760px) { .nh-picks { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; } }


/* ⑤ 기획 카드 — 그림 위, 글자 아래 */
.nh-programs { grid-auto-columns: minmax(260px, 300px); }
/* 스스로 흐르는 줄 — 흐르는 동안에는 칸에 맞춰 멈추지 않게(scroll-snap 끔), 막대는 감춘다. 손으로 밀기 · 화살표는 그대로 된다 */
.nh-programs.nh-flow { scroll-snap-type: none; scrollbar-width: none; padding-bottom: 4px; }
.nh-programs.nh-flow::-webkit-scrollbar { display: none; }
.nh-programs.nh-flow > * { scroll-snap-align: none; }
.nh-prog { border-radius: var(--nh-r-md); overflow: hidden; border: 1px solid var(--nh-line); background: var(--nh-paper); display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.nh-prog:hover { transform: translateY(-3px); border-color: #d9d9d9; }
.nh-prog-img { display: block; aspect-ratio: 16 / 10; background-color: var(--nh-mist); background-size: cover; background-position: right center; background-repeat: no-repeat; }
.nh-prog-cap { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.nh-prog-desc { font-size: 12.5px; color: var(--nh-ink-2); line-height: 1.45; }
.nh-prog-title { font-size: 16px; line-height: 1.35; }
/* 관리자에서 글자에 색을 넣어 둔 카드가 있다(그림 위에 얹던 때의 색) — 흰 카드에서는 안 읽힐 수 있어 색만 맞춘다. 굵기 · 줄바꿈은 그대로 */
.nh-prog-desc, .nh-prog-desc * { color: var(--nh-ink-2) !important; }
.nh-prog-title, .nh-prog-title * { color: var(--nh-ink) !important; }
@media (max-width: 700px) { .nh-programs { grid-auto-columns: 82%; } }

/* ⑥ 영상 배너 — 화면 너비를 다 쓰는 띠. 같은 유튜브 영상이 바탕에서 소리 없이 돌고, 글자는 흰 카드에 */
.nh-vb { position: relative; margin-top: 36px; padding: 0; height: clamp(320px, 36vw, 520px); background: #232323; overflow: hidden; isolation: isolate; }   /* padding 0 — 공통 style.css 의 section 여백(위 140px · 휴대폰 70px)이 들어오지 않게 */
.nh-vb-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.nh-vb-still { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nh-vb-still:not([src]) { visibility: hidden; }
/* 재생기를 띠보다 크게 놓고 위아래를 잘라 쓴다(16:9 를 가로에 맞춤) — 위쪽 제목 줄이 안 보이고, 눌리지 않아 재생기 단추도 안 뜬다 */
.nh-vb-media iframe { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); border: 0; pointer-events: none; opacity: 0; transition: opacity .6s !important; }
.nh-vb.nh-vb-on .nh-vb-media iframe { opacity: 1; }
.nh-vb-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; }
.nh-vb-textleft .nh-vb-shade { background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 60%); }
.nh-vb-textright .nh-vb-shade { background: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,0) 60%); }
.nh-vb-in { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-top: 24px; padding-bottom: 24px; pointer-events: none; }
.nh-vb-textright .nh-vb-in { justify-content: flex-end; }
.nh-vb-text { pointer-events: auto; background: rgba(255,255,255,.96); border-radius: var(--nh-r-lg); padding: 18px 22px 20px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 3px; }
.nh-vb-ball img { display: block; width: 46px; height: 46px; object-fit: contain; margin-bottom: 4px; }
.nh-vb-ball img:not([src]), .nh-vb-ball img[src=""] { display: none; }
.nh-vb-text h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; margin: 0; }
.nh-vb-text p { margin: 0; color: var(--nh-ink-2); font-size: 15px; }
.nh-vb-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nh-vb-play { font-size: 14.5px; font-weight: 300; line-height: 1.3; background: var(--nh-yellow); border-radius: 999px; padding: 10px 18px; display: inline-flex; gap: 7px; align-items: center; }
.nh-vb-play:hover { background: var(--nh-yellow-deep); }
.nh-vb-toggle { font-size: 14px; font-weight: 300; line-height: 1.3; background: #fff; color: var(--nh-ink); border: 1px solid #cfcfcf; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.nh-vb-toggle:hover { border-color: var(--nh-ink); }
@media (max-width: 600px) {   /* 휴대폰(10/17 760→600 — 배율을 크게 쓴 PC 도 절반 화면으로 바뀌게): 영상은 16:9 그대로 위에, 글자는 아래에 */
  .nh-vb { height: auto; background: var(--nh-mist); }
  .nh-vb-media { position: relative; aspect-ratio: 16 / 9; }
  .nh-vb-shade { display: none; }
  .nh-vb-in { height: auto; padding-top: 0; padding-bottom: 0; }
  .nh-vb-text { background: none; border-radius: 0; padding: 16px 0 20px; width: 100%; }
}
/* 영상 배너가 열리는 순서(2026-10-16) — ① 내려와 보이면 검은 바탕에서 브라운관 TV 켜지듯 가로 한 줄이 퍼지며 영상이 열린다
   ② 몇 초 뒤(기본 5초 · data-split 로 바꿈) 영상이 한쪽 절반의 16:9 화면으로 줄어들고, 다른 절반에 제목 · 단추가 나온다.
   스크립트가 nh-vb-wait 를 붙였을 때만 일어난다(스크립트가 없으면 지금 모습 그대로). 기기의 '움직임 줄이기'와 상관없이 돈다 */
.nh-vb-wait .nh-vb-media { visibility: hidden; }
.nh-vb-crt .nh-vb-media { animation: nhVbCrt 1.1s cubic-bezier(.2, .7, .2, 1) both !important; }
@keyframes nhVbCrt {
  0%   { transform: scale(0, .006); filter: brightness(5); }
  40%  { transform: scale(1, .006); filter: brightness(5); }
  100% { transform: scale(1, 1);    filter: brightness(1); }
}
@media (min-width: 601px) and (max-width: 991px) { .nh-vb { --nh-vb-g: 16px !important; } }   /* 본문 좌우 여백이 16px 로 줄어드는 폭 */
@media (min-width: 601px) {
  .nh-vb.nh-vb-wait, .nh-vb.nh-vb-crt { background: #000; }
  .nh-vb { transition: background-color .9s !important; }
  .nh-vb.nh-vb-split { background: transparent; }   /* 바뀔 때 · 바뀐 뒤 바탕 = 홈의 다른 곳과 같은 바탕(10/16) */   /* 휴대폰은 영상 아래 글자가 그대로라 바탕을 안 바꾼다 */
  .nh-vb-media { transition: top .9s cubic-bezier(.6, 0, .2, 1), left .9s cubic-bezier(.6, 0, .2, 1), right .9s cubic-bezier(.6, 0, .2, 1), bottom .9s cubic-bezier(.6, 0, .2, 1), border-radius .9s !important; }
  .nh-vb-wait .nh-vb-text, .nh-vb-crt .nh-vb-text { opacity: 0; transform: translateY(14px); pointer-events: none; }
  .nh-vb-wait .nh-vb-shade, .nh-vb-crt .nh-vb-shade, .nh-vb-split .nh-vb-shade { opacity: 0; }
  .nh-vb-text { transition: opacity .6s .5s, transform .6s .5s !important; }
  /* 영상 = 화면 너비의 44% · 16:9 · 위아래 가운데. 글자 카드가 왼쪽이면 영상은 오른쪽, 오른쪽이면 왼쪽 */
  /* 절반 화면 — 바깥 끝을 홈 본문 줄(.nh-wrap 1396px · 좌우 30px)에 맞춘다. 너비 = 배너의 44%(640px 까지) · 16:9 · 위아래 가운데 (10/16) */
  .nh-vb { container-type: inline-size; --nh-vb-g: max(30px, calc((100cqw - 1336px) / 2)); --nh-vb-w: min(44cqw, 640px); }
  .nh-vb-split .nh-vb-media { top: calc(50% - var(--nh-vb-w) * 9 / 32); bottom: calc(50% - var(--nh-vb-w) * 9 / 32); left: calc(100cqw - var(--nh-vb-g) - var(--nh-vb-w)); right: var(--nh-vb-g); border-radius: 14px; }
  .nh-vb-split.nh-vb-textright .nh-vb-media { left: var(--nh-vb-g); right: calc(100cqw - var(--nh-vb-g) - var(--nh-vb-w)); }
  .nh-vb-split .nh-vb-in { align-items: center; }
  .nh-vb-instant .nh-vb-media, .nh-vb-instant .nh-vb-text { transition: none !important; }   /* 「처음부터 절반 화면」 — 바뀌는 움직임 없이 바로 */
  .nh-vb-split .nh-vb-text { background: none; padding: 0; width: min(420px, 42vw); }
}
/* 소리 켜고 보기 — 화면 가운데 재생기(이 상자는 body 에 붙는다) */
.nh-vb-box { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: rgba(0,0,0,.78); display: grid; place-items: center; padding: 16px; }
.nh-vb-box-in { width: min(960px, 100%); display: flex; flex-direction: column; gap: 10px; }
.nh-vb-box-x { align-self: flex-end; font-family: inherit; font-size: 14px; font-weight: 300; line-height: 1.3; color: #222; background: #fff; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.nh-vb-box-v { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.nh-vb-box-v iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ⑦ Oh! 콘텐츠 몰 */
.nh-shop { grid-auto-columns: minmax(180px, 1fr); }
.nh-prod { border-radius: var(--nh-r-md); overflow: hidden; background: var(--nh-paper); border: 1px solid var(--nh-line); display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.nh-prod:hover { transform: translateY(-3px); border-color: #d9d9d9; }
.nh-prod-img { aspect-ratio: 1; background: var(--nh-mist); overflow: hidden; }
.nh-prod-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nh-prod-txt { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.nh-prod-company { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 0; }
.nh-badge { font-size: 11px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--nh-ink); border-radius: 4px; padding: 1px 6px; }
.nh-company-name { font-size: 12px; color: var(--nh-ink-3); }
.nh-company-name:empty { display: none; }
.nh-prod-name { font-weight: 300; font-size: 15.5px; line-height: 1.4; }
.nh-price { display: flex; gap: 2px 6px; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.nh-price span { white-space: nowrap; }
.nh-price span:empty { display: none; }
.nh-price-sale { font-size: 12.5px; color: var(--nh-ink-3); text-decoration: line-through; }
.nh-price-pct { color: var(--nh-accent); font-weight: 300; font-size: 14px; }
.nh-price-total { font-size: 16px; font-weight: 300; }
@media (max-width: 700px) { .nh-shop { grid-auto-columns: minmax(150px, 46%); } .nh-price-total { font-size: 15px; } }

/* ⑧ 특색 프로그램 — 옅은 띠 위에 두 칸씩. 카드마다 그림 왼쪽 · 글자 오른쪽 */
.nh-fp { background: var(--nh-mist); margin-top: 36px; padding-top: 32px; padding-bottom: 32px; }
.nh-fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nh-fp-card { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); background: var(--nh-paper); border: 1px solid var(--nh-line); border-radius: var(--nh-r-md); overflow: hidden; transition: transform .2s, border-color .2s; }
.nh-fp-card:hover { transform: translateY(-3px); border-color: #d9d9d9; }
.nh-fp-img { display: block; aspect-ratio: 534 / 360; background: var(--nh-mist); }
.nh-fp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nh-fp-txt { padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.nh-fp-title { font-size: clamp(16px, 1.6vw, 20px); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; }
.nh-fp-desc { font-size: 14px; color: var(--nh-ink-2); line-height: 1.45; }
.nh-fp-txt .nh-go { margin-top: 8px; }
@media (max-width: 760px) { .nh-fp { padding-top: 22px; padding-bottom: 22px; } .nh-fp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .nh-fp-card { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); } .nh-fp-txt { padding: 8px 14px; } .nh-fp-desc { font-size: 13px; } .nh-fp-txt .nh-go { margin-top: 4px; } }

/* ⑨ 공지사항 · 자주묻는질문 — 두 칸으로 나란히 */
/* 상자 테두리 없이 줄만 — 제목 아래 굵은 줄, 글마다 가는 줄 (시안 3 의 모양) */
.nh-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(44px, 6vw, 84px); }
.nh-board { min-width: 0; padding: 0; border: 0; }   /* padding 0 을 빼면 공통 style.css 의 section 여백이 들어온다 */
.nh-board h3 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 30px); font-weight: 300; line-height: 1.2; letter-spacing: -0.04em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nh-board h3 a { font-size: 12.5px; font-weight: 300; letter-spacing: 0; line-height: 1.4; color: var(--nh-ink); border: 1px solid var(--nh-ink); border-radius: 999px; padding: 6px 15px; white-space: nowrap; flex: none; }
.nh-board h3 a:hover { background: var(--nh-ink); color: #fff; }
.nh-board ul { border-top: 1px solid var(--nh-ink); }
.nh-board li a { display: flex; gap: 10px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--nh-line); font-size: 15px; }
.nh-board-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nh-board li:first-child .nh-board-title::before { content: "NEW"; background: var(--nh-yellow); color: var(--nh-ink); font-weight: 700; font-size: 11px; padding: 1px 6px; margin-right: 8px; }
.nh-board-date { color: var(--nh-ink-3); font-size: 12.5px; flex: none; font-variant-numeric: tabular-nums; }
.nh-board-faq .nh-board-date { display: none; }
@media (max-width: 760px) { .nh-boards { grid-template-columns: minmax(0, 1fr); } }

/* ⑩ 인스타그램 — 자료가 있을 때만 나온다 */
.nh-insta-sec { padding-bottom: 40px; }
.nh-insta { grid-auto-columns: minmax(150px, 200px); }
.nh-insta-item { display: block; border-radius: var(--nh-r-md); overflow: hidden; background: var(--nh-mist); }
.nh-insta-item .img { aspect-ratio: 1; background-size: cover; background-position: center; }

/* 메인 배너가 겹쳐 바뀌는 것 · 영상이 그림 위로 올라오는 것은 기기의 '움직임 줄이기' 설정과 상관없이 그대로(찬진 확정 2026-10-12).
   카드가 살짝 떠오르는 것 같은 나머지 움직임은 그 설정을 따른다 */
@media (prefers-reduced-motion: reduce) {
  .nh-quick .img, .nh-pick, .nh-prog, .nh-prod, .nh-fp-card { transition: none; }
  .nh-rail { scroll-behavior: auto; }
}

/* 특색 프로그램 머리(제목 · [전체 보기]) — 회색 바탕 띠 안 (Jay 2026-10-15) */
.nh-fp .nh-sec-head { padding-top: clamp(12px, 2vw, 24px); }

/* ⑧ 특색 프로그램 — 큰 카드 + 목록 (Jay 2026-10-15). 스크립트가 .nh-fp-grid 에 nh-fp-focus 를 붙이면 이 모양이 된다.
   왼쪽 큰 카드는 몇 초마다 겹쳐 바뀌고, 오른쪽 목록의 지금 항목에 진행 막대가 차오른다. 목록을 누르면 그 카드로.
   ★움직임은 기기의 '움직임 줄이기'와 상관없이 돈다(홈의 다른 움직이는 것과 같은 기준) */
.nh-fp-grid.nh-fp-focus { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.nh-fp-big { display: grid; min-width: 0; }
.nh-fp-focus .nh-fp-big .nh-fp-card { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(1.02);
  transition: opacity .7s ease, transform 1.1s ease, visibility 0s linear .7s; border-radius: 18px; }
.nh-fp-focus .nh-fp-big .nh-fp-card.nh-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease, transform 1.1s ease, visibility 0s; }
.nh-fp-focus .nh-fp-big .nh-fp-card:hover { transform: none; }
.nh-fp-focus .nh-fp-big .nh-fp-img { aspect-ratio: 534 / 300; }
.nh-fp-focus .nh-fp-big .nh-fp-txt { padding: 18px 24px 20px; }
.nh-fp-focus .nh-fp-big .nh-fp-title { font-size: clamp(20px, 2vw, 26px); }
.nh-fp-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 100%; overflow-y: auto; }
.nh-fp-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; text-align: left;
  background: var(--nh-paper); border: 1px solid var(--nh-line); border-radius: 14px; padding: 12px 16px; cursor: pointer; overflow: hidden; font: inherit; color: inherit; flex: none; }
.nh-fp-item img, .nh-fp-item .nh-fp-th { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--nh-mist); display: block; }
.nh-fp-item b { display: block; font-size: 16px; font-weight: 300; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-fp-item small { display: block; font-size: 12.5px; color: var(--nh-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-fp-item.nh-on { border-color: var(--nh-key, var(--nh-ink)); }
.nh-fp-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--nh-key, var(--nh-ink)); }
.nh-fp-item.nh-on .nh-fp-bar { animation: nhFpBar var(--nh-fp-ms, 5000ms) linear forwards; }
.nh-fp-paused .nh-fp-item.nh-on .nh-fp-bar { animation-play-state: paused; }
@keyframes nhFpBar { to { width: 100%; } }
/* 휴대폰 · 확대 화면: 큰 카드 아래에 목록을 옆으로 넘기는 한 줄로 */
@media (max-width: 760px) {
  .nh-fp-grid.nh-fp-focus { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nh-fp-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .nh-fp-list::-webkit-scrollbar { display: none; }
  .nh-fp-item { width: 72%; grid-template-columns: 52px minmax(0, 1fr); padding: 10px 12px; scroll-snap-align: start; }
  .nh-fp-item img, .nh-fp-item .nh-fp-th { width: 52px; height: 36px; }
}

/* ④-2 놀이중심 놀이계획안 (Jay 2026-10-15 뉴홈 PPT 3) — 영아/유아 단추 · 두 줄이 서로 반대로 흐름(노리야 스크립트가 채움)
   ★움직임은 기기의 '움직임 줄이기'와 상관없이 돈다. 마우스를 올리면 그 줄이 멈춘다 */
.nh-age { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: var(--nh-mist); }
.nh-age-btn { border: 0; background: transparent; border-radius: 999px; padding: 7px 18px; font: inherit; font-size: 14px; font-weight: 300; color: var(--nh-ink-2); cursor: pointer; }
.nh-age-btn.active { background: var(--nh-key, var(--nh-ink)); color: #fff; }
.nh-plans-rows { display: grid; gap: 14px; overflow: hidden; padding: 4px 0 6px; }
.nh-plan-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.nh-plan-track { display: flex; gap: 14px; width: max-content; animation: nhPlanL 60s linear infinite; }
.nh-plan-r .nh-plan-track { animation-name: nhPlanR; }
.nh-plan-row:hover .nh-plan-track, .nh-plan-row:focus-within .nh-plan-track { animation-play-state: paused; }
@keyframes nhPlanL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nhPlanR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.nh-plan { flex: none; display: block; width: 150px; border-radius: 18px; background: var(--nh-paper); border: 1px solid var(--nh-line); padding: 10px; transition: transform .2s, border-color .2s; }
.nh-plan:hover { transform: translateY(-3px); border-color: var(--nh-key, var(--nh-ink)); }
.nh-plan img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
@media (max-width: 760px) { .nh-plan { width: 112px; padding: 8px; border-radius: 14px; } .nh-plans-rows { gap: 10px; } .nh-plan-track { gap: 10px; } }

/* 특색 프로그램 영아/유아 단추 (Jay 2026-10-15 뉴홈 PPT 5) — 스크립트가 카드 주소(/content/66185 = 영아 · /content/66186 = 유아)로 나눈다 */
.nh-fp .nh-age { margin-top: 0; margin-right: 8px; }

/* 홈 맨 위 알림 띠 (2026-10-15) — 글 · 색 · 기간은 저희 관리자에서(노리야 스크립트가 채움) */
.nh-topbar { text-align: center; font-size: 15px; line-height: 1.5; padding: 11px 16px; }
.nh-topbar a { color: inherit; text-decoration: none; display: inline-block; }
.nh-topbar a:hover { text-decoration: underline; }

/* 강조색(--nh-key) — 저희 관리자 ⑯ 에서 정하면 노리야 스크립트가 main.nh 에 단다. 없으면 짙은 회색(--nh-ink) */
/* 메인 배너 글자 카드 끄기 (관리자 ⑰) */
.nh-cap-off .nh-cap { display: none !important; }
/* 홈 맨 아래 띠 배너 (관리자 ⑱) */
.nh-bottom-in { display: flex; align-items: center; gap: 18px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.nh-bottom-img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; flex: none; }
.nh-bottom-txt { flex: 1; min-width: 220px; }
.nh-bottom-txt b { display: block; font-size: clamp(18px, 2vw, 24px); font-weight: 300; letter-spacing: -0.02em; }
.nh-bottom-txt p { margin: 4px 0 0; font-size: 14.5px; opacity: .75; }
.nh-bottom-btn { flex: none; border: 1px solid currentColor; border-radius: 999px; padding: 9px 20px; font-size: 14px; color: inherit !important; text-decoration: none; }
.nh-bottom-btn:hover { background: rgba(0,0,0,.06); }