/* 진열몰: 공용 디자인 체계 ds.css(계약 19절, P217) 위에 이 서비스만의 가격표 줄(고른 판 A, docs/DESIGN.md)만 얹는다.
   바탕은 쇼핑형 톤(ds-b: 흰 바탕, ink #191f28, surface-2 #f2f4f6). 공개 ds.css 기본값은 회청이라 이 쪽에서 덮음(hub에 알림).
   대표색은 --ds-brand 하나(#b23a10, 흰 글자 대비 5.9:1). 대표색 채움은 1순위 동작(나란히 비교)과 선택된 필터 칩에만. */
:root{--ds-brand:#b23a10;--ds-on-accent:#fff;--ds-bg:#fff;--ds-ink:#191f28;--ds-surface-2:#f2f4f6}
.mhead{padding:var(--ds-sp-5) 0 var(--ds-sp-3);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-sp-3)}
.mhead .ds-lead{margin-top:var(--ds-sp-1)}.mhead h1{word-break:keep-all}
@media (max-width:767px){.mhead{padding:var(--ds-sp-4) 0 var(--ds-sp-2)}.mhead h1{font-size:var(--ds-fs-h2)}.mhead .ds-lead{font-size:var(--ds-fs-caption)}}
/* 분류는 밑줄 탭(선택 표기를 필터 칩과 나눔) */
.mcats{display:flex;gap:var(--ds-sp-5);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ds-line)}
.mcats::-webkit-scrollbar{display:none}
.mcats a{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ds-sub);font-weight:var(--ds-w-strong);font-size:var(--ds-fs-body);border-bottom:2px solid transparent;margin-bottom:-1px}
.mcats a[aria-current]{color:var(--ds-ink);border-bottom-color:var(--ds-ink)}
.mband{height:8px;background:var(--ds-surface-2);margin:0 0 var(--ds-sp-3)}
/* 넓은 화면은 왼쪽 필터 기둥 */
.mlayout{display:block}
@media (min-width:1100px){.mlayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--ds-sp-7);align-items:start}.mside{position:sticky;top:var(--ds-sp-4)}
  .mside .mfg{grid-template-columns:1fr}.mside .ds-chips{flex-wrap:wrap}.mside .mfg.more{display:grid}.mside .mmore{display:none}}
