@charset "utf-8";

/* CORECELL HOME (Rebuild v1)
 * - Desktop: 섹션 높이 = 업로드한 랜딩 PNG 높이(01~08) 고정
 * - Tablet/Mobile: height auto + 적절히 재배치(반응형 지원)
 * - 이미지/아이콘/제품컷 등은 자리만 확보(사용자 적용 예정)
 */

:root{
	/* Desktop heights (PNG 기준) */
	--h-hero: 835px;
	--h-culture: 690px;
	--h-story: 690px;
	--h-serum: 655px;
	--h-cert: 947px;
	--h-press: 1028px;
	--h-notice: 859px;

	/* --fs-gnb: 15px; */
	--fs-hero-title: 60px;
	--fs-hero-lead: 15px;

	--fs-story-title: 56px;

	--violet: #6d5bd0;
	--ink: #101828;
	--muted: rgba(16,24,40,.62);
}

/* =========================================================
   HOTFIX v30 - (02/04) 태블릿/모바일에서 desc가 화면 밖으로 밀리는 문제 해결
   - 원인1) flex item 기본 min-width:auto → 긴 텍스트가 줄바꿈 없이 overflow
   - 원인2) word-break: keep-all + br 숨김 → 한글 줄바꿈이 더 어려워짐
   - 해결) flex 자식에 min-width:0 부여 + 줄바꿈 정책을 break-word로 재정의
   - 범위) 02(CULTURE), 04(SERUM) 섹션에만 국한
   ========================================================= */

@media (max-width: 1024px) {
	.section.product.culture .product__left,
	.section.product.serum .product__left {
		min-width: 0; /* flex item overflow 방지 핵심 */
	}

	.section.product.culture .desc,
	.section.product.serum .desc {
		max-width: 100% !important;
		width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important; /* keep-all 금지 */
		line-break: loose;
	}
}

@media (max-width: 640px) {
	/* 기존 규칙에서 br을 숨기며 2줄 문장을 1줄로 붙이는 문제가 있어 복원 */
	.section.product.culture .desc br,
	.section.product.serum .desc br {
		display: inline;
	}
}

/* =========================================================
   HOTFIX v30 - (02 CULTURE / 04 SERUM) 태블릿/모바일 desc 오버플로우 & 2줄 복구
   ========================================================= */

/* flex 자식이 기본 min-width:auto 이면, 긴 문장이 줄바꿈 대신 overflow 되는 경우가 있어 0으로 강제 */
.section.product.culture .product__left,
.section.product.serum   .product__left {
  min-width: 0 !important;
}

