@charset "utf-8";

/* ============================================================
 * Daesung Techwin Main Page - Renewal Design (2026)
 * 본문(섹션) 전용 CSS. 헤더/푸터/공통 토큰은 colorset.css 참고.
 * ============================================================ */

/* ============================================================
 * ★ Heading Reset
 *   bootstrap.min.css 가 h1~h6, .h1~.h6 에 광역적으로 margin-top/bottom 을
 *   부여하기 때문에 신규 디자인의 라인하이트/간격 계산이 어긋남.
 *   메인페이지(.main-renew) 한정으로 무력화하여 디자인 의도 보존.
 * ============================================================ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 , h5, .h5, h6, .h6 {
	margin-top: 0;
	margin-bottom: 0;
}

/* ==========================================
   0. .container : 아미나 사이트너비($is_thema_size) 연동
   - Bootstrap3 의 .container { width:750/970/1170 } 가 본문에도 적용되니
     본문 안 .container 모두 아미나 변수(--site-width) 및 
     신규 디자인 최대 너비(1760px)에 맞추어 덮어쓰기.
========================================== */
.main-renew .container {
	max-width: var(--site-width, 1760px) !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 1.25rem !important;
	box-sizing: border-box !important;
}
@media (min-width: 768px)  { .main-renew .container { padding: 0 2.5rem !important; } }
@media (min-width: 1024px) { .main-renew .container { padding: 0 5rem   !important; } }
@media (min-width: 1440px) { .main-renew .container { padding: 0 7rem   !important; } }
@media (min-width: 1760px) { .main-renew .container { padding: 0 5rem   !important; } }

/* ==========================================
   1. 공통 보조 유틸
========================================== */
.gsap-reveal {
	opacity: 0; visibility: hidden;
	will-change: transform, opacity; transform: translateZ(0);
}
.tracking-kr-tight { letter-spacing: -0.05em; }
.overflow-hidden { overflow: hidden; }

/* ★ 한글 줄바꿈 — 메인페이지 전체 텍스트(타이틀/본문/카드/푸터 등)에
   word-break:keep-all 적용하여 한 단어가 줄 끝에서 마지막 글자(예: '다')만
   다음 줄로 떨어지는 현상 방지. */
.main-renew h1, .main-renew h2, .main-renew h3, .main-renew h4, .main-renew h5,
.main-renew p, .main-renew li, .main-renew span,
.main-renew .hero-title, .main-renew .hero-desc,
.main-renew .panel-title, .main-renew .panel-desc,
.main-renew .stack-main-title, .main-renew .card-title,
.main-renew .esg-title, .main-renew .esg-desc,
.main-renew .esg-item-title, .main-renew .esg-item-desc,
.main-renew .media-title, .main-renew .media-card-title,
.main-renew .partners-title,
.main-renew .news-title, .main-renew .news-card-title, .main-renew .news-desc,
.main-renew .kpi-title, .main-renew .kpi-label,
.main-renew .cert-title, .main-renew .cert-name, .main-renew .cert-desc,
.main-renew .loc-main-title, .main-renew .loc-info-value,
.main-renew .careers-title, .main-renew .careers-desc,
.main-renew .career-card-title, .main-renew .career-card-desc {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ★ main05-1.php 디자인의 공통 유틸 및 버튼 스타일 복구 */
.section-eyebrow {
	font-size: 0.8125rem; font-weight: 800; color: var(--primary);
	letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.5rem;
	margin-bottom: 0.75rem; text-transform: uppercase;
}
.section-eyebrow::before {
	content: ''; width: 5px; height: 5px; border-radius: 50%;
	background: currentColor; display: inline-block;
}
.eyebrow-white { color: rgba(255, 255, 255, 0.7); }
.eyebrow-white::before { background: currentColor; }

.btn-pill {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 700;
	font-size: 0.9375rem; transition: all 0.3s; gap: 0.5rem; cursor: pointer;
	text-decoration: none;
}
.focus-ring:focus-visible {
	outline: 2px solid var(--primary); outline-offset: 2px;
}

/* 유틸리티 반응형 규격 추가 (태블릿/PC 이상) */
@media (min-width: 768px) {
	.section-eyebrow {
		font-size: 1.125rem;
		margin-bottom: 1rem;
	}
	.section-eyebrow::before {
		width: 6px;
		height: 6px;
	}
	.btn-pill {
		padding: 1rem 2rem;
		font-size: 1.0625rem;
	}
}

/* 최적화를 위한 will-change 부여 */
.panel-card, .stack-card, .esg-item, .media-card {
	will-change: transform, opacity, top;
}

/* ==========================================
   2. Hero Section
========================================== */
.hero-section {
	position: relative; width: 100%; height: 100vh;
	background: var(--primary); overflow: hidden; z-index: 10; min-height: 600px;
}
.hero-media-wrap {
	position: absolute; inset: 0; width: 100%; height: 100%;
	transform-origin: bottom; background: var(--primary);
}
.hero-slide-bg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	opacity: 0; z-index: 1;
}
.hero-slide-bg::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to right, var(--primary) 0%, rgba(0,75,141,0.4) 100%);
	mix-blend-mode: multiply;
}
.hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%);
	z-index: 2;
}
.hero-content-layer {
	position: absolute; inset: 0; z-index: 20;
	display: flex; flex-direction: column;
}
.hero-indicator { position: absolute; top: 6rem; left: 1.25rem; z-index: 30; }
.indicator-box {
	display: flex; align-items: center; gap: 0.5rem; color: var(--on-primary);
	background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); padding: 0.5rem 1rem;
	border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 800; border: 1px solid rgba(255,255,255,0.2);
}
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #00ffaa; box-shadow: 0 0 10px #00ffaa; }
@media (min-width: 768px) {
	.hero-indicator { left: 2.5rem; top: 8rem; }
	.indicator-box { padding: 0.5rem 1.25rem; font-size: 0.9375rem; }
	.pulse-dot { width: 8px; height: 8px; }
}
@media (min-width: 1024px) { .hero-indicator { left: 5rem; top: 12rem; } }
@media (min-width: 1440px) { .hero-indicator { left: 5rem; top: 14rem; } }

.hero-text-container {
	position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
	padding-top: 2rem;
}

/* ★ .container 와 동일한 max-width / 좌우 패딩 구조로 변경 → 중앙 정렬 일치 */
.hero-text-slide {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	left: 50%; margin-left: -880px; /* max-width 1760px 의 절반 만큼 좌측으로 이동 */
	width: 100%;
	max-width: 1760px;
	padding-left: 1.25rem; padding-right: 1.25rem;
	opacity: 0; pointer-events: none; visibility: hidden;
	color: var(--on-primary);
	box-sizing: border-box;
}
.hero-text-slide.active {
	opacity: 1; pointer-events: auto; visibility: visible;
}
/* ※ max-width 미도달 시(<=1760px) margin-left 보정 무효화: left 0 으로 */
@media (max-width: 1759px) {
	.hero-text-slide { left: 0; margin-left: 0; }
}

