@charset "UTF-8";
/* ==========================================================================
   JETCO /beta · 솔루션 (목록 · 상세)   prefix: sl-
   v2 팔레트: 쿨 화이트 페이퍼 / 인디고 네이비 / 브랜드 인디고 / 테이프 옐로우(어두운 영역 전용)
   - 강조색은 var(--signal) (밝은 곳 = 인디고, data-theme="dark" 안 = 옐로우)
   - 큰 글로우·그라디언트 블롭 없이 평면 채움 + 1~1.5px 선 + 그리드 질감
   ========================================================================== */

@property --sl-mark {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(16, 18, 46, .34);
}

/* ---------- 0. 공용: 스테이지 (제품 촬영대) ---------- */
.sl-stage {
    position: relative; isolation: isolate; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: 14px;
    background-color: var(--paper);
    background-image:
        linear-gradient(rgba(16, 18, 46, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 18, 46, .05) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center center;
}
/* 호버 확대는 래퍼에서 (안쪽 img 는 data-reveal="img" 의 줌아웃 전용) — 곱하기 합성도 래퍼에 둔다 */
.sl-stage__zoom { position: absolute; inset: 0; display: block; mix-blend-mode: multiply; transition: transform 1.2s var(--ease); }
.sl-stage.is-empty .sl-stage__zoom { mix-blend-mode: normal; }
.sl-stage__zoom > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 11% 12%; }
.sl-stage .c-ph { background: transparent; }
.sl-card:hover .sl-stage__zoom { transform: scale(1.06); }

/* 이미지 없음: JETCO 심볼을 옅게 */
.sl-ph {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.sl-ph img { width: 20%; min-width: 48px; max-width: 84px; height: auto; opacity: .14; filter: grayscale(1); transition: opacity .6s var(--ease); }
.sl-card:hover .sl-ph img { opacity: .26; }
.sl-ph small { font-size: 13.5px; color: var(--muted); }
.sl-ph--lg img, .sl-gallery__slide .sl-ph--lg img { width: 18%; min-width: 64px; max-width: 150px; height: auto; opacity: .12; }

/* 크롭 마크 (호버 시 안쪽으로 조여지며 강조색) */
.sl-stage__marks {
    --sl-mark: rgba(16, 18, 46, .34);
    position: absolute; inset: 14px; z-index: 2; pointer-events: none;
    background:
        linear-gradient(var(--sl-mark), var(--sl-mark)) 0 0 / 16px 1.5px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 0 0 / 1.5px 16px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 100% 0 / 16px 1.5px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 100% 0 / 1.5px 16px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 0 100% / 16px 1.5px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 0 100% / 1.5px 16px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 100% 100% / 16px 1.5px,
        linear-gradient(var(--sl-mark), var(--sl-mark)) 100% 100% / 1.5px 16px;
    background-repeat: no-repeat;
    transition: inset .8s var(--ease), --sl-mark .5s var(--ease);
}
.sl-card:hover .sl-stage__marks { inset: 9px; --sl-mark: var(--signal); }

/* 섹션 뒤 키네틱 아웃라인 글자 (data-scrub-x) */
.sl-kinetic { position: absolute; left: 0; right: 0; top: clamp(26px, 4vw, 64px); z-index: 0; overflow: hidden; pointer-events: none; white-space: nowrap; }
.sl-kinetic span {
    display: inline-block; padding-left: 6vw;
    font-size: clamp(88px, 14vw, 236px); font-weight: 800; line-height: 1.02; letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(46, 48, 146, .12);
}
.sl-catalog > .c-container, .sl-overview > .c-container, .sl-features > .c-container { position: relative; z-index: 1; }

/* ---------- 1. 목록: 제조사 띠 ---------- */
.sl-vendors {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
    background: var(--white); border-bottom: 1px solid var(--line);
}
.sl-vendors__label {
    position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 0 clamp(22px, 2.6vw, 40px) 0 max(var(--gutter), calc((100vw - var(--max)) / 2));
    border-right: 1px solid var(--line);
}
.sl-vendors__label .c-mono { font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.sl-vendors__label b { font-size: 34px; font-weight: 720; line-height: 1; letter-spacing: -0.04em; color: var(--signal); font-variant-numeric: tabular-nums; }
.sl-vendors__marquee { padding: clamp(18px, 2.2vw, 30px) 0; }
.sl-vendor {
    display: inline-flex; align-items: center; gap: clamp(22px, 2.6vw, 44px); padding-right: clamp(22px, 2.6vw, 44px);
    font-size: clamp(18.2px, 2.17vw, 33.6px); font-weight: 720; line-height: 1.15; letter-spacing: -0.045em; white-space: nowrap;
    color: var(--ink);
}
.sl-vendor__name { transition: color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease); }
.sl-vendor:nth-child(even) .sl-vendor__name { color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
.sl-vendor:hover .sl-vendor__name, .sl-vendor.is-on .sl-vendor__name { color: var(--signal); -webkit-text-stroke-color: var(--signal); }
.sl-vendor__mark { width: 12px; height: 12px; flex: none; fill: var(--signal); transition: transform .6s var(--ease); }
.sl-vendor:hover .sl-vendor__mark { transform: rotate(90deg); }

/* ---------- 2. 목록: 인트로 · 현황 ---------- */
.sl-catalog { position: relative; }
.sl-intro {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end; gap: 24px 72px;
    margin-bottom: clamp(40px, 5vw, 72px);
}
.sl-intro__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sl-intro__desc { justify-self: end; max-width: 500px; font-size: 17px; line-height: 1.75; color: var(--ink-3); }

.sl-log {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
    margin: 0 0 clamp(48px, 5.5vw, 84px);
}
.sl-log__cell { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 22px; border-top: 1px solid var(--line-2); }
.sl-log__cell::before {
    content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--signal);
    transform: scaleX(.3); transform-origin: 0 50%;
}
html.js .sl-log__cell::before { transform: scaleX(0); transition: transform 1.4s var(--ease) calc(var(--d, 0ms) + 220ms); }
html.js .sl-log__cell.is-in::before { transform: scaleX(.3); }
.sl-log__cell:hover::before { transform: scaleX(1) !important; transition-delay: 0ms !important; }
.sl-log dt { order: 2; font-size: 14.5px; color: var(--muted); }
.sl-log dd {
    order: 1; display: flex; align-items: flex-end; min-height: clamp(40px, 4.6vw, 70px);
    font-size: clamp(40px, 4.6vw, 70px); font-weight: 720; line-height: 1; letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.sl-log dd.sl-log__date { font-family: var(--font-mono); font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }

/* ---------- 3. 목록: 필터 · 검색 ---------- */
.sl-tools {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start; gap: 24px 56px;
    margin-bottom: clamp(28px, 3.4vw, 48px);
}
.sl-filters { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sl-filters__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; }
.sl-filters__label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--ink-3); line-height: 42px; }
.sl-filters__label::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--signal); }
.sl-filters__row--maker .sl-filters__label { line-height: 36px; }
.sl-filters__row--maker .c-chip { height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 520; }
.sl-tools__side { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; }
.sl-tools__side .c-count { text-align: right; }
.sl-search { width: 100%; min-width: 0; }
.sl-search input { padding-right: 86px; }
.sl-search input::-webkit-search-cancel-button, .sl-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sl-search .sl-search__clear { right: 42px; width: 34px; height: 34px; color: var(--muted); }
.sl-search .sl-search__clear:hover { color: var(--ink); }
.sl-search .sl-search__clear svg { width: 16px; height: 16px; }
.sl-search .sl-search__clear[hidden] { display: none !important; }