/* desc 줄바꿈 정책 재정의 (keep-all → break-word) */
.section.product.culture .desc,
.section.product.serum   .desc {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 모바일에서도 원래 2줄(br) 유지 */
@media (max-width: 640px) {
  .section.product.culture .desc br,
  .section.product.serum   .desc br {
    display: inline !important;
  }
}

/* =========================================================
   HOTFIX v30 - (02 CULTURE / 04 SERUM) desc 텍스트 줄바꿈 복구
   - flex 아이템(min-width:auto) 때문에 텍스트가 줄바꿈이 안 되고 화면을 밀어내는 케이스 대응
   - 한글 문장에서는 word-break: keep-all 이 오버플로우를 유발할 수 있어 break-word로 재정의
   - 모바일에서 br 숨김을 해제하여 원래 2줄 구성 유지
   ========================================================= */

/* flex 자식이 줄바꿈되도록 최소폭 해제 */
.section.product.culture .product__left,
.section.product.serum   .product__left {
  min-width: 0 !important;
}

/* 텍스트는 반드시 영역 안에서 줄바꿈 */
.section.product.culture .desc,
.section.product.serum   .desc {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 모바일에서 2줄(br) 유지 */
@media (max-width: 640px) {
  .section.product.culture .desc br,
  .section.product.serum   .desc br {
    display: inline !important;
  }
}

/* Desktop fixed heights (PNG 기준) */
.hero{ height: var(--h-hero); }
.culture{ height: auto; }
.story{ height: auto; }
.serum{ height: auto; }
.cert{ height: var(--h-cert); }
.press{ height: var(--h-press); }
.notice{ height: auto; }

/* Tablet/Mobile: 자동 높이 + 패딩 */
@media (max-width: 1280px){
	.hero,.culture,.story,.serum,.cert,.press,.notice{
		height: auto;
	}
	
	.hero .section__inner{ padding-top: calc(var(--gnb-h) + 64px); padding-bottom: 100px; }
	.story .section__inner{ padding: 0; }
}

/* ---------------- HERO ---------------- */
.hero{
	color: rgba(255,255,255,.92);
}

.hero .section__bg{
	/* TODO: 배경 이미지 적용(사용자 편집 예정)
	   데스크톱 디버그용으로 PNG를 배경에 걸고 싶으면 아래 주석을 해제하세요.
	   background: url("../img/home/01.png") center top / cover no-repeat;
	*/
	background: url("../img/home/bg-landing-01-slide-brand.png") center top / cover no-repeat;
	/*
	background:
		radial-gradient(circle at 76% 34%, rgba(255,255,255,.18), transparent 42%),
		linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.14));
	*/
}

.hero__inner{
	height:100%;
	display:flex;
	align-items:center;
}

.hero__content{
	padding-top: var(--gnb-h);
	width: 680px;
}

.hero__title{
	margin:0;
	font-size: var(--fs-hero-title);
	font-weight: 950;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.hero__lead{
	margin: 18px 0 0;
	font-size: var(--fs-hero-lead);
	line-height: 2.0;
	color: rgba(255,255,255,.88);
}

.hero__tag{
	margin: 18px 0 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .01em;
	color: rgba(255,255,255,.86);
}

.hero__pager{
	margin-top: 22px;
	display:flex;
	gap: 10px;
	align-items:center;
}

.hero__pDot{
	width: 6px; height: 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.35);
}
.hero__pDot.is-active{ background: rgba(255,255,255,.92); }

/* ---------------- Product (Culture) ---------------- */
.product.culture .section__bg{
	/* background: url("../img/home/02.png") center top / cover no-repeat; */
	background: url("../img/home/bg-landing-02-product-culture-media.png") center top / cover no-repeat;
	/*
	background:
		radial-gradient(circle at 18% 32%, rgba(16,24,40,.06), transparent 55%),
		linear-gradient(180deg, #f7f9fc, #ffffff);
	*/
}

/* ---------------- Product (Serum) ---------------- */
/* home.php에서 섹션 클래스가 serum-additive로 들어가는 케이스도 있어서 같이 매칭 */
.product.serum-additive .section__bg,
.product.serum .section__bg{
	/* background: url("../img/home/04.png") center top / cover no-repeat; */
	background: url("../img/home/bg-landing-04-product-serum-additive.png") center top / cover no-repeat;
	/*
	background:
		radial-gradient(circle at 18% 32%, rgba(16,24,40,.06), transparent 55%),
		linear-gradient(180deg, #f7f9fc, #ffffff);
	*/
}

/* LANDING #4 (SERUM ADDITIVE) - 데스크톱 기준 미세조정 */
@media (min-width: 1200px){
  .product.serum-additive .product__grid{
    padding-top: 186px; /* 디자인 대비 상단 여백 확보 */
    grid-template-columns: 520px 1fr;
    column-gap: 76px;
  }

  .product.serum-additive .product__kicker{
    letter-spacing: 0.08em;
  }

  .product.serum-additive .product__meta{
    margin-top: 56px;
  }

  .product.serum-additive .product__nav{
    margin-top: 34px; /* 좌/우 버튼 위치를 디자인처럼 살짝 아래로 */
  }

  .product.serum-additive .product__progress{
    margin-left: 56px;
  }

  .product.serum-additive .product__card{
    width: 242px;
  }

  .product.serum-additive .product__thumb{
    height: 210px;
  }
}

.product__grid{
	height:100%;
	display:grid;
	grid-template-columns: 520px 1fr;
	gap: 36px;
	align-items: center;
}

.kicker{
	font-size: var(--fs-kicker);
	font-weight: 900;
	letter-spacing: .14em;
	color: rgba(16,24,40,.50);
}

.brandLine{
	margin-top: 10px;
	font-size: 13px;
	font-weight: 900;
	color: rgba(16,24,40,.85);
}

.sectionTitle{
	margin: 10px 0 0;
	font-size: var(--fs-section-title);
	font-weight: 950;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.subTitle{
	margin-top: 10px;
	font-size: 13px;
	font-weight: 800;
	color: rgba(16,24,40,.60);
}

.desc{
	margin-top: 18px;
	font-size: 13px;
	line-height: 2.0;
	color: rgba(16,24,40,.58);
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height: 34px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 900;
}

.btn--ghost{
	margin-top: 20px;
	border: 1px solid rgba(16,24,40,.18);
	background: rgba(255,255,255,.78);
	color: rgba(16,24,40,.78);
}

.sliderCtrl{
	margin-top: 18px;
	display:flex;
	align-items:center;
	gap: 10px;

	/***********************************
	| Swiper 작업 전까지 숨길 것
	***********************************/
	visibility: hidden;
}

.sliderCtrl__btn{
	width: 28px; height: 28px;
	border-radius: 999px;
	border: 1px solid rgba(16,24,40,.14);
	background: rgba(255,255,255,.90);
}

.sliderCtrl__bar{
	flex: 1;
	height: 2px;
	background: rgba(109,91,208,.22);
	border-radius: 999px;
	overflow:hidden;
}

.sliderCtrl__fill{
	display:block;
	width: 26%;
	height: 100%;
	background: var(--violet);
}

/* Card strip placeholder (Swiper 자리) */
.cardStrip{
	display:flex;
	gap: 26px;
	align-items: center;
	justify-content:flex-start;
}

.pCard{
	width: 220px;
	border-radius: 14px;
	padding: 14px;
	text-align:center;
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(16,24,40,.10);
	/* box-shadow: 0 10px 22px rgba(16,24,40,.08); */
}

.pCard--blue{
	background: rgba(255,255,255,.92);
}

.pCard__img{
	height: 116px;
	border-radius: 10px;
	background: rgba(16,24,40,.08); /* TODO: 제품 이미지 */

	display: flex;
	justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
}
.pCard__img img{
	width: auto;
	height: 85%;
	display: block;
}

.pCard__name{
	margin-top: 10px;
	font-size: 12px;
	font-weight: 900;
}

.pCard__sub{
	margin-top: 6px;
	font-size: 11px;
	color: rgba(16,24,40,.56);
}

.section.product.serum .pCard {
	cursor: pointer;
}

@media (max-width: 1280px){
	.product__grid{
		grid-template-columns: 1fr;
		gap: 26px;
		align-items: start;
	}
	.cardStrip{
		flex-wrap: wrap;
	}
}

/* ---------------- STORY ---------------- */
.story{
	color: rgba(255,255,255,.92);
}

.story .section__bg{
	/* background: url("../img/home/03.png") center top / cover no-repeat; */
	background: url("../img/home/bg-landing-03-corecell-story.png") center top / cover no-repeat;
	/*
	background: linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.16));
	*/
}

.story__inner{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	padding: 0 var(--container-side-pad);
}

.story__panel{
	/* 1700px 컨테이너(좌/우 149px 패딩) 안에서 "우측 정렬" + 폭 고정 */
	width: 520px;
	max-width: 520px;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

.story__brand{
	font-size: 32px;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	letter-spacing: -0.04em;
	opacity: .95;
}

.story__title{
	font-size: var(--fs-story-title);
	font-family: Poppins, sans-serif;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.05;
	margin-top: 0;
}

.story__desc{
	font-size: 22px;
	font-weight: 400;
	line-height: 1.85;
	opacity: .95;
	margin-top: 18px;
	/* 2026.02.20_arumizz */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (max-width: 1024px){
	.story__desc{
		font-size: 18px;
	}
}

@media (max-width: 768px){
	.story__brand{
		font-size: 24px;
	}
	.story__title{
		font-size: 42px;
	}
	.story__desc{
		font-size: 18px;
	}
}

.btn--dark{
	height: 42px;
	font-size: 22px;
	font-weight: 500;
	margin-top: 18px;
	padding: 8px 16px;
	border: 1px solid rgba(255,255,255,.26);
	background: rgba(0,0,0,.22);
	color: rgba(255,255,255,.92);
}

@media (max-width: 1280px){
	.story__inner{ justify-content: flex-start; }
	.story__panel{ width: min(560px, 100%); }
}

@media (max-width: 1024px){
	.btn--dark{
		font-size: 18px;
	}
}

/* ---------------- CERT ---------------- */
.cert{
	--cert-pad-x: 149px; /* 1700px 컨텐츠 영역 내 좌/우 여백 */
	--cert-card-w: 299px;
	--cert-card-h: 421px; /* 카드(이미지 영역) 높이 */
	--cert-card-gap: 69px;
}

/* 배경 */
.cert .section__bg{
	background: url("../img/home/bg-landing-05-certifications.png") center top / cover no-repeat;
}

/* 섹션 높이(스크린 디자인 기준) */
.cert{
	/* min-height: var(--h-cert); */
}

/* 1700px 컨텐츠 박스 + 좌/우 149px 패딩 */
.cert .container{
	max-width: var(--container);
	/* padding-left: var(--cert-pad-x);
	padding-right: var(--cert-pad-x); */
}

/* 헤더(좌: 타이틀, 우: 더보기) */
.cert .secHead{
	padding-top: calc(128px + 72px);
	padding-bottom: 0;
}

.cert .secHead__kicker{
	letter-spacing: .12em;
}

.cert .secHead__title{
	margin-top: -5px;
	font-size: 49px;
	font-family: Pretendard, sans-serif;
	font-weight: 600;
	letter-spacing: -0.03em;
}

/* 더보기 버튼(디자인처럼 슬림하게) */
.cert .btn.btn--ghost{
	border-color: rgba(0,0,0,.35);
	color: rgba(0,0,0,.75);
}

/* 카드 스트립(4개 노출) */
.cert__swiper{
	position: relative;
	margin-top: 10px;
}

.cert__swiper-list{
	display: flex;
	gap: var(--cert-card-gap);
	align-items: flex-start;
}

/* 카드 */
.certCard{
	flex: 0 0 var(--cert-card-w);
	width: var(--cert-card-w);
	text-decoration: none;
	color: inherit;
}

.certCard__img{
	width: 100%;
	height: var(--cert-card-h);
	background: #ffffff;
	border-radius: 8px;
	/* box-shadow: 0 10px 30px rgba(0,0,0,.10); */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.certCard__img img{
	width: 100%;
	height: 100%;
	aspect-ratio: 297 / 419;
	object-fit: cover;
}

/* 캡션(카드 아래) */
.certCard__label{
	margin-top: 16px;
	text-align: center;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: rgba(0,0,0,.85);
}

/* 좌/우 화살표: 1402px(=1700-149*2) 바깥으로 살짝 튀어나오도록 */
.cert__nav{
	position: absolute;
	top: calc(var(--cert-card-h) / 2 + 16px);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: none;
	background: rgba(80,80,80,.55);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
}

.cert__nav svg{ width: 16px; height: 16px; }

.cert__nav--prev{
	left: calc(var(--cert-pad-x) * -1 + 20px);
}

.cert__nav--next{
	right: calc(var(--cert-pad-x) * -1 + 20px);
}

/* ---------------- Responsive ---------------- */

/* 태블릿: 좌/우 패딩 축소 + 카드 2~3개 느낌 */
@media (max-width: 1280px){
	.cert{ --cert-pad-x: 40px; --cert-card-gap: 32px; }
	.cert .secHead{ padding-top: 40px; }
	.cert .secHead__title{ font-size: 34px; }
	.cert__nav--prev{ left: 10px; }
	.cert__nav--next{ right: 10px; }
}

/* 모바일: 수평 스크롤(스와이퍼 붙이기 전 임시), 화살표 숨김 */
@media (max-width: 768px){
	.cert{ --cert-pad-x: 20px; --cert-card-gap: 18px; --cert-card-w: 240px; --cert-card-h: 340px; }
	.cert__swiper-list{ overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
	.certCard{ scroll-snap-align: start; }
	.cert__nav{ display:none; }
	.cert .secHead{ padding-top: 28px; padding-bottom: 12px; }
	.cert .secHead__title{ font-size: 28px; line-height: 32px; }
	.certCard__label{ font-size: 16px; }
}


/* ---------------- PRESS ---------------- */
.press{ background:#fff; }
.press .section__bg{
	background: url("../img/home/bg-landing-06-press.png") center top / cover no-repeat;
	/*
	background:#fff;
	*/
}

.pressHead{
	padding-top: 74px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.pressGrid{
	margin-top: 24px;
	display:grid;
	grid-template-columns: 360px 1fr;
	gap: 32px;
	align-items:start;
}

.pressThumb{
	height: 270px;
	border-radius: 10px;
	background: rgba(16,24,40,.06); /* TODO: 이미지 */
}

.pressItem + .pressItem{ margin-top: 16px; }

.pressItem__title{
	font-size: 13px;
	font-weight: 900;
	line-height: 1.75;
	color: rgba(16,24,40,.88);
}

.pressItem__meta{
	margin-top: 10px;
	font-size: 11px;
	color: rgba(16,24,40,.55);
}

@media (max-width: 1280px){
	.pressHead{ padding-top: 24px; }
	.pressGrid{ grid-template-columns: 1fr; }
}

/* ---------------- NOTICE ---------------- */
.notice .section__bg{
	/* background: url("../img/home/07.png") center top / cover no-repeat; */
	background: url("../img/home/bg-landing-07-notice.png") center top / cover no-repeat;
	/*
	background:
		radial-gradient(circle at 18% 26%, rgba(16,24,40,.05), transparent 60%),
		linear-gradient(180deg, #f7f9fc, #ffffff);
	*/
}

.noticeHead{
	padding-top: 120px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.noticeGrid{
	margin-top: 24px;
	display:grid;
	grid-template-columns: 1fr 420px;
	gap: 24px;
	align-items:start;
}

.noticeList{
	background: rgba(255,255,255,.84);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 12px 22px rgba(16,24,40,.06);
	border: 1px solid rgba(16,24,40,.08);
}

.noticeRow{
	display:grid;
	grid-template-columns: 62px 1fr 110px;
	gap: 12px;
	align-items:center;
	padding: 10px 8px;
	cursor: pointer;
}

.noticeRow + .noticeRow{ border-top: 1px solid rgba(16,24,40,.06); }

.badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height: 22px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
}

.badge--violet{ background: rgba(109,91,208,.14); color: rgba(109,91,208,.92); }
.badge--gray{ background: rgba(16,24,40,.08); color: rgba(16,24,40,.65); }

.noticeRow__title{
	font-size: 12px;
	font-weight: 800;
	color: rgba(16,24,40,.82);
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

.noticeRow__date{
	font-size: 11px;
	color: rgba(16,24,40,.55);
	text-align:right;
}

.inquiry{
	border-radius: 14px;
	padding: 20px;
	min-height: 260px;
	color: rgba(255,255,255,.92);
	background:
		radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 45%),
		linear-gradient(135deg, rgba(0,0,0,.82), rgba(0,0,0,.55));
}

.inquiry__k{
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	opacity: .78;
}

.inquiry__t{
	margin-top: -13px;
	font-size: 22px;
	font-weight: 950;
}

.inquiry__d{
	margin-top: 24px;
	font-size: 12px;
	line-height: 1.95;
	opacity: .88;
}

.btn--primary{
	margin-top: 16px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.22);
	color: rgba(255,255,255,.95);
}

@media (max-width: 1280px){
	.noticeHead{ padding-top: 24px; }
	.noticeGrid{ grid-template-columns: 1fr; }
}

/* CORECELL HERO+GNB TUNING (v7) ----------------------------------------------
 * v6 + 사용자 요청 반영:
 * - HERO(01) content: 컨테이너(1700px) 기준 좌/우 149px "대칭 안전여백" 보장
 *   → width:100% + padding-inline:149px 방식 (길어져도 우측 149px 확보)
 * - 기존 타이포/간격 튜닝, 배경(background:url...) 유지
 * - GNB: 폰트/간격/언어 UI/햄버거 튜닝 유지
 *
 * NOTE:
 * - 배경(background:url...) 및 랜딩 고정 높이 규칙은 건드리지 않습니다.
 * - 아래 변수만 만지면 1~2px 단위로 쉽게 튜닝 가능합니다.
 * --------------------------------------------------------------------------- */

:root{
  /* ---------------- HERO(01) ---------------- */
  --cc-hero-safe: 149px;      /* 컨테이너 좌/우 안전여백(대칭) */
  --cc-hero-y: 0px;           /* + 아래로, - 위로 */
  --cc-hero-max-w: 820px;

  --cc-hero-title: 92px;
  --cc-hero-lead: 39px;
  --cc-hero-slogan: 37px;

  --cc-hero-gap-1: 26px;
  --cc-hero-gap-2: 30px;
  --cc-hero-gap-3: 34px;

  --cc-hero-marker: 12px;
  --cc-hero-dot: 8px;
  --cc-hero-dot-gap: 8px;
}

/* ---------------- HERO(01) ---------------- */
/* 원본 CSS에서 .hero__inner가 이미 align-items:center 이므로 그 구조를 그대로 사용 */
.hero__content{
  width: 100% !important;
  max-width: none !important;

  /* 중앙정렬 방해 요소 제거 */
  padding-top: 0 !important;

  /* 컨테이너 기준 좌/우 149px 대칭 여백 */
  padding-left: var(--cc-hero-safe) !important;
  padding-right: var(--cc-hero-safe) !important;
  box-sizing: border-box !important;

  /* 상하 미세 보정 */
  transform: translateY(var(--cc-hero-y)) !important;

  /* 기존 margin-left 방식 제거 */
  margin-left: 0 !important;
}

/* HERO 내부 텍스트 블록 폭은 유지(디자인 느낌) */
.hero__title,
.hero__lead,
.hero__tag,
.hero__pager{
  max-width: var(--cc-hero-max-w) !important;
}

/* 타이틀/리드/슬로건(.hero__tag) */
.hero__title{
  font-size: var(--cc-hero-title) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}
.hero__lead{
  margin-top: var(--cc-hero-gap-1) !important;
  font-size: var(--cc-hero-lead) !important;
  line-height: 1.55 !important;
  /* letter-spacing: -0.01em !important; */
}
.hero__tag{
  margin-top: var(--cc-hero-gap-2) !important;
  font-size: var(--cc-hero-slogan) !important;
  font-family: Poppins, sans-serif;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
}

/* 페이저(.hero__pDot) */
.hero__pager{ margin-top: var(--cc-hero-gap-3) !important; }
.hero__pDot{
  width: var(--cc-hero-dot) !important;
  height: var(--cc-hero-dot) !important;
  margin-right: var(--cc-hero-dot-gap) !important;
}

/* ---------------- Tablet (<=1200) ----------------
 * - 데스크톱 기준 좌/우 고정 여백은 해제(가독성/폭 확보)
 * - 폰트/간격 축소
 */
@media (max-width: 1200px){
  :root{
    --cc-hero-safe: 0px;
    --cc-hero-max-w: 640px;

    --cc-hero-title: 64px;
    --cc-hero-lead: 22px;
    --cc-hero-slogan: 20px;

    --cc-hero-gap-1: 18px;
    --cc-hero-gap-2: 22px;
    --cc-hero-gap-3: 26px;

    --cc-hero-marker: 10px;
    --cc-hero-dot: 7px;
  }
}

/* ---------------- Mobile (<=768) ----------------
 * - GNB nav는 숨김
 * - HERO 폭 92vw + 폰트 축소
 */
@media (max-width: 768px){
  :root{
    --cc-hero-max-w: 92vw;
    --cc-hero-title: 42px;
    --cc-hero-lead: 16px;
    --cc-hero-slogan: 16px;

    --cc-hero-gap-1: 14px;
    --cc-hero-gap-2: 18px;
    --cc-hero-gap-3: 20px;
  }
}


/* =========================================================
 * CORECELL HOME TUNING (v8)
 * - Landing #2: CULTURE MEDIA (product.culture)
 * - 목표: 2560 디자인 기준 느낌(타이포/간격/카드 크기/슬라이더 컨트롤 위치)
 * - 주의: 배경 이미지 선언(section__bg)은 사용자 원본 유지
 * ========================================================= */

:root{
	/* Landing #2 (Culture) - Desktop tuning */
	--cc2-left-pad-top: 128px;
	--cc2-left-pad-bottom: 128px; /* sliderCtrl absolute 공간 확보 */
	--cc2-col-left: 460px;
	--cc2-gap: 64px;

	--cc2-kicker: 32px;
	--cc2-brand: 29px;
	--cc2-title: 56px;
	--cc2-sub: 27px;
	--cc2-desc: 22px;

	--cc2-btn-h: 42px;
	--cc2-btn-fs: 22px;

	--cc2-card-w: 320px;
	--cc2-card-pad: 22px;
	--cc2-card-img-h: 210px;

	--cc2-ctrl-bottom: 110px; /* section 하단 기준 */
	--cc2-ctrl-gap: 14px;
	--cc2-ctrl-btn: 40px;
	--cc2-ctrl-bar-h: 3px;
}

/* ---- Grid / columns ---- */
.product.culture .product__grid,
.product.serum .product__grid{
	position: relative;
	grid-template-columns: var(--cc2-col-left) 1fr;
	gap: var(--cc2-gap);
	align-items: stretch;
}

/* ---- Left block (type) ---- */
.product.culture .product__left,
.product.serum .product__left{
	display:flex;
	flex-direction:column;
	height: 100%;
	padding-top: var(--cc2-left-pad-top);
	padding-bottom: var(--cc2-left-pad-bottom);
}
/* .product.serum .product__left{
	padding-top: 0;
} */

.product.culture .kicker,
.product.serum .kicker,
.cert .kicker{
	font-size: var(--cc2-kicker);
	font-family: Poppins, sans-serif;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: #503191; /* violet tone */
}

@media (max-width: 768px){
	.product.culture .kicker,
	.product.serum .kicker,
	.cert .kicker{
		font-size: 24px;
	}
}

.product.culture .brandLine,
.product.serum .brandLine{
	margin-top: 14px;
	font-size: var(--cc2-brand);
	font-weight: 700;
	color: rgba(16,24,40,.88);
	letter-spacing: -0.04em;
}

@media (max-width: 768px){
	.product.culture .brandLine,
	.product.serum .brandLine{
		font-size: 24px;
	}
}

.product.culture .sectionTitle,
.product.serum .sectionTitle{
	margin-top: -15px;
	font-size: var(--cc2-title);
	font-family: Play, sans-serif;
	font-weight: 950;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: rgba(16,24,40,.92);
}

.product.culture .subTitle,
.product.serum .subTitle{
	margin-top: 14px;
	font-size: var(--cc2-sub);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: rgba(16,24,40,.78);
}

@media (max-width: 768px){
	.product.culture .subTitle,
	.product.serum .subTitle{
		font-size: 20px;
		margin-top: 4px;
	}
}

.product.culture .desc,
.product.serum .desc{
	margin-top: 24px;
	font-size: var(--cc2-desc);
	line-height: 1.5em;
	color: rgba(16,24,40,.62);
}

.product.culture .btn--ghost,
.product.serum .btn--ghost,
.cert .btn--ghost,
.press .btn--ghost,
.notice .btn--ghost{
	margin-top: 5px;
	height: var(--cc2-btn-h);
	padding: 0 20px;
	border-radius: 12px;
	font-size: var(--cc2-btn-fs);
	font-weight: 500;
	border: 1px solid rgba(109,91,208,.45);
	background: rgba(255,255,255,.86);
	color: rgba(109,91,208,.92);
}

@media (max-width: 1024px){
	.product.culture .btn--ghost,
	.product.serum .btn--ghost,
	.cert .btn--ghost,
	.press .btn--ghost,
	.notice .btn--ghost{
		font-size: 18px;
	}
}

@media (max-width: 768px){
	.product.culture .btn--ghost{
		margin-top: 5px;
	}
}

/* CULTURE MEDIA - 더보기 버튼 데스크톱 튜닝 */
.product.culture .btn,
.product.serum .btn,
.cert .btn,
.press .btn,
.notice .btn{
  min-width: auto;
  padding: 8px 16px;
  width: auto;
  align-self: flex-start;
}

/* ---- Slider controls (buttons + long bar) ----
 * 디자인처럼 "버튼 2개 + 긴 라인"을 왼쪽 컬럼 아래에 깔아두기 위해
 * grid 전체 폭으로 absolute 배치한다.
 */
/* .product.culture .sliderCtrl{
	position:absolute;
	left: 0;
	right: 0;
	bottom: var(--cc2-ctrl-bottom);
	margin: 0;
	padding-left: 0;
	display:flex;
	align-items:center;
	gap: var(--cc2-ctrl-gap);
} */

.product.culture .sliderCtrl__btn{
	width: var(--cc2-ctrl-btn);
	height: var(--cc2-ctrl-btn);
	border-radius: 999px;
	border: 1px solid rgba(16,24,40,.16);
	background: rgba(255,255,255,.92);
	position: relative;
}

/* simple arrow glyph */
.product.culture .sliderCtrl__btn::after{
	content:"";
	position:absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(16,24,40,.55);
	border-bottom: 2px solid rgba(16,24,40,.55);
	transform: translate(-50%,-50%) rotate(135deg);
}
.product.culture .sliderCtrl__btn[aria-label="다음"]::after{
	transform: translate(-50%,-50%) rotate(-45deg);
}

.product.culture .sliderCtrl__bar{
	flex: 1;
	height: var(--cc2-ctrl-bar-h);
	background: rgba(109,91,208,.22);
	border-radius: 999px;
	overflow:hidden;
}

.product.culture .sliderCtrl__fill{
	width: 22%; /* 디자인 기준 '초기 진행' 느낌 */
	background: rgba(109,91,208,.95);
}

/* ---- Right cards ---- */
.product.culture .cardStrip,
.product.serum .cardStrip{
	gap: 26px; /* 첫-둘 간격을 기준으로 통일 */
	align-items: flex-start;
	padding-top: 118px; /* 상단 텍스트 블록과 수평 맞춤 */
}

@media (max-width: 1200px){
	.product.serum .cardStrip{
		padding-top: 0;
		padding-bottom: 16px;
	}
}

.product.culture .pCard{
	width: var(--cc2-card-w);
	padding: var(--cc2-card-pad);
	border-radius: 18px;
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(16,24,40,.10);
	cursor: pointer;
	/* box-shadow: 0 14px 28px rgba(16,24,40,.08); */
}

.product.culture .pCard__img{
	height: var(--cc2-card-img-h);
	border-radius: 14px;
	background: rgba(16,24,40,.08);
}

.product.culture .pCard__name,
.product.serum .pCard__name{
	margin-top: 14px;
	font-size: 19px;
	font-family: Play, sans-serif;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: rgba(16,24,40,.90);
}

.product.culture .pCard__sub,
.product.serum .pCard__sub{
	margin-top: 0;
	font-size: 18px;
	line-height: 1.35;
	color: rgba(16,24,40,.58);
}

@media (max-width: 768px){
	.product.culture .pCard__name,
	.product.serum .pCard__name{
		font-size: 16px;
	}
	.product.culture .pCard__sub,
	.product.serum .pCard__sub{
		font-size: 15px;
	}
}

/* =========================================================
 * Responsive (Tablet / Mobile)
 * - desktop 기준을 우선 맞춘 뒤, 컬럼 → 스택으로만 안전하게 전환
 * ========================================================= */
@media (max-width: 1200px){
	.product.culture .product__grid,
	.product.serum .product__grid{
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.product.culture .product__left,
	.product.serum .product__left{
		padding-top: 72px;
		padding-bottom: 0;
	}

	.product.culture .cardStrip{
		padding-top: 0;
		overflow-x: auto;
		padding-bottom: 16px;
	}

	.product.culture .sliderCtrl{
		position: static;
		margin-top: 22px;
	}

	.product.culture .sliderCtrl__bar{
		width: auto;
	}
}

@media (max-width: 768px){
	:root{
		--cc2-title: 42px;
		--cc2-sub: 18px;
		--cc2-desc: 14px;
		--cc2-card-w: 280px;
		--cc2-card-img-h: 180px;
	}
	.product.culture .product__left{ padding-top: 56px; }
}

/* CORECELL CULTURE MEDIA TUNING (v9) -----------------------------------------
 * - 랜딩 #2(02 CULTURE MEDIA)도 HERO와 동일하게 컨테이너(1700px) 기준
 *   좌/우 149px 안전여백을 적용합니다.
 * - 단, 제품 카드 트랙은 우측으로 "의도적으로" 벗어날 수 있게(bleed) 합니다.
 * --------------------------------------------------------------------------- */
:root{
  --cc-cm-safe: 149px;        /* 좌/우 안전여백(데스크톱) */
  --cc-cm-bleed-right: 520px; /* 우측으로 카드가 더 나가도 되는 영역(디자인용) */
}

/* 랜딩 #2 컨테이너 안전여백 */
:is(.landing--culture-media, .section.product.culture, .section.product.serum) .section__inner{
  padding-left: var(--cc-cm-safe) !important;
  padding-right: var(--cc-cm-safe) !important;
  box-sizing: border-box !important;
}

/* 카드 트랙(우측으로 일부 벗어나도 OK) */
:is(.landing--culture-media, .section.product.culture) .cm__track,
:is(.landing--culture-media, .section.product.culture) .culture__track,
:is(.landing--culture-media, .section.product.culture) .swiper-wrapper{
  overflow: visible !important;
}

/* 트랙이 우측으로 더 뻗도록(시작 정렬은 안전여백 기준 유지) */
:is(.landing--culture-media, .section.product.culture) .cm__track,
:is(.landing--culture-media, .section.product.culture) .culture__track{
  width: calc(100% + var(--cc-cm-bleed-right)) !important;
  padding-right: var(--cc-cm-bleed-right) !important;
  box-sizing: border-box !important;
}

/* Tablet 이하에서는 안전여백 해제 */
@media (max-width: 1200px){
  :root{
    --cc-cm-safe: 0px;
    --cc-cm-bleed-right: 0px;
  }
  :is(.landing--culture-media, .section.product.culture, .section.product.serum) .section__inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
	padding-top: 0;
  }
}


/* =========================================================
   [PATCH v13a] Desktop safe-area (1700px + 149px*2) 적용
   - home.php 기준 클래스(.section.product.culture / .section.story / .section.product.serum)에 맞춰 보정
   - 기존 레이아웃 구조는 유지하고, "좌측 텍스트 영역" 기준으로만 안전영역 패딩을 강제한다.
   ========================================================= */
@media (min-width: 1200px) {
  /* 공통: 각 랜딩 내부 기본 컨테이너(텍스트+컨트롤 영역) */
  .hero .hero__content,
  .section.product.culture .landing__left,
  .section.product.serum .landing__left,
  .section.story .story__content {
    box-sizing: border-box;
    max-width: var(--cc-desktop-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cc-desktop-side);
    padding-right: var(--cc-desktop-side);
  }

  /* CULTURE/ SERUM: 우측 제품 트랙은 의도적으로 우측 오버플로우 허용 */
  .section.product.culture .landing__right,
  .section.product.serum .landing__right {
    overflow: visible;
  }
}

/* STORY에서 var 미정의로 padding이 무효화되는 문제 방지 */
:root { --container-side-pad: var(--cc-desktop-side); }


/* =========================================================
   v14 PATCH (2026-02-09)
   - 데스크톱 기준(>=1200px) "1700px 컨테이너 + 좌/우 149px" 안전영역을
     02/03/04 섹션에 일관되게 적용한다.
   - 04 SERUM ADDITIVE: home.php 구조(.section.product.serum ...) 기준으로
     타이포/그리드/카드 사이즈를 디자인에 더 가깝게 보정한다.
   ========================================================= */

.section.story .story__inner{
	margin-top: 128px;
	margin-bottom: 128px;
}

@media (min-width: 1200px){
  /* 02 / 04 : Product 섹션 컨테이너 안전영역 */
  .section.product.culture .section__inner > .container,
  .section.product.serum  .section__inner > .container{
    box-sizing: border-box;
    width: min(var(--container), 100%);
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
	margin-top: 72px;
	margin-bottom: 72px;
    padding-left: 149px;
    padding-right: 149px;
  }

	/* .section.product.serum .section__inner > .container{
		margin-top: calc(128px + 72px);
		margin-bottom: 0;
	} */

  /* 03 : STORY 섹션 컨테이너 안전영역 */
  .section.story .story__inner{
    box-sizing: border-box;
    width: min(var(--container), 100%);
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 149px;
    padding-right: 149px;
  }

  /* 04 SERUM ADDITIVE (home.php: .section.product.serum) */
  /* .section.product.serum .product__grid{
    padding-top: 128px;
	padding-bottom: 200px;
    grid-template-columns: 520px 1fr;
    column-gap: 76px;
    row-gap: 36px;
    align-items: center;
  } */

  /* .section.product.serum .kicker{
    font-size: 18px;
    letter-spacing: .12em;
  } */

  /* .section.product.serum .brandLine{
    margin-top: 12px;
    font-size: 22px;
  } */

  /* .section.product.serum .sectionTitle{
    margin-top: 14px;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
  } */

  /* .section.product.serum .subTitle{
    margin-top: 16px;
    font-size: 20px;
  } */

  /* .section.product.serum .desc{
    margin-top: 26px;
    font-size: 18px;
    line-height: 1.85;
  } */

  /* .section.product.serum .btn.btn--ghost{
    margin-top: 26px;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
  } */

  /* 좌측 슬라이더 컨트롤: 텍스트/버튼과 간격 */
  .section.product.serum .sliderCtrl{
    margin-top: 34px;
  }

  /* 제품 카드 스트립: 디자인처럼 조금 더 큼직하게 */
  .section.product.serum .pCard{
    width: 320px;
    padding: 22px;
    border-radius: 18px;
  }

  .section.product.serum .pCard__img{
    height: 210px;
    border-radius: 14px;
  }

  /* .section.product.serum .pCard__name{
    font-size: 14px;
  } */

  /* .section.product.serum .pCard__sub{
    font-size: 12px;
  } */
}

/* STORY 모바일/태블릿 찌그러짐 방지: desktop 149px 패딩을 mobile에서 축소 */
@media (max-width: 1200px){
  :root{
    --container-side-pad: 20px; /* 태블릿/모바일 기본 좌우 여백 */
  }

  .story__inner{
    padding-left: var(--container-side-pad);
    padding-right: var(--container-side-pad);
    justify-content: center; /* 너무 왼쪽으로 붙는 느낌 방지(원하면 flex-start로 유지 가능) */
  }

  .story__panel{
    width: 100%;
    max-width: 520px;
  }

  /* 배경이 모바일에서 애매하게 잘려 보이면 포지션만 살짝 조정 */
  .story .section__bg{
    background-position: 35% center;
  }
}

@media (max-width: 768px){
	.section.story .story__inner{
		margin-top: 56px;
		margin-bottom: 56px;
	}
}

@media (max-width: 640px){
  :root{
    --container-side-pad: 16px; /* 더 작은 화면은 여백 더 축소 */
  }

  .story .section__bg{
    background-position: 30% center;
  }
}


/* =========================================================
   FIX v16 - 05 CERTIFICATIONS (HTML class명 기준으로 재정의)
   - home.php의 .certifications / .certHead / .certStrip 구조에 맞춤
   ========================================================= */

.certifications{
	--h-cert: 930px; /* 기존 디자인 기준 높이(필요시 조정) */
	--cert-pad-x: var(--container-side-pad); /* 149px */
	--cert-card-w: 299px;
	--cert-card-h: 421px;
	--cert-card-gap: 69px;
}

.certifications{
	min-height: var(--h-cert);
}

.certifications .section__bg{
	background: url("../img/home/bg-landing-05-certifications.png") center top / cover no-repeat;
}

/* 1700px 컨텐츠 박스 + 좌/우 149px 패딩(=1402px 유효 폭) */
.certifications .container{
	max-width: var(--container);
	padding-left: var(--cert-pad-x);
	padding-right: var(--cert-pad-x);
}

/* 헤더(좌: 타이틀, 우: 더보기) */
.certifications .certHead{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-top: 74px;
	padding-bottom: 18px;
}

.certifications .certHead__kicker{
	letter-spacing: .12em;
	font-size: 14px;
	font-weight: 700;
	color: rgba(84, 56, 191, .95);
}

.certifications .certHead__title{
	margin-top: 10px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: rgba(0,0,0,.92);
}

/* 더보기 버튼(디자인처럼 슬림) */
.certifications .certHead .btn.btn--ghost{
	height: 36px;
	padding: 0 18px;
	border-radius: 10px;
	border-color: rgba(0,0,0,.35);
	color: rgba(0,0,0,.75);
}

/* 카드 스트립(뷰포트 + 트랙) */
.certifications .certStrip{
	position: relative;
	margin-top: 10px;
}

.certifications .certStrip__viewport{
	overflow: hidden;
	width: 100%;
}

/* 핵심: 트랙을 flex로 만들어 4개 카드가 가로로 나열되도록 */
.certifications .certStrip__track{
	display: flex;
	gap: var(--cert-card-gap);
	align-items: flex-start;
}

/* 카드 */
.certifications .certCard{
	flex: 0 0 var(--cert-card-w);
	width: var(--cert-card-w);
	text-decoration: none;
	color: inherit;
}

.certifications .certCard__thumb{
	width: 100%;
	height: var(--cert-card-h);
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,.10);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.certifications .certCard__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 캡션 */
.certifications .certCard .cap{
	margin-top: 16px;
	text-align: center;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: rgba(0,0,0,.85);
}

/* 좌/우 화살표: 유효 폭(1402px) 바깥(=패딩 영역)으로 살짝 튀어나오게 배치 */
.certifications .certStrip__arrow{
	position: absolute;
	top: calc(50% - 34px);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
}

.certifications .certStrip__arrow--prev{
	left: calc(-1 * (var(--cert-pad-x) - 10px));
}

.certifications .certStrip__arrow--next{
	right: calc(-1 * (var(--cert-pad-x) - 10px));
}

/* 도트(페이지네이션) */
.certifications .certStrip .dots{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.certifications .certStrip .dots .dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0,0,0,.25);
	border: 0;
}

.certifications .certStrip .dots .dot.is-active{
	width: 18px;
	border-radius: 999px;
	background: rgba(0,0,0,.55);
}

/* 반응형(간단) */
@media (max-width: 1024px){
	.certifications{
		--cert-pad-x: 28px;
		--cert-card-w: 260px;
		--cert-card-h: 367px;
		--cert-card-gap: 24px;
	}
	.certifications .certHead__title{ font-size: 32px; }
	.certifications .certCard .cap{ font-size: 16px; }
	.certifications .certStrip__arrow--prev{ left: -8px; }
	.certifications .certStrip__arrow--next{ right: -8px; }
}

@media (max-width: 640px){
	.certifications{
		--cert-pad-x: 18px;
	}
	.certifications .certHead{
		padding-top: 44px;
	}
	.certifications .certHead__title{ font-size: 28px; }
}

/* =========================================================
   FIX v17 - 05 CERTIFICATIONS (실제 home.php 구조(.section.cert / .secHead / .certStrip) 기준)
   - 데스크톱: 1700px 컨텐츠 폭 내에서 좌/우 149px 패딩 유지
   - 카드: 4개 노출 (299x421), gap 69px
   - 화살표: 컨텐츠 영역(1402px) 바깥으로 살짝 튀어나오게 배치
   ========================================================= */

.section.cert{
  /* 이미 다른 섹션에서도 사용하는 변수명이면 덮어써도 OK */
  --cert-card-w: 299px;
  --cert-card-h: 421px;
  --cert-card-gap: 69px;
  --cert-arrow-hit: 44px;
}

/* 섹션 내부 컨텐츠 래퍼: 1700px 중앙 + 좌/우 149px 패딩 */
.section.cert .section__inner{
  max-width: var(--cc-desktop-max, 1700px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cc-desktop-side, 149px);
  padding-right: var(--cc-desktop-side, 149px);
}

/* 헤더(타이틀/더보기) */
.section.cert .secHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.section.cert .secHead__left .secKicker{
  /* 기존 스타일 유지하되, 너무 작으면 여기서만 보정 가능 */
}

.section.cert .secHead__right .btn--more{
  margin-top: 6px;
}

/* 스트립(가로 카드 목록) */
.section.cert .certStrip{
  position: relative;
  margin-top: 28px;
}

/* 화살표는 1402px 영역 바깥으로 살짝 */
.section.cert .certStrip__arrow{
  position: absolute;
  top: calc(var(--cert-card-h) / 2 - 22px);
  width: var(--cert-arrow-hit);
  height: var(--cert-arrow-hit);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
}

.section.cert .certStrip__arrow--prev{
  left: calc(-1 * (var(--cc-desktop-side, 149px) - 18px));
}

.section.cert .certStrip__arrow--next{
  right: calc(-1 * (var(--cc-desktop-side, 149px) - 18px));
}

/* 카드 트랙 */
.section.cert .certStrip__track{
  display: flex;
  align-items: flex-start;
  gap: var(--cert-card-gap);
  /* swiper 전 단계이므로, 가로 오버플로우는 숨기지 않음(디자인상 오른쪽이 일부 벗어나도 OK) */
  overflow: visible;
}

/* 카드(슬라이드) */
.section.cert .certStrip__slide{
  flex: 0 0 auto;
  width: var(--cert-card-w);
}

.section.cert .certCard__img{
  width: 100%;
  height: auto;/*var(--cert-card-h);*/
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.04);
  /* box-shadow: 0 10px 22px rgba(0,0,0,.08); */
}

.section.cert .certCard__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section.cert .certCard__cap{
  margin-top: 14px;
  text-align: center;
  line-height: 1.25;
}

/* 점(페이징) */
.section.cert .certStrip__dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.section.cert .certStrip__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
}

.section.cert .certStrip__dot.is-active{
  background: rgba(0,0,0,.55);
}

/* 태블릿/모바일: 카드 2개 → 1개 흐름, 화살표는 안쪽으로 */
@media (max-width: 1024px){
  .section.cert{
    --cert-card-w: 260px;
    --cert-card-h: 366px;
    --cert-card-gap: 24px;
  }
  .section.cert .section__inner{
    padding-left: 24px;
    padding-right: 24px;
  }
  .section.cert .certStrip__arrow--prev{
    left: 6px;
  }
  .section.cert .certStrip__arrow--next{
    right: 6px;
  }
}

@media (max-width: 640px){
  .section.cert{
    --cert-card-w: 240px;
    --cert-card-h: 340px;
    --cert-card-gap: 18px;
  }
  .section.cert .secHead{
    align-items: flex-start;
  }
  .section.cert .secHead__right .btn--more{
    margin-top: 2px;
  }
}



/* =========================================================
   FIX v19 - 05 CERTIFICATIONS (home.php: section.cert 구조 기준)
   - 데스크톱: 1700px 영역 + 좌/우 149px 패딩(=1402px 콘텐츠 영역)
   - 카드 4개 가로 배열, gap 69px, 카드 299x421(근사)
   - 화살표는 콘텐츠 영역 바깥으로 살짝 튀어나오게 배치
   - 태블릿/모바일: 패딩 축소 + 가로 스크롤(스와이퍼 전 단계)
   ========================================================= */

/* --- Desktop base (>= 1200px 가정) --- */
.cert{
	position: relative;
}

.cert .section__inner{
	height: auto;/*var(--h-cert);*/
	display: flex;
	align-items: center;
}

.cert .container{
	/* 다른 섹션은 건드리지 않고, CERT 섹션만 '149px 안전영역' 적용 */
	max-width: var(--cc-desktop-max);
	margin: 0 auto;
	/* padding-left: var(--cc-desktop-side);
	padding-right: var(--cc-desktop-side); */
	width: 100%;
}

.cert .secHead{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 0;
}

.cert .secTitle .kicker{
	margin-bottom: 10px;
}

.cert .secTitle h2{
	margin: 0;
}

.cert .secMore{
	/* 디자인상 우측 상단에 붙는 버튼 */
	margin-top: 18px;
}

.cert .certStrip{
	position: relative;
}

.cert .certStrip__track{
	display: flex;
	align-items: flex-start;
	gap: 69px;
	/* 스와이퍼 구현 전: 4개를 고정 배치 */
	flex-wrap: nowrap;
}

.cert .certCard{
	flex: 0 0 299px;
	width: 299px;
}

.cert .certCard__img{
	width: 299px;
	height: 421px;
	border-radius: 14px;
	background: rgba(255,255,255,.92);
	/* box-shadow: 0 12px 24px rgba(0,0,0,.08); */
}

.cert .certCard__cap{
	margin-top: 14px;
	text-align: center;
	font-size: 26px;
	font-weight: 600;
}

@media (max-width: 768px){
	.cert .certCard__cap{
		font-size: 16px;
	}
}

.cert .certStrip__arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-58%);
	z-index: 2;

	/* 버튼 자체 스타일은 기존 공통을 존중하고,
	   여기서는 위치만 잡습니다. */
}

.cert .certStrip__arrow--prev{
	/* 1402 콘텐츠 영역 바깥(=패딩 영역)으로 튀어나오게 */
	left: calc(var(--cc-desktop-side) * -0.65);
}

.cert .certStrip__arrow--next{
	right: calc(var(--cc-desktop-side) * -0.65);
}

.cert .dots{
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.cert .dots__dot{
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(0,0,0,.22);
}

.cert .dots__dot.is-active{
	background: rgba(0,0,0,.48);
}

/* --- Tablet --- */
@media (max-width: 1024px){
	.cert .section__inner{
		height: auto;
		padding: 64px 0;
	}

	.cert .container{
		padding-left: 40px;
		padding-right: 40px;
	}

	.cert .secHead{
		margin-bottom: 28px;
	}

	/* 가로 스크롤(스와이퍼 전 단계) */
	.cert .certStrip{
		overflow: hidden;
	}

	.cert .certStrip__track{
		gap: 24px;
		overflow-x: auto;
		padding-bottom: 10px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.cert .certCard{
		flex: 0 0 240px;
		width: 240px;
		scroll-snap-align: start;
	}

	.cert .certCard__img{
		width: 240px;
		height: 339px;
	}

	/* 태블릿 이하에서는 화살표 숨김(추후 스와이퍼 적용 시 다시 켜기) */
	.cert .certStrip__arrow{
		display: none;
	}
}

/* --- Mobile --- */
@media (max-width: 640px){
	.cert .container{
		padding-left: 18px;
		padding-right: 18px;
	}

	.cert .secHead{
		flex-direction: column;
		align-items: flex-start;
	}

	.cert .secMore{
		margin-top: 0;
	}

	.cert .certCard{
		flex-basis: 220px;
		width: 220px;
	}

	.cert .certCard__img{
		width: 220px;
		height: 311px;
	}
}

/* =========================================================
   FIX v21 - 05 CERTIFICATIONS 정렬/레이아웃 보정 (기존 레이아웃 영향 최소화)
   - 핵심: .cert 섹션만 타겟팅 (다른 랜딩 영향 없음)
   - 1700px 컨텐츠 바운더리 + 좌/우 149px 패딩
   - 카드 4개(299px) + gap 69px 기준
   ========================================================= */

.section.cert { overflow: hidden; } /* 화살표가 바깥으로 튀어나와도 스크롤바 방지 */

.section.cert > .section__inner{
  box-sizing: border-box;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 149px;
  padding-right: 149px;
  width: 100%;
}

/* 헤더(타이틀 + 더보기) */
.section.cert .secHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  position: relative;
}

.section.cert .secHead__title{
  min-width: 0;
  margin-bottom: 0;
}

.section.cert .secHead__more{
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 12px; /* 디자인상 타이틀 라인 맞춤 */
}

/* 스트립(카드 트랙 + 화살표 + 페이징) */
.section.cert .certStrip{
  margin-top: 38px;
  position: relative;
  width: 100%;
}

/* 화살표: 1402px 트랙 바깥으로 살짝 튀어나오는 형태 */
.section.cert .certStrip__arrow{
  position: absolute;
  top: calc(50% - 22px);
  transform: translateY(-50%);
  z-index: 5;
}

.section.cert .certStrip__arrow--prev{ left: -72px; }
.section.cert .certStrip__arrow--next{ right: -72px; }

@media (max-width: 1760px){
  .section.cert .certStrip__arrow--prev{ left: -40px; }
  .section.cert .certStrip__arrow--next{ right: -40px; }
}

.section.cert .certStrip__track{
  overflow: hidden;
  width: 100%;
}

.section.cert .certStrip__list{
  display: flex;
  gap: 69px;
  align-items: flex-start;
  /* swiper 전에는 고정 4개가 보이도록 width를 강제하지 않고,
     카드가 일렬로 배치되도록만 보장 */
}

.section.cert .certCard{
  flex: 0 0 299px;
  width: 299px;
}

.section.cert .certCard__media{
  width: 299px;
  height: 421px;
}

.section.cert .certStrip__pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

/* 태블릿/모바일: 패딩 축소 + 카드/간격 축소(리사이즈) */
@media (max-width: 1024px){
  .section.cert > .section__inner{
    padding-left: 32px;
    padding-right: 32px;
  }
  .section.cert .certStrip__list{ gap: 24px; }
  .section.cert .certCard{
    flex-basis: 240px;
    width: 240px;
  }
  .section.cert .certCard__media{
    width: 240px;
    height: 339px;
  }
  .section.cert .certStrip__arrow--prev{ left: -18px; }
  .section.cert .certStrip__arrow--next{ right: -18px; }
}

@media (max-width: 640px){
  .section.cert > .section__inner{
    padding-left: calc(18px + 24px);
    padding-right: calc(18px + 24px);
	padding-top: 64px;
  }
  .section.cert .secHead{ flex-direction: column; align-items: flex-start; padding-top: 0; }
  .section.cert .secHead__more{ margin-top: 10px; }
  .section.cert .certStrip__list{ gap: 16px; }
  .section.cert .certCard{
    flex-basis: 200px;
    width: 200px;
  }
  .section.cert .certCard__media{
    width: 200px;
    height: 283px;
  }
}

/* =========================================================
   FIX — 05 CERTIFICATIONS alignment only
   (기존 레이아웃 절대 영향 없음)
   ========================================================= */

.section.cert .section__inner {
    display: block;
}

.section.cert .container {
    margin-left: auto !important;
    margin-right: auto !important;
    /* padding-left: var(--gutter);
    padding-right: var(--gutter); */
}

/* 내부 요소가 flex로 밀어낸 경우 대비 */
.section.cert .secHead,
.section.cert .certStrip,
.section.cert .dots {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

/* 05 CERTIFICATIONS - arrow 임시 고정 */

.cert .certStrip__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.cert .certStrip__arrow.prev {
    left: -60px;   /* container 기준 바깥 */
}

.cert .certStrip__arrow.next {
    right: -60px;
}

/* =========================================================
   05 CERTIFICATIONS - Mobile / Tablet fix
   기존 레이아웃 절대 영향 없음
   ========================================================= */

/* 태블릿 이하 */
@media (max-width: 1024px) {

    .cert .certStrip {
        overflow: hidden;
    }

    .cert .certStrip__track {
        gap: 20px; /* 모바일 간격 */
    }

    .cert .certCard {
        flex: 0 0 70vw;        /* 화면 기준 카드 폭 */
        max-width: 320px;     /* 과도하게 커지는 것 방지 */
        height: auto;         /* 세로 자동 */
    }

    .cert .certCard__img {
        aspect-ratio: 297 / 419;  /* 기존 비율 유지 */
    }
}

/* 모바일 */
@media (max-width: 768px) {

    .cert .certCard {
        flex: 0 0 80vw;
        max-width: 300px;
    }

    .cert .certStrip__arrow {
        display: none; /* 모바일에서는 화살표 숨김 */
    }
}

/* =========================================================
   FIX - 05 CERTIFICATIONS (태블릿/모바일 카드 짤림 방지)
   원인: .certStrip { overflow:hidden; } 때문에 track이 잘림
   ========================================================= */

/* 태블릿 이하 */
@media (max-width: 1024px){
  /* 부모가 track을 자르지 않도록 */
  .cert .certStrip{
    overflow: visible !important;
  }

  /* 실제 스크롤은 track에서만 */
  .cert .certStrip__track{
    overflow-x: auto !important;
    overflow-y: visible !important;

    /* 마지막 카드가 끝까지 보이도록 여유 패딩 */
    padding-right: 40px;
    -webkit-overflow-scrolling: touch;
  }

  /* 스크롤바 숨김(선택) */
  .cert .certStrip__track{
    scrollbar-width: auto;
  }
  .cert .certStrip__track::-webkit-scrollbar{
    /* display: none; */
  }
}

/* 모바일 */
@media (max-width: 640px){
  .cert .certStrip__track{
    padding-right: 18px;
  }
}

/* 05 CERTIFICATIONS - mobile/tablet: arrow 숨김 */
@media (max-width: 1024px){
  .cert .certStrip__arrow{
    display: none !important;
  }
}

/* =========================================================
   MOBILE/TABLET - 02/04 (product sections) 카드 정렬/가로스크롤 정리
   - CULTURE(.product.culture), SERUM(.product.serum) 공통 적용
   ========================================================= */

@media (max-width: 1024px) {
  .product .container {
    /* 기존 1700/149 규칙은 데스크톱용이고,
       모바일/태블릿은 안전하게 일반 패딩으로 전환 */
    padding-left: 24px;
    padding-right: 24px;
  }

  .product__right {
    /* 카드 영역이 컨테이너 끝에 딱 붙는 느낌 방지 */
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;

	max-width: calc(100% + 48px);
	overflow-x: auto;
	scrollbar-width: auto;
  }

  .product .cardStrip {
    flex-wrap: nowrap !important;     /* 줄바꿈 금지 */
    overflow-x: auto;                 /* 가로 스크롤 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;                        /* 모바일에서 간격은 줄이는게 자연스러움 */
    padding-bottom: 8px;
	scrollbar-width: auto;
  }

  .product .pCard {
    /* 카드가 너무 작아지지 않게 */
    flex: 0 0 auto;
    width: clamp(220px, 70vw, 320px);
    scroll-snap-align: start;
  }
}

/* =========================================================
   06 PRESS (v22)
   - 1700px 내부 + 좌/우 149px 여백 규칙에 맞춰 정렬
   - 디자인처럼 좌측 썸네일(2장) + 우측 기사 2개 리스트 형태
   - 기존 HTML 구조(home_v4.php: .pressHead/.pressGrid/.pressThumb/.pressList/.pressItem) 그대로 사용
   ========================================================= */

.section.press .section__inner{
    max-width: 1700px;
    margin: 0 auto;
    padding-left: 149px;
    padding-right: 149px;
}

.section.press .section__inner > .container{
	width: min(var(--container), calc(100%));
}

/* 상단 헤더(타이틀 + 더보기) */
.section.press .pressHead{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 120px; /* 필요 시 조절 */
}

/* PRESS 타이틀: 보라색 네모 + 밑줄 */
.section.press .pressHead .kicker{
    position: relative;
    padding-left: 0;
    padding-bottom: 10px;
	font-family: Poppins, sans-serif;
	font-size: 50px;
    font-weight: 600;
	letter-spacing: -0.04em;
	color: #000;
}
/* .section.press .pressHead .kicker::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--violet);
} */
.section.press .pressHead .kicker::after{
	content: "";
    position: absolute;
    left: 0px;
    bottom: 22px;
    width: 140px;
    height: 2px;
    background: rgba(16, 24, 40, .2);
}

@media (max-width: 768px){
	.section.press .pressHead .kicker{
		font-size: 40px;
	}
	.section.press .pressHead .kicker::after{
		width: 113px;
	}
}

.press .btn.btn--ghost{
	border-color: rgba(0, 0, 0, .35);
    color: rgba(0, 0, 0, .75);
}

/* 본문 2열 레이아웃 */
.section.press .pressGrid{
    display: grid;
    grid-template-columns: 420px 1fr; /* 좌: 썸네일, 우: 본문 */
    gap: 0 56px;
    align-items: start;
    margin-top: 26px;
}

/* 좌측 썸네일 2장(현재 HTML은 div 1개라 pseudo로 2개 생성) */
.section.press .pressThumb{
    width: 420px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: transparent;
    border-radius: 0;
}

.section.press .pressThumb__img{
    display:block;
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:6px;
    background: rgba(16,24,40,.06);
    box-shadow: 0 12px 30px rgba(16,24,40,.10);
}
/* 우측 기사 리스트: 썸네일(각 260px) 높이와 맞춰줌 */
.section.press .pressList{
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.section.press .pressItem{
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(16,24,40,.10);
}
.section.press .pressItem:last-child{
    border-bottom: 0;
}
.section.press .pressItem__title{
    font-size: 30px;
    line-height: 1.25;
    font-weight: 600;
    color: #111827;
    max-width: 760px;
    letter-spacing: -0.02em;
	/* 2026.02.20_arumizz */
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.section.press .pressItem__meta{
	margin-top: 16px;
    font-size: 20px;
    color: #767678;
    font-weight: 500;
}

/* ====== Tablet / Mobile ====== */
@media (max-width: 1200px){
    .section.press .section__inner,
	.section.notice .section__inner{
        padding-left: 32px;
        padding-right: 32px;
    }
    .section.press .pressGrid{
        grid-template-columns: 360px 1fr;
        gap: 0 32px;
    }
    .section.press .pressThumb{
        width: 360px;
    }
    .section.press .pressThumb__img{
        height: 200px;
    }
    .section.press .pressItem{
        min-height: auto;
    }
}
@media (max-width: 900px){
    .section.press .pressHead{
        padding-top: 0;
    }
    .section.press .pressGrid{
        grid-template-columns: 1fr;
        gap: 18px 0;
    }
    .section.press .pressThumb{
        width: 100%;
    }
    .section.press .pressThumb__img{
        height: 220px;
    }
    .section.press .pressItem{
        min-height: auto;
        padding: 10px 0 18px;
    }
    .section.press .pressItem__title{
        font-size: 20px;
        max-width: none;
    }
}

/* 너무 좁은 화면에서 더보기 버튼이 줄바꿈으로 밀리지 않게 */
@media (max-width: 420px){
    .section.press .pressHead{
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
    }
}



/* =========================================================
   FIX v24 - 06 PRESS (썸네일 + 글 1세트 구조)
   - 기존처럼 썸네일 그룹/텍스트 그룹 분리하지 않고,
     pressRow(썸네일 + 텍스트) 단위로 세트로 내려가게 함.
   ========================================================= */

.press .pressGrid{
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
    max-width: 1402px; /* 1700 - (149*2) */
    margin-left: 149px;
    margin-right: 149px;
}

.press .pressRow{
    display: grid;
    grid-template-columns: 420px 1fr;
    column-gap: 56px;
    align-items: start;
}

.press .pressThumb{
    display: block;
    width: 420px;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #e9eef4;
    aspect-ratio: 420 / 280;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.press .pressThumb__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press .pressItem{
    max-width: 100%;
}

.press .pressItem__title{
    margin: 0 0 14px;
}

.press .pressItem__excerpt{
	display: -webkit-box;
	height: 123px;
	margin: 0 0 5px;
    max-width: 820px;
    font-size: 23px;
    line-height: 32px;
	overflow: hidden;
	text-overflow: ellipsis;
	/* 2026.02.20_arumizz */
	word-break: keep-all;
	overflow-wrap: anywhere;
	/* word-break: break-all; */
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
}

.press .pressItem__meta{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

@media (max-width: 1200px){
    .press .pressGrid{
        margin-left: 24px;
        margin-right: 24px;
        max-width: none;
    }
    .press .pressRow{
        grid-template-columns: 360px 1fr;
        column-gap: 28px;
    }
    .press .pressThumb{
        width: 360px;
        aspect-ratio: 360 / 240;
    }
}

@media (max-width: 900px){
    .press .pressRow{
        grid-template-columns: 1fr;
        row-gap: 18px;
    }
    .press .pressThumb{
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .press .pressItem__excerpt{
		font-size: 17px;
        max-width: none;
    }
	.section.press .pressItem__meta{
		font-size: 17px;
	}
}


/* =========================================================
   FIX v25 - 06 PRESS (desktop 레이아웃 깨짐 수정)
   - 기존(.section.press ...) 구형 그리드 규칙이 남아있어
     신규 마크업(.pressRow: 썸네일+기사 1세트)과 충돌하며 데스크톱에서 깨짐.
   - 아래 규칙은 section.press 범위에서 신규 구조를 "강제"하여 충돌을 제거함.
   ========================================================= */

.section.press .pressGrid{
    /* grid -> column flow */
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin: 32px 0 0;
    padding: 0;

    /* 구형 규칙 무력화 */
    grid-template-columns: unset;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.section.press .pressRow{
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 48px;
    align-items: start;
    /* padding: 34px 0; */
    border-bottom: 1px solid rgba(17,17,17,0.14);
	cursor: pointer;
}

.section.press .pressRow:first-child{
    border-bottom: 0;
	padding-top: 0;
}

.section.press .pressRow:last-child{
    border-bottom: 0;
}

.section.press .pressThumb{
    width: 100%;
    aspect-ratio: 672 / 375;
    border-radius: 12px;
    overflow: hidden;
}

.section.press .pressThumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section.press .pressItem{
    /* 구형 pressItem(min-height/padding/border) 무력화 */
    min-height: auto;
    padding: 0;
    border-bottom: 0;
}

@media (max-width: 980px){
    .section.press .pressRow{
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 26px 0;
    }

    .section.press .pressThumb{
        aspect-ratio: 16 / 9;
    }
}



/* =========================================================
   FIX v27 - 07 NOTICE / INQUIRY (home_v7.php 마크업 기준)
   - .noticeHead / .noticeGrid / .noticeList / .noticeRow / .inquiry
   - 기존 섹션(01~06) 영향 최소화를 위해 .section.notice 범위로만 한정
   ========================================================= */

.section.notice{
  position: relative;
  overflow: hidden;
}

/* 배경: 기존 .section__bg를 사용(다른 섹션과 동일한 패턴) */
.section.notice > .section__bg{
  /* 필요 시 기존 배경 위에 약한 도트/그라데이션 보정 */
  opacity: 1;
}

/* 헤더 */
.section.notice .noticeHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  /* 디자인 상 타이틀이 리스트 좌측과 맞물리게 */
  max-width: 1402px; /* 1700 - 149*2 */
  margin: 0 auto 22px;
}

.section.notice .noticeHead .kicker{
	position: relative;
    padding-left: 0;
    padding-bottom: 10px;
    font-family: Poppins, sans-serif;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #000;
}
.section.notice .noticeHead .kicker::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 22px;
    width: 173px;
    height: 2px;
    background: rgba(16, 24, 40, .2);
}

.section.notice .noticeHead .btn{
  margin-top: 6px;
}
.notice .btn.btn--ghost {
    border-color: rgba(0, 0, 0, .35);
    color: rgba(0, 0, 0, .75);
}

@media (max-width: 768px){
	.section.notice .noticeHead .kicker{
		font-size: 40px;
	}
	.section.notice .noticeHead .kicker::after{
		width: 138px;
	}
}

/* 메인 그리드(좌:공지목록 / 우:문의박스) */
.section.notice .noticeGrid{
  display:flex;
  align-items:stretch;
  gap: 48px;
  max-width: 1402px;
  margin: 0 auto;
  margin-bottom: 150px;
}

/* 공지 목록 카드 */
.section.notice .noticeList{
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16,24,40,.10);
  /* padding: 18px 22px; */
  padding: 2px 22px;
}

/* 1행 */
.section.notice .noticeRow{
  display:grid;
  grid-template-columns: 90px 1fr 110px;
  align-items:center;
  gap: 16px;
  padding: 18px 6px;
  border-top: 1px solid rgba(16,24,40,.10);
}

/* 첫행도 상단 라인 유지(디자인과 동일) */
.section.notice .noticeRow:first-child{
  /* border-top: 1px solid rgba(16,24,40,.10); */
  border-top: none;
}

/* 마지막 하단 라인 */
.section.notice .noticeList .noticeRow:last-child{
  /* border-bottom: 1px solid rgba(16,24,40,.10); */
  border-bottom: none;
}

/* 배지 */
.section.notice .noticeRow .badge{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.2px;
    white-space: nowrap;
}
.section.notice .noticeRow .badge--violet,
.section.notice .noticeRow .badge--notice { /* 공지 */
	background: #503191;
    color: #fff;
}
.section.notice .noticeRow .badge--darkgray,
.section.notice .noticeRow .badge--update,
.section.notice .noticeRow .badge--check { /* 업데이트, 점검 */
	background: #404040;
    color: #fff;
}
.section.notice .noticeRow .badge--event { /* 이벤트 */
	background: #e74c3c;
	color: #fff;
}
.section.notice .noticeRow .badge--press { /* 보도 */
	background: #2980b9;
	color: #fff;
}

.section.notice .noticeRow .badge--gray{
  background: rgba(16,24,40,.14);
  color: rgba(16,24,40,.75);
}

/* 제목/날짜 */
.section.notice .noticeRow__title{
	min-width: 0;
    font-size: 21px;
    line-height: 1.45;
    color: rgba(16, 24, 40, .90);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.section.notice .noticeRow__date{
  font-size: 18px;
  color: rgba(16,24,40,.45);
  text-align: right;
  white-space: nowrap;
}

/* 문의 박스 */
.section.notice .inquiry{
  flex: 0 0 440px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 30px 38px;
  color: rgba(255,255,255,.92);
  box-shadow: 0 24px 60px rgba(16,24,40,.12);
  background: url("../img/home/bg-landing-07-notice-inquiry.png") center/cover no-repeat;
}

.section.notice .inquiry::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  pointer-events:none;
}

.section.notice .inquiry > *{
  position: relative;
  z-index: 1;
}

.section.notice .inquiry__k{
	font-size: 26px;
    letter-spacing: -0.04em;
    opacity: .9;
    /* margin-bottom: 6px; */
    font-family: Poppins, sans-serif;
    font-weight: 400;
}

.section.notice .inquiry__t{
	font-size: 39px;
    font-weight: 600;
    letter-spacing: -.5px;
    margin-bottom: 14px;
}

.section.notice .inquiry__t::after{
	content: "";
    display: block;
    width: 90px;
    height: 2px;
    background: rgba(255, 255, 255, .92);
    margin-top: 6px;
    opacity: .85;
}

.section.notice .inquiry__d{
  font-size: 20px;
  font-weight: 300;
  line-height: 29px;
  opacity: .92;
  margin-bottom: 18px;
  /* 2026.02.20_arumizz */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.section.notice .inquiry .btn{
	height: 42px;
    font-size: 22px;
    font-weight: 500;
    margin-top: 18px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(0, 0, 0, .22);
    color: rgba(255, 255, 255, .92);
}

.section.notice .inquiry .btn:hover{
  background: rgba(255,255,255,.20);
}

/* 반응형 */
@media (max-width: 1200px){
  .section.notice .noticeGrid{
    gap: 28px;
  }
  .section.notice .inquiry{
    flex-basis: 380px;
  }
  .section.notice .noticeRow{
    grid-template-columns: 60px 1fr 96px;
  }
  .section.notice .section__inner > .container{
	width: min(var(--container), calc(100%));
  }
}

@media (max-width: 1024px){
	.section.notice .inquiry .btn{
		font-size: 18px;
	}
}

@media (max-width: 900px){
  .section.notice .noticeHead{
    max-width: 100%;
  }
  .section.notice .noticeGrid{
    flex-direction: column;
    max-width: 100%;
	margin-bottom: 80px;
  }
  .section.notice .noticeList{
    padding: 6px 16px;
  }
  .section.notice .inquiry{
    flex-basis: auto;
  }
  .section.notice .noticeRow{
    grid-template-columns: 58px 1fr;
    grid-template-areas:
      "badge date"
      "title title";
    row-gap: 8px;
    padding: 14px 4px;
  }
  .section.notice .noticeRow .badge{ grid-area: badge; justify-self: start; font-size: 13px; }
  .section.notice .noticeRow__date{ grid-area: date; justify-self: end; font-size: 14px; }
  .section.notice .noticeRow__title{ grid-area: title; font-size: 15px; }
}

@media (max-width: 520px){
  .section.notice .noticeHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
  .section.notice .noticeHead .btn{
    margin-top: 0;
  }
  .section.notice .inquiry{
    padding: 22px 18px;
  }
  .section.notice .inquiry__k{
	font-size: 16px;
  }
  .section.notice .inquiry__t{
    font-size: 20px;
	margin-top: -6px;
  }
  .section.notice .inquiry__d{
	font-size: 17px;
	line-height: 26px;
  }
}

/* =========================================================
   FIX v10 - 02 CULTURE MEDIA / 04 SERUM ADDITIVE
   - 태블릿/모바일에서 소개 문구가 화면 밖으로 넘어가는 현상 방지
   - 원인: 데스크톱 기준 고정 safe padding(좌/우 149px)이 작은 뷰포트에서 과도하게 적용되어
           내부 텍스트/레이아웃 폭 계산이 깨지거나 overflow가 발생
   - 처리: 02/04 섹션에 한해 작은 폭에서는 safe padding을 축소하고, 텍스트 줄바꿈을 강제
   ========================================================= */

/* 02/04: 기본적으로 텍스트는 줄바꿈 가능해야 함 */
.section.product.culture .desc,
.section.product.serum   .desc {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all; /* 한글 단어는 자연스럽게 */
}

/* 태블릿 이하: 좌/우 safe padding 축소 */
@media (max-width: 1024px) {
  .section.product.culture .section__inner,
  .section.product.serum   .section__inner {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* 모바일: 더 축소 */
@media (max-width: 640px) {
  .section.product.culture .section__inner,
  .section.product.serum   .section__inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* 모바일에서 desc에 br이 있어도 줄바꿈이 어색하게 끊기지 않도록 */
  .section.product.culture .desc br,
  .section.product.serum   .desc br {
    display: none;
  }
}

/* =========================================================
   HOTFIX v30 - (02 CULTURE / 04 SERUM) 태블릿/모바일 desc 오버플로우 & 2줄 복구
   - 기존 v29에서 word-break: keep-all + (모바일) br 숨김 때문에
     한글 문장이 줄바꿈되지 않고 화면을 넘어가는 문제가 발생할 수 있습니다.
   - 또한 flex 자식의 기본 min-width:auto 때문에 텍스트가 줄바꿈 대신 overflow 되는 케이스가 있어
     product__left 에 min-width:0 을 부여합니다.
   ========================================================= */

/* flex 자식 최소 폭을 풀어줘서 줄바꿈 가능하게 */
.section.product.culture .product__left,
.section.product.serum   .product__left {
  min-width: 0;
}

/* desc 줄바꿈 정책 재정의 (한글/영문 모두 대응) */
.section.product.culture .desc,
.section.product.serum   .desc {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 모바일에서도 원래 의도대로 2줄(br) 유지 */
@media (max-width: 640px) {
  .section.product.culture .desc br,
  .section.product.serum   .desc br {
    display: inline !important;
  }
}

.section.product.culture .product__left,
.section.product.serum   .product__left {
  min-width: 0;
}

.section.product.culture .desc,
.section.product.serum   .desc {
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  /* 2026.02.20_arumizz */
  word-break: keep-all !important;
  /* word-break: break-word !important; */
}

@media (max-width: 640px) {
  /* 모바일에서 2줄 구성 유지를 위해 <br> 숨김 해제 */
  .section.product.culture .desc br,
  .section.product.serum   .desc br {
    display: inline !important;
  }
}


/* =========================================================
   HOTFIX v32 - 02/04 (CULTURE / SERUM) 모바일/태블릿에서 설명글(p.desc) 가로폭 과대 + 화면 넘침 방지
   - 원인: 제품 스트립(오른쪽) 폭 때문에 섹션 내부가 과대폭으로 계산되는 케이스가 있어,
           섹션/컨테이너/그리드 레벨에서 max-width를 강제하고 overflow-x를 차단한다.
   - 목표: 다른 랜딩(01/03/05/06/07) 영향 없이 02/04만 안전하게 고정
   ========================================================= */

@media (max-width: 1024px){
  .section.product.culture,
  .section.product.serum{
    overflow-x: clip; /* 지원 브라우저에서 스크롤바 자체를 안 만들도록 */
  }
  /* overflow-x: clip 미지원 대비 */
  .section.product.culture,
  .section.product.serum{
    overflow-x: hidden;
  }

  .section.product.culture .section__inner,
  .section.product.serum   .section__inner{
    width: 100%;
    max-width: 100%;
  }

  .section.product.culture .container,
  .section.product.serum   .container,
  .section.cert .container{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }

  .section.product.culture .product__grid,
  .section.product.serum   .product__grid{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: 1fr !important; /* 모바일/태블릿은 1열 고정 */
  }

  .section.product.culture .product__left,
  .section.product.serum   .product__left{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .section.product.culture .desc,
  .section.product.serum   .desc{
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;        /* 줄바꿈 허용 */
    overflow-wrap: anywhere !important;    /* 긴 영문/기호도 강제 줄바꿈 */
    word-break: keep-all !important;       /* 한글 단어 단위 줄바꿈 유지 */
	font-size: 18px;
  }

  /* <br>이 있는 문장은 항상 줄바꿈 유지 */
  .section.product.culture .desc br,
  .section.product.serum   .desc br{
    display: none !important;
  }
}

@media (max-width: 640px){
	.section.cert .container{
		padding-left: 0;
		padding-right: 0;
	}
}