@charset "utf-8";
/* 리뉴얼 메인 전용 스타일 — 모든 클래스는 nm- 접두어 (기존 custom.css 의 .main_* 과 분리)
 * 본문 폭: 운영 사이트(fieldsgood.co.kr)와 동일 — 1201px 이상 1080px 고정 가운데 정렬, 1200px 이하 좌우 15px
 * 본문이 1080px 을 넘지 않으므로 반응형은 원래 '1200px 이하' 단계를 PC 에도 적용 (아래 '단계 재매핑' 참고)
 * 반응형 최소 글자 크기 13px */

.nm-main{
	--nm-width:1080px;           /* 1201px 이상 본문 폭 (운영 사이트 .container 와 동일) */
	--nm-gutter:15px;            /* 1200px 이하 좌우 여백 (운영 사이트와 동일) */
	--nm-text:#1C1C1C;
	--nm-sub:#666;
	--nm-yellow:#FFE922;
	--nm-purple:#A99CF6;
	--nm-blue:#0CA8FE;
	--nm-gray:#F5F5F7;
	--nm-radius:20px;
	overflow-x:clip;
	color:var(--nm-text);
}
.nm-main *{letter-spacing:-0.5px;}
.nm-main h2, .nm-main h3, .nm-main p{margin:0;}
.nm-container{padding:0 var(--nm-gutter);}
@media (min-width:1201px){
	.nm-container{max-width:var(--nm-width); margin:0 auto; padding:0;}
}

/* ── 공통 요소 ───────────────────────────── */
/* 형광펜 강조: 첫 화면에서 왼쪽→오른쪽으로 그어짐 (노란 배경 폭 0 → 100%).
 * 애니메이션이 없으면 기본값(100%)이 그대로 보임 */
.nm-mark{background:linear-gradient(var(--nm-yellow), var(--nm-yellow)) no-repeat left center / 100% 100%; color:inherit; padding:0 6px;
	-webkit-box-decoration-break:clone; box-decoration-break:clone; animation:nm-mark-draw .8s cubic-bezier(.65, 0, .35, 1) .4s both;}
@keyframes nm-mark-draw{from{background-size:0 100%;}}
/* 섹션 라벨 */
.nm-label{display:inline-block; padding:2px 6px; background:var(--nm-yellow); font-size:24px; font-weight:600; line-height:1.4; color:var(--nm-text);}
.nm-section-title{margin-top:16px !important; font-size:44px; font-weight:700; line-height:130%; color:var(--nm-text);}
/* 검정 알약 버튼 */
.nm-btn{display:inline-flex; align-items:center; gap:6px; height:46px; padding:0 24px; border-radius:50px; background:var(--nm-text); color:#fff !important; font-size:16px; font-weight:600; white-space:nowrap; transition:background .2s;}
.nm-btn:hover{background:#444;}
.nm-btn__arrow{font-size:16px; transition:transform .25s;}
.nm-btn:hover .nm-btn__arrow{transform:translateX(4px);} /* hover 시 화살표가 오른쪽으로 */

/* ── 히어로 ───────────────────────────── */
/* 왼쪽 텍스트 + 오른쪽 카드 슬라이더(한 장씩 자동 전환, main.js). 카드는 본문 칸 안에서만 보임
 * (예전 스크롤 고정·장면 전환은 넓은 화면에서 아래가 비어 보이고 카드가 여백으로 넘쳐 제거) */
.nm-hero{--hero-card-w:min(500px, 48%); padding-top:20px;} /* 981~1040px 에서도 제목 칸이 한 줄 폭(글자 크기 × 7.3) 이상 */
.nm-hero__track{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, var(--hero-card-w)); align-items:center; gap:24px;}
.nm-hero__text{min-width:0;}
.nm-hero__title{font-size:70px; font-weight:700; line-height:125%; color:var(--nm-text);}
.nm-hero__copy{margin-top:24px !important; font-size:30px; color:var(--nm-text);}

.nm-hero__cards{min-width:0;}
.nm-hero__cards:not(.slick-initialized) .nm-hero-card + .nm-hero-card{display:none;} /* 슬라이더 준비 전 첫 장만 */

/* 카드 = 배너 이미지(관리자 슬라이드 705×449) 한 장, 링크가 있으면 카드 전체가 링크 */
.nm-hero-card{display:block; height:auto; aspect-ratio:705 / 449; border-radius:var(--nm-radius); overflow:hidden;}
.nm-hero-card--yellow{background:var(--nm-yellow);} /* 이미지 로딩 전·실패 시 배경 */
.nm-hero-card--purple{background:var(--nm-purple);}
.nm-hero__cards .nm-hero-card__img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s;}
a.nm-hero-card:hover .nm-hero-card__img{transform:scale(1.03);}
a.nm-hero-card:focus-visible{outline:3px solid var(--nm-text); outline-offset:-3px;} /* slick-list 가 바깥을 잘라 안쪽에 표시 */