/* 그리드 */
.sl-results { position: relative; }
.sl-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: clamp(16px, 1.8vw, 26px);
}
.sl-cell { display: flex; min-width: 0; }
.sl-cell > .sl-card { flex: 1 1 auto; min-width: 0; }
.sl-cell--wide { grid-column: 1 / -1; }
.sl-cell.is-qhide { display: none !important; }
.sl-empty { margin-top: 8px; }
.sl-empty .c-btn { margin-top: 10px; }
.sl-empty__icon { width: 48px; height: 48px; margin-bottom: 4px; fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. 제품 카드 ---------- */
.sl-card { padding: 14px; border-radius: var(--r-lg); }
.sl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 2px 6px 12px; }
.sl-card__cat {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
    font-size: 13px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-card__cat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--signal); transition: transform .6s var(--ease); }
.sl-card:hover .sl-card__cat::before { transform: rotate(45deg) scale(1.15); }
.sl-card__flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; flex: none; }
.sl-card__flags .c-badge, .sl-panel__flags .c-badge { font-family: var(--font-sans); letter-spacing: -0.01em; text-transform: none; font-weight: 650; }
.sl-card__flags .c-badge { height: 24px; padding: 0 10px; font-size: 12px; }
.sl-panel__flags .c-badge { font-size: 12.5px; height: 28px; padding: 0 12px; }
.sl-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; padding: 20px 8px 4px; }
.sl-card__vendor {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.sl-card__title {
    font-size: clamp(20px, 1.55vw, 23px); font-weight: 700; line-height: 1.32; letter-spacing: -0.03em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sl-card__sub {
    font-size: 15px; line-height: 1.65; color: var(--ink-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sl-card__tags { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sl-card__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 16px;
    border-top: 1px solid var(--line);
}
.sl-card__body > :nth-last-child(2) { margin-bottom: 12px; }
.sl-card__more {
    font-size: 13.5px; font-weight: 600; color: var(--ink-3);
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px;
    transition: background-size .6s var(--ease), color .3s;
}
.sl-card:hover .sl-card__more { color: var(--ink); background-size: 100% 1px; }
.sl-card .c-arrow { width: 44px; height: 44px; }
.sl-card:focus-visible { outline-offset: 4px; }

/* 공식 공급 (와이드 · 어두운 블록 · data-theme="dark") */
.sl-card--wide {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr;
    column-gap: 12px;
    background: var(--night); color: #fff; box-shadow: inset 0 0 0 1px var(--night);
}
.sl-card--wide .sl-card__head { grid-column: 1 / -1; }
.sl-card--wide .sl-card__cat { color: #fff; }
.sl-card--wide .c-badge--line { color: var(--fog); box-shadow: inset 0 0 0 1px var(--night-line-2); }
.sl-card--wide .sl-stage { aspect-ratio: auto; height: 100%; min-height: 320px; }
.sl-card--wide .sl-card__body { padding: 18px 22px 8px clamp(22px, 3vw, 44px); gap: 14px; }
.sl-card--wide .sl-card__vendor { color: var(--fog-2); }
.sl-card--wide .sl-card__title { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.16; letter-spacing: -0.045em; -webkit-line-clamp: 2; }
.sl-card__spec { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); font-size: 14.5px; color: #fff; }
.sl-card__spec span { display: inline-flex; align-items: baseline; gap: 8px; }
.sl-card__spec b { font-size: 12px; font-weight: 600; color: var(--signal); }
.sl-card--wide .sl-card__sub { color: var(--fog); -webkit-line-clamp: 3; font-size: 15.5px; }
.sl-card--wide .c-tag { color: var(--fog-2); }
.sl-card--wide .sl-card__foot { border-top-color: var(--night-line-2); }
.sl-card--wide .sl-card__more { color: var(--fog); }
.sl-card--wide:hover .sl-card__more { color: #fff; }
.sl-card--wide .c-arrow { color: #fff; box-shadow: inset 0 0 0 1px var(--night-line-2); }
/* 이미지 없는 와이드 카드: 어두운 라이트박스 */
.sl-card--wide .sl-stage.is-empty {
    background-color: var(--night-2);
    background-image:
        linear-gradient(rgba(236, 238, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 238, 255, .05) 1px, transparent 1px);
    box-shadow: inset 0 0 0 1px var(--night-line);
}
.sl-card--wide .sl-stage.is-empty .sl-stage__marks { --sl-mark: rgba(236, 238, 255, .3); }
.sl-card--wide:hover .sl-stage.is-empty .sl-stage__marks { --sl-mark: var(--signal); }
.sl-card--wide .sl-ph img { filter: none; opacity: .3; max-width: 96px; }
.sl-card--wide:hover .sl-ph img { opacity: .5; }
/* 연속된 와이드 카드는 이미지 좌우를 번갈아 */
.sl-cell--flip .sl-card--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.sl-cell--flip .sl-card--wide .sl-stage { grid-column: 2; grid-row: 2; }
.sl-cell--flip .sl-card--wide .sl-card__body { grid-column: 1; grid-row: 2; padding: 18px clamp(22px, 3vw, 44px) 8px 8px; }

/* ---------- 5. 도입 절차 (브랜드 인디고) ---------- */
.sl-process { background: var(--brand); overflow: hidden; isolation: isolate; }
.sl-process__grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(236, 238, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 238, 255, .09) 1px, transparent 1px);
    background-size: 80px 80px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 70% 85% at 88% 10%, #000 6%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 85% at 88% 10%, #000 6%, transparent 72%);
}
.sl-process .c-hl { color: rgba(236, 238, 255, .56); }
.sl-process .c-sechead__desc { color: rgba(236, 238, 255, .8); }
.sl-process .c-rule { color: rgba(236, 238, 255, .62); }
.sl-process .c-rule::after { background: rgba(236, 238, 255, .24); }
/* 데스크톱 고정 연출: 섹션이 한 화면에 맞도록 */
.sl-process.is-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 20px) 0 40px; }
.sl-process.is-pin .c-sechead { margin-bottom: clamp(36px, 6vh, 64px); }
.sl-process.is-pin .sl-process__foot { margin-top: clamp(36px, 6vh, 72px); }

.sl-flow { --node: 72px; --gap: clamp(16px, 2.2vw, 36px); position: relative; margin-top: clamp(8px, 2vw, 24px); }
.sl-flow__track {
    position: absolute; left: calc(var(--node) / 2); top: calc(var(--node) / 2);
    width: 80%; height: 1px; background: rgba(236, 238, 255, .2); pointer-events: none;
}
.sl-flow__fill {
    position: absolute; left: 0; right: 0; top: -.5px; height: 2px; background: var(--tape);
    transform: scaleX(var(--flow, 0)); transform-origin: 0 50%;
}
.sl-flow__head {
    position: absolute; left: calc(var(--flow, 0) * 100%); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
    background: var(--tape); transform: rotate(45deg); border-radius: 2px;
    opacity: var(--flow-head, 0); transition: opacity .3s;
}
html:not(.js) .sl-flow__track { display: none; }
.sl-flow.is-vertical .sl-flow__track { width: 1px; }
.sl-flow.is-vertical .sl-flow__fill { left: -.5px; right: auto; top: 0; width: 2px; height: 100%; transform: scaleY(var(--flow, 0)); transform-origin: 50% 0; }
.sl-flow.is-vertical .sl-flow__head { left: 50%; top: calc(var(--flow, 0) * 100%); }

.sl-flow__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.sl-step { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.sl-step__node {
    position: relative; display: block; flex: none;
    width: var(--node); height: var(--node); margin-bottom: 16px; border-radius: 18px;
    background: var(--brand); box-shadow: inset 0 0 0 1px rgba(236, 238, 255, .3);
    transition: background .6s var(--ease), box-shadow .6s var(--ease), transform .7s var(--ease-back);
}
.sl-step__icon {
    position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sl-step__icon--ghost { stroke: rgba(236, 238, 255, .4); transition: opacity .4s var(--ease); }
.sl-step__icon--live { stroke: var(--fog); }
html.js .sl-step__icon--live :is(path, rect, circle) { transition: stroke-dashoffset 1.1s var(--ease); transition-delay: calc(var(--di, 0) * 80ms + 140ms); }
html.js .sl-flow.is-live .sl-step:not(.is-lit) .sl-step__icon--live :is(path, rect, circle) { stroke-dashoffset: var(--len, 1200); transition-duration: .3s; transition-delay: 0ms; }
.sl-step.is-lit .sl-step__node, html:not(.js) .sl-step__node {
    background: var(--tape);
    box-shadow: inset 0 0 0 1px var(--tape), 0 0 0 6px rgba(255, 210, 31, .14);
    transform: translateY(-3px);
}
.sl-step.is-lit .sl-step__icon--live, html:not(.js) .sl-step__icon--live { stroke: var(--ink); }
.sl-step.is-lit .sl-step__icon--ghost, html:not(.js) .sl-step__icon--ghost { opacity: 0; }
.sl-step__no { font-size: 11.5px; letter-spacing: .14em; color: rgba(236, 238, 255, .62); transition: color .5s; }
.sl-step.is-lit .sl-step__no { color: var(--tape); }
.sl-step__title { font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.035em; color: #fff; transition: opacity .6s var(--ease); }
.sl-step__desc { max-width: 260px; font-size: 15px; line-height: 1.75; color: rgba(236, 238, 255, .82); transition: opacity .6s var(--ease); }
.sl-flow.is-live .sl-step:not(.is-lit) .sl-step__title, .sl-flow.is-live .sl-step:not(.is-lit) .sl-step__desc { opacity: .42; }

.sl-process__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
    margin-top: clamp(64px, 8vw, 112px); padding-top: 28px; border-top: 1px solid rgba(236, 238, 255, .18);
}
.sl-process__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; font-size: 14.5px; line-height: 1.7; color: rgba(236, 238, 255, .8); }
.sl-process__note dt { margin-right: 18px; font-size: 13px; font-weight: 700; color: var(--tape); }
.sl-process__note dd { white-space: nowrap; }
.sl-process__note dd + dd::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 14px; border-radius: 50%; background: rgba(236, 238, 255, .5); vertical-align: middle; }
.sl-process__note a, .sl-process__note b { font-weight: 600; color: #fff; }
.sl-process__note a { font-variant-numeric: tabular-nums; transition: color .3s; }
.sl-process__note a:hover { color: var(--tape); }

/* ---------- 6. 상세: 상단 (갤러리 + 정보 패널) ---------- */
.c-page-solution-read .c-subhero__desc { max-width: 720px; }
.sl-top { padding-top: clamp(40px, 5vw, 72px); }
.sl-top__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.sl-top__media, .sl-panel { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; min-width: 0; transition: top .6s var(--ease); }
body.is-header-hidden .sl-top__media, body.is-header-hidden .sl-panel { top: 28px; }

.sl-gallery { display: flex; flex-direction: column; gap: 14px; }
.sl-gallery__stage {
    position: relative; isolation: isolate; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: var(--r-lg);
    background-color: var(--white);
    background-image:
        linear-gradient(rgba(16, 18, 46, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 18, 46, .045) 1px, transparent 1px);
    background-size: 28px 28px; background-position: center center;
    box-shadow: inset 0 0 0 1px var(--line);
}
.sl-gallery__slide {
    position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
    display: flex; align-items: center; justify-content: center; padding: 9% 10% 11%;
    transform: scale(1.025);
    transition: opacity .7s var(--ease), transform 1.1s var(--ease), visibility 0s linear .7s;
}
.sl-gallery__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform 1.1s var(--ease), visibility 0s; }
/* 첫 등장: 아이리스가 열리는 동안 사진은 크게 → 제자리로 */
html.js .sl-top__media[data-reveal] .sl-gallery__slide.is-active { transition: opacity .7s var(--ease), transform 1.8s var(--ease), visibility 0s; }
html.js .sl-top__media[data-reveal]:not(.is-in) .sl-gallery__slide.is-active { transform: scale(1.2); }
/* 작은 원본(예: 200px 제품 박스 컷)이 스테이지 가득 확대되어 흐려지지 않도록 — solution.js 가 원본 크기 × 1.6 을 --cap-w/--cap-h 로 지정 */
.sl-gallery__slide img {
    width: min(100%, var(--cap-w, 100%)); height: min(100%, var(--cap-h, 100%));
    object-fit: contain;
    transform-origin: var(--lx, 50%) var(--ly, 50%);
    transition: transform .6s var(--ease);
}
.sl-gallery__stage .sl-stage__marks { inset: 18px; }
.sl-gallery__count {
    position: absolute; z-index: 4; right: 36px; top: 30px; pointer-events: none;
    font-size: 12px; letter-spacing: .1em; color: var(--ink-2);
}
.sl-gallery__hint {
    position: absolute; z-index: 4; left: 36px; bottom: 28px; pointer-events: none;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.sl-gallery__hint svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-gallery__nav { position: absolute; z-index: 5; right: 22px; bottom: 20px; display: flex; gap: 8px; }
.sl-gallery__btn {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px var(--line-2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .35s, color .35s, box-shadow .35s;
}
.sl-gallery__btn:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.sl-gallery__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
    .sl-gallery__stage[data-lens] { cursor: zoom-in; }
    .sl-gallery__stage.is-lens .sl-gallery__slide.is-active img { transform: scale(1.85); }
    .sl-gallery__stage.is-lens .sl-gallery__hint { opacity: 0; transform: translateY(6px); }
    .sl-gallery__stage.is-lens .sl-stage__marks { --sl-mark: var(--signal); inset: 12px; }
}
.sl-gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sl-gallery__thumbs::-webkit-scrollbar { display: none; }
.sl-gallery__thumb {
    position: relative; flex: none; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px;
    background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .4s var(--ease), transform .5s var(--ease);
}
.sl-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10%; opacity: .55; transition: opacity .4s; }
.sl-gallery__thumb span { position: absolute; left: 7px; bottom: 5px; font-size: 10px; color: var(--muted); }
.sl-gallery__thumb:hover img { opacity: .9; }
.sl-gallery__thumb:hover { transform: translateY(-2px); }
.sl-gallery__thumb.is-active { box-shadow: inset 0 0 0 2px var(--signal); }
.sl-gallery__thumb.is-active img { opacity: 1; }
.sl-gallery__thumb.is-active span { color: var(--signal); }

/* 정보 패널 */
.sl-panel__inner { display: flex; flex-direction: column; gap: 26px; }
.sl-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1.5px solid var(--ink); }
.sl-panel__label { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2); }
.sl-panel__label::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--signal); }
.sl-panel__flags { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-panel__vendor { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sl-panel__logo {
    position: relative; flex: none; display: grid; place-items: center; width: 92px; height: 56px; overflow: hidden;
    border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
.sl-panel__logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px 12px; }
.sl-panel__mono { font-size: 26px; font-weight: 750; letter-spacing: -0.04em; color: var(--signal); }
.sl-panel__vname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-panel__vname > span { font-size: 12.5px; color: var(--muted); }
.sl-panel__vname strong { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; overflow: hidden; text-overflow: ellipsis; }

.sl-spec { display: grid; border-top: 1px solid var(--line-2); }
.sl-spec > div { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 15px 2px; }
.sl-spec > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
html.js .sl-spec > div[data-reveal]::after { transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--d, 0ms) + 140ms); }
html.js .sl-spec > div[data-reveal].is-in::after { transform: none; }
.sl-spec dt { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); padding-top: 1px; }
.sl-spec dd { font-size: 15.5px; font-weight: 560; color: var(--ink); }
.sl-spec__link { background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.sl-spec__link:hover { background-size: 100% 1.5px; color: var(--signal); }
.sl-spec__link svg { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -1px; fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.sl-spec__link:hover svg { transform: translate(2px, -2px); }
.sl-spec:empty { display: none; }
.sl-panel__tags { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sl-panel__cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.sl-panel__cta .c-btn { width: 100%; }
.sl-panel__note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--muted); }
.sl-panel__note svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--signal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-panel__note > span { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.sl-panel__note a { font-family: var(--font-mono); font-weight: 600; color: var(--ink); transition: color .3s; }
.sl-panel__note a:hover { color: var(--signal); }
.sl-panel__note em { color: var(--muted); }

/* 패널 목차 (페이지 구성) */
.sl-toc { margin-top: 6px; }
.sl-toc__label { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-size: 13px; font-weight: 650; color: var(--muted); }
.sl-toc__label::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.sl-toc__list a {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 2px; border-bottom: 1px solid var(--line);
    font-size: 15px; font-weight: 560; color: var(--ink-2);
    transition: color .3s, padding .5s var(--ease);
}
.sl-toc__no { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); transition: color .3s; }
.sl-toc__text { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.sl-toc__text small { font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.sl-toc__list svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform .5s var(--ease), color .3s; }
.sl-toc__list a:hover { color: var(--ink); padding-left: 8px; }
.sl-toc__list a:hover .sl-toc__no, .sl-toc__list a:hover svg { color: var(--signal); }
.sl-toc__list a:hover svg { transform: translateY(3px); }
.c-page-solution-read section[id] { scroll-margin-top: 0; }

/* ---------- 7. 상세: 개요 ---------- */
.sl-overview { position: relative; }
/* 상세: 본문과 겹치지 않도록 섹션 아래 여백에 둔다 */
.sl-kinetic--read { top: auto; bottom: clamp(4px, .8vw, 14px); }
.sl-kinetic--read span { font-size: clamp(60px, 8.4vw, 136px); }
.sl-overview__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.sl-overview__head { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: 20px; }
.sl-overview__body { min-width: 0; max-width: 820px; }
.sl-quote { position: relative; margin: 0 0 clamp(36px, 4vw, 56px); padding: 4px 0 4px clamp(24px, 2.6vw, 40px); border-left: 2px solid var(--signal); }
.sl-quote__mark { width: 34px; height: 27px; margin-bottom: 16px; fill: var(--signal); }
.sl-quote p { font-size: clamp(22px, 2.1vw, 32px); font-weight: 650; line-height: 1.5; letter-spacing: -0.03em; color: var(--ink); }
/* 에디터 본문: 관리자 입력 인라인 서체/색을 디자인 톤으로 정리 */
.sl-prose [style] { font-family: inherit !important; color: inherit !important; background-color: transparent !important; }
.sl-prose p [style], .sl-prose li [style], .sl-prose p[style], .sl-prose span[style], .sl-prose font { font-size: inherit !important; }
.sl-prose strong[style], .sl-prose b[style] { color: var(--ink) !important; }
.sl-prose > :first-child { margin-top: 0; }
.sl-prose > :last-child { margin-bottom: 0; }
.sl-prose--lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.8; letter-spacing: -0.02em; color: var(--ink); }
.sl-prose--lead p { text-wrap: pretty; }

/* ---------- 8. 상세: 주요 기능 ---------- */
.sl-features { position: relative; }
.sl-features__count { font-size: 14px; color: var(--muted); }
.sl-features__count span { font-size: 15px; font-weight: 600; color: var(--signal); }
.sl-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.sl-feat { display: flex; min-width: 0; }
.sl-feat__inner {
    --mx: 50%; --my: 50%;
    position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    padding: 14px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
    transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.sl-feat__inner::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--signal-rgb), .07), transparent 45%);
    opacity: 0; transition: opacity .5s var(--ease);
}
.sl-feat__inner:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px transparent, var(--shadow-1); }
.sl-feat__inner:hover::after { opacity: 1; }
.sl-feat__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--paper-2); }
.sl-feat__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.sl-feat__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 10px 12px; }
.sl-feat__no { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; color: var(--signal); }
.sl-feat__no::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; transform-origin: 0 50%; transition: transform .6s var(--ease); }
.sl-feat__inner:hover .sl-feat__no::after { transform: scaleX(1.8); }
.sl-feat__title { font-size: clamp(18px, 1.4vw, 21px); font-weight: 680; line-height: 1.4; letter-spacing: -0.025em; }
.sl-feat__desc { font-size: 15px; line-height: 1.75; color: var(--ink-3); }
.sl-feat--text .sl-feat__inner { padding: 18px; background: var(--white); }
.sl-feat--text .sl-feat__body { padding: 8px 8px 12px; gap: 14px; }
.sl-feat--text .sl-feat__no { font-size: 13px; }
/* 개수에 맞춘 그리드: 1개 → 가로형 한 장, 2·4개 → 2열 (3열 그리드에 빈 칸이 남지 않도록) */
.sl-feat-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-feat-grid--two .sl-feat__body { padding: 24px 14px 14px; }
.sl-feat-grid--one { grid-template-columns: 1fr; }
.sl-feat-grid--one .sl-feat__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 0 clamp(24px, 3vw, 48px); }
.sl-feat-grid--one .sl-feat--text .sl-feat__inner { grid-template-columns: 1fr; }
.sl-feat-grid--one .sl-feat__body { padding: 20px clamp(8px, 2vw, 28px) 20px 0; }
.sl-feat-grid--one .sl-feat__title { font-size: clamp(22px, 2vw, 28px); }

