/* ===== 메인 페이지 (2026-10 리뉴얼, 밝은 톤) — 공통 색은 theme.css ===== */
.mn {
	--mn-ink: #12332B;
	--mn-sub: #5B6B65;
	--mn-green: #27A06C;
	--mn-green-d: #1E8A5B;
	--mn-mint: #F1FAF5;
	--mn-mint-2: #DDF4E8;
	--mn-lime: #C9F36A;
	--mn-ember: #FF6B35;
	--mn-cream: #FAF9F5;
	--mn-line: #E3E8E3;
	background: #fff !important;
	color: var(--mn-ink);
}
.mn .contain { max-width: 1320px; }

/* 공통 */
.mn-sec { padding: 120px 0; }
.mn-label { margin-bottom: 12px; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--mn-ember); }
.mn-tit { font-size: 44px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: var(--mn-ink); }
.mn-desc { font-size: 17px; line-height: 1.7; color: var(--mn-sub); }
.mn-head { margin-bottom: 48px; }
.mn-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mn-head.split .mn-desc { text-align: right; }
.mn-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.mn-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 30px; border-radius: 56px; font-size: 17px; font-weight: 700; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.mn-btn:hover { transform: translateY(-2px); }
.mn-btn.lime { background: var(--mn-lime); color: var(--mn-ink); }
.mn-btn.lime:hover { background: #B8E853; }
.mn-btn.line { border: 1.5px solid var(--mn-ink); color: var(--mn-ink); }
.mn-btn.line:hover { background: var(--mn-ink); color: #fff; }
.mn-btn.green { background: var(--mn-green); color: #fff; }
.mn-btn.green:hover { background: var(--mn-green-d); color: #fff; }
.mn-btn.sm { height: 46px; padding: 0 22px; font-size: 15px; }
.mn-more { display: inline-block; margin-top: 28px; font-size: 16px; font-weight: 700; color: var(--mn-green); }

/* HERO */
.mn-hero { position: relative; overflow: hidden; padding: calc(var(--header-height) + 70px) 0 60px; background: radial-gradient(circle at 85% 30%, #E0F6EA 0, rgba(224,246,234,0) 45%), linear-gradient(170deg, #FBFEFC 0%, #EEF9F3 100%); }
.mn-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
.mn-eyebrow { margin-bottom: 22px; font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--mn-green); }
.mn-hero h2 { font-size: 64px; font-weight: 800; line-height: 1.18; letter-spacing: -.04em; color: var(--mn-ink); }
.mn-hero h2 em { font-style: normal; color: var(--mn-green); background: linear-gradient(transparent 68%, var(--mn-lime) 68%, var(--mn-lime) 92%, transparent 92%); }
.mn-lead { margin: 26px 0 36px; font-size: 18px; line-height: 1.75; color: var(--mn-sub); }
.mn-hero-visual { position: relative; height: 500px; }
.mn-drop { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; overflow: hidden; border-radius: 32px; background: var(--mn-mint-2); box-shadow: 0 30px 60px rgba(18,51,43,.14); }
.mn-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; filter: brightness(1.3) saturate(1.05); }
.mn-drop img.on { opacity: 1; }
.mn-drop-shadow { position: absolute; top: 0; right: 0; width: 160px; height: 160px; border-radius: 32px; background: var(--mn-lime); opacity: .55; }
.mn-badge { position: absolute; display: flex; flex-direction: column; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(18,51,43,.12); backdrop-filter: blur(6px); }
.mn-badge strong { font-size: 16px; font-weight: 800; color: var(--mn-green); }
.mn-badge span { margin-top: 2px; font-size: 12px; color: var(--mn-sub); }
.mn-badge.b1 { top: 70px; left: 0; z-index: 2; }
.mn-badge.b2 { top: 210px; right: 0; z-index: 2; }
.mn-badge.b3 { bottom: 60px; left: 0; z-index: 2; }
.mn-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid rgba(18,51,43,.12); }
.mn-stats .s { padding: 28px 0 0; }
.mn-stats .s + .s { padding-left: 32px; border-left: 1px solid rgba(18,51,43,.08); }
.mn-stats strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--mn-ink); }
.mn-stats strong small { margin-left: 2px; font-size: 20px; font-weight: 700; }
.mn-stats span { display: block; margin-top: 6px; font-size: 15px; color: var(--mn-sub); }
.mn .mn-qr { display: none; }

/* 신뢰 (bento) */
.mn-record { background: var(--mn-cream); }
.mn-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-rows: repeat(2, 230px); gap: 18px; }
.mn-bento .c { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--mn-line); }
.mn-bento .c .k { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--mn-ember); }
.mn-bento .c strong { margin-top: auto; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--mn-ink); word-break: keep-all; }
.mn-bento .c span { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--mn-sub); word-break: keep-all; }
.mn-bento .c.big { grid-row: span 2; border: 0; background: linear-gradient(160deg, #3DB884 0%, #27A06C 100%); }
.mn-bento .c.big .k { color: #E9FFC2; }
.mn-bento .c.big strong { font-size: 72px; line-height: 1; letter-spacing: -.04em; color: #fff; }
.mn-bento .c.big span { font-size: 18px; font-weight: 700; color: #fff; }
.mn-bento .c.lime { border: 0; background: var(--mn-lime); }
.mn-bento .c.lime .k { color: var(--mn-green-d); }
.mn-bento .c.lime span { color: #3E5A2A; }
.mn-bento .c.mint { border: 0; background: var(--mn-mint-2); }
.mn-bento .c.dark { border: 0; background: var(--mn-ink); }
.mn-bento .c.dark .k { color: var(--mn-lime); }
.mn-bento .c.dark strong { color: #fff; }
.mn-bento .c.dark span { color: rgba(255,255,255,.7); }
/* 누르면 이동하는 카드: 오른쪽 위 화살표 */
.mn-bento .c .arr { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--mn-green-d); box-shadow: 0 4px 12px rgba(18,51,43,.08); transition: background .2s, color .2s, transform .2s; }
.mn-bento .c:not(.mint):not(.dark) .arr { background: var(--mn-mint); box-shadow: none; }
.mn-bento .c.dark .arr { background: var(--mn-lime); color: var(--mn-ink); box-shadow: none; }
.mn-bento .c.go { transition: transform .2s, box-shadow .2s; }
.mn-bento .c.go:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18,51,43,.12); }
.mn-bento .c.go:hover .arr { background: var(--mn-green); color: #fff; transform: rotate(45deg); }
a.mn-badge { transition: transform .2s; }
a.mn-badge:hover { transform: translateY(-3px); }

/* WHY */
.mn-why { background: var(--mn-mint); }
.mn-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.mn-why-text .mn-desc { margin-top: 20px; }
.mn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.mn-tags span { padding: 8px 16px; border-radius: 30px; background: #fff; font-size: 14px; font-weight: 600; color: var(--mn-green-d); }
.mn-why-list { display: flex; flex-direction: column; gap: 16px; }
.mn-why-list .w { display: flex; gap: 22px; padding: 28px 30px; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(31,138,95,.06); }
.mn-why-list .n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mn-lime); font-size: 16px; font-weight: 800; color: var(--mn-ink); }
.mn-why-list h3 { font-size: 21px; font-weight: 800; color: var(--mn-ink); }
.mn-why-list p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--mn-sub); }

/* 서비스 */
.mn-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mn-svc .v { position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 34px; border-radius: 26px; transition: transform .25s, box-shadow .25s; }
.mn-svc .v:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(18,51,43,.12); }
.mn-svc .v strong { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.mn-svc .v p { margin-top: 14px; font-size: 16px; line-height: 1.65; }
.mn-svc .v .go { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: auto; border-radius: 50%; font-size: 20px; font-weight: 700; }
.mn-svc .v.green { background: var(--mn-green); color: #fff; }
.mn-svc .v.green strong { color: #fff; }
.mn-svc .v.green .go { background: var(--mn-lime); color: var(--mn-ink); }
.mn-svc .v.white { border: 1px solid var(--mn-line); background: #fff; color: var(--mn-ink); }
.mn-svc .v.white p { color: var(--mn-sub); }
.mn-svc .v.white .go { background: var(--mn-ink); color: #fff; }
.mn-svc .v.mint { background: var(--mn-mint-2); color: var(--mn-ink); }
.mn-svc .v.mint strong { color: var(--mn-green-d); }
.mn-svc .v.mint .go { background: var(--mn-green); color: #fff; }

/* 제품 */
.mn-products { background: var(--mn-cream); }
.mn-pd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mn-pd .p { display: block; overflow: hidden; border: 1px solid var(--mn-line); border-radius: 22px; background: #fff; transition: transform .25s, box-shadow .25s; }
.mn-pd .p:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(18,51,43,.1); }
.mn-pd .img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--mn-mint); }
.mn-pd .img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mn-pd .p:hover .img img { transform: scale(1.05); }
.mn-pd .t { padding: 20px 22px 24px; }
.mn-pd .kind { font-size: 13px; font-weight: 700; color: var(--mn-ember); }
.mn-pd .name { margin-top: 4px; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--mn-ink); }
.mn-pd .more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--mn-green); }

/* 브랜드 가치 */
.mn-values .mn-head { text-align: center; }
.mn-val { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mn-val .b { overflow: hidden; border: 1px solid var(--mn-line); border-radius: 22px; background: #fff; }
.mn-val .img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.mn-val .t { padding: 24px 26px 28px; }
.mn-val .t span { font-size: 14px; font-weight: 800; color: var(--mn-ember); }
.mn-val .t h3 { margin-top: 6px; font-size: 22px; font-weight: 800; color: var(--mn-ink); }
.mn-val .t p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--mn-sub); }

/* CTA */
.mn-cta-wrap { padding: 0 0 120px; }
.mn-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 64px 70px; border-radius: 32px; background: var(--mn-lime); }
.mn-cta::after { content: ''; position: absolute; right: 120px; bottom: -120px; width: 260px; height: 260px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: rgba(255,255,255,.35); }
.mn-cta > * { position: relative; z-index: 1; }
.mn-cta h2 { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--mn-ink); }
.mn-cta p { margin-top: 10px; font-size: 17px; color: #3E5A2A; }

/* 태블릿 */
@media (max-width: 1100px) {
	.mn-sec { padding: 90px 0; }
	.mn-tit { font-size: 36px; }
	.mn-hero h2 { font-size: 48px; }
	.mn-hero-visual { height: 400px; }
	.mn-bento { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: none; }
	.mn-bento .c { min-height: 190px; }
	.mn-bento .c.big { grid-row: auto; grid-column: span 3; }
	.mn-why-grid { grid-template-columns: 1fr; gap: 40px; }
	.mn-pd { grid-template-columns: repeat(2, 1fr); }
}

/* 모바일 */
@media (max-width: 768px) {
	.mn-sec { padding: 64px 0; }
	.mn-label { font-size: 12px; }
	.mn-tit { font-size: 27px; }
	.mn-desc { font-size: 15px; }
	.mn-head { margin-bottom: 28px; }
	.mn-head.split { flex-direction: column; align-items: flex-start; }
	.mn-head.split .mn-desc { text-align: left; }
	.mn-btn { height: 50px; padding: 0 24px; font-size: 15px; }

	.mn-hero { padding: calc(var(--header-height) + 36px) 0 40px; }
	.mn-hero-grid { grid-template-columns: 1fr; gap: 0; }
	.mn-eyebrow { margin-bottom: 14px; font-size: 11px; }
	.mn-hero h2 { font-size: 34px; }
	.mn-lead { margin: 16px 0 24px; font-size: 15px; }
	.mn-hero-visual { display: none; }
	.mn .mn-qr { display: block; position: static; margin-top: 28px; box-shadow: 0 10px 28px rgba(18,51,43,.12); }
	.mn-stats { grid-template-columns: 1fr 1fr; margin-top: 32px; }
	.mn-stats .s { padding: 18px 0 0; }
	.mn-stats .s + .s { padding-left: 0; border-left: 0; }
	.mn-stats .s:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(18,51,43,.08); }
	.mn-stats strong { font-size: 28px; }
	.mn-stats strong small { font-size: 15px; }
	.mn-stats span { font-size: 13px; }

	.mn-bento { grid-template-columns: 1fr 1fr; gap: 10px; }
	.mn-bento .c { min-height: 0; padding: 18px 16px; border-radius: 16px; }
	.mn-bento .c .k { font-size: 10px; }
	.mn-bento .c strong { margin-top: 12px; font-size: 16px; }
	.mn-bento .c .arr { top: 14px; right: 14px; width: 30px; height: 30px; }
	.mn-bento .c .arr svg { width: 13px; height: 13px; }
	.mn-bento .c span { margin-top: 6px; font-size: 12.5px; }
	.mn-bento .c.big { grid-column: span 2; }
	.mn-bento .c.big { padding: 22px; }
	.mn-bento .c.big span { font-size: 15px; }
	.mn-bento .c.big strong { font-size: 52px; }

	.mn-why-list .w { gap: 16px; padding: 20px; }
	.mn-why-list .n { width: 40px; height: 40px; font-size: 14px; }
	.mn-why-list h3 { font-size: 18px; }
	.mn-why-list p { font-size: 14px; }

	.mn-svc { grid-template-columns: 1fr; gap: 12px; }
	.mn-svc .v { min-height: 0; padding: 26px; border-radius: 20px; }
	.mn-svc .v strong { font-size: 32px; }
	.mn-svc .v .go { position: absolute; top: 26px; right: 26px; margin: 0; width: 40px; height: 40px; }

	.mn-pd { gap: 12px; }
	.mn-pd .t { padding: 14px 14px 18px; }
	.mn-pd .name { font-size: 15px; }
	.mn-pd .more { font-size: 13px; }

	.mn-val { grid-template-columns: 1fr; gap: 12px; }

	.mn-cta-wrap { padding-bottom: 64px; }
	.mn-cta { flex-direction: column; align-items: flex-start; padding: 36px 26px; border-radius: 22px; }
	.mn-cta h2 { font-size: 26px; }
	.mn-cta p { font-size: 15px; }
	.mn-cta::after { right: -60px; bottom: -100px; width: 200px; height: 200px; }
}
.mn-bento .c.big:not(.mint):not(.dark) .arr { background: #fff; color: var(--mn-green-d); box-shadow: 0 4px 12px rgba(18,51,43,.15); }
.mn-bento .c.big.go:hover .arr { background: var(--mn-lime); color: var(--mn-ink); }
/* 브랜드 가치 카드: 번호(주황 동그라미) + 옅은 영문 이름 */
.mn-val .t .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 50%; background: #FFF0E9; font-size: 12px; font-weight: 800; color: var(--mn-ember); vertical-align: middle; }
.mn-val .t .en { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #9AA8A2; vertical-align: middle; }
.mn-val .t h3 { margin-top: 12px; }

/* 모바일 메인 길이 줄이기 (2026-10-20) */
@media (max-width: 768px) {
	.mn-sec { padding: 44px 0; }
	.mn-head { margin-bottom: 20px; }
	.mn-tit { font-size: 24px; }
	.mn-desc { font-size: 14px; }
	.mn-hero { padding-bottom: 28px; }
	.mn-stats { margin-top: 22px; }
	.mn-stats .s { padding-top: 12px; }
	.mn-stats strong { font-size: 24px; }

	/* 신뢰: 큰 특허 카드 낮게 */
	.mn-bento .c.big { flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding: 18px 20px; }
	.mn-bento .c.big .k { width: 100%; }
	.mn-bento .c.big strong { margin-top: 18px; font-size: 34px; }
	.mn-bento .c.big strong br { display: none; }
	.mn-bento .c.big span { width: 100%; margin-top: 6px; font-size: 13px; }

	/* WHY: 태그·목록 촘촘하게 */
	.mn-why-grid { gap: 24px; }
	.mn-tags { gap: 6px; margin-top: 16px; }
	.mn-tags span { padding: 6px 12px; font-size: 12px; }
	.mn-more { margin-top: 16px; font-size: 14px; }
	.mn-why-list { gap: 8px; }
	.mn-why-list .w { padding: 14px 16px; border-radius: 16px; }
	.mn-why-list h3 { font-size: 16px; }
	.mn-why-list p { margin-top: 4px; font-size: 13px; }

	/* 서비스: 카드 얇게 */
	.mn-svc { gap: 8px; }
	.mn-svc .v { padding: 18px 20px; border-radius: 16px; }
	.mn-svc .v strong { font-size: 24px; }
	.mn-svc .v p { margin-top: 6px; font-size: 13.5px; }
	.mn-svc .v .go { top: 18px; right: 18px; width: 34px; height: 34px; }

	/* 브랜드 가치: 사진 왼쪽 작게 + 글 오른쪽 */
	.mn-val { gap: 8px; }
	.mn-val .b { display: grid; grid-template-columns: 96px 1fr; border-radius: 16px; }
	.mn-val .img { aspect-ratio: auto; min-height: 100%; }
	.mn-val .t { padding: 14px 16px; }
	.mn-val .t .n { width: 24px; height: 24px; margin-right: 6px; font-size: 11px; }
	.mn-val .t .en { font-size: 11.5px; }
	.mn-val .t h3 { margin-top: 6px; font-size: 17px; }
	.mn-val .t p { margin-top: 4px; font-size: 13px; line-height: 1.5; }

	.mn-cta-wrap { padding-bottom: 44px; }
	.mn-cta { padding: 26px 22px; }
	.mn-cta h2 { font-size: 22px; }
}
/* 모바일 신뢰 카드 더 촘촘하게 */
@media (max-width: 768px) {
	.mn-record .mn-head { margin-bottom: 16px; }
	.mn-bento { gap: 8px; }
	.mn-bento .c { padding: 14px 14px 15px; border-radius: 14px; }
	.mn-bento .c .k { font-size: 9.5px; letter-spacing: .1em; }
	.mn-bento .c strong { margin-top: 8px; font-size: 15px; line-height: 1.3; }
	.mn-bento .c span { margin-top: 4px; font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.mn-bento .c .arr { top: 11px; right: 11px; width: 26px; height: 26px; }
	.mn-bento .c .arr svg { width: 11px; height: 11px; }
	.mn-bento .c:not(.big) .k { padding-right: 30px; }
	.mn-bento .c.big { padding: 16px 18px; border-radius: 16px; }
	.mn-bento .c.big strong { margin-top: 10px; font-size: 30px; }
	.mn-bento .c.big span { font-size: 12.5px; -webkit-line-clamp: 1; }
	.mn-bento .c strong br { display: none; }
}

/* 메인 배너: 예전 카드 자리(오른쪽 끝은 그대로)에 맞추되, 사진 왼쪽은 배경에 스며들게 (PC·태블릿) */
@media (min-width: 769px) {
	.mn-hero-text { position: relative; z-index: 2; }
	.mn-drop { left: -14%; border-radius: 0 32px 32px 0; box-shadow: none; background: none;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%); mask-image: linear-gradient(90deg, transparent 0, #000 32%); }
}