@charset "utf-8";
/* ============================================================================
   main_caticons.css  v1.3.0  (2026-09-03)
   PC 메인 "카테고리 원형 아이콘 줄" — 배너(.main_visual) 바로 아래 1160 열.
   마크업 = include/comm/mainCatIconsComm.jsp (.mci_ 프리픽스)

   [연혁]
   v1.0.0 신설(7칸) · v1.1.0 8칸(엄마와 아기 추가·순서 변경)
   v1.2.0 2026-09-03 팀장 "쨍한 느낌의 이미지로" —
          ① 사진 8장 전부 채도·대비 높은 컷으로 교체(JSP)
          ② 피사체 중심 확대 : object-position 실측값 + scale 1.12~1.50 (칸별 --mci-z / --mci-pos)
          ③ filter: saturate(1.15) contrast(1.06) brightness(1.03)
          ④ 원형 윤곽 1px rgba(0,0,0,.06) (::after 링 — 박스 크기 불변)
          ⑤ 2x 소스만 사용(원본 600px 이상 = 84px 원형의 7배 이상, 흐림 0)
   v1.3.0 2026-09-03 팀장 "화사하게, 의미가 전달되도록" — v1.2.0 의 "쨍함"이 붉은 계열로 몰리고
          분류 뜻이 바로 안 읽힌다는 피드백. 기준을 바꿨다.
          ① 채점 = 화사함(high-key) : 밝기 0.30 + 배경밝음 0.22 + 피사체 70~80% 0.20
             + 어두운화소 적음 0.18 + 채도 0.10. (v1.2.0 은 채도 0.46 이 1순위였다)
          ② 사진 8장 전부 "밝은 배경 위 밝은 톤 + 그 분류의 전형적 피사체"로 교체(JSP 주석에 칸별 사유)
          ③ 보정 완화 : saturate 1.15→1.08 · contrast 1.06→1.03 · brightness 1.03→1.06
             (채도를 낮추고 밝기를 올린다 = 파스텔·하이키 쪽)
          ④ 확대 완화 : 1.12~1.50 → 1.05~1.10. 원 안에 여백을 살짝 남겨 답답함을 없앤다.
          ⑤ 원형 바탕 #f4f3ef → #f7f6f2 (더 밝게)
          ⑥ 붉은 칸 1개(과일·견과 사과)만 남겨 8칸 색을 고르게 분산

   · 참고(오아시스 메인) : 배경 흰색 · 상자/선 없음 · 원형 사진 + 그 아래 라벨 한 줄.
   · 이 파일은 이 섹션 전용. 다른 메인 시트(style_v2·main_rd·main_banner_hero)는 건드리지 않는다.
   ========================================================================== */

.mci_band {
	background: #fff;
	padding: 20px 0 26px;
}

.mci_in {
	width: 1160px;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* 칸 균등. space-between 대신 grid — 라벨 폭 차이가 사진 간격을 흔들지 않게 */
.mci_row {
	display: grid;
	grid-template-columns: repeat(8, 1fr); /* v1.1.0 2026-09-03: 8칸(엄마와 아기 추가) */
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mci_it {
	min-width: 0;
}

.mci_lk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding: 4px 6px;
	outline-offset: 4px;
}

.mci_lk:hover,
.mci_lk:focus {
	text-decoration: none;
}

/* 원형 사진 84px (오아시스 실측 유사) */
.mci_ph {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: #f7f6f2;
	flex: 0 0 auto;
}

/* v1.2.0 윤곽선 — 밝은 배경 사진이 흰 지면에 묻히지 않게 아주 옅은 링.
   border 대신 ::after 링이라 사진 박스 크기(84px)가 그대로 유지된다. */
.mci_ph::after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
	pointer-events: none;
}

/* v1.2.0 "쨍하게" 3종 :
   ① 피사체 중심 확대 — 칸별 --mci-z(1.05~1.10) / --mci-pos(실측 object-position)
   ② 채도·대비·밝기 보정 filter
   ③ 소스는 항상 600px 이상(2x 이상) — JSP 에서 컷을 그렇게 고른다 */