/* ---------- 9. 상세: 라이선스 · 자료 ---------- */
.sl-docs + .sl-more { padding-top: 0; }
.sl-docs__figure:last-child { margin-bottom: 0; }
.sl-docs__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.sl-docs__head { display: flex; flex-direction: column; gap: 20px; }
.sl-docs__note { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.sl-docs__note svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--signal); stroke-width: 1.8; stroke-linecap: round; }
.sl-docs__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sl-docs__figure { width: min(70%, 560px); margin: 0 auto 24px; }
.sl-docs__figure a { display: block; overflow: hidden; border-radius: 0; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.sl-docs__figure img { width: 100%; height: auto; }
.sl-docs__figure figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.sl-attach { margin-top: 0; }
.sl-attach a { gap: 16px; }
.sl-attach__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.sl-attach__meta { flex: none; font-size: 12px; color: var(--muted); }

/* ---------- 10. 상세: 영상 ---------- */
.sl-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); }
.sl-video__frame + .sl-video__frame { margin-top: 24px; }
.sl-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 11. 상세: 제조사 · 관련 제품 ---------- */
.sl-maker {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 120px); align-items: center;
    margin-bottom: clamp(56px, 7vw, 104px); padding: clamp(28px, 3.4vw, 48px);
    border-radius: var(--r-xl); background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