/* 필터 칩은 줄을 넘겨 감쌈: 옆으로 밀면 끝 칩의 개수가 잘려 '500L 이상 3'이 '500L 0'으로 읽힘(판정 직원 2026-11-07 20:40) */
.mfilters .ds-chips{flex-wrap:wrap;overflow:visible}
.mfilters{display:flex;flex-direction:column;gap:var(--ds-sp-3);padding:var(--ds-sp-2) 0}
.mfg{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:var(--ds-sp-2)}
.ds-chip.fchip[aria-pressed="true"]{background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-on-accent)}
.ds-chip:disabled{color:var(--ds-sub);border-color:var(--ds-line);cursor:default}
.mcount{font-weight:var(--ds-w-body);font-size:var(--ds-fs-label)}
.mmore{display:none}
@media (max-width:1099px){.mfg.more{display:none}.mfilters.open .mfg.more{display:grid}.mmore{display:inline-flex;align-self:flex-start}}
.mline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ds-sp-2);margin:var(--ds-sp-2) 0 var(--ds-sp-1)}
.mlegend{display:flex;flex-wrap:wrap;gap:var(--ds-sp-1) var(--ds-sp-4);margin:0}
.mlegend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}.mlegend .lp{background:#9aa1ab}.mlegend .le{background:var(--ds-ink)}
.msec{margin:var(--ds-sp-6) 0 var(--ds-sp-3)}.mband-sec:first-child .msec{margin-top:var(--ds-sp-3)}
.mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-sp-6) var(--ds-sp-3)}
@media (min-width:768px){.mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcard{display:flex;flex-direction:column;gap:var(--ds-sp-2);min-width:0}
.mimg{position:relative;display:block;background:var(--ds-surface-2);border-radius:var(--ds-r-thumb);padding:var(--ds-sp-2);isolation:isolate}
.mcard .ds-product__img{background:transparent;padding:0;border-radius:0;mix-blend-mode:multiply}
.mname{text-decoration:none;color:var(--ds-ink);min-height:calc(2em * var(--ds-lh-tight))}.mname:hover{text-decoration:underline}
.mrank{position:absolute;left:var(--ds-sp-2);top:var(--ds-sp-2);z-index:1;background:var(--ds-surface);color:var(--ds-ink);border:1px solid var(--ds-line);font-size:var(--ds-fs-label);font-weight:var(--ds-w-head);border-radius:var(--ds-r-1);padding:2px 6px}
.ptag{margin:auto 0 0;display:flex;flex-direction:column;gap:2px;font-size:var(--ds-fs-small)}
.ptag>div{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-sp-2)}
.ptag dt{color:var(--ds-sub);display:inline-flex;align-items:center;gap:var(--ds-sp-1);white-space:nowrap}.ptag dd{margin:0;white-space:nowrap}
.ptag>div:first-child dd{font-size:var(--ds-fs-lead);font-weight:var(--ds-w-head)}
.ptag .pe dd{font-weight:var(--ds-w-strong)}
.ptag .pt{border-top:1px solid var(--ds-line);padding-top:var(--ds-sp-1);margin-top:2px}.ptag .pt dt{color:var(--ds-ink);font-weight:var(--ds-w-strong)}.ptag .pt dd{font-size:var(--ds-fs-lead);font-weight:var(--ds-w-head)}
.mtip{width:24px;height:24px;border-radius:50%;border:1px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-sub);font:var(--ds-w-strong) var(--ds-fs-label)/1 var(--ds-font);cursor:pointer;padding:0}
.mtip[aria-expanded="true"]{border-color:var(--ds-ink);color:var(--ds-ink)}
.mtipbox{margin:0;padding:var(--ds-sp-2) var(--ds-sp-3);background:var(--ds-surface-2);border-radius:var(--ds-r-2)}
.mbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--ds-surface-2)}.mbar i{display:block}.mbar .p{background:#9aa1ab}.mbar .e{background:var(--ds-ink)}
.mact{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-sp-2)}
.cmp-box{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-fs-small);min-height:32px;cursor:pointer}.cmp-box input{width:18px;height:18px;accent-color:var(--ds-ink)}
/* 등급: 옅은 칠과 진한 글자(라벨 관례 색은 남기되 소리를 낮춤) */
.grade{display:inline-block;border-radius:var(--ds-r-1);padding:1px 6px;font-size:var(--ds-fs-label);font-weight:var(--ds-w-strong)}
.g1{background:#e3f2e6;color:#1d5c2b}.g2{background:#eef5e0;color:#3d5a14}.g3{background:#fdf4d6;color:#6b5203}.g4{background:#fdebd9;color:#7a3d06}.g5{background:#fbe3e3;color:#8c1d1d}
@media (max-width:767px){.mgrid{grid-template-columns:1fr;gap:0}
  .mcard{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:var(--ds-sp-3);row-gap:var(--ds-sp-1);padding:var(--ds-sp-4) 0;border-top:1px solid var(--ds-line)}
  .mcard>.mimg{grid-row:1/span 6;align-self:start;width:112px;height:112px;padding:6px}.mcard>*:not(.mimg){grid-column:2}.mcard .ds-product__img{width:100%;height:100%}.mname{min-height:0}}
.mlater{margin-top:var(--ds-sp-8);border-top:8px solid var(--ds-surface-2);padding-top:var(--ds-sp-4)}
.mlater summary{cursor:pointer;min-height:44px;display:list-item;list-style:disclosure-closed inside;padding-top:var(--ds-sp-2)}.mlater[open] summary{list-style-type:disclosure-open}
.mlater .ds-products--rows{margin-top:var(--ds-sp-3)}
.mhint{margin:0}
.tray{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--ds-surface);border-top:1px solid var(--ds-line);box-shadow:var(--ds-shadow-2);padding:var(--ds-sp-3) var(--ds-gutter);display:flex;gap:var(--ds-sp-3);align-items:center;justify-content:center;transform:translateY(110%);transition:transform .2s}
.tray.on{transform:none}
.tray .go:disabled{background:var(--ds-surface);border-color:var(--ds-line-strong);color:var(--ds-sub);cursor:default}
.cmp-dlg{border:0;border-radius:var(--ds-r-card);padding:0;width:96vw;max-width:min(960px,96vw);box-shadow:var(--ds-shadow-2);background:var(--ds-surface);color:var(--ds-ink)}
.cmp-dlg::backdrop{background:rgb(16 24 40/.45)}
.cmp-head{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-sp-4)}
.cmp-body{padding:0 var(--ds-sp-4) var(--ds-sp-4)}
.mcmp{table-layout:fixed}.mcmp th,.mcmp td{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;vertical-align:top}
.mcmp th:first-child{width:128px}.mcmp tbody th{white-space:nowrap}
.mcmp img{display:block;width:64px;height:64px;object-fit:contain;margin-left:auto}
.mcmp .pname{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:var(--ds-w-body);color:var(--ds-ink);font-size:var(--ds-fs-label);text-align:right;margin-top:var(--ds-sp-1)}
.mcmp .best{font-weight:var(--ds-w-head);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.mcmp th,.mcmp td{padding:var(--ds-sp-2) 6px;font-size:var(--ds-fs-small)}.mcmp img{width:48px;height:48px}.mcmp th:first-child{width:84px}.mcmp tbody th{white-space:normal}}
.mmeta{margin:var(--ds-sp-8) 0 var(--ds-sp-2)}
.mfoot{margin-top:var(--ds-sp-6);padding:var(--ds-sp-6) 0 120px;border-top:1px solid var(--ds-line);font-size:var(--ds-fs-small);color:var(--ds-sub)}
.mfoot a{margin-right:var(--ds-sp-3);display:inline-block;min-height:28px}
.mothers{margin-top:var(--ds-sp-4)}.mothers .ds-chips{flex-wrap:wrap;overflow:visible}.mothers a.ds-chip{text-decoration:none}
/* 의견 창(공용 kit.js가 다룸) */
.fb-dlg{border:0;border-radius:var(--ds-r-card);padding:var(--ds-sp-5);width:min(440px,92vw);box-shadow:var(--ds-shadow-2);background:var(--ds-surface);color:var(--ds-ink)}
.fb-dlg::backdrop{background:rgb(16 24 40/.45)}
.fb-form h2{margin:0 0 var(--ds-sp-3);font-size:var(--ds-fs-h4)}
.fb-form textarea,.fb-form input[type=email]{width:100%;margin:var(--ds-sp-2) 0;padding:var(--ds-sp-2) var(--ds-sp-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-2);font:inherit;background:var(--ds-surface);color:var(--ds-ink)}
.fb-kind{border:0;padding:0;margin:0;display:flex;gap:var(--ds-sp-2)}.fb-kind .chip{display:inline-flex;align-items:center;gap:var(--ds-sp-1);font-size:var(--ds-fs-small)}
.fb-actions{display:flex;gap:var(--ds-sp-2);align-items:center}.fb-actions button{min-height:var(--ds-h-btn);padding:0 var(--ds-sp-4);border-radius:var(--ds-r-2);border:1px solid var(--ds-line-strong);background:var(--ds-surface);font:var(--ds-w-strong) var(--ds-fs-body)/1 var(--ds-font);cursor:pointer}
.hp,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}