.mci_ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mci-pos, 50% 50%);
	transform: scale(var(--mci-z, 1.06));
	transform-origin: center center;
	filter: saturate(1.08) contrast(1.03) brightness(1.06);
	transition: transform .22s ease;
}

.mci_nm {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: #1f241e;
	text-align: center;
	white-space: nowrap;
	transition: color .16s ease;
}

/* hover = 기본 확대값에서 6% 더(기존 1.04 상당) */
.mci_lk:hover .mci_ph img,
.mci_lk:focus .mci_ph img {
	transform: scale(calc(var(--mci-z, 1.06) * 1.06));
}

.mci_lk:hover .mci_nm,
.mci_lk:focus .mci_nm {
	color: #3d6041;
}

/* ── 칸별 확대·초점 실측값 (v1.3.0) ────────────────────────────────────────
   각 사진의 피사체 바운딩박스를 실측해 "피사체 70~80% + 여백 살짝" 이 되도록 잡은 값.
   v1.2.0 보다 확대가 훨씬 약하다 — 꽉 채우면 답답하고 화사함이 죽는다는 피드백 반영.
   사진을 바꾸면 이 두 값도 같이 손봐야 한다(기본값 1.06 / 50% 50% 로 두어도 무방). */
.mci_it--carbon  .mci_ph img { --mci-z: 1.05; --mci-pos: 55% 48%; }  /* 48980 열무 */
.mci_it--matchan .mci_ph img { --mci-z: 1.05; --mci-pos: 50% 51%; }  /* 두레맛찬 히어로(반찬 모둠) */
.mci_it--baby    .mci_ph img { --mci-z: 1.05; --mci-pos: 50% 50%; }  /* 23294 미니단호박 */
.mci_it--veg     .mci_ph img { --mci-z: 1.08; --mci-pos: 50% 52%; }  /* 50434 두레쌈모음 */
.mci_it--meat    .mci_ph img { --mci-z: 1.05; --mci-pos: 49% 49%; }  /* 21492 원삼유정란 */
.mci_it--fruit   .mci_ph img { --mci-z: 1.05; --mci-pos: 49% 50%; }  /* 50006 유기사과 */
.mci_it--conv    .mci_ph img { --mci-z: 1.05; --mci-pos: 50% 49%; }  /* 39016 황태콩나물국 */
.mci_it--fish    .mci_ph img { --mci-z: 1.05; --mci-pos: 51% 51%; }  /* 55747 고등어구이 */

/* 배너와 같은 좌우 여백 규칙(1200 이하에서 20px 안쪽) */
@media (max-width: 1200px) {
	.mci_in { padding-left: 20px; padding-right: 20px; }
	.mci_nm { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.mci_ph img { transition: none; }
	.mci_lk:hover .mci_ph img,
	.mci_lk:focus .mci_ph img { transform: scale(var(--mci-z, 1.06)); }
}

/* [v1.2.1 2026-09-03] 팀장: "왼쪽부터 탄소중립포인트 — NEW 마크 부착"(맨 앞 배치 근거). 라벨 우상단 작은 딥그린 알약 */
.mci_nm { position: relative; }
.mci_new { position: absolute; top: -12px; right: -6px; font: 700 9px/1 'Pretendard','Noto Sans KR',sans-serif; letter-spacing: .04em; color: #fff; background: #3d6041; border-radius: 999px; padding: 3px 5px 2px; }

/* v1.2.2: NEW 마크를 라벨 옆 → 사진 원형 우상단(눈에 먼저 들어오게). 원형 84px 가운데 정렬 기준 */
.mci_it { position: relative; }
.mci_nm { position: static; }
.mci_new { top: 2px; right: auto; left: calc(50% + 22px); font-size: 10px; padding: 4px 6px 3px; box-shadow: 0 0 0 2px #fff; }