/* =========================================================
   ENVY 「오늘의 당도」 상세페이지  /brix/   brix.css
   시안 = Figma Frame 13364 (node 1142:4081)
   추출본 = _workspace/00_input/figma/node_raw.json

   ⚠️ 클래스 접두어는 .envy-brixp__  (홈 섹션의 .envy-brix__ 와 다른 것).
      홈 섹션 스타일(home.css:240~)과 서로 간섭하지 않게 분리했다.
   ⚠️ 색값은 전부 home.css :root 의 --envy-brix-* 토큰을 참조한다.
      새 하드코딩 금지 (design-token 스킬 규칙 1).
   ========================================================= */

/* -------------------------------------------------------------------------
 * Astra 기본 콘텐츠 래퍼 무력화 — collection.css:25-36 과 같은 처리
 *
 * 이 화면은 get_header()/get_footer() 를 쓰므로 Astra 의
 *   #content.site-content > .ast-container   (display:flex · max-width:1240)
 * 안에 들어간다. 그래서 두 가지가 한꺼번에 터졌다 (2026-09-14 브라우저 실측):
 *   ① main 이 **flex 아이템**이라 min-width:auto = min-content 로 부풀어,
 *      948~1348px 에서 main 이 1308px 로 고정되고 문서가 최대 380px 가로 스크롤됐다.
 *   ② max-width 1240(내부 1200)이라 시안 콘텐츠폭 1260 이 애초에 안 들어간다.
 * 래퍼를 block 으로 풀면 둘 다 사라진다 — 폭은 우리 .envy-container 가 잡는다.
 * body.envy-brix-page 가 붙은 이 화면에만 걸린다(lib/envy-brix.php envy_brix_body_class).
 * ⚠️ 상품상세(PDP)에도 같은 종류의 초과가 원래부터 있으나 **이번 범위가 아니라 안 건드린다.**
 * ---------------------------------------------------------------------- */
