/* 화장품 성분 비교(진열몰). 기본은 /_ivel/ds.css 토큰과 부품, 여기는 진열 띠와 레인만(계약 19절) */
:root { --ds-brand: #4b5d45; --ds-on-accent: #fff; --lane-all: #4b5d45; }
.mh { padding: var(--ds-sp-5) 0 var(--ds-sp-3); }
.mh h1 { margin: 0 0 var(--ds-sp-1); }
.mh p { margin: 0; }
.band { margin: var(--ds-sp-4) calc(var(--ds-gutter) * -1) 0; padding: var(--ds-sp-5) var(--ds-gutter); background: var(--ds-surface); border-top: 8px solid var(--ds-surface-2); }
.band > h2 { margin: 0 0 var(--ds-sp-3); }

/* 피할 성분 고르기 */
.av-note { flex-basis: 100%; }
.av-tier { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2); }
.avoid { margin-top: var(--ds-sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2); }
.av-open { gap: 6px; }
.av-open::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.av-open[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.av-list { flex-basis: 100%; list-style: none; margin: var(--ds-sp-2) 0 0; padding: var(--ds-sp-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ds-sp-3) var(--ds-sp-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); }
.av-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* 진열 띠 */
.strip-wrap { margin-top: var(--ds-sp-4); }
.strip-h { display: flex; align-items: baseline; gap: var(--ds-sp-3); margin-bottom: var(--ds-sp-2); }
.strip-h h2 { margin: 0; }
.strip { list-style: none; margin: 0; padding: 2px 0 var(--ds-sp-2); display: flex; gap: var(--ds-sp-3); overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.strip > li { flex: 0 0 132px; scroll-snap-align: start; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ds-ink); cursor: pointer; }
.tile:disabled { cursor: not-allowed; opacity: 0.55; }
.tile-img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--ds-sp-2); border-radius: var(--ds-r-thumb); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-line); margin-bottom: 4px; }
.tile.on .tile-img { box-shadow: inset 0 0 0 3px var(--c); }
.tile.on .tile-b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--c); }
.noimg { display: grid; place-items: center; padding: var(--ds-sp-3); }
.noimg { align-content: center; gap: 6px; }
.noimg svg { width: 34%; max-width: 44px; fill: none; stroke: var(--ds-line-strong); stroke-width: 1.6; }
.noimg span { font-size: var(--ds-fs-label); font-weight: var(--ds-w-strong); color: var(--ds-sub); text-align: center; word-break: keep-all; }
.tile-b { font-size: var(--ds-fs-label); color: var(--ds-sub); }
.tile-n { font-size: var(--ds-fs-small); line-height: var(--ds-lh-tight); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-p { font-size: var(--ds-fs-small); font-weight: var(--ds-w-head); font-variant-numeric: tabular-nums; }

/* 범례 */
.key { display: flex; flex-wrap: wrap; gap: var(--ds-sp-2) var(--ds-sp-4); margin: 0 0 var(--ds-sp-3); color: var(--ds-sub); }
.k { display: inline-flex; align-items: center; gap: 6px; }
.k i { width: 22px; height: 10px; border-radius: 2px; }
.k.all i { background: var(--lane-all); }
.k.some i, .k.one i { background: repeating-linear-gradient(90deg, #c2410c 0 7px, #1d4ed8 7px 14px, #047857 14px 22px); opacity: 0.55; }

/* 레인 */
.gel-wrap { overflow-x: auto; }
.gel { display: grid; grid-template-columns: minmax(96px, 200px) repeat(var(--n), minmax(52px, 160px)); gap: 2px 4px; }
.lh { display: flex; flex-direction: column; gap: 1px; padding: 0 2px var(--ds-sp-2); border-bottom: 3px solid var(--c, transparent); font-size: var(--ds-fs-label); line-height: 1.3; min-width: 0; }
.lh b { font-weight: var(--ds-w-head); }
.lh span { color: var(--ds-sub); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rk { min-width: 0; font-size: var(--ds-fs-label); line-height: 18px; color: var(--ds-sub); }
.rk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk.all { color: var(--ds-ink); font-weight: var(--ds-w-head); }
.band-c { height: 18px; border-radius: 2px; }
.band-c.has { background: color-mix(in srgb, var(--c) 45%, white); }
.band-c.has.all { background: var(--lane-all); }
.buys { margin-top: var(--ds-sp-5); padding-top: var(--ds-sp-4); border-top: 1px solid var(--ds-line); }
.buys .ds-disclosure { margin-bottom: var(--ds-sp-3); }
.buys .ds-product__img { box-shadow: inset 0 0 0 2px var(--c); }

.foot { padding: var(--ds-sp-6) 0; }
.foot p { margin: 0 0 var(--ds-sp-1); }
.foot a { color: inherit; }

/* 제품별 전성분 쪽 모아 보기(글자 링크) */
.plist { margin-top: var(--ds-sp-6); border-top: 1px solid var(--ds-line); padding-top: var(--ds-sp-3); }
.plist summary { cursor: pointer; color: var(--ds-sub); }
.plist h2 { margin: var(--ds-sp-4) 0 var(--ds-sp-2); }
.plist ul { margin: 0; padding: 0; list-style: none; columns: 2 240px; column-gap: var(--ds-sp-5); }
.plist li { break-inside: avoid; padding: 3px 0; }
.plist a { color: inherit; }