@media (min-width: 768px)  { .hero-text-slide { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .hero-text-slide { padding-left: 5rem;   padding-right: 5rem;   } }
@media (min-width: 1440px) { .hero-text-slide { padding-left: 7rem;   padding-right: 7rem;   } }
@media (min-width: 1760px) { .hero-text-slide { padding-left: 5rem;   padding-right: 5rem;   } }

.hero-title { font-size: 2.75rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.05em; margin-bottom: 1.5rem; text-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.hero-title .overflow-hidden { overflow: hidden; }
.hero-title-line { display: block; transform: translateY(100%); }
.text-accent { color: #60A5FA; }
.hero-desc {
	font-size: 1rem; font-weight: 500; opacity: 0.9; line-height: 1.5;
	max-width: 40rem; transform: translateY(100%); letter-spacing: -0.02em;
}
@media (min-width: 768px) {
	.hero-title { font-size: 5rem; margin-bottom: 2rem; }
	.hero-desc { font-size: 1.25rem; line-height: 1.6; }
}
@media (min-width: 1024px) { .hero-title { font-size: 6.5rem; } }
@media (min-width: 1440px) { .hero-title { font-size: 8rem; } }

.hero-controls { position: absolute; bottom: 2rem; left: 0; width: 100%; z-index: 30; }
.hero-controls .container { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.hero-tabs { display: flex; align-items: center; gap: 1.5rem; font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.5); overflow-x: auto; white-space: nowrap; width: 100%; padding-bottom: 0.5rem; }
.hero-tabs::-webkit-scrollbar { display: none; }
.hero-tabs span { cursor: pointer; transition: color 0.3s; position: relative; padding-bottom: 0.5rem; letter-spacing: -0.02em; }
.hero-tabs span.active { color: var(--on-primary); }
.hero-tabs span.active::after { content: ''; position: absolute; bottom:0; left:0; width:100%; height:3px; background:var(--on-primary); border-radius:2px; }
@media (min-width: 768px) {
	.hero-controls { bottom: 4rem; }
	.hero-tabs { gap: 3rem; font-size: 1.25rem; padding-bottom: 1rem; overflow-x: visible; }
	.hero-tabs span { padding-bottom: 1rem; }
	.hero-tabs span.active::after { height: 4px; }
}

/* ==========================================
   3. Horizontal Track System (공통)
========================================== */
.horizontal-section { width: 100%; height: 100vh; overflow: hidden; position: relative; }
.horizontal-container { display: flex; height: 100vh; width: max-content; will-change: transform; }

/* ==========================================
   4. Business Area
   ★ 주의: 아미나/Bootstrap3 에 .panel, .panel-title 등 동일 이름의 광범위
           충돌 클래스가 존재. 따라서 외부 컨테이너는 .biz-panel 로 개명하고,
           내부 자식들(.panel-card, .panel-title 등)은 반드시 .biz-panel
           아래로만 스코프하여 다른 영역(관리자/스위처/위젯) 영향 차단.
========================================== */
.business-section { background: var(--surface-alt); color: var(--on-surface); }
.biz-panel { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0; }
.biz-panel .panel-card {
	width: 92vw; height: 88vh; border-radius: var(--radius-lg); position: relative; overflow: hidden;
	box-shadow: var(--shadow-float); transform-origin: center;
	background: #000; display: block;
}
.biz-panel .panel-img-wrap {
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden;
}
.biz-panel .panel-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s; }
.biz-panel .panel-card:hover .panel-img { transform: scale(1.05); }
.biz-panel .panel-overlay {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.biz-panel .panel-content {
	position: relative; z-index: 3; height: 100%; width: 100%; max-width: 1400px;
	padding: 2.5rem 1.5rem; display: flex; flex-direction: column; justify-content: center;
	color: var(--on-primary); margin: 0 auto;
}
.biz-panel .panel-title { font-size: 2.25rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; color: var(--on-primary); text-shadow: 0 4px 20px rgba(0,0,0,0.5); letter-spacing: -0.05em; }
.biz-panel .panel-desc { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.9); margin-bottom: 2rem; line-height: 1.5; max-width: 48rem; letter-spacing: -0.02em; }
.biz-panel .panel-content .btn-pill { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); color: var(--on-primary); border: 1px solid rgba(255,255,255,0.3); align-self: flex-start; }
.biz-panel .panel-content .btn-pill:hover { background: var(--on-primary); color: var(--primary); }
@media (min-width: 768px) {
	.biz-panel .panel-content { padding: 4rem 4rem; }
	.biz-panel .panel-title { font-size: 4rem; margin-bottom: 1.5rem; }
	.biz-panel .panel-desc { font-size: 1.25rem; margin-bottom: 3rem; line-height: 1.6; }
}
@media (min-width: 1024px) {
	.biz-panel .panel-title { font-size: 6.5rem; }
	.biz-panel .panel-content { padding: 4rem 8rem; }
}

/* ==========================================
   5. Stacked Cards & Core Values (Stack Section)
========================================== */
.stack-section { position: relative; width: 100%; height: 100vh; background: var(--primary); color: var(--on-primary); overflow: hidden; z-index: 20; }
.stack-text-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 10; padding: 0 1.25rem; text-align: center; }
.stack-main-title { font-size: 1.75rem; font-weight: 900; line-height: 1.2; max-width: 72rem; letter-spacing: -0.05em; padding: 0 0.5rem; word-break: keep-all; }
.st-line { display: block; color: rgba(255,255,255,0.3); margin-top: 0.25rem; }
@media (min-width: 768px) { .stack-main-title { font-size: 4rem; } .st-line { margin-top: 0.5rem; } }
@media (min-width: 1024px) { .stack-main-title { font-size: 6.5rem; } }

.stack-cards-wrapper { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.stack-card {
	position: absolute; top: 50%; left: 50%; width: 85vw; height: 65vh;
	border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float);
	border: 1px solid rgba(255,255,255,0.1); background: #000;
	display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem 1.5rem;
}
@media (min-width: 768px) { .stack-card { width: 78vw; height: 72vh; padding: 4rem; } }
.stack-card img {
	display: block; position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; opacity: 0.8;
}
.card-grad {
	position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); z-index: 10;
}
.dim-overlay { position: absolute; inset: 0; background: var(--primary); opacity: 0; z-index: 20; transition: opacity 0.3s; }
.card-info { position: relative; z-index: 30; }
.card-label { font-size: 1rem; font-weight: 800; color: #60A5FA; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.card-label::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block; }
.card-title { font-size: 2.5rem; font-weight: 900; text-shadow: 0 4px 10px rgba(0,0,0,0.5); letter-spacing: -0.05em; }
@media (min-width: 768px) {
	.card-label { font-size: 1.125rem; margin-bottom: 1rem; }
	.card-label::before { width:6px; height:6px; }
	.card-title { font-size: 4rem; }
}

.sr-text-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 40; pointer-events: none; padding: 0 1rem; }
.sr-text { font-size: 2.25rem; font-weight: 900; text-align: center; line-height: 1.1; letter-spacing: -0.05em; }
@media (min-width: 768px) { .sr-text { font-size: 5rem; } }
@media (min-width: 1024px) { .sr-text { font-size: 8rem; } }
.sr-text .word { display: inline-block; opacity: 0; transform: translateY(40px); margin: 0 0.25rem; }
@media (min-width: 768px) { .sr-text .word { margin: 0 0.5rem; } }

/* ESG / Core Values */
.esg-container { position: absolute; inset: 0; z-index: 70; opacity: 0; pointer-events: none; background: var(--secondary); }
.esg-container::before {
	content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 100%, var(--primary) 0%, transparent 50%); opacity: 0.3; z-index: 1;
}
.esg-inner {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	width: 100%; height: 100%;
}
.esg-left {
	position: relative; width: 100%; flex-shrink: 0;
	display: flex; flex-direction: column; justify-content: flex-start;
	padding-top: 6rem; padding-bottom: 2rem; z-index: 10; pointer-events: none;
}
.esg-title { font-size: 1.5rem; font-weight: 900; line-height: 1.25; margin-bottom: 0.5rem; margin-top: 0; color: var(--on-primary); letter-spacing: -0.04em; word-break: keep-all; }
.esg-desc { font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,0.8); line-height: 1.5; max-width: 100%; word-break: keep-all; }
.esg-right {
	position: relative; width: 100%; flex-grow: 1; overflow: hidden; z-index: 5;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}