body.envy-brix-page { background: #fff; }
body.envy-brix-page #content.site-content { background: #fff; padding: 0; margin: 0; }
body.envy-brix-page #content .ast-container {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.envy-brixp {
	padding: 60px 0 96px;
	background: #fff;
	color: var(--envy-ink);
	font-family: "Pretendard", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.envy-brixp a { text-decoration: none; color: inherit; }

/* ===== 머리말 (시안 Container 1260x104) ===== */
.envy-brixp__title {
	margin: 0;
	font-size: 40px;           /* 시안: Pretendard SemiBold 40 / lh 52 / ls -2 */
	font-weight: 600;
	line-height: 52px;
	letter-spacing: -2px;
	color: #000;
}
/* 머리말 날짜 줄(.envy-brixp__date/__clock/__datetext)은 2026-09-17 대표 지시로 제거됐다.
   홈 섹션의 `.envy-brix__date`(p 없는 이름)는 **다른 요소**이므로 home.css 에 그대로 있다. */

/* ===== 과일 탭 (시안 Frame 1341 — 146x56, gap 12, radius 999) ===== */
.envy-brixp__tabs {
	display: flex;
	gap: 12px;
	margin-top: 40px;          /* 시안: 머리말 블록 아래 40 */
	overflow-x: auto;          /* 과일이 늘어나면 가로 스크롤 (모바일 시안 없음 — 대표 지시로 임의) */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.envy-brixp__tabs::-webkit-scrollbar { display: none; }
/* +:hover/:focus/:active — Astra 인라인 `button:hover,button:focus{background:#4f8a3d;color:#fff}`
   ([0,1,1]) 가 아래 기본 규칙([0,1,0])의 background:#fff 를 이겨, 탭에 마우스를 올리면
   배경만 진녹(#4F8A3D)으로 바뀌고 글자색은 그대로라 **글자가 배경에 묻혔다.**
   (2026-09-14 실측: 망고 탭 hover → bg rgb(79,138,61) / 이름 rgb(91,97,92) = 대비 1.52:1)
   `assets/css/checkout-kr.css:26-36` 「우편번호 검색」 버튼이 똑같이 당했던 함정이다.
   해결도 같게 — **값을 복제하지 않고 기본 규칙에 상태 셀렉터를 얹어 단일 출처를 유지한다.** */
.envy-brixp__tab,
.envy-brixp__tab:hover,
.envy-brixp__tab:focus,
.envy-brixp__tab:active {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;                  /* 시안: 이미지프레임 끝 13662 → 텍스트 13666 */
	width: 146px;
	height: 56px;
	padding: 0 8px 0 12px;     /* 시안: 좌 12 / 우 8 */
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--envy-brix-line);
	border-radius: 999px;
	/* 🔴 2026-09-14 수정 라운드 5 — 탭 안 이미지가 알약 모양 테두리를 뚫고 나오던 것 차단.
	   radius 999px 인데 overflow 가 visible 이라, 사각형 사진(고객사 업로드)이
	   왼쪽 모서리 곡선을 덮어 초록 선택 테두리가 가려졌다(2026-09-14 캡처 확인).
	   기존 5종은 **흰 배경 PNG라 안 보였을 뿐** 구조 결함은 원래 있었다.
	   ⚠️ 테두리(border)와 포커스 링(outline)은 자기 자신의 overflow 에 잘리지 않는다
	      (box-shadow 였다면 잘렸다 — 그래서 포커스 링을 outline 으로 둔 것이 여기서도 맞다). */
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s;
}
/* hover 어포던스 — 배경을 바꾸지 않고 **테두리만** 시안의 선택색으로.
   (새 색을 만들지 않는다. --envy-brix-line-on = 시안 선택 탭 stroke #9AC18B) */
.envy-brixp__tab:hover { border-color: var(--envy-brix-line-on); }
/* 마우스 클릭 시 남는 Astra/브라우저 기본 포커스 링 제거 + 키보드 탐색일 때만 초록 링
   (single-product.css:1195-1207 과 같은 방식) */
.envy-brixp__tab:focus { outline: none; }
.envy-brixp__tab:focus-visible {
	outline: 2px solid var(--envy-green-bright);
	outline-offset: 2px;
}
/* 선택 상태는 hover 규칙 **뒤에** 둬서 마우스를 올려도 시안 모습이 유지된다
   (흰 배경 + 초록 테두리 2px + 초록 글자 = 시안 Frame 13364 Frame 1344). */
.envy-brixp__tab.is-active,
.envy-brixp__tab.is-active:hover,
.envy-brixp__tab.is-active:focus,
.envy-brixp__tab.is-active:active {
	background: #fff;
	border: 2px solid var(--envy-brix-line-on);   /* 시안: 선택 탭 stroke 2px */
	padding: 0 7px 0 11px;                        /* 보더 1px 증가분만큼 보정 — 폭 유지 */
}
/* 🔴 2026-09-14 수정 라운드 6 — 탭 이미지를 **원형 + 축소**로.
 *
 * 라운드 5의 `overflow:hidden` 은 부족했다. 실측(6배 확대, 실사진이 올라간 「ㅅㄱ」 탭):
 *   이미지가 x=12~60 · y=4~52 를 차지해 **알약 왼쪽 곡선(x=0~28)과 완전히 겹친다.**
 *   overflow 는 이미지를 알약 모양으로 자를 뿐, 불투명 사진이 곡선 위에 깔리는 건 못 막아
 *   초록 테두리가 사진 뒤에서 끊겨 보였다. (사과 탭은 흰 배경 PNG라 선이 비쳐 안 보였을 뿐이다.)
 *
 * 해법 = 이미지를 **곡선과 물리적으로 안 겹치게** 만든다.
 *   · 박스 48 → **44 원형**(좌우 여유 확보). 박스 중심 (34,28) r=22,
 *     알약 좌측 캡 중심 (28,28) r=27 → 최소 간격 11px (y=28) · 모서리로 갈수록 더 벌어진다.
 *   · 이미지는 박스보다 작은 **최대 40px**(contain) → 원형 클리핑이 과일을 먹지 않는다.
 * 탭 폭(146px)은 그대로라 가로 스크롤 임계는 안 바뀐다. */
.envy-brixp__tabimg {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
}
.envy-brixp__tabimg img { max-width: 40px; max-height: 40px; width: auto; height: auto; object-fit: contain; display: block; }
.envy-brixp__tabtxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.envy-brixp__tabname {
	font-size: 16px;           /* 시안: Pretendard Bold 16 / lh 22 */
	font-weight: 700;
	line-height: 22px;
	color: var(--envy-brix-name);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.envy-brixp__tabbrix {
	font-size: 12px;           /* 시안: Pretendard Medium 12 / lh 14.32 */
	font-weight: 500;
	line-height: 14px;
	color: var(--envy-brix-muted);
}
.envy-brixp__tab.is-active .envy-brixp__tabname { color: var(--envy-brix-name-on); }
.envy-brixp__tab.is-active .envy-brixp__tabbrix { color: var(--envy-brix-sub-on); }

/* ===== 패널 ===== */
.envy-brixp__panel { margin-top: 0; }
.envy-brixp__panel[hidden] { display: none; }

/* 시안 Frame 13364 (1260x346): 226 · 64 · 404 · 64 · 1 · 64 · 437 = 1260 */
.envy-brixp__card {
	display: grid;
	grid-template-columns: 226px 404px 1px 437px;
	gap: 64px;
	align-items: start;
	padding: 54px 0 53px;      /* 시안: 블록 상단 54 / 하단 53 */
	margin-top: 40px;          /* 시안: 탭 아래 40 */
}

/* -- 과일 사진 (시안 Frame 1344 226x226) -- */
.envy-brixp__photo {
	width: 226px;
	height: 226px;
	margin-top: 6px;           /* 시안: 정보열(y 54)보다 6 아래에서 시작 */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
/* 정사각이 아닌 사진은 **잘라서 칸을 꽉 채운다**(대표 확정 2026-09-14).
   시안 Frame 13364 는 정사각 사진만 있어 근거가 없던 자리 — contain(여백) 과 cover(잘림) 중
   대표가 화면 비교 후 cover 를 골랐다. 정사각 사진이면 둘의 결과가 같다. */
.envy-brixp__photo img { width: 226px; height: 226px; object-fit: cover; display: block; }

/* -- 정보열 (시안 Frame 13384 404x239) -- */
.envy-brixp__name {
	margin: 0;
	font-size: 32px;           /* 시안: Pretendard Bold 32 / lh 38.19 */
	font-weight: 700;
	line-height: 38px;
	color: #000;
}
.envy-brixp__big {
	display: flex;
	align-items: flex-end;
	gap: 12px;                 /* 시안: 큰 숫자 끝 14050 → brix 14062 */
	margin-top: 24px;          /* 시안: 이름 아래 24 */
	min-height: 95px;
}
.envy-brixp__num {
	font-size: 80px;           /* 시안: Pretendard Bold 80 / lh 95.47 */
	font-weight: 700;
	line-height: 95px;
	color: #000;
	letter-spacing: -1px;
}
.envy-brixp__unit {
	font-size: 20px;           /* 시안: Pretendard Bold 20 / lh 23.87 */
	font-weight: 700;
	line-height: 24px;
	color: var(--envy-brix-muted);
	padding-bottom: 18px;      /* 시안: brix 베이스라인이 숫자 바닥에서 18 위 */
}
/* 「직전 대비 ±N」 배지 (시안 Frame 13367 146x31 radius 999) */
.envy-brixp__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;                  /* 시안: 아이콘(16) 끝 14139 → 텍스트 14147 */
	height: 31px;
	padding: 0 12px;
	margin-left: 12px;
	margin-bottom: 8px;
	border-radius: 999px;
	background: var(--envy-brix-badge-bg);
	color: var(--envy-brix-badge-ink);
	font-size: 16px;           /* 시안: Pretendard SemiBold 16 / lh 19.09 */
	font-weight: 600;
	line-height: 19px;
	white-space: nowrap;
}
.envy-brixp__arrow { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.envy-brixp__badge.is-down .envy-brixp__arrow { transform: rotate(180deg); }
/* 증감 0 — 시안에 없는 상태. 색을 새로 만들지 않고 기존 회색 토큰을 쓴다 */
.envy-brixp__badge.is-flat { background: var(--envy-bg); color: var(--envy-brix-muted); }

.envy-brixp__hr {
	height: 1px;
	background: var(--envy-brix-div);   /* 시안: Frame 13383 404x1 */
	margin-top: 17px;
}
.envy-brixp__facts {
	display: flex;
	flex-wrap: wrap;           /* 폰트 폴백으로 글자가 넓어져도 겹치지 않고 아래로 내려간다(안전망) */
	column-gap: 26px;          /* 시안: 열 시작 13892 / 13990 / 14088, 열폭 72 */
	row-gap: 18px;
	margin: 20px 0 0;          /* 시안: 구분선 아래 20 */
}
.envy-brixp__fact { width: 72px; }
/* 입고 시기 — `2026.09.20`(10자) 이 18px Bold 로 들어가는 칸. 시안엔 없는 칸이다(2026-09-17 대표 지시).
   시안의 3번째 칸이던 「측정」(`--wide` 96px)을 같은 지시로 제거했으므로 그 규칙도 함께 걷어냈다.
   정보열 404 안에서 72+72+100 = 244 + 26*2 = 296 → 한 줄에 여유롭게 들어간다. */
.envy-brixp__fact--intake { width: 100px; }
.envy-brixp__facts dt {
	margin: 0;
	font-size: 14px;           /* 시안: Pretendard Regular 14 / lh 16.71 / ls -0.28 */
	font-weight: 400;
	line-height: 17px;
	letter-spacing: -.28px;
	color: var(--envy-brix-muted);
}
.envy-brixp__facts dd {
	margin: 7px 0 0;           /* 시안: 라벨 아래 7 */
	font-size: 18px;           /* 시안: Pretendard Bold 18 / lh 21.48 / ls -0.36 */
	font-weight: 700;
	line-height: 21px;
	letter-spacing: -.36px;
	color: var(--envy-brix-ink);
	white-space: nowrap;
}
.envy-brixp__facts dd.is-green { color: var(--envy-brix-name-on); }   /* 시안: 오늘 당도만 초록 #4B8132 */
/* 값이 없어 「미정」이 들어간 칸 — 실제 날짜와 구분되게 라벨과 같은 회색을 쓴다(새 색을 만들지 않는다) */
.envy-brixp__facts dd.is-muted { color: var(--envy-brix-muted); }

/* -- 세로 구분선 (시안 Frame 13378 1x297, 블록 중앙 정렬) -- */
.envy-brixp__vline {
	width: 1px;
	background: var(--envy-brix-div);
	align-self: stretch;
	margin: -29px 0;           /* 시안: 콘텐츠(239)보다 위아래 29씩 더 길다 → 297 */
}

/* -- 최근 당도 추이 (시안 Frame 13377 437x239) -- */
.envy-brixp__trendtitle {
	margin: 0;
	font-size: 16px;           /* 시안: Pretendard SemiBold 16 / lh 19.09 / ls -0.32 */
	font-weight: 600;
	line-height: 19px;
	letter-spacing: -.32px;
	color: var(--envy-brix-name);
}
.envy-brixp__bars {
	display: flex;
	gap: 40px;                 /* 시안: 열 간격 39.67 */
	padding: 0 24px;           /* 시안: 437 프레임 안 339 그룹 (좌우 24) */
	margin-top: 35px;          /* 시안: 제목 아래 35 */
}
.envy-brixp__barcol {
	width: 55px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.envy-brixp__barval {
	font-size: 16px;           /* 시안: Pretendard Bold 16 / lh 19.09 */
	font-weight: 700;
	line-height: 19px;
	color: var(--envy-brix-name);
}
.envy-brixp__barbox {
	width: 32px;
	height: 125px;             /* 시안: 막대 최대 높이 125 */
	margin-top: 11px;          /* 시안: 값 아래 11 */
	display: flex;
	align-items: flex-end;
}
.envy-brixp__bar {
	display: block;
	width: 32px;               /* 시안: Rectangle 72 w=32 */
	background: var(--envy-brix-bar);      /* 시안: #CAE0AE */
	border-radius: 10px 10px 0 0;   /* 시안: rr [10,10,0,0] */
}
/* 높이 단계 1~4 (대표 확정 규칙, 2026-09-14 수정 라운드 2 — 크기 비례 아님, 순위).
   단계 4 = 트랙 전체 = 125px  → 시안 Rectangle 72 h=125 와 일치.
   ⚠️ 1~3 단계 높이는 **시안 근거 없음.** 시안은 4일이 전부 동률이라 단계 4 하나만 그려져 있다.
      125 를 25px 씩 균등 분할해 100 / 75 / 50 으로 잡았다 (대표 확인 대상).
   %로 쓰는 이유 = 모바일에서 트랙이 96px 로 줄어도 같은 비율이 유지되게. */
.envy-brixp__bar--h4 { height: 100%; }   /* 125px */
.envy-brixp__bar--h3 { height: 80%;  }   /* 100px */
.envy-brixp__bar--h2 { height: 60%;  }   /*  75px */
.envy-brixp__bar--h1 { height: 40%;  }   /*  50px */
.envy-brixp__barday {
	margin-top: 13px;          /* 시안: 막대 아래 13 */
	font-size: 14px;           /* 시안: Pretendard SemiBold 14 / lh 16.71 */
	font-weight: 600;
	line-height: 17px;
	color: var(--envy-brix-muted);
}
.envy-brixp__barcol.is-today .envy-brixp__barval { color: var(--envy-brix-name-on); }
.envy-brixp__barcol.is-today .envy-brixp__barday { color: var(--envy-brix-name-on); }
.envy-brixp__barcol.is-today .envy-brixp__bar { background: var(--envy-brix-bar-on); }

.envy-brixp__empty {
	margin: 60px 0;
	text-align: center;
	color: var(--envy-gray);
	font-size: 16px;
}

/* ===== 관련 상품 ===== */
/* 마크업·카드 스타일은 상품상세의 .envy-related 를 그대로 쓴다
   (single-product.css:1102-1161 — /brix/ 에서도 그 파일을 함께 로드한다).
   여기서는 이 화면에만 필요한 「준비 중」 안내와 상단 여백만 더한다. */
.envy-brixp .envy-related { margin-top: 24px; }
.envy-related__soon {
	margin: 24px 0 0;
	padding: 48px 0;
	text-align: center;
	color: var(--envy-gray);
	font-size: 16px;
	background: var(--envy-bg);
	border-radius: 12px;
}

/* =========================================================
   반응형 — ⚠️ 시안 없음. 대표 지시로 임의 작성(스펙 §5.2).
   시안이 나오면 이 블록은 재작업 대상이다.
   ========================================================= */
/* 데스크톱 고정 그리드(226+64+404+64+1+64+437 = 1260)는 **콘텐츠폭이 실제로 1260 이상일 때만** 건다.
   .envy-container 콘텐츠폭 = min(뷰포트, 1308) - 48 이므로 1260 을 채우려면 뷰포트 ≥ 1308.
   1279 로 잡아 두면 1280~1307 구간에서 1260 그리드가 1232 폭 안에 안 들어가 문서가 밀렸다
   (2026-09-14 실측 1280px: 추이 열이 4px 초과). */
@media (max-width: 1307px) {
	.envy-brixp__card {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 40px;
	}
	.envy-brixp__photo { width: 200px; height: 200px; }
	.envy-brixp__photo img { width: 200px; height: 200px; }
	.envy-brixp__vline { display: none; }
	.envy-brixp__trend { grid-column: 1 / -1; }
	.envy-brixp__bars { padding: 0; justify-content: space-between; gap: 12px; }
}
@media (max-width: 768px) {
	.envy-brixp { padding: 40px 0 64px; }
	.envy-brixp__title { font-size: 26px; line-height: 34px; letter-spacing: -1px; }
	.envy-brixp__tabs { margin-top: 24px; }
	.envy-brixp__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 28px 0 32px;
		margin-top: 24px;
		justify-items: center;
	}
	.envy-brixp__photo { width: 160px; height: 160px; margin-top: 0; }
	.envy-brixp__photo img { max-width: 160px; max-height: 160px; }
	.envy-brixp__info { width: 100%; }
	.envy-brixp__name { font-size: 24px; line-height: 30px; }
	.envy-brixp__big { margin-top: 14px; min-height: 0; flex-wrap: wrap; }
	.envy-brixp__num { font-size: 56px; line-height: 66px; }
	.envy-brixp__unit { padding-bottom: 10px; }
	.envy-brixp__badge { margin-left: 0; margin-bottom: 10px; }
	.envy-brixp__facts { gap: 16px; }
	.envy-brixp__fact { width: auto; flex: 1 1 0; }
	/* 모바일에서 입고 시기(10자)는 1fr 로 나누면 nowrap 때문에 삐져나온다 → 내용폭을 보장한다 */
	.envy-brixp__fact--intake { width: auto; flex: 0 0 auto; }
	.envy-brixp__trend { width: 100%; }
	.envy-brixp__bars { margin-top: 20px; }
	.envy-brixp__barcol { width: auto; flex: 1 1 0; }
	.envy-brixp__barbox { height: 96px; }
	.envy-brixp__bar { width: 28px; }
}