/* ── 입학예약 + 교재주문 ───────────────────────────── */
.nm-reserve{padding:48px 0 64px;}
.nm-reserve__inner{display:grid; grid-template-columns:minmax(0, 1fr) 500px; gap:24px;}

.nm-reserve__box{padding:28px; border-radius:var(--nm-radius); background:var(--nm-gray);}
.nm-reserve__cards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:20px;}
/* 카드 높이는 내용만큼(최소 높이 없음) → 지점명과 '더보기' 사이는 버튼 위 여백(50px)
 * --reserve-text-end : 일러스트가 올라올 수 있는 한계 = 지점명 첫째 줄 아래 + 6px
 * --reserve-line2-end: 일러스트 왼쪽 한계 = 둘째 줄(식사~마곡) 오른쪽 + 10px — 둘째 줄 옆으로 올라와도 글자를 덮지 않음
 * (두 값은 지점명 글자 크기 기준 실측: 15px → 84/142, 14px → 78/127. 지점 목록·글자 크기를 바꾸면 다시 잴 것) */
.nm-reserve-card{--reserve-text-end:90px; --reserve-line2-end:152px; position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:28px; border-radius:10px; background:#fff; overflow:hidden;}
.nm-reserve-card__title{font-size:28px; font-weight:700; line-height: 130%;}
.nm-reserve-card__branch{position:relative; z-index:1; margin-top:10px !important; font-size:18px; line-height:140%;}
/* 지점 링크: 옅은 밑줄로 누를 수 있음을 표시, hover·포커스 시 노란 형광펜 */
.nm-reserve-card__branch a{display:inline-block; padding:2px 1px; color:inherit; text-decoration:underline; text-decoration-color:rgba(28, 28, 28, .25);
	text-underline-offset:4px; transition:background-color .2s, text-decoration-color .2s;}
.nm-reserve-card__branch a:hover,
.nm-reserve-card__branch a:focus-visible{background:var(--nm-yellow); text-decoration-color:currentColor;}
.nm-reserve-card .nm-btn{position:relative; z-index:1; margin-top:50px;}
.nm-reserve-card__img{position:absolute; right:0; bottom:0; width:auto;
	max-height:min(130px, calc(100% - var(--reserve-text-end))); max-width:min(50%, calc(100% - var(--reserve-line2-end)));}

/* 교재주문: 카드 전체 크기(500×620) 투명 PNG 를 배경으로. contain + 하단 정렬이라 카드 폭이 바뀌어도 일러스트가 잘리지 않음 */
.nm-book{position:relative; display:flex; flex-direction:column; align-items:center; min-height:613px; padding:32px 28px; border-radius:var(--nm-radius);
	background:var(--nm-blue) url("../img/main/book_order2.png") no-repeat center bottom / cover; color:#fff; text-align:center; overflow:hidden;}
.nm-book__title{font-size:38px; font-weight:700; line-height:120%; color:#fff;}
.nm-book__desc{margin-top:8px !important; font-size:20px;}
.nm-book .nm-btn{margin-top:20px;}

/* ── 센터 및 가맹안내 (검정 풀폭 배경) ───────────────────────────── */
.nm-center{padding:64px 0 72px; background:#1C1C1C url("../img/main/center_bg.png") no-repeat center / cover;}
.nm-center .nm-section-title{color:#fff; font-size: 50px;}
.nm-news .nm-section-title{font-size:50px;} /* 시안상 센터 및 가맹안내 제목과 같은 크기 */
.nm-center__cards{display:grid; grid-template-columns:369fr 369fr 762fr; gap:16px; margin-top:28px;}

.nm-center-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:369px; padding:28px; border-radius:var(--nm-radius); background:#fff; overflow:hidden;}
.nm-center-card__title{font-size:28px; font-weight:700; line-height:130%; color:var(--nm-text);}
.nm-center-card__desc{position:relative; z-index:1; margin-top:10px !important; font-size:18px; line-height:140%;}
.nm-center-card .nm-btn{position:relative; z-index:1; margin-top:auto;}
.nm-center-card__img{position:absolute; right:0; bottom:15px; width:auto; max-width:55%; max-height:50%;}

/* 채용안내 */
.nm-hiring{min-width:0; padding:28px; border-radius:var(--nm-radius); background:#E9E9E9;}
.nm-hiring__head{display:flex; justify-content:space-between; align-items:center;}
.nm-more{display:inline-flex; align-items:center; gap:4px; padding-bottom:3px; font-size:15px; color:var(--nm-text);
	background:linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px; transition:background-size .25s;}
.nm-more:hover{background-size:100% 1px;} /* 밑줄: 글자와 3px 띄우고, 화살표까지 끊김 없이 */
.nm-hiring__list{margin-top:14px;}
.nm-hiring__list li{display:flex; align-items:center; gap:20px; padding:9px 0;}
.nm-hiring__list li a{position:relative; flex:1 1 auto; min-width:0; padding-left:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px;}
.nm-hiring__list li a:before{content:""; position:absolute; left:0; top:50%; width:3px; height:3px; margin-top:-1px; border-radius:50%; background:#434343;}
.nm-hiring__list li a:hover{text-decoration:underline; text-underline-offset:3px;}
.nm-hiring__date{flex:0 0 auto; font-size:14px; color:#999;}
.nm-hiring__empty{font-size:16px; color:#999;}

/* ── 뉴스 ───────────────────────────── */
.nm-news{padding:64px 0 72px;}
.nm-news__head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px;}
.nm-news__head .nm-more{flex:0 0 auto;}
.nm-news__slider{margin-top:28px;}
.nm-news__slider .slick-list{margin:0 -8px;}            /* 카드 간격 16px */
.nm-news__item{padding:0 8px;}
.nm-news-card{display:block; color:var(--nm-text);}
.nm-news-card__thumb{aspect-ratio:369 / 250; border-radius:var(--nm-radius); background:#EFEFEF; overflow:hidden;}
.nm-news-card__thumb img,
.nm-news__slider .slick-slide .nm-news-card__thumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.nm-news-card:hover .nm-news-card__thumb img{transform:scale(1.04);}
/* 이미지 없는 글: 회색 박스 가운데 로고 */
.nm-news-card__thumb.is-empty{display:flex; align-items:center; justify-content:center;}
.nm-news-card__thumb.is-empty img,
.nm-news__slider .slick-slide .nm-news-card__thumb.is-empty img{width:30%; height:auto; object-fit:contain; opacity:.35;}
.nm-news-card:hover .nm-news-card__thumb.is-empty img{transform:none;}
.nm-news-card__title{margin-top:14px !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:24px; font-weight:600; line-height:130%;}
.nm-news-card:hover .nm-news-card__title{color:var(--nm-text); text-decoration:underline; text-underline-offset:3px;}
.nm-news-card__date{display:block; margin-top:6px; font-size:14px; color:#999;}
.nm-news__empty{margin-top:24px !important; font-size:16px; color:#999;}

/* 페이지 표시: 현재 = 긴 막대, 나머지 = 점 */
.nm-hero .slick-dots,
.nm-news .slick-dots{position:static; display:flex !important; justify-content:center; gap:10px; margin:20px 0 0; padding:0; line-height:0;}
.nm-hero .slick-dots li,
.nm-news .slick-dots li{width:auto; height:auto; margin:0;}
.nm-hero .slick-dots li button,
.nm-news .slick-dots li button{width:10px; height:10px; padding:0; border:0; border-radius:50px; background:#E4E4E4; font-size:0; transition:width .3s, background .3s;}
.nm-hero .slick-dots li button:before,
.nm-news .slick-dots li button:before{display:none;}
.nm-hero .slick-dots li.slick-active button,
.nm-news .slick-dots li.slick-active button{width:50px; background:var(--nm-text);}

/* ── 반응형 (PC 값 기준으로 단계별 축소, 최소 글자 13px) ───────────── */
/* 단계 재매핑: 본문이 최대 1080px 이라 원래 '화면 1400 / 1200 이하'(본문 1360 / 1160 이하) 용으로 짠
 * 단계가 모든 화면에 해당 → 두 단계 모두 항상 적용 (그 위의 기본값은 1548px 시안 기준 원본 값) */
@media all{
	.nm-hero__title{font-size:58px;}
	.nm-hero__copy{font-size:24px; margin-top:20px !important;}

	.nm-label{font-size:20px;}
	.nm-section-title{font-size:38px; margin-top:14px !important;}
	.nm-reserve__inner{grid-template-columns:minmax(0, 1fr) 420px; gap:20px;}
	.nm-reserve__box{padding:24px;}
	.nm-reserve__cards{margin-top:18px;}
	.nm-reserve-card{padding:24px;}
	.nm-reserve-card__title{font-size:24px;}
	.nm-reserve-card__branch{font-size:16px;}
	.nm-book{min-height:0; padding:28px 24px;}
	.nm-book__title{font-size:32px;}
	.nm-book__desc{font-size:18px;}
	.nm-book .nm-btn{margin-top:18px;}

	.nm-center{padding:56px 0 64px;}
	.nm-center .nm-section-title,
	.nm-news .nm-section-title{font-size:42px;}
	.nm-center__cards{gap:14px; margin-top:24px;}
	.nm-center-card,
	.nm-hiring{padding:24px;}
	.nm-center-card{min-height:330px;}
	.nm-center-card__img{max-width:45%;}
	.nm-center-card__title{font-size:24px;}
	.nm-center-card__desc{font-size:16px;}
	.nm-hiring__list{margin-top:12px;}
	.nm-hiring__list li{padding:8px 0;}
	.nm-hiring__list li a{font-size:16px;}
}
@media all{
	.nm-hero__title{font-size:46px;}
	.nm-hero__copy{font-size:20px; margin-top:16px !important;}

	.nm-btn{height:42px; padding:0 20px; font-size:15px;}
	.nm-btn__arrow{font-size:15px;}
	.nm-label{font-size:18px;}
	.nm-section-title{font-size:32px; margin-top:12px !important;}
	.nm-reserve{padding:20px 0 20px;}
	.nm-reserve__inner{grid-template-columns:minmax(0, 1fr) 340px; gap:16px;}
	.nm-reserve__box{padding:24px;}
	.nm-reserve__cards{gap:12px; margin-top:16px;}
	.nm-reserve-card{padding:24px;}
	.nm-reserve-card__title{font-size:21px;}
	.nm-reserve-card__branch{font-size:15px; margin-top:8px !important;}
	.nm-book{padding:24px 20px;}
	.nm-book__title{font-size:27px;}
	.nm-book__desc{font-size:16px;}
	.nm-book .nm-btn{margin-top:16px;}

	.nm-center{padding:48px 0 56px;}
	.nm-center .nm-section-title,
	.nm-news .nm-section-title{font-size:36px;}
	/* 센터/가맹 카드 2열, 채용안내는 아래 전체 폭 — 1101px 이상은 아래 '센터 한 줄' 에서 3열로 덮어씀 */
	.nm-center__cards{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:20px;}
	.nm-hiring{grid-column:1 / -1;}
	.nm-center-card,
	.nm-hiring{padding:24px;}
	.nm-center-card{min-height:260px;}
	.nm-center-card__title{font-size:21px;}
	.nm-center-card__desc{font-size:15px; margin-top:8px !important;}
	.nm-center-card__img{max-width:50%; max-height:50%; bottom:12px;}
	.nm-hiring__list{margin-top:10px;}
	.nm-hiring__list li{gap:12px; padding:7px 0;}
	.nm-hiring__list li a{font-size:15px;}
	.nm-more{font-size:14px;}
	.nm-hiring__date{font-size:13px;}
}
/* 1101px 이상(본문 1071px 이상): 센터안내·가맹안내·채용안내 한 줄. 두 카드는 280px 고정, 채용안내가 나머지 폭
 * 일러스트는 카드 폭 40% 까지로 줄여 '가맹 문의하기' 버튼과 겹치지 않게 (그보다 좁으면 2열 유지) */
@media (min-width:1101px){
	.nm-center__cards{grid-template-columns:280px 280px minmax(0, 1fr); gap:16px;}
	.nm-hiring{grid-column:auto;}
	.nm-center-card__img{max-width:40%;}
}
/* 980px 이하(폰·태블릿 세로, 헤더도 모바일로 바뀌는 지점): 텍스트 아래 슬라이더를 본문 전체 폭으로 */
@media (max-width:980px){
	.nm-hero{padding-top:32px;}
	.nm-hero__track{grid-template-columns:minmax(0, 1fr);}
}
/* 980px 이하: 교재주문 카드 아래로 */
@media (max-width:980px){
	.nm-reserve{padding:20px 0 20px;}
	.nm-reserve__inner{grid-template-columns:minmax(0, 1fr);}
	.nm-book{min-height:900px; padding:32px 20px;}

	.nm-center{padding:40px 0 48px;}
}
@media (max-width:768px){
	.nm-hero__title{font-size:38px;}
	.nm-hero__copy{font-size:17px; margin-top:12px !important;}

	.nm-btn{height:38px; padding:0 16px; font-size:14px;}
	.nm-btn__arrow{font-size:14px;}
	.nm-label{font-size:15px;}
	.nm-section-title{font-size:26px; margin-top:10px !important;}
	.nm-reserve__box{padding:20px 16px;}
	.nm-reserve__cards{margin-top:14px;}
	.nm-reserve-card{--reserve-text-end:84px; --reserve-line2-end:137px; padding:20px 16px;}
	.nm-reserve-card__title{font-size:20px;}
	.nm-reserve-card__branch{font-size:14px; margin-top:8px !important;}
	.nm-book{min-height:700px; padding:28px 16px;}
	.nm-book__title{font-size:24px;}
	.nm-book__desc{font-size:15px; margin-top:6px !important;}
	.nm-book .nm-btn{margin-top:14px;}

	.nm-center .nm-section-title,
	.nm-news .nm-section-title{font-size:28px;}
	.nm-center__cards{margin-top:16px;}
	.nm-center-card,
	.nm-hiring{padding:20px 16px;}
	.nm-center-card{min-height:230px;}
	.nm-center-card__title{font-size:20px;}
	.nm-center-card__desc{font-size:14px; margin-top:8px !important;}
	.nm-hiring__list li a{font-size:14px;}
}
@media (max-width:600px){
	.nm-reserve__cards{grid-template-columns:minmax(0, 1fr);}

	.nm-center__cards{grid-template-columns:minmax(0, 1fr);}
	.nm-center-card{min-height:200px;}
	.nm-center-card__img{max-width:42%; max-height:70%;}
}
@media (max-width:480px){
	.nm-hero{padding-top:24px;}
	.nm-hero__title{font-size:32px;}
	.nm-hero__copy{font-size:15px;}

	.nm-label{font-size:14px;}
	.nm-section-title{font-size:23px;}
	.nm-book{min-height:450px;}
	.nm-book__title{font-size:22px;}
	.nm-book__desc{font-size:14px;}

	.nm-center{padding:32px 0 40px;}
	.nm-center .nm-section-title,
	.nm-news .nm-section-title{font-size:24px;}
	.nm-hiring__list li{padding:6px 0;}
}

/* ── 뉴스 반응형 (PC 값 기준 축소, 슬라이드 개수는 main.js 의 responsive 와 맞춤, 단계 재매핑 동일) ── */
@media all{
	.nm-news{padding:56px 0 64px;}
	.nm-news__slider{margin-top:24px;}
	.nm-news-card__title{font-size:22px; margin-top:12px !important;}
}
@media all{
	.nm-news{padding:48px 0 56px;}
	.nm-news__slider{margin-top:20px;}
	.nm-news__slider .slick-list{margin:0 -6px;}
	.nm-news__item{padding:0 6px;}
	.nm-news-card__title{font-size:20px; margin-top:12px !important;}
	.nm-news-card__date{font-size:13px; margin-top:4px;}
	.nm-news .slick-dots{margin-top:16px;}
}
@media (max-width:980px){
	.nm-news{padding:40px 0 48px;}
}
@media (max-width:768px){
	.nm-news__slider{margin-top:16px;}
	.nm-news-card__title{font-size:18px; margin-top:10px !important;}
	.nm-news-card__date{margin-top:4px;}
	.nm-hero .slick-dots,
	.nm-news .slick-dots{gap:8px; margin-top:14px;}
	.nm-hero .slick-dots li button,
	.nm-news .slick-dots li button{width:8px; height:8px;}
	.nm-hero .slick-dots li.slick-active button,
	.nm-news .slick-dots li.slick-active button{width:36px;}
}
@media (max-width:480px){
	.nm-news{padding:32px 0 40px;}
	.nm-news-card__title{font-size:17px;}
}

/* ── 스크롤 등장 효과 ─────────────
 * main.js 가 대상(섹션 제목·카드)에 .nm-reveal 을 붙이고, 화면에 들어오면 .is-revealed 를 더해 한 번만 나타남.
 * JS 가 돌지 않거나 '동작 줄이기' 설정이면 클래스가 붙지 않아 처음부터 그대로 보임 */
.nm-reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);}
.nm-reveal.is-revealed{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
	.nm-mark{animation:none;}
	.nm-reveal{opacity:1; transform:none; transition:none;}
}