/* ★ 모바일에서 높이가 너무 길지 않도록 비율(aspect-ratio) 조절 */
.esg-item {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	width: 90vw; max-width: 24rem;
	height: auto; aspect-ratio: 4/3;
	max-height: 55vh;
	min-height: 280px;
	border-radius: var(--radius-lg); overflow: hidden;
	border: 1px solid rgba(255,255,255,0.1); background: #000;
	padding: 1.5rem; display: flex; flex-direction: column; box-shadow: var(--shadow-float);
	pointer-events: auto;
}
.esg-item img {
	display: block; position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; opacity: 0.6;
}
.esg-item::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(15,23,42,0.4), rgba(15,23,42,0.95)); z-index: 1;
}
.esg-content { position: relative; z-index: 2; color: var(--on-primary); height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.esg-badge { font-size: 0.8125rem; font-weight: 900; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.02em; }
.esg-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:#60A5FA; display:inline-block;}
.esg-item-title { font-size: 1.125rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.04em; line-height: 1.3; word-break: keep-all;}
.esg-item-desc { font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,0.85); line-height: 1.5; margin-bottom: 1rem; word-break: keep-all; }
.esg-arrow {
	margin-top: auto; align-self: flex-end;
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
	color: var(--on-primary, #fff);
	transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
/* ★ ESG 카드 a 태그 변환 — 링크 색/밑줄 제거, hover 시 화살표 강조 */
.esg-item-link { text-decoration: none !important; color: inherit; cursor: pointer; }
.esg-item-link:hover .esg-arrow {
	background: #60A5FA;
	border-color: #60A5FA;
	transform: translate(2px, -2px);
}
@media (min-width: 768px) {
	.esg-left { padding-top: 8rem; height: auto; justify-content: flex-start; }
	.esg-title { font-size: 3rem; margin-bottom: 1rem; }
	.esg-desc { font-size: 1.125rem; line-height: 1.6; }
	.esg-right { height: 100%; }
	.esg-item { max-width: 28rem; padding: 2.5rem; aspect-ratio: 1/1; } /* 태블릿부터는 정사각형 유지 */
	.esg-badge { font-size: 1.125rem; margin-bottom: 1.5rem; }
	.esg-badge::before { width:6px; height:6px; }
	.esg-item-title { font-size: 2.25rem; margin-bottom: 1rem; }
	.esg-item-desc { font-size: 1.0625rem; margin-bottom: 0; }
	.esg-arrow { width: 3rem; height: 3rem; font-size: 1.2rem; }
}
@media (min-width: 1024px) {
	.esg-inner { flex-direction: row; align-items: center; }
	.esg-left { width: 50%; height: auto; justify-content: center; padding-top: 0; padding-bottom: 0; padding-right: 2rem; pointer-events: auto; }
	.esg-title { font-size: 4rem; margin-top: 1rem; margin-bottom: 1.5rem; }
	.esg-desc { max-width: 32rem; }
	
	/* PC버전에서는 양옆 배치이므로 상하 페이드가 아닌 중앙페이드 유지 */
	.esg-right {
		width: 50%; height: 100%;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
	}
	.esg-item { transform: none; width: 28rem; max-width: 100%; aspect-ratio: 1/1; }
	.esg-item.env { left: auto; right: 0; }
	.esg-item.soc { left: 0; right: auto; }
	.esg-item.gov { left: auto; right: 0; }
}
@media (min-width: 1440px) {
	.esg-left { padding-right: 4rem; }
	.esg-title { font-size: 5rem; }
	.esg-item { width: 32rem; }
	.esg-item.env { right: 2rem; }
	.esg-item.soc { left: 2rem; }
	.esg-item.gov { right: 2rem; }
}

.beyond-container { position: absolute; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; overflow: hidden; background: var(--primary); }
.beyond-text { font-size: 9vw; font-weight: 900; color: var(--on-primary); white-space: nowrap; letter-spacing: -0.05em; }

/* ==========================================
   6. Media / Portfolio (시공실적)
========================================== */
.media-section {
	background: var(--surface); color: var(--on-surface);
	display: flex; flex-direction: column; justify-content: center;
	padding-top: 6rem;
}
.media-header {
	position: relative; width: 100%; z-index: 20;
	display: flex; flex-direction: column; justify-content: flex-start;
	padding-left: 1.25rem; padding-right: 1.25rem;
	max-width: var(--site-width, 1760px);
	margin: 0 auto 2rem;
	box-sizing: border-box;
}
.media-title { font-size: 1.75rem; font-weight: 900; line-height: 1.2; color: var(--on-surface); margin-top: 0.5rem; letter-spacing: -0.05em; }
.media-track-inner {
	align-items: center; padding-left: 1.25rem; padding-right: 1.25rem; gap: 1.25rem;
	height: auto; padding-bottom: 3rem;
}
.horizontal-container.media-track-inner {
	height: 380px;
}
.media-card {
	flex-shrink: 0; width: 85vw; height: 100%; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer;
	background: var(--surface); transition: transform 0.6s ease, box-shadow 0.6s ease; border: 1px solid #eaeaea;
	display: flex; flex-direction: column; pointer-events: auto;
}
/* ★ media-card 내부 a 링크 (게시판 view 페이지로 이동) — 카드 전체 클릭 영역 */
.media-card-link {
	display: flex; flex-direction: column;
	width: 100%; height: 100%;
	color: inherit; text-decoration: none !important;
}
.media-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); border-color: transparent; }
.media-img-wrap { width: 100%; height: 55%; position: relative; overflow: hidden; }
.media-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; }
.media-card:hover img { transform: scale(1.05); }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,0.15); transition: transform 0.3s; }
.media-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); background: var(--primary); color: #fff; }
.media-content { height: 45%; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.media-cat { color: var(--primary); font-weight: 800; font-size: 0.875rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.media-cat::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block; }
.media-card-title { font-size: 1.125rem; font-weight: 800; line-height: 1.4; color: var(--on-surface); letter-spacing: -0.02em; }
@media (min-width: 768px) {
	.media-section { padding-top: 10rem; }
	.media-header { padding-left: 2.5rem; padding-right: 2.5rem; margin-bottom: 3rem; }
	.media-title { font-size: 3rem; }
	.media-track-inner { padding-left: 2.5rem; gap: 2rem; }
	.horizontal-container.media-track-inner { height: 480px; }
	.media-card { width: 420px; }
	.media-img-wrap { height: 60%; }
	.media-content { height: 40%; padding: 2rem; }
	.media-card-title { font-size: 1.5rem; }
	.play-btn { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
}
@media (min-width: 1024px) {
	.media-section { padding: 12rem 0; }
	.media-header { padding-left: 5rem; padding-right: 5rem; margin-bottom: 4rem; }
	.media-track-inner { padding-left: 5rem; gap: 3rem; }
	.horizontal-container.media-track-inner { height: 560px; }
	.media-card { width: 560px; }
	.media-content { padding: 3rem; }
	.media-card-title { font-size: 1.75rem; }
}
@media (min-width: 1440px) {
	.media-header { padding-left: 7rem; padding-right: 7rem; }
	.media-track-inner { padding-left: 8rem; }
}
@media (min-width: 1760px) {
	.media-header { padding-left: 5rem; padding-right: 5rem; }
}

/* ==========================================
   7. Partners (Marquee)
========================================== */
.partners-section {
	padding: 4rem 0 6rem;
	background: var(--surface);
	border-top: 1px solid rgba(0,0,0,0.05);
	overflow: hidden;
}
.partners-title-wrap { text-align: center; margin-bottom: 3rem; }
.partners-title { font-size: 1.5rem; font-weight: 800; color: var(--on-surface-alt); letter-spacing: -0.02em; }
.marquee-wrapper { position: relative; display: flex; width: 100%; overflow: hidden; user-select: none; }
.marquee-track {
	display: flex; align-items: center; justify-content: space-around;
	min-width: 100%; flex-shrink: 0; gap: 4rem; padding-right: 4rem;
	animation: marquee 25s linear infinite;
}
.partner-logo {
	/* ★ 고정 슬롯 크기 — 원본 이미지가 작아도 컨테이너에 맞춰 확대 (object-fit:contain 으로 비율 유지)
	   모바일/PC 모두 일정한 슬롯을 가져 마키 흐름이 자연스러움 */
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity 0.3s, transform 0.3s;
	fill: currentColor;
	color: var(--on-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.partner-logo:hover {
	opacity: 1;
	transform: translateY(-3px);
	background: rgba(0,75,141,0.04);
}
.partner-logo svg { max-height: 100%; max-width: 100%; width: auto; height: auto; }
/* ★ partner 게시판 동적 로고 img — 슬롯에 가득 차도록 (contain 으로 비율 유지) */
.partner-logo img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	filter: grayscale(0.3);
	transition: filter 0.3s;
}
.partner-logo:hover img { filter: grayscale(0); }

@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}
@media (min-width: 768px) {
	.partners-section { padding: 6rem 0 8rem; }
	.partners-title { font-size: 1.75rem; margin-bottom: 4rem; }
	.marquee-track { gap: 6rem; padding-right: 6rem; }
}

/* ==========================================
   8. News Section
========================================== */
.news-section { padding: 6rem 0; background-color: var(--surface-alt); color: var(--on-surface); position: relative; }
.news-header { margin-bottom: 2rem; position: relative; z-index: 10; }
.news-header-inner { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.news-title { font-size: 1.75rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.05em; }
.news-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 1rem; font-weight: 800; color: var(--on-surface-alt); transition: color 0.3s; align-self: flex-end; }
.news-link:hover { color: var(--primary); }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; position: relative; z-index: 10; }
.news-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: box-shadow 0.3s, transform 0.3s; height: 320px; }
.news-card:hover { box-shadow: var(--shadow-float); transform: translateY(-4px); }
.news-img-wrap { width: 100%; height: 50%; overflow: hidden; position: relative; }
.news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.news-card:hover img { transform: scale(1.05); }

