/* 이번 주 할인 — /australia/community/deals/ (2026-09-21, 첫 판)
   글 고정 주소 페이지와 같은 결: 흰 바탕·잉크 글자·얇은 선. 굵기는 600~700, 제목은 과하게 키우지 않는다(2026-09-15 밀도 교훈). */

.t2w-page-deals {
  /* 색은 docs/DESIGN.md 토큰에서. 가게 표시 두 색만 두 가게의 상징색 그대로(알아보기 위한 것). */
  --dl-ink: var(--t2w-ink, #152A47);
  --dl-text: var(--t2w-ink-2, #4B5563);
  --dl-muted: var(--t2w-ink-3, #6B7280);
  --dl-line: var(--t2w-line, #E5E7EB);
  --dl-soft: var(--color-bg-light, #F9FAFB);
  --dl-accent: var(--color-primary-text, #b45309);
  --dl-accent-bg: var(--color-tag-gold-bg, #FFF3D6);
  --dl-red: var(--color-tag-rust-text, #A33617);
  --dl-red-bg: var(--color-tag-rust-bg, #FCDDD2);
  --dl-green: var(--color-tag-sage-text, #5F5A2A);
  --dl-green-bg: var(--color-tag-sage-bg, #EFEAD8);
  --dl-warn: var(--color-tag-amber-text, #92400E);
  --dl-warn-bg: var(--color-tag-amber-bg, #FDEBC8);
  --dl-coles: #e01a22;
  --dl-wool: #178841;
  background: var(--color-white, #fff);
  color: var(--dl-text);
}
.t2w-page-deals .dl { max-width: var(--t2w-wrap-max, 1200px); margin: 0 auto; padding: 12px var(--t2w-wrap-pad, 16px) 56px; box-sizing: border-box; }
.dl *, .dl *::before, .dl *::after { box-sizing: border-box; }

/* 머리 */
.dl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--dl-muted); }
.dl-crumbs a { color: inherit; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.dl-crumbs a:hover { text-decoration: underline; }
.dl-title { margin: 4px 0 6px; font-size: clamp(24px, 3.4vw, 30px); line-height: 1.3; font-weight: 700; color: var(--dl-ink); letter-spacing: -0.01em; }
.dl-sub { margin: 0 0 16px; font-size: 15px; color: var(--dl-muted); line-height: 1.5; }
.dl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dl-line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.dl-tabs::-webkit-scrollbar { display: none; }
.dl-tab { flex: 0 0 auto; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; color: var(--dl-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dl-tab.is-on { color: var(--dl-ink); border-bottom-color: var(--dl-ink); }
.dl-tab:hover { color: var(--dl-ink); }

/* 거르기 */
.dl-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 10px; }
.dl-seg { display: inline-flex; border: 1px solid var(--dl-line); border-radius: var(--t2w-r-sm,8px); overflow: hidden; }
.dl-seg__btn { padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--dl-text); text-decoration: none; background: var(--color-white, #fff); }
.dl-seg__btn + .dl-seg__btn { border-left: 1px solid var(--dl-line); }
.dl-seg__btn span { font-weight: 600; color: var(--dl-muted); font-size: 13px; }
.dl-seg__btn.is-on { background: var(--dl-ink); color: var(--color-white, #fff); }
.dl-seg__btn.is-on span { color: rgba(255, 255, 255, .75); }
.dl-search { display: flex; flex: 1 1 320px; gap: 6px; min-width: 0; }
.dl-search input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--dl-line); border-radius: var(--t2w-r-sm,8px); font-size: 16px; }
.dl-search select { height: 40px; padding: 0 8px; border: 1px solid var(--dl-line); border-radius: var(--t2w-r-sm,8px); font-size: 15px; background: var(--color-white, #fff); max-width: 40%; }
.dl-search button, .dl-btn { height: 40px; padding: 0 16px; border: 0; border-radius: var(--t2w-r-sm,8px); background: var(--dl-ink); color: var(--color-white, #fff); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.dl-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; scrollbar-width: thin; }
.dl-chip { flex: 0 0 auto; padding: 0 12px; min-height: 36px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--dl-line); border-radius: var(--t2w-r-pill,999px); font-size: 15px; color: var(--dl-text); text-decoration: none; background: var(--color-white, #fff); white-space: nowrap; }
.dl-chip span { font-size: 13px; color: var(--dl-muted); }
.dl-chip.is-on { border-color: var(--dl-ink); background: var(--dl-ink); color: var(--color-white, #fff); }
.dl-chip.is-on span { color: rgba(255, 255, 255, .75); }
.dl-hint { margin: 0 0 12px; font-size: 15px; color: var(--dl-muted); }
.dl-link { background: none; border: 0; padding: 0; color: var(--dl-accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dl-link:disabled { color: var(--dl-muted); cursor: default; }

/* 카드 격자 */
.dl-results { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 12px; color: var(--dl-muted); font-size: 15px; }
.dl-results p { margin: 0; }
.dl-results strong { color: var(--dl-ink); font-size: 18px; }
.dl-results a { min-height: 40px; display: inline-flex; align-items: center; color: var(--dl-ink); font-weight: 600; text-underline-offset: 3px; }
/* 2026-10-22 마스터 「각 내용의 줄 위치가 맞아야 한다」: 단위값·판정·지난 기록이 있는 카드와 없는 카드가 섞여
   같은 줄의 카드끼리 줄 높이가 달랐다. 카드를 바깥 격자의 여섯 줄(사진·이름·값·단위값·판정·지난 기록)에 걸쳐
   같은 줄을 나눠 쓰게 한다 — 없는 줄은 빈칸으로 남아 옆 카드와 높이가 맞는다. 줄 사이는 카드 아래 여백으로. */
.dl-grid { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.dl-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; border: 1px solid var(--dl-line); border-radius: var(--t2w-r,12px); overflow: hidden; background: var(--color-white, #fff); min-width: 0; }
/* 2026-09-24: 상품 사진칸만 흰 바탕 — 제품컷이 흰 배경이라 크림(어제 통일한 --color-bg-light) 위에서는
   사진 안 흰 사각형이 드러난다. 크림은 카드 밖·표 머리에만 남긴다. */
.dl-card__media { position: relative; height: 148px; background: var(--color-white, #fff); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--dl-line); }
.dl-card__photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--dl-accent-bg); color: var(--dl-muted); font-size: 13px; }
.dl-card__media:has(> img:not([hidden])) .dl-card__photo-fallback { display: none; }
.dl-card__media img[hidden] { display: none; }
.dl-card__media img { position: relative; z-index: 1; width: 88%; height: 90%; object-fit: contain; background: #fff; }
.dl-card__shop { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 2px 8px; border-radius: var(--t2w-r-sm,8px); font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .94); border: 1px solid var(--dl-line); }
.dl-card__shop--coles { color: var(--dl-coles); }
.dl-card__shop--woolworths { color: var(--dl-wool); }
.dl-heart { position: absolute; z-index: 2; right: 6px; top: 6px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.dl-heart svg { width: 20px; height: 20px; fill: none; stroke: var(--dl-ink); stroke-width: 1.8; }
.dl-heart.is-on svg { fill: var(--dl-red); stroke: var(--dl-red); }
.dl-heart:focus-visible { outline: 2px solid var(--dl-ink); outline-offset: 2px; }
/* 테마의 목록 줄 여백(마지막 줄만 빠짐)이 카드 아래 여백을 덮어 마지막 카드만 4px 짧았다 — 목록 안 카드로 한 단계 좁혀 이긴다. */
.dl-grid > .dl-card { margin: 0 0 12px; }
.dl-card__body { grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 12px; min-width: 0; }
.dl-card__name { grid-row: 1; }
.dl-card__price { grid-row: 2; }
.dl-card__unit { grid-row: 3; }
.dl-card__verdict { grid-row: 4; align-self: start; }
.dl-card__hist { grid-row: 5; }
/* 줄 사이는 틈(gap) 대신 각 줄의 위 여백으로 — 없는 줄은 틈까지 0으로 접힌다. */
/* 2026-09-30 마스터 「배치가 애매하다」: 할인 표시를 사진 위로 — 가게 배지와 한자리에. */
.dl-card__tag { position: absolute; z-index: 2; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--t2w-r-sm,8px);
  font-size: 13px; font-weight: 700; color: #fff; background: var(--dl-red); }
/* 2026-09-30: 값을 견주는 화면인데 이름 길이 때문에 값이 카드마다 다른 높이에 있었다(어긋남 22px).
   이름을 두 줄로 고정해 값·단위값이 한 줄에 나란히 서게 한다. 전체 이름은 눌러서 본다. */
.dl-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em; margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--dl-ink); overflow-wrap: anywhere; }
.dl-card__name a { color: inherit; text-decoration: none; }
.dl-card__name a:hover { text-decoration: underline; }
.dl-card__price { margin: 12px 0 0; font-size: var(--t2w-fs-meta, 13px); color: var(--dl-muted); }
.dl-card__price strong { font-size: var(--t2w-fs-title, 22px); color: var(--dl-ink); font-weight: 800; margin-right: 4px; }
.dl-card__unit { margin: 4px 0 0; color: var(--dl-muted); font-size: 13px; line-height: 1.4; }

.dl-card__verdict { margin: 10px 0 0; padding: 5px 8px; border-radius: var(--t2w-r-sm,8px); font-size: 13px; line-height: 1.45; }
.dl-card__verdict--inflated, .dl-card__verdict--fake { background: var(--dl-warn-bg); color: var(--dl-warn); }
.dl-card__hist { margin: 6px 0 0; font-size: 13px; color: var(--dl-muted); }

.dl-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 8px 0 20px; font-size: 15px; }
.dl-pager a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--dl-ink); font-weight: 600; text-decoration: none; border: 1px solid var(--dl-line); border-radius: var(--t2w-r-sm,8px); }
.dl-empty { padding: 28px 0; font-size: 16px; color: var(--dl-muted); }
.dl-note { font-size: 15px; color: var(--dl-muted); line-height: 1.6; margin: 8px 0 0; }
.dl-reading { margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--dl-line); }
.dl-h2 { margin: 28px 0 10px; font-size: 20px; font-weight: 700; color: var(--dl-ink); }
.dl-h2 span { font-size: 15px; color: var(--dl-muted); font-weight: 600; margin-left: 4px; }
.dl-lead { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }

/* 장바구니 */
.dl-basket__totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dl-total { border: 1px solid var(--dl-line); border-radius: var(--t2w-r,12px); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.dl-total span { font-size: 15px; color: var(--dl-muted); }
.dl-total strong { font-size: 28px; color: var(--dl-ink); font-weight: 700; }
.dl-total em { font-style: normal; font-size: 13px; color: var(--dl-warn); }
.dl-total--split { background: var(--dl-accent-bg); border-color: var(--dl-accent-bg); }
.dl-table-wrap { overflow-x: auto; border: 1px solid var(--dl-line); border-radius: var(--t2w-r,12px); }
.dl-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 440px; }
.dl-table caption { caption-side: top; text-align: left; padding: 10px 12px 0; font-size: 15px; color: var(--dl-muted); }
.dl-table th, .dl-table td { padding: 10px 12px; border-bottom: 1px solid var(--dl-line); text-align: left; vertical-align: top; }
.dl-table thead th { font-size: 15px; color: var(--dl-muted); font-weight: 600; background: var(--dl-soft); }
.dl-table tbody tr:last-child th, .dl-table tbody tr:last-child td { border-bottom: 0; }
.dl-table tbody th { font-weight: 600; color: var(--dl-ink); white-space: nowrap; }
.dl-table th small { display: block; font-weight: 600; color: var(--dl-muted); font-size: 13px; }
.dl-table td strong { color: var(--dl-ink); font-size: 16px; }
.dl-table td small { display: block; font-size: 13px; color: var(--dl-muted); line-height: 1.4; margin-top: 2px; max-width: 240px; overflow-wrap: anywhere; }
.dl-table td.is-best { background: var(--dl-green-bg); }
.dl-table td.is-best strong { color: var(--dl-green); }
.dl-table--trend td { white-space: nowrap; }
.dl-mini { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--t2w-r-sm,8px); background: var(--dl-red-bg); color: var(--dl-red); font-size: 13px; font-weight: 700; vertical-align: 2px; }
.dl-muted { color: var(--dl-muted); font-size: 15px; }

/* 내 찜 */
.dl-login { border: 1px solid var(--dl-line); border-radius: var(--t2w-r,12px); padding: 20px; background: var(--dl-soft); }
.dl-login p { margin: 0 0 12px; line-height: 1.6; }
.dl-add__row { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-add__row input, .dl-add__row select { height: 40px; padding: 0 12px; border: 1px solid var(--dl-line); border-radius: var(--t2w-r-sm,8px); font-size: 16px; background: var(--color-white, #fff); min-width: 0; }
.dl-add__row input[name="keyword"] { flex: 2 1 180px; }
.dl-add__row select { flex: 1 1 130px; }
.dl-add__row input[name="max_price"] { flex: 1 1 140px; }
.dl-msg { margin: 6px 0 0; font-size: 15px; color: var(--dl-red); min-height: 1em; }
.dl-freq { border: 1px solid var(--dl-line); border-radius: var(--t2w-r,12px); padding: 10px 14px 12px; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dl-freq legend { padding: 0 4px; font-size: 15px; color: var(--dl-muted); font-weight: 600; }
.dl-freq label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 15px; cursor: pointer; }
.dl-watch { list-style: none; margin: 0; padding: 0; border: 1px solid var(--dl-line); border-radius: var(--t2w-r,12px); }
.dl-watch li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dl-line); min-width: 0; }
.dl-watch li:last-child { border-bottom: 0; }
.dl-watch__kind { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--dl-accent); background: var(--dl-accent-bg); border-radius: var(--t2w-r-sm,8px); padding: 2px 8px; }
.dl-watch__label { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--dl-ink); overflow-wrap: anywhere; }
.dl-watch__label small { display: block; font-size: 13px; color: var(--dl-muted); }
.dl-watch .dl-link { flex: 0 0 auto; min-height: 36px; }

.dl-more { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--dl-line); }
.dl-more a { color: var(--dl-ink); font-weight: 600; text-decoration: none; }
.dl-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--t2w-r-sm,8px); background: var(--dl-ink); color: var(--color-white, #fff); font-size: 15px; z-index: 9999; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }

@media (max-width: 600px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .dl-grid > .dl-card { margin-bottom: 8px; }
  .dl-card__body { padding: 8px 10px 10px; }
  .dl-card__media { height: 118px; }
  .dl-card__price strong { font-size: 20px; }
  /* 2026-09-30 마스터 「배치가 애매하다」 — 폰에서 고른 것 세 가지.
     ① 찾는 칸이 정렬·단추에 밀려 「신라면, 김ㅊ」 로 잘렸다 → 찾는 칸을 맨 위·가장 넓게.
     ② 누르는 것이 40·36px 이라 손가락 기준(44px)에 못 미쳤다 → 44px.
     ③ 가게 줄·분류 줄이 둘 다 「전체 3,563」 으로 시작했다 → 분류 쪽 숫자는 뺀다(뒤 PHP). */
  .dl-filter { gap: 8px; margin: 14px 0 8px; }
  .dl-search { flex-basis: 100%; order: -1; }
  .dl-search input { flex: 1 1 58%; height: 44px; }
  .dl-search select { flex: 0 0 auto; min-width: 104px; max-width: 40%; height: 44px; padding: 0 6px; font-size: 14px; }
  .dl-search button { height: 44px; padding: 0 12px; }
  .dl-seg { width: 100%; }
  .dl-seg__btn { flex: 1 1 0; justify-content: center; padding: 0 8px; min-height: 44px; }
  .dl-chip { min-height: 44px; }
}

/* 태블릿도 손가락으로 만진다 — 누르는 것의 최소 크기만 1024px 까지 넓힌다 (2026-09-30). */
@media (max-width: 1024px) {
  .dl-seg__btn, .dl-search input, .dl-search select, .dl-search button, .dl-chip { min-height: 44px; height: auto; }
}

/* 한 지붕 머리 (2026-09-23) — 생활 메뉴 줄 + 장보기 한 줄이 위, 「이번 주 할인」 제목은 그 아래 묶음 제목 */

.dl-head .dl-title { margin: 0 0 12px; font-size: clamp(22px, 3vw, 26px); font-weight: 800; }