/* =====================================================================
temp_mark.css — 보관온도(냉동·냉장·상온) 배지 공용 (2026-08-25) v1.2.1
· js/comm/temp_mark.js 가 필요한 화면에서만 동적으로 링크한다.
· 모든 규칙은 .tmk- 접두 클래스 안에서만 작동 → 기존 화면 CSS 무충돌.
· 표준(사용자 확정): 원형 아이콘 + 글자 병기, 전부 inline SVG(이모지 금지).
냉동(.tmk-f) = 파란 원 #1d6fe0 + 흰 눈꽃 + "냉동"
냉장(.tmk-c) = 하늘색 원 #4aa3e8 + 흰 물방울 + "냉장"
상온(.tmk-n) = 회청색 원 #7b8fa6 + 흰 온도계 + "상온"
· [v1.1.0 · 2026-09-30] 상온 배지를 시안 이미지대로 교체 — 웜그레이 원+잎사귀 → 회청색 원+온도계,
칩 색 #f3f1ec/#ddd8cc/#6f6a5c → #eef2f6/#cfd8e3/#56677c. 냉동·냉장·기하(§0)는 그대로.
· 요소: 카드 칩(.tmk-pill) / 칩 줄 없는 카드의 칩 줄(.tmk-line) / 장바구니 행(.tmk-rowtag)
/ 상세 온도 칩 강화(.tmk-chip) / 원형 아이콘(.tmk-ic)
/ (폐지) 카드 이미지 태그 딱지(.tmk-tag) — v1.0.7 부터 생성하지 않음
── [v1.0.7 · 2026-09-06] 전 화면 한 가지 규격 ─────────────────────────
팀장 지적: "보관온도 마크가 아직도 맘대로임, 통일 안 된 거야?" / "기획전 1697 — 온도대가
썸네일에 왜 올라간 거야? 통일 규격으로." 실측 결과 한 화면 안에 4가지 모양이 섞여 있었다
(12.5px/r8 원형칩 · 14px/r999 승격칩 · 썸네일 위 파란 딱지 · 규격칩 중복).
확정 규격 = 카드 배지 12.5px/700 · 높이 22px · radius 999 · 왼쪽 원형 아이콘 15px,
위치는 정보 영역의 칩 줄에만(썸네일 위 금지), 한 카드에 온도 표시 1개.
화면별 카드 CSS(main_rd/cat_best/cat_rise/main_sanji/rcb1_spec_m/ux_base_m/plan_b …)가
.tpill·.cpill 을 (0,3~5,x) 특정도로 덮고 있어 기하 속성만 !important 로 못 박는다.
전용 클래스(.tmk-*)라 밖으로 번지지 않는다.
큰글씨 모드(html.font_big · body.dcbig) = 13.5px / 높이 24px.
===================================================================== */
.tmk-slot[hidden]{ display:none !important; }
/* ---------- 0. 확정 기하(전 화면 1종) — 이 블록만 바꾸면 전 사이트가 함께 바뀐다 ---------- */
.tmk-pill,
.tmk-rowtag,
.pb-temp.tmk-pbtemp,
.pgz .temp{
box-sizing:border-box !important;
display:inline-flex !important; align-items:center !important; gap:5px !important;
height:22px !important; padding:0 9px 0 3px !important;
font-size:12.5px !important; font-weight:700 !important; line-height:1 !important;
border-radius:999px !important; border:1px solid !important;
white-space:nowrap; letter-spacing:-.01em; word-break:keep-all; text-indent:0;
overflow:visible !important; text-overflow:clip !important; max-width:none !important;
font-family:"Pretendard","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif; }
.tmk-pill .tmk-ic,
.tmk-rowtag .tmk-ic,
.pb-temp.tmk-pbtemp .tmk-ic,
.pgz .temp .ti{ width:15px !important; height:15px !important; background-size:9px 9px !important;
flex:0 0 auto; vertical-align:0; }
/* 큰글씨(돋보기·OS 글자확대) 모드 = 13.5px / 24px */
html.font_big .tmk-pill, body.dcbig .tmk-pill,
html.font_big .tmk-rowtag, body.dcbig .tmk-rowtag,
html.font_big .pb-temp.tmk-pbtemp, body.dcbig .pb-temp.tmk-pbtemp,
html.font_big .pgz .temp, body.dcbig .pgz .temp{ font-size:13.5px !important; height:24px !important; }
html.font_big .tmk-pill .tmk-ic, body.dcbig .tmk-pill .tmk-ic,
html.font_big .tmk-rowtag .tmk-ic, body.dcbig .tmk-rowtag .tmk-ic,
html.font_big .pb-temp.tmk-pbtemp .tmk-ic, body.dcbig .pb-temp.tmk-pbtemp .tmk-ic,
html.font_big .pgz .temp .ti, body.dcbig .pgz .temp .ti{ width:16px !important; height:16px !important;
background-size:10px 10px !important; }
/* ---------- 0.1 칩 줄이 없는 카드 — 상품명 바로 뒤 칩 줄 1개(v1.0.7, 썸네일 위 부착 대체) ---------- */
.tmk-line{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:4px 0 0; }
/* ---------- 원형 아이콘(공용) — 배경색 + 흰 글리프는 구분 클래스가 정한다 ---------- */
.tmk-ic{ display:inline-flex; flex:none; width:16px; height:16px; border-radius:50%;
background-color:#7b8fa6; background-position:center; background-repeat:no-repeat; background-size:10px 10px;
vertical-align:-3px; }
/* 냉동 = 파란 원 + 흰 눈꽃(6줄기 + 가지) */
.tmk-f .tmk-ic{ background-color:#1d6fe0;
background-image:url("data:image/svg+xml;utf8,"); }
/* 냉장 = 하늘색 원 + 흰 물방울 */
.tmk-c .tmk-ic{ background-color:#4aa3e8;
background-image:url("data:image/svg+xml;utf8,"); }
/* 상온 = 회청색 원 + 흰 온도계 (v1.1.0 — 구 웜그레이 원 + 잎사귀) */
.tmk-n .tmk-ic{ background-color:#7b8fa6;
background-image:url("data:image/svg+xml;utf8,"); }
/* ---------- 1. 카드 칩(.specrow 한 칸 · .tmk-line) — 색만(기하는 §0) ---------- */
.tmk-pill{ pointer-events:none; }
.tmk-pill.tmk-f{ background:#eaf2fd !important; border-color:#b9d4f6 !important; color:#1a5fc0 !important; }
.tmk-pill.tmk-c{ background:#ecf6fd !important; border-color:#c2e2f8 !important; color:#2b7fc2 !important; }
.tmk-pill.tmk-n{ background:#eef2f6 !important; border-color:#cfd8e3 !important; color:#56677c !important; }
/* 두레카드(.dcz) 칩 줄 안에서 기본 cpill/tpill(중립 톤)을 이기고 말줄임 없이 온전히 (carbon_mark 선례)
— 기존 tpill 승격(.tmk-up)도 이 블록이 함께 받는다(클래스 교체 후 cpill+tpill+tmk-pill 병기) */
.dcz .specrow .cpill.tmk-pill{ flex:0 0 auto !important; min-width:0; }
.dcz .specrow .cpill.tmk-pill.tmk-f{ background:#eaf2fd !important; border-color:#b9d4f6 !important; color:#1a5fc0 !important; }
.dcz .specrow .cpill.tmk-pill.tmk-c{ background:#ecf6fd !important; border-color:#c2e2f8 !important; color:#2b7fc2 !important; }
.dcz .specrow .cpill.tmk-pill.tmk-n{ background:#eef2f6 !important; border-color:#cfd8e3 !important; color:#56677c !important; }
/* ---------- 2. (폐지) 카드 이미지 태그 딱지 .tmk-tag ----------
v1.0.6 까지는 칩 줄이 없는 카드에서 썸네일 위 태그 줄(.tag/.pctag)에 흰 글자 딱지를 붙였다.
2026-09-06 팀장 지시("온도대가 썸네일에 왜 올라간 거야? 통일 규격으로")로 **생성 중단** —
js/comm/temp_mark.js v1.0.7 의 해당 분기를 삭제하고 상품명 뒤 .tmk-line 으로 대체했다.
아래 규칙은 캐시된 구 JS(v1.0.6)가 남아 도는 과도기 동안만 의미가 있고, 새 DOM 에는
.tmk-tag 가 생기지 않으므로 무해하다. 다음 정리 차수에 삭제 예정.
------------------------------------------------------------------------------------
.tmk-tag{ display:inline-block; width:auto !important; padding:3px 8px !important; border-radius:8px !important;
color:#fff !important; font-size:14px !important; font-weight:800 !important; line-height:1.3 !important;
white-space:nowrap; text-align:center; text-indent:0 !important; letter-spacing:0;
border:0 !important; list-style:none !important; box-shadow:0 1px 3px rgba(0,0,0,.16); pointer-events:none; }
.tmk-tag.tmk-f{ background:#1d6fe0 !important; background-color:#1d6fe0 !important; }
.tmk-tag.tmk-c{ background:#4aa3e8 !important; background-color:#4aa3e8 !important; }
.tmk-tag.tmk-n{ background:#8a8577 !important; background-color:#8a8577 !important; }
------------------------------------------------------------------------------------ */
/* ---------- 3. 장바구니 행 배지(.cv2-row 품명 옆 — 전 탭, 택배예약 포함) ---------- */
.tmk-rowtag{ align-self:flex-start; margin:2px 4px 0 0; pointer-events:none; }
.tmk-rowtag.tmk-f{ background:#eaf2fd !important; border-color:#b9d4f6 !important; color:#1a5fc0 !important; }
.tmk-rowtag.tmk-c{ background:#ecf6fd !important; border-color:#c2e2f8 !important; color:#2b7fc2 !important; }
.tmk-rowtag.tmk-n{ background:#eef2f6 !important; border-color:#cfd8e3 !important; color:#56677c !important; }
/* ---------- 4. 상세 온도 칩 강화(.chips .chip.cold 에 클래스만 추가 — 원문 글자 유지) ----------
상세는 본문 스케일이라 글자 14px 유지. 색·radius·원형 아이콘만 카드 배지와 같은 규격. */
.chip.tmk-chip{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700;
border-radius:999px !important; border:1px solid; }
.chip.tmk-chip .tmk-ic{ vertical-align:-2px; width:16px; height:16px; background-size:10px 10px; }
.chip.tmk-chip.tmk-f{ background:#eaf2fd; border-color:#b9d4f6; color:#1a5fc0; }
.chip.tmk-chip.tmk-c{ background:#ecf6fd; border-color:#c2e2f8; color:#2b7fc2; }
.chip.tmk-chip.tmk-n{ background:#eef2f6; border-color:#cfd8e3; color:#56677c; }
/* 상세 폴백 배지 슬롯 */
.tmk-detail{ margin:2px 0 10px; }
/* ---------- 5. plan-b 카드 온도 오버레이(.pb-temp) 표준 승격 (js runPbTemp) ----------
plan_b.css 의 .pb-temp(어두운 반투명 11px 원문)를 표준 배지로 덮는다(기하는 §0).
v1.0.7: 그림자 제거 — 정보 줄에 놓이는 칩이라 카드 배지와 완전히 같은 평면. */
.plan_b .content .pb-temp.tmk-pbtemp,
.pb-temp.tmk-pbtemp{ box-shadow:none !important; }
.plan_b .content .pb-temp.tmk-pbtemp.tmk-f,
.pb-temp.tmk-pbtemp.tmk-f{ background:#eaf2fd !important; border-color:#b9d4f6 !important; color:#1a5fc0 !important; }
.plan_b .content .pb-temp.tmk-pbtemp.tmk-c,
.pb-temp.tmk-pbtemp.tmk-c{ background:#ecf6fd !important; border-color:#c2e2f8 !important; color:#2b7fc2 !important; }
.plan_b .content .pb-temp.tmk-pbtemp.tmk-n,
.pb-temp.tmk-pbtemp.tmk-n{ background:#eef2f6 !important; border-color:#cfd8e3 !important; color:#56677c !important; }
/* ---------- 5.2 plan-b 온도 칩 정보 줄 배치 (2026-08-26 사용자 지시 · v1.0.7 상시화)
썸네일 오버레이 → 카드 정보 줄(.pb-metarow: 인증칩·규격, 가격 위)로 이동. 절대배치 해제.
v1.0.7: 승격된 .pb-temp 는 예외 없이 정보 줄로 내려가므로(runPbTemp 가 DB 미상도 원문 글자로 판정)
구 §5.1 의 "썸네일 좌상단" 좌표 규칙은 폐지했다. */
.plan_b .content .txt_box .pb-temp.tmk-pbtemp,
.plan_b .content .pb-temp.tmk-pbtemp,
.pb-temp.tmk-pbtemp{ position:static !important; left:auto !important; right:auto !important; top:auto !important;
bottom:auto !important; z-index:auto !important; margin:0 !important; vertical-align:middle; }
/* ---------- 6. 선물기획전(.pgz) 자체 온도 표시 통일 (v1.0.7) ----------
plan_gift_v2.js 가 카드 metarow 에 냉동
를 그린다(플레인 텍스트 + 18px 원형 아이콘 = 5번째 모양). 위치는 이미 정보 줄이라 옳고,
모양만 표준 배지로 덮는다 — plan_gift_v2.js/.css 무수정(전용 클래스라 무충돌).
.ti 안 svg 는 stroke="currentColor" 라 색만 흰색으로 주면 원형 아이콘이 된다. */
.pgz .temp{ pointer-events:none; }
.pgz .temp .ti{ display:inline-grid !important; place-items:center; border-radius:50% !important; color:#fff !important; }
.pgz .temp .ti svg{ width:9px !important; height:9px !important; display:block; }
.pgz .temp.t-frz{ background:#eaf2fd !important; border-color:#b9d4f6 !important; color:#1a5fc0 !important; }
.pgz .temp.t-frz .ti{ background:#1d6fe0 !important; }
.pgz .temp.t-cld{ background:#ecf6fd !important; border-color:#c2e2f8 !important; color:#2b7fc2 !important; }
.pgz .temp.t-cld .ti{ background:#4aa3e8 !important; }
.pgz .temp.t-rm{ background:#eef2f6 !important; border-color:#cfd8e3 !important; color:#56677c !important; }
.pgz .temp.t-rm .ti{ background:#7b8fa6 !important; }
/* 담기 시트(#pgzAddTemp)는 본문 스케일 — 카드와 같은 규격 유지(§0 이 함께 받는다) */
/* ---------- 7. [v1.1.1 · 2026-09-30] 상온 배지 미표시(사용자 지시) — 냉동·냉장만 ----------
temp_mark.js 가 상온(N)이면 배지를 만들지 않는다. 선물기획전(.pgz .temp.t-rm) 자체 표시와 혹시 남은 상온 배지를 숨긴다. */
/* [v1.2.1 · 2026-10-12] 위 숨김 규칙 삭제 — 카드는 9절이 온도 표시를 통째로 숨기고, 카드가 아닌 곳(상세 위쪽 칩 · 장바구니 행 배지 ·
선물 담기 시트)은 상온도 표시한다(사용자 지시 "카드에서만 삭제"). */
/* ---------- 8. [v1.1.1 · 2026-09-30] 모바일 메인 추천 칸(.cfm-rcz) — 온도 배지 항상 보이기 ----------
card_flat_m.css 가 좁은 카드라 칩을 앞 2개만 두고 3번째부터 숨긴다(:nth-child(n+3)). 온도 배지가 3번째면 가려져
냉동·냉장 상품에 배지가 안 보였다(운영 실측 5품목). → 온도 배지는 살리고, 그 경우 다른 칩을 1개만 남겨 2개 규칙은 지킨다.
[2026-10-01] 규칙은 card_flat_m.css v1.4.9 로 옮겼다(서버 칩·승격 칩 공통, 온도 칩 바로 앞 칩만 남김 — 인증칩을 접는다).
여기 있던 규칙은 규격칩(150g)을 접어 그쪽과 결과가 달라지므로 지웠다. */
/* ---------- 9. [v1.2.0 · 2026-10-12] 생활재 카드 온도 표시 전부 미표시(상무·팀장 결정) ----------
temp_mark.js v1.2.0 이 카드에는 배지를 만들지 않고 서버 칩을 지운다. 여기는 스크립트 전·실패 때의 안전망.
· 카드 칩 줄 안 배지, 이름 아래 덧붙인 줄(.tmk-line), 기획전 B형 온도(.pb-temp), 선물 기획전 카드 온도(.pgz-card .pinfo .temp)
· 대상 아님: 상세 위쪽 칩(.chip.cold/.tmk-detail) · 장바구니 행 배지(.tmk-rowtag) · 선물 담기 시트(#pgzAddTemp)
· 온도 칩만 있던 카드는 칩 줄이 비므로 빈 줄을 접는다(다른 칩이 붙으면 다시 보인다). */
html body .specrow > .tmk-pill,
html body .tmk-line,
html body .pb-temp,
html body .pgz .pgz-card .pinfo .temp{ display:none !important; }
html body .specrow:not(:has(> :not(.tpill):not(.tmk-pill))){ display:none !important; }