.sl-maker__id { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: center; }
.sl-maker__logo {
    grid-row: 1 / 3; display: grid; place-items: center; width: 116px; height: 72px; overflow: hidden;
    border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.sl-maker__logo img { width: 100%; height: 100%; object-fit: contain; padding: 12px 14px; }
.sl-maker__label { align-self: end; font-size: 13px; font-weight: 600; color: var(--muted); }
.sl-maker__name { align-self: start; font-size: clamp(22px, 2vw, 28px); font-weight: 720; letter-spacing: -0.035em; line-height: 1.25; }
.sl-maker__desc { font-size: 16.5px; line-height: 1.85; color: var(--ink-3); }

.sl-more__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.sl-more__head--nf { margin-top: clamp(56px, 7vw, 96px); }
.sl-grid--related { grid-auto-flow: row; }
.sl-postnav { margin-top: clamp(64px, 8vw, 112px); }
.sl-postnav small { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.sl-postnav a:hover small { color: var(--signal); }
.sl-ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.sl-postnav a:hover .sl-ico { transform: translateX(-3px); }
.sl-postnav a.c-postnav__next:hover .sl-ico { transform: translateX(3px); }

/* ---------- 12. 상세: 404 ---------- */
.sl-notfound__box { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); background-color: var(--white); }
.sl-notfound__icon { width: 64px; height: 64px; fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sl-notfound__num {
    margin-bottom: 6px;
    font-size: clamp(96px, 12vw, 176px); font-weight: 800; line-height: .9; letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--white); -webkit-text-stroke: 3.5px rgba(16, 18, 46, .16); paint-order: stroke fill;
}
.sl-notfound__box .c-empty__title { font-size: clamp(20px, 1.8vw, 24px); text-wrap: balance; }
.sl-notfound__box p { max-width: 560px; text-wrap: pretty; }
.sl-notfound__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

/* 줄바꿈: 제목은 균형 있게, 본문은 마지막 줄 고아 단어 방지 */
.sl-card__title, .sl-step__title, .sl-feat__title, .sl-quote p, .sl-maker__name, .c-page-solution .c-empty__title { text-wrap: balance; }
.sl-card__sub, .sl-step__desc, .sl-feat__desc, .sl-maker__desc, .sl-intro__desc, .sl-docs__note, .c-page-solution .c-empty p { text-wrap: pretty; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1180px) {
    .sl-flow { --node: 64px; }
    .sl-step__desc { font-size: 14.5px; }
}
@media (max-width: 1024px) {
    .c-page-solution .c-sechead { grid-template-columns: 1fr; gap: 20px; }
    .sl-intro { grid-template-columns: 1fr; }
    .sl-intro__desc { justify-self: start; }
    .sl-log { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .sl-tools { grid-template-columns: 1fr; }
    .sl-tools__side { flex-direction: row; align-items: center; gap: 24px; }
    .sl-tools__side .sl-search { flex: 1; }
    .sl-tools__side .c-count { flex: none; }
    .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sl-step__desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

    .sl-top__grid { grid-template-columns: 1fr; }
    .sl-top__media, .sl-panel { position: static; }
    .sl-gallery__stage { aspect-ratio: 16 / 10; }   /* 1단 배치에서 4:3 스테이지가 화면을 다 차지하지 않도록 */
    .sl-overview__grid, .sl-docs__grid { grid-template-columns: 1fr; gap: 28px; }
    .sl-overview__head { position: static; }
    .sl-maker { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    /* 5단계 가로 배치가 비좁아지면 세로 타임라인으로 */
    .sl-flow { --node: 56px; }
    .sl-flow__track { width: 1px; height: auto; }
    .sl-flow__steps { grid-template-columns: 1fr; gap: 40px; }
    .sl-step { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 22px; row-gap: 6px; align-items: start; }
    .sl-step__node { grid-row: 1 / span 3; margin: 0; border-radius: 16px; }
    .sl-step__icon { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
    .sl-step__no { padding-top: 4px; }
    .sl-step__desc { max-width: 520px; display: block; overflow: visible; }
}
@media (max-width: 760px) {
    .sl-vendors { grid-template-columns: 1fr; }
    .sl-vendors__label { display: none; }
    .sl-vendors__marquee { padding: 16px 0; }
    .sl-vendor { font-size: 18.2px; gap: 20px; padding-right: 20px; }
    .sl-vendor__mark { width: 10px; height: 10px; }
    .sl-kinetic span { font-size: 84px; }
    .sl-kinetic--read span { font-size: 60px; }

    .sl-log { gap: 24px 16px; }
    .sl-log dd { font-size: 40px; min-height: 40px; }
    .sl-log dd.sl-log__date { font-size: 20px; }

    .sl-filters__row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
    .sl-filters__label, .sl-filters__row--maker .sl-filters__label { padding-left: 2px; line-height: 1.4; }
    .sl-tools__side { flex-direction: column; align-items: stretch; gap: 10px; }
    .sl-tools__side .c-count { text-align: left; }

    .sl-grid { grid-template-columns: 1fr; }
    .sl-cell--wide { grid-column: auto; }
    .sl-stage { aspect-ratio: 3 / 2; }   /* 1열 카드가 화면을 길게 차지하지 않도록 */
    .sl-card--wide { display: flex; flex-direction: column; }
    .sl-card--wide .sl-stage { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
    .sl-card--wide .sl-card__body, .sl-cell--flip .sl-card--wide .sl-card__body { padding: 20px 8px 4px; }
    .sl-card__title { font-size: 21px; }
    .sl-card--wide .sl-card__title { font-size: 26px; }

    /* 칩 가로 스크롤: 오른쪽 끝을 흐려 더 있음을 알린다 */
    .sl-filters .c-filter {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    }

    /* 관련 제품: 가로 스냅 레일 */
    .sl-grid--related {
        display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
        margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 18px;
    }
    .sl-grid--related::-webkit-scrollbar { display: none; }
    .sl-grid--related > .sl-cell { flex: 0 0 84%; scroll-snap-align: start; }
    html.js .sl-grid--related > .sl-cell[data-reveal] { opacity: 1; transform: none; }

    .sl-feat-grid { grid-template-columns: 1fr; }
    .sl-feat-grid--one .sl-feat__inner { display: flex; }
    .sl-feat-grid--one .sl-feat__body { padding: 20px 10px 12px; }

    .sl-process__foot { flex-direction: column; align-items: flex-start; }
    .sl-process__note { flex-direction: column; gap: 2px; }
    .sl-process__note dt { margin: 0 0 6px; }
    .sl-process__note dd + dd::before { display: none; }
    .sl-br { display: none; }

    .sl-gallery__stage { border-radius: var(--r); aspect-ratio: 4 / 3; }
    .sl-gallery__stage .sl-stage__marks { inset: 12px; }
    .sl-gallery__count { right: 24px; top: 22px; }
    .sl-gallery__hint { display: none; }
    .sl-gallery__btn { width: 40px; height: 40px; }
    .sl-gallery__nav { right: 14px; bottom: 14px; gap: 6px; }
    .sl-gallery__slide { padding: 12% 10% 16%; }
    .sl-gallery__thumb { width: 76px; }
    .sl-panel__cta { grid-template-columns: 1fr; }
    .sl-spec > div { grid-template-columns: 92px minmax(0, 1fr); }
    .c-page-solution-read .c-subhero .c-eyebrow { white-space: normal; }

    .sl-maker { padding: 24px 20px; border-radius: var(--r-lg); }
    .sl-maker__logo { width: 96px; height: 60px; }
    .sl-more__head { align-items: flex-start; flex-direction: column; }
}

/* ---------- 14. 리빌 종료 상태 보정 ----------
   공용 규칙 html.js [data-reveal].is-in 이 모든 리빌에 clip-path 를 남겨,
   리빌 요소 안의 카드 호버 리프트·그림자, 단계 노드 링, 마그네틱 버튼 이동이 상자 경계에서 잘린다.
   클립형(clip · wipe · iris · img)이 아닌 리빌은 클립을 해제한다. */
html.js .c-page-solution [data-reveal]:not([data-reveal="clip"]):not([data-reveal="wipe"]):not([data-reveal="iris"]):not([data-reveal="img"]).is-in { clip-path: none; }

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sl-gallery__slide { transform: none !important; }
    .sl-stage__zoom { transition: none; }
}

/* 솔루션 목록 및 상세 크기 조정 */
.c-page-solution:not(.c-page-solution-read) .sl-log { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-page-solution:not(.c-page-solution-read) .sl-stage__zoom > img { scale: .9; }
.c-page-solution-read .sl-gallery__slide { padding: 10%; }
.c-page-solution-read .sl-gallery__slide > img {
    width: min(60.5%, calc(var(--cap-w, 100%) * .605));
    height: min(60.5%, calc(var(--cap-h, 100%) * .605));
    flex: none;
}
.c-page-solution-read .sl-gallery__slide > img { transform-origin: center; }

/* 제품 이미지 영역의 격자 및 모서리 장식 제거 */
.c-page-solution .sl-stage,
.c-page-solution .sl-gallery__stage { background-image: none; }
.c-page-solution .sl-stage__marks { display: none; }

/* 상세 상단 이미지 박스 축소 */
.c-page-solution-read .sl-top__media { width: 80%; justify-self: center; }

/* 제조사 로고: 흰 배경, 도형 테두리 제거 */
.c-page-solution-read .sl-maker__logo,
.c-page-solution-read .sl-panel__logo { background: #fff; border-radius: 0; box-shadow: none; }