/* ★ 이미지 없는 글 — 그라데이션 + 아이콘 플레이스홀더 (엑박 차단) */
.news-img-fallback {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 3.5rem;
	color: rgba(255,255,255,0.85);
	transition: transform 0.7s;
	overflow: hidden;
}
.news-img-fallback::after {
	content: ''; position: absolute; right: -20%; bottom: -30%;
	width: 70%; height: 70%; border-radius: 50%;
	background: rgba(255,255,255,0.08); pointer-events: none;
}
.news-card:hover .news-img-fallback { transform: scale(1.05); }
/* tone-* 클래스별 그라데이션 컬러 (게시판 종류별 시각 구분) */
.news-card.tone-notice    .news-img-fallback { background: linear-gradient(135deg, #004B8D 0%, #0066b8 60%, #2E86E1 100%); }
.news-card.tone-portfolio .news-img-fallback { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 60%, #34D399 100%); }
.news-card.tone-partner   .news-img-fallback { background: linear-gradient(135deg, #B45309 0%, #D97706 60%, #F59E0B 100%); }
.news-card.has-no-img .news-img-fallback i { font-size: 3rem; }
.news-card.large.has-no-img .news-img-fallback i { font-size: 5rem; }
.news-content { height: 50%; padding: 1.5rem; display: flex; flex-direction: column; }
.news-cat { font-size: 0.8125rem; font-weight: 800; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--primary); }
.news-cat::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block; }
.news-card-title { font-size: 1.125rem; font-weight: 800; line-height: 1.4; color: var(--on-surface); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.02em; }
.news-card.large { height: auto; }
.news-card.large .news-img-wrap { height: 50%; min-height: 200px; }
.news-card.large .news-content { height: 50%; padding: 1.5rem; }
.news-card.large .news-card-title { font-size: 1.375rem; margin-bottom: 0.75rem; }
.news-desc { color: var(--on-surface-alt); font-weight: 500; font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) {
	.news-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.news-card.large { grid-column: span 2; }
	.news-card.large .news-content { padding: 2rem; }
	.news-card.large .news-card-title { font-size: 1.75rem; margin-bottom: 1rem; }
}
@media (min-width: 1024px) {
	.news-section { padding: 10rem 0; }
	.news-header { margin-bottom: 3rem; }
	.news-header-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
	.news-title { font-size: 3.5rem; }
	.news-link { align-self: flex-end; margin-bottom: 0.5rem; font-size: 1.125rem; gap: 0.5rem; }
	.news-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); height: 560px; gap: 2rem; }
	.news-card { height: 100%; }
	.news-card.large { grid-column: span 2; grid-row: span 2; }
	.news-card.large .news-img-wrap { height: 55%; }
	.news-card.large .news-content { height: 45%; padding: 2.5rem; }
	.news-card.large .news-card-title { font-size: 1.875rem; margin-bottom: 1rem; }
	.news-desc { font-size: 1.0625rem; line-height: 1.6; }
}
@media (min-width: 1440px) {
	.news-section { padding: 12rem 0; }
	.news-header { margin-bottom: 4rem; }
	.news-title { font-size: 4rem; }
	.news-grid { height: 640px; }
}

/* ==========================================
   9. KPI Section
========================================== */
.kpi-section { padding: 6rem 0; background: var(--primary); color: var(--on-primary); position: relative; overflow: hidden; }
.kpi-section::before { content:''; position:absolute; top:-20%; right:-10%; width:80vw; height:80vw; background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); border-radius:50%; }
.kpi-header { margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 10; }
.kpi-title { font-size: 1.75rem; font-weight: 900; line-height: 1.2; margin-top: 0.5rem; letter-spacing: -0.05em; }
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; position: relative; z-index: 10; }
.kpi-card {
	height: 110px; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem;
	border-radius: var(--radius-lg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
	transition: all 0.3s;
}
.kpi-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-4px); border-color: rgba(255,255,255,0.3); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-num { font-size: 0.8125rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.02em;}
.kpi-num::before { content:''; width:6px; height:6px; border-radius:50%; background: #00ffaa; display:inline-block; }
.kpi-bottom { margin-top: auto; }
.kpi-value {
	font-size: 1.25rem; font-weight: 900; margin-bottom: 0.2rem; line-height: 1;
	font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.kpi-label { font-size: 0.8125rem; font-weight: 500; opacity: 0.9; }
@media (min-width: 640px) {
	.kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.kpi-card { height: 220px; padding: 2rem; }
	.kpi-num { font-size: 0.9375rem; }
	.kpi-value { font-size: 2rem; margin-bottom: 0.5rem; }
	.kpi-label { font-size: 0.9375rem; }
}
@media (min-width: 1024px) {
	.kpi-section { padding: 10rem 0; }
	.kpi-section::before { width:60vw; height:60vw; }
	.kpi-header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 4rem; gap: 1.5rem; }
	.kpi-title { font-size: 3.5rem; }
	.kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
	.kpi-card { height: 300px; padding: 2.5rem; }
	.kpi-num { font-size: 1.125rem; }
	.kpi-num::before { width:8px; height:8px; }
	.kpi-value { font-size: 3rem; margin-bottom: 1rem; }
	.kpi-label { font-size: 1.125rem; }
}
@media (min-width: 1440px) {
	.kpi-section { padding: 12rem 0; }
	.kpi-header { margin-bottom: 6rem; }
	.kpi-title { font-size: 4rem; }
	.kpi-card { height: 340px; padding: 3rem; }
	.kpi-value { font-size: 3.5rem; }
}

/* ==========================================
   10. Certifications (인증마크)
========================================== */
.cert-section { padding: 6rem 0; background: var(--surface); position: relative; overflow: hidden; perspective: 1000px; }
.cert-header { text-align: center; margin-bottom: 4rem; position: relative; z-index: 10;}
.cert-title { font-size: 1.75rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.05em; color: var(--on-surface); margin-top: 0.5rem; }
.cert-showcase {
	display: grid; grid-template-columns: 1fr; gap: 2rem;
	max-width: 1400px; margin: 0 auto; position: relative; z-index: 10;
}
.cert-box {
	background: var(--surface);
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: var(--radius-lg);
	padding: 3rem 1.5rem;
	text-align: center;
	box-shadow: var(--shadow-card);
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.cert-box:hover {
	border-color: var(--primary);
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.cert-circle {
	width: 140px; height: 140px; border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin-bottom: 2rem; position: relative;
	box-shadow: inset 0 0 0 6px #f3f4f6, 0 10px 20px rgba(0,0,0,0.05);
	background: #fff;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	/* ★ 자식 요소들이 동일한 3D 공간에서 함께 회전하도록 설정 → 반쪽 깨짐 방지 */
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
}
/* 호버 회전각 15deg → 12deg : 깨짐 위험을 더 줄임 */
.cert-box:hover .cert-circle { transform: scale(1.08) rotateY(12deg); }
.cert-circle::before {
	content: ''; position: absolute; inset: 10px; border-radius: 50%;
	border: 2px dashed rgba(0,0,0,0.1);
	/* ★ 부모와 같은 3D 평면 충돌 방지: 살짝 앞으로 띄움 */
	transform: translateZ(1px);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.cert-circle-text {
	font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; z-index: 2;
	transform: translateZ(2px); /* ★ 3D 공간 깊이값 → 회전 시 표면에 가려지지 않음 */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.cert-circle-sub {
	font-size: 0.75rem; font-weight: 700; margin-top: 0.25rem; z-index: 2;
	transform: translateZ(2px);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.cert-bcr .cert-circle { box-shadow: inset 0 0 0 6px #E5E7EB, 0 10px 20px rgba(0,0,0,0.05); }
.cert-bcr .cert-circle::before { border-color: #9CA3AF; }
.cert-bcr .cert-circle-text { color: #900; }
.cert-cgmp .cert-circle { box-shadow: inset 0 0 0 6px #CCFBF1, 0 10px 20px rgba(0,0,0,0.05); }
.cert-cgmp .cert-circle::before { border-color: #14B8A6; border-style: solid; border-width: 4px; }
.cert-cgmp .cert-circle-text { color: #0D9488; }
.cert-cgmp .cert-circle-sub { color: #F59E0B; }
.cert-icr .cert-circle { box-shadow: inset 0 0 0 6px #DBEAFE, 0 10px 20px rgba(0,0,0,0.05); }
.cert-icr .cert-circle::before { border-color: #2563EB; border-style: solid; border-width: 4px; }
.cert-icr .cert-circle-text { color: #1D4ED8; }
.cert-haccp .cert-circle { box-shadow: inset 0 0 0 6px #FEE2E2, 0 10px 20px rgba(0,0,0,0.05); }
.cert-haccp .cert-circle::before { border-color: #DC2626; border-style: solid; border-width: 6px; }
.cert-haccp .cert-circle-text { color: #B91C1C; }
.cert-haccp .cert-circle-sub { color: #F59E0B; }
.cert-name { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.02em; color: var(--on-surface); line-height: 1.3;}
.cert-desc { font-size: 0.9375rem; color: var(--on-surface-alt); font-weight: 500; line-height: 1.6; word-break: keep-all; }
@media (min-width: 768px) {
	.cert-showcase { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
	.cert-box { padding: 3.5rem 2rem; }
	.cert-circle { width: 150px; height: 150px; }
}
@media (min-width: 1024px) {
	.cert-section { padding: 10rem 0; }
	.cert-header { margin-bottom: 5rem; }
	.cert-title { font-size: 3.5rem; }
	.cert-showcase { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
	.cert-box { padding: 4rem 2rem; }
	.cert-circle { width: 160px; height: 160px; margin-bottom: 2.5rem; }
	.cert-circle-text { font-size: 2.5rem; }
	.cert-name { font-size: 1.5rem; margin-bottom: 1.5rem; }
	.cert-desc { font-size: 1rem; }
}
@media (min-width: 1440px) {
	.cert-section { padding: 12rem 0; }
	.cert-title { font-size: 4rem; }
}
/* 터치 디바이스에서는 호버 효과 비활성화 (모바일/태블릿 의도치 않은 sticky-hover 방지) */
@media (hover: none) {
	.cert-box:hover { transform: none; }
	.cert-box:hover .cert-circle { transform: none; box-shadow: inset 0 0 0 6px #f3f4f6, 0 10px 20px rgba(0,0,0,0.05); }
}

/* ==========================================
   11. Location (오시는 길)
========================================== */
.location-section {
	padding: 6rem 0;
	background: var(--secondary);
	color: var(--on-primary);
	position: relative;
	overflow: hidden;
}
.loc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}
.loc-text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 10;
}
.loc-eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-weight: 800; font-size: 0.9375rem; color: #60A5FA;
	margin-bottom: 1rem;
}
.loc-eyebrow::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; display: inline-block;
}
.loc-main-title {
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.05em;
	margin-bottom: 2.5rem;
	color: #ffffff;
}
.loc-divider {
	width: 100%; height: 1px;
	background: rgba(255,255,255,0.15);
	margin-bottom: 2.5rem;
}
.loc-info-group {
	display: flex; flex-direction: column; gap: 2rem;
}
.loc-info-item { display: flex; flex-direction: column; gap: 0.5rem; }
.loc-info-label { font-size: 0.9375rem; font-weight: 700; color: #94A3B8; }
.loc-info-value { font-size: 1.125rem; font-weight: 500; line-height: 1.5; color: #F8FAFC; word-break: keep-all; }
.loc-info-value.bold { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.75rem; }
.loc-info-value i { color: #60A5FA; }
.loc-map-col {
	position: relative;
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-shadow: 0 30px 60px rgba(0,0,0,0.3);
	clip-path: inset(10% 10% 10% 10% round 32px);
	transform: scale(0.95);
}
.loc-map-col iframe,
.loc-map-col .root_daum_roughmap,
.loc-map-col .wrap_map {
	width: 100% !important; height: 100% !important; border: none;
}
.loc-map-col iframe { transform: scale(1.1); }
@media (min-width: 768px) {
	.location-section { padding: 8rem 0; }
	.loc-main-title { font-size: 4rem; margin-bottom: 3rem; }
	.loc-divider { margin-bottom: 3rem; }
	.loc-info-value { font-size: 1.25rem; }
	.loc-info-value.bold { font-size: 1.75rem; }
	.loc-map-col { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
	.location-section { padding: 12rem 0; }
	.loc-grid { grid-template-columns: 1fr 1.2fr; gap: 6rem; }
	.loc-main-title { font-size: 5rem; }
	.loc-map-col { aspect-ratio: auto; height: 600px; }
}
@media (min-width: 1440px) {
	.loc-grid { gap: 8rem; }
	.loc-main-title { font-size: 6rem; }
	.loc-map-col { height: 700px; }
}

/* ==========================================
   12. Careers (인재채용)
========================================== */
.careers-section { padding: 6rem 0; position: relative; overflow: hidden; color: var(--on-surface); min-height: 60vh; display: flex; align-items: center; }
.careers-bg { position: absolute; inset: 0; z-index: 0; }
.careers-bg img { width: 100%; height: 100%; object-fit: cover; }
.careers-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.3)); z-index: 1; }
.careers-inner { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 3rem; }
.careers-text { color: var(--on-primary); }
.careers-title { font-size: 2rem; font-weight: 900; line-height: 1.2; margin-top: 1rem; margin-bottom: 1rem; letter-spacing: -0.05em; }
.careers-desc { font-size: 1rem; font-weight: 500; opacity: 0.9; line-height: 1.5; }
.careers-cards { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.career-card-item {
	background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem;
	display: flex; flex-direction: column; justify-content: center;
	box-shadow: var(--shadow-float); transition: transform 0.3s; position: relative; overflow: hidden;
	border: 1px solid transparent;
	text-decoration: none !important; /* a 태그 변환 대비 */
	color: inherit;
}
.career-card-item:hover { transform: translateY(-4px); border-color: var(--primary); }
.career-card-item.career-card-link { cursor: pointer; }
.career-card-item::before { content:''; position:absolute; bottom:0; right:0; width:100px; height:100px; background:radial-gradient(circle, rgba(0,75,141,0.05) 0%, transparent 70%); border-radius:50%; }
.career-card-title { font-size: 1.375rem; font-weight: 900; margin-bottom: 0.5rem; color: var(--on-surface); letter-spacing: -0.02em; }
.career-card-desc { font-size: 0.9375rem; font-weight: 500; color: var(--on-surface-alt); margin-bottom: 1rem; }
.career-card-item .btn-arrow-circle { position: absolute; bottom: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; font-size: 1rem; }
@media (min-width: 768px) {
	.careers-section { padding: 8rem 0; min-height: 70vh; }
	.careers-title { font-size: 3rem; margin-top: 1.5rem; margin-bottom: 1.5rem; }
	.careers-desc { font-size: 1.125rem; line-height: 1.6; }
	.careers-cards { gap: 1.5rem; flex-direction: row; }
	.career-card-item { width: 50%; padding: 2rem; aspect-ratio: auto; min-height: 240px; }
	.career-card-title { font-size: 1.75rem; margin-bottom: 1rem; }
	.career-card-desc { font-size: 1rem; margin-bottom: 2rem; }
	.career-card-item .btn-arrow-circle { bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; font-size: 1.25rem; }
	.career-card-item::before { width: 120px; height: 120px; }
}
@media (min-width: 1024px) {
	.careers-section { padding: 10rem 0; min-height: 80vh; }
	.careers-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 4rem; }
	.careers-text { width: 42%; }
	.careers-title { font-size: 4rem; }
	.careers-desc { font-size: 1.25rem; }
	.careers-cards { width: 55%; gap: 2.5rem; }
	.career-card-item { padding: 2.25rem; aspect-ratio: 1/1; min-height: auto; }
	.career-card-title { font-size: 1.75rem; }
	.career-card-desc { font-size: 1.0625rem; margin-bottom: 3rem; }
	.career-card-item .btn-arrow-circle { bottom: 2.5rem; right: 2.5rem; }
	.career-card-item::before { width: 150px; height: 150px; }
}
/* ★ 1024–1439px 구간: career-card 가 너무 가깝게 붙어 보이는 문제 해소 (1300px 화면 대응) */
@media (min-width: 1024px) and (max-width: 1439px) {
	.careers-inner { gap: 3rem; }
	.careers-text { width: 40%; }
	.careers-cards { width: 58%; gap: 1.75rem; }
	.career-card-item { padding: 2rem; }
	.career-card-title { font-size: 1.5rem; }
	.career-card-desc { font-size: 1rem; margin-bottom: 2.5rem; }
	.career-card-item .btn-arrow-circle { bottom: 2rem; right: 2rem; }
}
@media (min-width: 1440px) {
	.careers-section { padding: 12rem 0; }
	.careers-title { font-size: 4.5rem; }
	.career-card-item { padding: 3rem; }
	.career-card-item .btn-arrow-circle { bottom: 3rem; right: 3rem; }
}

/* ==========================================
   13. 메인페이지 헤더 보정 — 메인은 hero 가 풀스크린이므로 헤더가 hero 위에 떠 보이도록 처리
       (다른 페이지처럼 페이지 상단 여백 강제하지 않음)
       ※ 푸터 / floating 버튼 스타일은 tail.php 의 <style> 블록으로 이전됨
         (모든 페이지 공통 적용 목적)
========================================== */
.is-index .at-body { padding-top: 0 !important; }

/* 메인페이지에서는 apms_widget 출력이 디자인과 충돌하지 않도록 기본 보이지 않게 처리.
   추후 위젯을 다시 노출하려면 아래 규칙을 제거하면 됨. */
.main-renew .apms-widget-hidden { display: none !important; }

/* ★ 14. 불필요 요소 숨김 (tail.php 연동) */
#tail_Content { display: none !important; }
/* footer-sns 는 신규 푸터 디자인에서 이메일 아이콘으로 사용 → 노출 유지
   (값이 없으면 tail.php 가 출력 자체를 안 함) */

/* ★ 15. 최상단 스크롤 프로그레스 바 */
.scroll-progress-container {
	position: fixed; top: 0; left: 0; width: 100%; height: 4px;
	background: transparent; z-index: 99999; pointer-events: none;
}
.scroll-progress-bar {
	height: 100%; width: 0%;
	background: var(--primary); /* 포인트 컬러 */
	transition: width 0.1s ease-out;
}
/* 모바일(≤767px)에서는 진행률 바 숨김 — 데스크톱에서는 그대로 유지
   ※ head.php 의 #scroll-progress(보조 GSAP 타깃)도 함께 숨겨 잔재 노출 차단 */
@media (max-width: 767px) {
	.scroll-progress-container,
	#scroll-progress { display: none !important; }
}

/* ==========================================
   prefers-reduced-motion 대응 (iOS '동작 줄이기' / macOS '동작 줄이기' / Win '애니메이션 표시' 끔)
   ★ 정책: 큰 움직임만 끄고 핵심 UX(자동재생/스와이프/dots/탭)는 살린다.
     - JS 가 reveal/스크럽 핀 애니메이션을 건너뛰므로, 본 블록이 CSS 폴백을 담당:
       (1) GSAP 초기 hidden 상태로 두던 요소들을 즉시 노출
       (2) 데스크톱 가로 핀 섹션은 가로 스크롤(scroll-snap)로 폴백 — 모든 패널 탐색 가능
========================================== */
@media (prefers-reduced-motion: reduce) {
	.hero-slide-bg, .panel-img, .news-card img, .media-card img, .career-card-item,
	.cert-box, .cert-circle, .esg-item, .stack-card { transition: none !important; }

	/* ★ 마퀴 : 완전 정지 시 파트너 로고가 일부만 노출되어 정보 누락 → 절충안으로 속도를 50초(원래 25초)로 늦춤
	   (멀미 유발 가능성을 낮추되 콘텐츠 자체는 정상 노출) */
	.marquee-track { animation-duration: 50s !important; }

	/* (1) GSAP 가 reveal 로 가리던 요소들 — 즉시 노출 */
	.gsap-reveal     { opacity: 1 !important; visibility: visible !important; transform: none !important; }
	.hero-title-line { transform: translateY(0) !important; }
	.hero-desc       { transform: translateY(0) !important; opacity: 0.9 !important; }
	.sr-text .word   { opacity: 1 !important; transform: translateY(0) !important; }
	.cert-anim-item  { opacity: 1 !important; transform: none !important; }
	.loc-reveal-item { opacity: 1 !important; transform: none !important; }
	#loc-map-container { clip-path: inset(0% 0% 0% 0% round 32px) !important; transform: scale(1) !important; }
	#loc-map-container iframe { transform: scale(1) !important; }

	/* (2) 데스크톱 가로 핀-스크럽 폴백 — 가로 자연 스크롤로 모든 패널 탐색 가능
	   ※ 모바일(≤767px)은 이미 @media (max-width:767px) 에서 처리되므로 영향 없음
	   ※ 데스크톱(≥768px) reduce-motion 사용자에게만 의미 있음 */
	@media (min-width: 768px) {
		.horizontal-section {
			height: auto !important; min-height: 100vh;
			overflow-x: auto !important; overflow-y: hidden !important;
			-webkit-overflow-scrolling: touch;
			scroll-snap-type: x mandatory;
		}
		.horizontal-section::-webkit-scrollbar { height: 10px; }
		.horizontal-section::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 5px; }
		.horizontal-container { transform: none !important; height: auto !important; }
		.biz-panel { scroll-snap-align: start; }
		.media-card { scroll-snap-align: start; }

		/* stack-section : 카드 회전/스택 애니메이션 → 세로 흐름으로 정리 */
		.stack-section { height: auto !important; padding: 5rem 0; overflow: visible !important; }
		.stack-text-wrap { position: relative !important; inset: auto !important; padding: 0 2rem 2rem; pointer-events: auto !important; }
		.st-line { color: #fff !important; }
		.stack-cards-wrapper {
			position: relative !important; inset: auto !important;
			display: flex !important; flex-direction: column !important;
			gap: 1.5rem; padding: 0 2rem; pointer-events: auto !important;
		}
		.stack-card {
			position: relative !important; top: auto !important; left: auto !important;
			width: 100% !important; max-width: 1200px; margin: 0 auto !important;
			height: auto !important; min-height: 60vh;
			transform: none !important; padding: 2rem; border-radius: 20px;
		}
		.stack-card .dim-overlay { display: none !important; }
		#word-reveal-wrapper, .beyond-container { display: none !important; }

		/* ESG : stack-card#3 내부에서 자연 흐름으로 노출 */
		.esg-container { position: relative !important; inset: auto !important; opacity: 1 !important; pointer-events: auto !important; padding: 3rem 0 1rem; background: transparent !important; }
		.esg-inner { position: relative; inset: auto; flex-direction: column; }
		.esg-right { -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important; height: auto !important; }
		.esg-item { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100%; aspect-ratio: auto; max-height: none; margin: 0 0 1.25rem; }
	}
}

/* ==========================================
   16. ★ Mobile 정적 레이아웃 (≤767px)
   - ScrollTrigger 기반 핀/스크럽 애니메이션 비활성 (JS 측에서 isMobile 분기로 차단)
   - JS 가 더 이상 좌표를 조작하지 않으므로, 본 미디어쿼리에서
     세로 흐름의 정적 레이아웃을 직접 보장.
   - 목적: 빠른 정보 전달 / 화면 버벅임 제거 / 직관적 UX
========================================== */
@media (max-width: 767px) {

	/* (공통) GSAP가 초기 hidden 상태로 두던 요소들 — 즉시 노출 */
	.hero-title-line { transform: translateY(0) !important; }
	.hero-desc       { transform: translateY(0) !important; opacity: 0.9; }

	/* (Hero) 모바일 — 큰 타이틀과 본문 사이 호흡 확보
	   기본 1.5rem → 2.25rem 으로 늘려 임팩트 분리 강조 */
	.hero-title { margin-bottom: 2.25rem; }
	.gsap-reveal     { opacity: 1 !important; visibility: visible !important; transform: none !important; }
	.cert-anim-item  { opacity: 1 !important; transform: none !important; }
	.loc-reveal-item { opacity: 1 !important; transform: none !important; }
	#loc-map-container { clip-path: inset(0% 0% 0% 0% round 24px) !important; transform: scale(1) !important; }
	#loc-map-container iframe { transform: scale(1) !important; }

	/* (Business) 가로 핀-스크럽 해제 → 모바일 가로 스와이프 슬라이드
	   ★ 좌우 1.25rem 여백 + scroll-padding-inline 으로 스냅 시 좌측 들여쓰기 보존,
	     카드 너비는 calc(100vw - 2.5rem) — 한 화면에 카드 1장이 양옆 여백 두고 정확히 들어감. */
	.business-section.horizontal-section {
		height: auto; overflow: hidden;
		padding: 3rem 0;
	}
	#business-container.horizontal-container {
		display: flex !important;
		flex-direction: row;
		width: 100% !important;
		max-width: 100vw;
		height: auto;
		transform: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1.25rem;
		scrollbar-width: none;
		padding: 0 1.25rem;
		gap: 0.75rem;
	}
	#business-container.horizontal-container::-webkit-scrollbar { display: none; }
	.biz-panel {
		width: calc(100vw - 2.5rem) !important;
		flex: 0 0 calc(100vw - 2.5rem);
		height: auto;
		padding: 0;
		scroll-snap-align: start;
	}
	.biz-panel .panel-card {
		width: 100% !important; height: 65vh !important;
		min-height: 440px;
		border-radius: 20px !important;
	}

	/* (Stack) 복잡한 카드 스택 핀 애니메이션 해제 */
	.stack-section { height: auto; padding: 4rem 0 5rem; }
	.stack-text-wrap {
		position: relative; inset: auto;
		padding: 0 1.25rem 2rem;
		pointer-events: auto;
	}
	.st-line { color: #fff !important; }

	/* (Stack) 카드 영역 → 모바일 가로 스와이프 슬라이드
	   ★ business 와 동일 규칙: 좌우 1.25rem + scroll-padding-inline 으로
	     스냅 시 카드가 viewport 좌측에 딱 붙는 현상 방지. */
	.stack-cards-wrapper {
		position: relative; inset: auto;
		pointer-events: auto;
		display: flex !important; flex-direction: row !important;
		gap: 0.75rem;
		padding: 0 1.25rem;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1.25rem;
		scrollbar-width: none;
	}
	.stack-cards-wrapper::-webkit-scrollbar { display: none; }
	.stack-card {
		position: relative !important; top: auto !important; left: auto !important;
		width: calc(100vw - 2.5rem) !important;
		flex: 0 0 calc(100vw - 2.5rem);
		height: 55vh !important;
		min-height: 340px;
		transform: none !important;
		margin: 0;
		padding: 1.5rem;
		border-radius: 20px;
		scroll-snap-align: start;
	}
	.stack-card .dim-overlay { display: none; }

	/* (Stack) 단어 등장 / Beyond 텍스트는 모바일에서 숨김 */
	#word-reveal-wrapper, .beyond-container { display: none !important; }

	/* ESG: stack-card #3 안에서 자연 흐름으로 노출 (배경/구분선/그림자 없음) */
	.esg-container {
		position: relative !important; inset: auto !important;
		opacity: 1 !important; pointer-events: auto;
		margin: 0;
		padding: 2.5rem 0 1rem;
		background: transparent;
		border: none;
		box-shadow: none;
	}
	.esg-container::before,
	.esg-container::after { content: none !important; display: none !important; }
	/* ★ stack-cards-wrapper / stack-card 내부 .container 의 중복 좌우 패딩 제거
	   (부모에 이미 좌우 패딩이 있어 이중으로 적용되는 것 방지)
	   ※ ESG 컨테이너는 JS 로 stacked-section 직계 자식으로 이동되므로 여기서 제외 →
	     .esg-inner.container 는 기본 .main-renew .container 의 좌우 1.25rem 패딩을 그대로 사용 */
	.stack-cards-wrapper .container,
	.stack-card .container {
		padding: 0 !important;
	}
	.esg-inner {
		position: relative; inset: auto;
		flex-direction: column;
	}
	.esg-left { padding: 0 0 2rem; }
	/* ★ esg-title 과 esg-desc 사이 호흡 확보 — 모바일에서 큰 타이틀과 본문 분리 강조 */
	.esg-title { margin-bottom: 1.25rem; }
	.esg-right {
		-webkit-mask-image: none; mask-image: none;
		overflow: visible;
		height: auto;
	}
	/* (ESG) 모바일 — 좌 이미지 + 우 텍스트의 가로 리스트 카드
	   - 큰 풀카드(240px) → 콤팩트 가로 카드(140px)로 정보 밀도 ↑
	   - 어두운 오버레이(::after) 제거, 이미지는 풀 컬러 유지
	   - 우측 텍스트 영역은 별도 어두운 배경으로 가독성 확보 */
	.esg-item {
		position: relative !important; top: auto !important; left: auto !important; right: auto !important;
		transform: none !important;
		width: 100%; max-width: 100%;
		aspect-ratio: auto; max-height: none;
		height: 140px; min-height: 0;
		margin: 0 0 0.75rem;
		padding: 0;
		display: flex; flex-direction: row;
		background: rgba(15,23,42,0.95);
		overflow: hidden;
	}
	.esg-item img {
		position: relative; inset: auto;
		width: 40%; height: 100%;
		flex-shrink: 0;
		opacity: 1;
	}
	.esg-item::after { display: none; }  /* 풀카드용 그라데이션 오버레이 해제 */
	.esg-content {
		width: 60%; flex: 1; min-width: 0;
		padding: 1rem;
		height: 100%;
		justify-content: center;
	}
	.esg-badge {
		font-size: 0.6875rem;
		margin-bottom: 0.375rem;
		gap: 0.375rem;
	}
	.esg-badge::before { width: 4px; height: 4px; }
	.esg-item-title {
		font-size: 1rem;
		margin-bottom: 0.25rem;
		line-height: 1.3;
	}
	.esg-item-desc {
		font-size: 0.75rem;
		line-height: 1.45;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.esg-arrow { display: none; }  /* 모바일 콤팩트화 — arrow 숨김 */

	/* (Media) 가로 핀-스크럽 해제 → 모바일 가로 스와이프 슬라이드
	   ★ business / stack 과 동일 규칙: padding 1.25rem + scroll-padding-inline 1.25rem +
	     카드 너비 calc(100vw - 2.5rem) — 1장씩 정확히 스냅, dots 로 위치 인디케이트. */
	.media-section.horizontal-section {
		height: auto; overflow: hidden;
		padding: 4rem 0 3rem;
	}
	#media-container.horizontal-container {
		width: 100% !important;          /* ★ 기존 width:max-content 덮어쓰기 (가로스크롤 원인 차단) */
		max-width: 100vw;
		height: 360px;
		transform: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1.25rem;
		scrollbar-width: none;
		flex-wrap: nowrap;
		padding: 0 1.25rem;
		gap: 0.75rem;
	}
	#media-container.horizontal-container::-webkit-scrollbar { display: none; }
	#media-container.horizontal-container .media-card {
		width: calc(100vw - 2.5rem) !important;
		flex: 0 0 calc(100vw - 2.5rem);
		scroll-snap-align: start;
	}

	/* ★ 페이지 전체 가로 스크롤 안전망 — vw / 100vw / 잔여 transform 오류 등으로 인한
	   미세 오버플로우 차단 (메인페이지 한정으로 main 컨테이너에만 적용) */
	.main-renew { overflow-x: hidden; }

	/* (Hero) 슬라이드 BG 트랜지션을 가볍게 (GSAP 미사용 시에도 자연 페이드) */
	.hero-slide-bg { transition: opacity 0.4s ease; }

	/* (News) 더보기 + 버튼 — 모바일에서 우측 정렬
	   ※ 위의 .news-link { align-self: flex-end } 가 모바일 column 레이아웃에서 우측 정렬을 보장 */

	/* (News) 모바일 — large 카드 1개(메인 뉴스) + 나머지 4개 가로형 리스트 카드
	   - 정보 밀도 ↑, 스크롤 부담 ↓ (모바일 뉴스 앱 패턴)
	   - large 카드는 풀 이미지 + 본문, 일반 카드는 좌 110px 정사각 이미지 + 우 텍스트 */
	.news-section { padding: 4rem 0; }
	.news-grid { gap: 0.75rem; }

	.news-card.large {
		height: auto;
	}
	.news-card.large .news-img-wrap { height: 200px; min-height: 200px; }
	.news-card.large .news-content   { height: auto; padding: 1.25rem; }
	.news-card.large .news-card-title { font-size: 1.125rem; margin-bottom: 0.5rem; line-height: 1.35; }
	.news-card.large .news-desc       { -webkit-line-clamp: 2; font-size: 0.875rem; line-height: 1.5; }

	/* 일반 카드 — 가로 리스트형 */
	.news-card:not(.large) {
		height: auto;
		flex-direction: row;
	}
	.news-card:not(.large) .news-img-wrap {
		width: 110px;
		height: 110px;
		flex-shrink: 0;
	}
	.news-card:not(.large) .news-content {
		height: auto;
		flex: 1; min-width: 0;
		padding: 0.875rem 1rem;
		justify-content: center;
	}
	.news-card:not(.large) .news-cat {
		font-size: 0.6875rem;
		margin-bottom: 0.375rem;
	}
	.news-card:not(.large) .news-cat::before { width: 4px; height: 4px; }
	.news-card:not(.large) .news-card-title {
		font-size: 0.9375rem;
		line-height: 1.35;
		-webkit-line-clamp: 2;
	}

	/* (KPI) 주요 현황 수치 — 모바일 2x2 콤팩트 배치 (한 화면에 4개 모두 비교 가능) */
	.kpi-section { padding: 4rem 0; }
	.kpi-section::before { width: 70vw; height: 70vw; top: -15%; right: -20%; }
	.kpi-header { margin-bottom: 2rem; }
	.kpi-title { font-size: 1.875rem; }
	.kpi-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	.kpi-card {
		height: auto;
		min-height: 130px;
		padding: 1rem 0.875rem;
	}
	.kpi-num         { font-size: 0.75rem; gap: 0.375rem; }
	.kpi-num::before { width: 5px; height: 5px; }
	.kpi-value {
		font-size: 1.5rem;
		margin-bottom: 0.125rem;
		line-height: 1.05;
		letter-spacing: -0.04em;
	}
	.kpi-label {
		font-size: 0.75rem;
		line-height: 1.35;
		opacity: 0.85;
	}

	/* (Cert) 인증마크 — 모바일 2x2 콤팩트 배치 (한 화면에 4종 모두 비교 가능) */
	.cert-section { padding: 4rem 0; }
	.cert-header { margin-bottom: 2.5rem; }
	.cert-title { font-size: 2rem; }
	.cert-showcase {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
		max-width: 100%;
	}
	.cert-box {
		padding: 1.5rem 0.875rem;
	}
	.cert-circle {
		width: 90px; height: 90px;
		margin-bottom: 1rem;
		box-shadow: inset 0 0 0 4px #f3f4f6, 0 6px 12px rgba(0,0,0,0.05);
	}
	.cert-bcr   .cert-circle { box-shadow: inset 0 0 0 4px #E5E7EB, 0 6px 12px rgba(0,0,0,0.05); }
	.cert-cgmp  .cert-circle { box-shadow: inset 0 0 0 4px #CCFBF1, 0 6px 12px rgba(0,0,0,0.05); }
	.cert-icr   .cert-circle { box-shadow: inset 0 0 0 4px #DBEAFE, 0 6px 12px rgba(0,0,0,0.05); }
	.cert-haccp .cert-circle { box-shadow: inset 0 0 0 4px #FEE2E2, 0 6px 12px rgba(0,0,0,0.05); }
	.cert-circle::before { inset: 6px; }
	.cert-circle-text { font-size: 1.25rem; }
	.cert-circle-sub  { font-size: 0.625rem; margin-top: 0.125rem; }
	.cert-name {
		font-size: 0.9375rem;
		margin-bottom: 0.5rem;
		line-height: 1.25;
	}
	.cert-name span {
		font-size: 0.75rem !important;
		font-weight: 500;
		display: block;
		margin-top: 0.125rem;
	}
	.cert-desc {
		font-size: 0.75rem;
		line-height: 1.45;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ============================================================
	   ★ Mobile Slide Dots (Business / Stack 가로 스와이프 슬라이드 인디케이터)
	   - JS 가 동적으로 .mobile-slide-dots 컨테이너를 슬라이드 트랙 바로 다음에 삽입
	   - 각 점(.slide-dot) 은 클릭으로 해당 카드 위치로 scroll
	============================================================ */
	.mobile-slide-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		padding: 1.25rem 0 0.25rem;
	}
	.slide-dot {
		width: 8px; height: 8px; border-radius: 50%;
		background: rgba(0,0,0,0.18);
		border: none; padding: 0; cursor: pointer;
		transition: width 0.25s, background 0.25s, opacity 0.25s;
		opacity: 0.9;
	}
	.slide-dot.active {
		width: 22px; border-radius: 4px;
	}
	/* Stack 섹션(어두운 primary 배경): 흰 계열 */
	.stack-section .mobile-slide-dots .slide-dot {
		background: rgba(255,255,255,0.3);
	}
	.stack-section .mobile-slide-dots .slide-dot.active {
		background: var(--on-primary, #fff);
	}
	/* Business / Media 섹션(밝은 배경): primary 계열 */
	.business-section .mobile-slide-dots .slide-dot,
	.media-section    .mobile-slide-dots .slide-dot {
		background: rgba(0,0,0,0.18);
	}
	.business-section .mobile-slide-dots .slide-dot.active,
	.media-section    .mobile-slide-dots .slide-dot.active {
		background: var(--primary);
	}
}

/* (≥768px) 데스크톱/태블릿에서는 dots 자체를 숨김 — 모바일 전용 UI */
@media (min-width: 768px) {
	.mobile-slide-dots { display: none !important; }
}