/* Page-body corrections; intentionally does not restyle the shared header. */
[data-category-layout] .hero .country-badge img{width:20px!important;height:20px!important;object-fit:cover;border-radius:50%;vertical-align:middle}
[data-category-layout] #chips .chip .lb{line-height:1.2}
[data-category-layout] .cat-result{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-category-layout] .catsec-h .gc,[data-category-layout] .grp-h .gc{display:inline-flex;align-items:baseline;gap:2px}
[data-category-layout] .dmedia a.mico:focus-visible{outline:2px solid #d39b2a;outline-offset:3px}
[data-category-layout] .dmedia .mico-e{display:inline-block;font-size:14px;line-height:1;min-width:16px;text-align:center}
[data-category-layout] #fcartBtn .fcart-ct{border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:0}
[data-category-layout] #fcartBtn .ak-cart-label{background:#ffeaa3;color:#0a2a5e;border-radius:0 12px 12px 0;padding:2px 6px 2px 1px;margin-inline-start:-7px;font-size:12px;font-weight:800;line-height:1.3}

/* ── 분류색 위 흰 글씨 대비 4.5:1 — PC·모바일 공통 (2026-10-21, impeccable QA P1-2) ──────────
   분류색(--cc, 각 페이지 칩의 style 속성)은 흰 글씨를 얹기엔 밝다(#0E9F6E 3.4:1 · #B7791F 3.6:1).
   색상(hue)은 그대로 두고 같은 색을 검정과 섞어 어둡게만 한다 — 2026-10-01 T06 이 ≤1024 에만 넣었던
   color-mix 보정을 미디어쿼리 밖으로 꺼내 PC 에도 건다(최저: 버튼 82% 4.82:1 · 머리 80% 5.01:1, 둘 다 #0E9F6E).
   ⚠️ 머리 안 개수 배지(.gc)는 머리 위에 흰색 22% 를 덧칠해 #0E9F6E 3.4:1 이었다 → 검정 15% 덧칠(최저 6.45:1).
   칩 개수(.ct)는 글자색 = 분류색 70%+검정(옅은 바탕 위 최저 5.51:1), PC 9.5px → 11px(모바일 12px 은 아래 그대로).
   버튼 hover 의 brightness(1.13) 는 어둡게 한 바탕을 다시 밝혀 4.5 아래로 떨어뜨려 → brightness(.9).
   색 계산표·근거: docs/common/category-list-views.md 「분류색 위 글씨 대비」. */
html body[data-category-layout] .wrap .drow .dgo{background:var(--cc,#1E5BBA);background:color-mix(in srgb,var(--cc,#1E5BBA) 82%,#000)}
html body[data-category-layout] .wrap .drow .dgo:hover{filter:brightness(.9)}
html body[data-category-layout] .wrap .catsec-h{background:var(--cc,#1E5BBA);background:color-mix(in srgb,var(--cc,#1E5BBA) 80%,#000)}
html body[data-category-layout] .wrap .catsec-h .gc{background:rgba(0,0,0,.15)}
/* 병기판(루트) 한국어 줄: PC 기본 #7da3d6 · 모바일 흰색 90% 는 #0E9F6E 바탕에서 4.4:1 이하 → 흰색 그대로(머리·버튼 글씨와 같은 대비). */
html body[data-category-layout] .wrap .catsec-h .cat-copy-sub,
html body[data-category-layout] .wrap .catsec-h .i18n-sub,
html body[data-category-layout] .wrap .dgo .cat-copy-sub,
html body[data-category-layout] .wrap .dgo .i18n-sub{color:#fff;opacity:1}
html body[data-category-layout] .wrap .chip .ct{font-size:11px}
html body[data-category-layout] .wrap .chip:not(.on) .ct{color:var(--cc,#1E5BBA);color:color-mix(in srgb,var(--cc,#1E5BBA) 70%,#000)}
/* 고른 칩의 개수: 흰 글씨 + 흰색 18% 덧칠은 #0E9F6E·#B7791F 그라디언트 위 3.4~3.6:1 → 검정 18% 덧칠(최저 6.37:1). */
html body[data-category-layout] .wrap .chip.on .ct{background:rgba(0,0,0,.18)}

/* ── 휴대폰·태블릿 가독성 (T06, 2026-10-01) ──────────────────────────────
   데스크톱(>1024px)은 손대지 않는다 — 아래 규칙은 전부 미디어쿼리 안에 둔다.
   선택자 앞의 `html body[data-category-layout] .wrap` 은 페이지 인라인 <style>·data-responsive·
   category-view.css((0,3,0)) 보다 확실히 이기기 위한 것이다. */
@media (max-width:1024px){
  /* 서류 줄: 이름·설명 | 가격 / 미디어 아이콘 | 버튼 — 아이콘·가격·버튼이 한 줄에 다 서면
     이름 칸이 0px 로 눌려 글자가 한 자씩 세로로 쌓였다(390px 에서 문서 높이 82,501px). */
  html body[data-category-layout] .wrap .dlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;align-items:stretch}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main price" "media go";gap:6px 8px;align-items:center;padding:12px 14px}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .rank){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rank main price" "media media go"}
  /* 미디어 아이콘이 없는 줄(category/all)은 가격·버튼을 오른쪽에 세로로 — 빈 둘째 줄을 없앤다. */
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):not(:has(> .rank)):not(:has(> .dmedia,> .category-entry-media)){grid-template-areas:"main price" "main go"}
  html body[data-category-layout] .wrap .drow > .rank{grid-area:rank;align-self:start}
  html body[data-category-layout] .wrap .drow > .dmain{grid-area:main;align-self:start;min-width:0;min-height:44px;width:auto}
  html body[data-category-layout] .wrap .drow > .dp{grid-area:price;align-self:start;min-width:0;padding-top:2px;font-size:15px;text-align:end}
  html body[data-category-layout] .wrap .drow > .dmedia,
  html body[data-category-layout] .wrap .drow > .category-entry-media{grid-area:media;justify-content:flex-start;flex-wrap:wrap;gap:0;min-width:0;margin-inline-start:-12px}
  html body[data-category-layout] .wrap .drow > .dgo{grid-area:go;justify-self:end;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;font-size:14px;line-height:1.3}
  html body[data-category-layout] .wrap .drow .dn{font-size:15.5px;line-height:1.45}
  html body[data-category-layout] .wrap .drow .dt{font-size:13px;line-height:1.5;color:#5b6478}
  /* 미디어 아이콘(19px)을 손가락 크기(44×44) 터치 영역 가운데에 둔다 — 겉모습은 그대로. */
  html body[data-category-layout] .wrap .drow .mico{justify-content:center;min-width:44px;min-height:44px}
  html body[data-category-layout] .wrap .catsec{margin-top:16px}
  html body[data-category-layout] .wrap .catsec-h{padding:12px 14px;line-height:1.4}

  /* 카드형 목록(개인·가족 등): 가격의 from/부터 를 한 줄로, 버튼은 44px. */
  html body[data-category-layout] .wrap .card .cn{font-size:16px;line-height:1.45}
  html body[data-category-layout] .wrap .card .ct{font-size:13.5px;line-height:1.55}
  html body[data-category-layout] .wrap .card .cp{font-size:16px}
  html body[data-category-layout] .wrap .card .cp small .cat-copy-main,
  html body[data-category-layout] .wrap .card .cp small .cat-copy-sub{display:inline;margin-inline-start:4px}
  html body[data-category-layout] .wrap .card .copt{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;font-size:13px;line-height:1.3}

  /* 한글 병기·보조 글자: #7da3d6(흰 바탕 대비 2.6:1)·9~11px 를 4.5:1 이상·12px 이상으로. */
  html body[data-category-layout] .wrap .cat-copy-sub,
  html body[data-category-layout] .wrap .i18n-sub,
  html body[data-category-layout] .wrap .dn-ko{color:#4a6a9a;font-size:max(12px,.8em)}
  html body[data-category-layout] .wrap .hero .cat-copy-sub,
  html body[data-category-layout] .wrap .hero .i18n-sub{color:#dbe6f7}
  html body[data-category-layout] .wrap .hero p .ak-cko{font-size:max(12px,.82em);line-height:1.5}
  html body[data-category-layout] .wrap .hero .country-badge .ak-cko{font-size:12px}
  /* 머리(.catsec-h)·버튼(.dgo) 안 한국어 줄은 위 공통 블록(흰색 100%)이 맡는다. */
  html body[data-category-layout] .wrap .sc-btn.on .cat-copy-sub,
  html body[data-category-layout] .wrap .sc-btn.on .i18n-sub,
  html body[data-category-layout] .wrap .chip.on .cat-copy-sub,
  html body[data-category-layout] .wrap .chip.on .i18n-sub{color:#fff;opacity:.9}
  html body[data-category-layout] .wrap .copt .cat-copy-sub,
  html body[data-category-layout] .wrap .copt .i18n-sub{color:inherit}
  html body[data-category-layout] .wrap .chip .lb{font-size:13px;line-height:1.3}
  html body[data-category-layout] .wrap .chip .ct{font-size:12px}
  html body[data-category-layout] .wrap .chip .cat-copy-sub{font-size:12px}
  html body[data-category-layout] .wrap .card .cp small{font-size:12px}
  html body[data-category-layout] .wrap .card .cnew{font-size:12px;color:#7a4f0f}
  html body[data-category-layout] .wrap .grp-h .gc{color:#4f5870}

  /* 국내/해외 토글: 두 칸을 같은 폭으로, 44px 이상. */
  html body[data-category-layout] .wrap .scope-tg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:560px}
  html body[data-category-layout] .wrap .sc-btn{min-height:48px;justify-content:center;padding:8px 12px;line-height:1.3;font-size:14px}

  /* 검색칸: 입력 자체를 44px 로(칸 테두리 안 18px 만 눌리던 것), 16px 로 iOS 확대 방지. */
  html body[data-category-layout] .wrap .search{padding-block:2px}
  html body[data-category-layout] .wrap .search input{min-height:44px;font-size:16px}
}
@media (max-width:640px){
  html body[data-category-layout] .wrap .dlist{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]){padding:10px 12px}
  /* T43(2026-10-06): 390 에서 all-corp 이 12,858px — 줄 높이·여백만 줄인다(탭 대상 44px·글자 크기·항목 구성은 그대로). */
  html body[data-category-layout] .wrap .dlist{gap:6px}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]){padding:7px 12px;row-gap:0}
  html body[data-category-layout] .wrap .drow .dn{line-height:1.35}
  html body[data-category-layout] .wrap .drow .dt{line-height:1.4}
  html body[data-category-layout] .wrap .catsec{margin-top:12px}
  html body[data-category-layout] .wrap .catsec-h{padding-block:10px}

  html body[data-category-layout] .wrap .hero{padding:24px 18px}
  html body[data-category-layout] .wrap .hero p{font-size:15px;line-height:1.55}
}
/* 좁은 휴대폰(320~360px, 2026-10-02): 한글을 어절 단위로만 접고, 서류 줄은 아이콘 줄을 전체 폭으로 내린다. */
@media (max-width:1024px){
  html body[data-category-layout] .wrap{word-break:keep-all;overflow-wrap:break-word}
  html body[data-category-layout] .wrap .gc{white-space:nowrap}
}
@media (max-width:374px){
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .dmedia,> .category-entry-media){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "media media" "price go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .rank):has(> .dmedia,> .category-entry-media){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rank main main" "media media media" "price price go"}
  html body[data-category-layout] .wrap .drow:has(> .dmedia,> .category-entry-media) > .dp{align-self:center;text-align:start;padding-top:0}
  html body[data-category-layout] .wrap .catsec-h{flex-wrap:wrap;row-gap:4px}
}

/* 데스크톱(≥1025px) 분류 타일·간격 (2026-10-02, T16 — 사용자 지적 all-corp?ind=cosmetics).
   ① 히어로 밑에 칩·토글이 간격 0 으로 붙어 있었다 → 18px.
   ② auto-fill 이 13개를 10+3 으로 접어 둘째 줄 오른쪽이 비었다 → 국내(기본) 칩 수 N 으로 열 수를 정한다:
      11~20개는 두 줄 ceil(N/2), 21~30개는 세 줄 ceil(N/3). 10개 이하는 한 줄이라 기존 auto-fill 그대로.
      ⚠️ 「보이는 칩」을 nth-child(N of :not([hidden])) 로 세면 Chromium 이 국내/해외 전환 뒤 다시 계산하지 않는다
      (:has + of S 무효화 누락, Edge 154 에서 확인). 그래서 칩의 고정 속성(해외 칩 = data-scope=world·data-c=world)으로
      국내 칩만 세고, 해외 탭이 켜져 있으면(칩 2~3개, 한 줄) 규칙을 끈다 — 탭의 .on 클래스 변화는 정상 무효화된다. */
@media (min-width:1025px){
  html body[data-category-layout] .wrap .hero:has(+ .scope-tg){margin-bottom:18px}
  /* 히어로와 칩 사이에 숨긴 배너(.bd-banner, display:none)가 끼어 있는 페이지(all-corp)도 있어 칩 쪽에 여백을 준다. */
  html body[data-category-layout] .wrap .hero ~ .chips2:not(.scope-tg + .chips2){margin-top:18px}
  html body[data-category-layout] .wrap .chips2{margin-bottom:18px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(11 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(6,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(12 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(6,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(13 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(7,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(14 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(7,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(15 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(8,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(16 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(8,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(17 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(9,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(18 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(9,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(19 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(10,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(20 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(10,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(21 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(7,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(22 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(8,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(23 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(8,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(24 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(8,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(25 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(9,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(26 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(9,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(27 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(9,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(28 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(10,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(29 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(10,minmax(0,1fr))}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(30 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))){grid-template-columns:repeat(10,minmax(0,1fr))}
}

/* 휴대폰·태블릿(≤1024px) 분류 타일 — 가로 스크롤(오른쪽 칩이 반쯤 잘려 보임)을 폐기하고 같은 폭 칸으로 줄바꿈한다 (2026-10-02, 사용자 지적).
   열 수: ≤480px 3열 · 481~767px 4열 · 768~1024px 6열. 칸이 1개만 남는 수(N-1 이 열 수로 나눠지는 경우, 예 13개)면
   「전체」 칩을 한 줄 전체 폭 막대로 올려 나머지를 꽉 찬 줄로 맞춘다. 칩 수는 데스크톱(T16)과 같이 국내 칩만 센다. */
@media (max-width:1024px){
  html body[data-category-layout] .wrap .chips2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow:visible;margin-inline:0;padding:0}
  html body[data-category-layout] .wrap .chips2 > .chip{min-height:64px;height:auto;padding:9px 4px 8px;gap:4px;justify-content:center}
  html body[data-category-layout] .wrap .chips2 > .chip .ic{width:28px;height:28px;font-size:14px}
  html body[data-category-layout] .wrap .chips2 > .chip .lb{font-size:12.5px;line-height:1.3;letter-spacing:-.3px;word-break:keep-all;overflow-wrap:anywhere}
  html body[data-category-layout] .wrap .chips2 > .chip .lb .cat-copy-sub,html body[data-category-layout] .wrap .chips2 > .chip .lb .i18n-sub{font-size:12px}
  html body[data-category-layout] .wrap .chips2 > .chip .ct{top:5px;right:6px}
}
@media (max-width:767px){
  html body[data-category-layout] .wrap .chips2{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:480px){
  html body[data-category-layout] .wrap .chips2{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media (min-width:768px) and (max-width:1024px){
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(7 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(13 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(19 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(25 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
}
@media (min-width:481px) and (max-width:767px){
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(5 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(9 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(13 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(17 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(21 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(25 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(29 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
}
@media (max-width:480px){
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(4 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(7 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(10 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(13 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(16 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(19 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(22 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(25 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
  html body[data-category-layout] .wrap .chips2:not(.scope-tg:has(.sc-btn.on[data-s=world]) ~ .chips2):has(> :nth-child(28 of .chip:not([data-scope=world]):not([data-c=world])):nth-last-child(1 of .chip:not([data-scope=world]):not([data-c=world]))) > .chip[data-c=all]{grid-column:1 / -1;flex-direction:row;min-height:48px;gap:8px}
}
@media (max-width:1024px){
  /* 히어로 바로 밑 토글·칩이 간격 0 으로 붙던 것(데스크톱 T16 과 같은 처리). */
  html body[data-category-layout] .wrap .hero:has(+ .scope-tg){margin-bottom:14px}
  html body[data-category-layout] .wrap .hero ~ .chips2:not(.scope-tg + .chips2){margin-top:14px}
  html body[data-category-layout] .wrap .chips2{margin-bottom:14px}
}

/* 견적·편성 줄의 빈 공간 (2026-10-02, T33 — 모바일 QA). 데스크톱(>1024px)은 손대지 않는다.
   ① category/all 의 콘텐츠가 없는 줄(contentMask=0)은 빈 .dmedia 가 둘째 줄을 잡아 왼쪽이 비었다 → 아이콘 없는 줄과 같은 배치.
   ② 편성(API, category-catalog.js) 줄은 버튼형 이름(.category-entry-button) + 숨긴 아이콘 칸 + 긴 「견적 후 안내」 가격 칸 +
      긴 「상품 선택」 버튼이라, 오른쪽 auto 열이 넓어져 이름이 한두 글자씩 접히고(390px 줄 높이 252px) 둘째 줄 왼쪽이 비었다
      → 이름은 한 줄 전체, 가격 안내·버튼은 그 아래 한 줄(아이콘이 있으면 아이콘 | 버튼). */
@media (max-width:1024px){
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):not(:has(> .rank)):has(> .dmedia:empty){grid-template-areas:"main price" "main go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):not(:has(> .rank)):has(> .category-entry-button){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "media go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):not(:has(> .rank)):has(> .category-entry-button):has(> .dp){grid-template-areas:"main main" "price price" "media go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):not(:has(> .rank)):has(> .category-entry-button):has(> .category-entry-media[hidden]){grid-template-areas:"main main" ". go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):not(:has(> .rank)):has(> .category-entry-button):has(> .category-entry-media[hidden]):has(> .dp){grid-template-areas:"main main" "price go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .rank):has(> .category-entry-button){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rank main main" "media media go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .rank):has(> .category-entry-button):has(> .dp){grid-template-areas:"rank main main" "price price price" "media media go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .rank):has(> .category-entry-button):has(> .category-entry-media[hidden]){grid-template-areas:"rank main main" ". . go"}
  html body[data-category-layout] .wrap .drow:not(.hide):not([hidden]):has(> .rank):has(> .category-entry-button):has(> .category-entry-media[hidden]):has(> .dp){grid-template-areas:"rank main main" "price price go"}
  html body[data-category-layout] .wrap .drow:has(> .category-entry-button) > .dp{align-self:center;min-width:0;padding-top:0;text-align:start;white-space:normal;overflow-wrap:anywhere;word-break:keep-all;font-size:14px;line-height:1.4}
  html body[data-category-layout] .wrap .drow:has(> .category-entry-button) > .category-entry-button{min-height:0}
}