/* 지유이엔지 제품 상세 공통 움직임·구성. 기준: 썬플렉스/codex-briefs/jiyou-redesign-plan.md 3절 + 외부 검수(redesign-tools/reviews)
   토스: 콘텐츠 등장·장면 교체 값 / Apple HIG(Liquid Glass): 떠 있는 조작 층(하단 바)·캡슐 버튼·동심 모서리·손쉬운 사용 */
:root{
  --jm-ease-title:cubic-bezier(.333,.667,.667,1);
  --jm-ease-line:cubic-bezier(.44,0,.56,1);
  --jm-ease-out:cubic-bezier(.25,1,.5,1);
  --jm-ease-draw:cubic-bezier(.37,.31,0,1);
  --jm-ease-swap:cubic-bezier(.35,0,0,1);
  --jm-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --jm-spring:cubic-bezier(.32,.72,0,1);
  --jm-glass:rgba(255,255,255,.94);
  --jm-glass-dark:rgba(22,27,38,.82);
  --jm-accent:var(--color-accent);
  --jm-ink:var(--color-ink,#0f1b2d);
  --jm-muted:var(--color-ink-2,#4b5567);
}
main[data-font-axis=eyes]{--jm-accent:var(--moving-eyes-text);--jm-accent-dark:var(--moving-eyes-on-dark)}
main[data-font-axis=sound]{--jm-accent:var(--moving-sound-text);--jm-accent-dark:var(--moving-sound-on-dark)}
main[data-font-axis=air]{--jm-accent:var(--moving-air-text);--jm-accent-dark:var(--moving-air-on-dark)}
main[data-font-axis=guard]{--jm-accent:var(--moving-guard-text);--jm-accent-dark:var(--moving-guard-on-dark)}
main[data-font-axis=story]{--jm-accent:var(--moving-story-text);--jm-accent-dark:var(--moving-story-on-dark)}
.jm-on-dark{--jm-accent:var(--jm-accent-dark,var(--mint-300))}

/* ── 1. 등장 (html.jm-on 일 때만 시작 상태가 숨김) ───────────────── */
/* 낱말은 일반 글자 흐름(inline) 그대로 → 원래 줄바꿈(균형 줄바꿈 포함)과 같고 줄 앞 빈칸이 생기지 않음. 움직임은 top 으로 */
.jm-w{display:inline;position:relative}
html.jm-on .jm-split .jm-w{opacity:0;top:24px;filter:blur(16px)}
html.jm-on .jm-split.is-in .jm-w{opacity:1;top:0;filter:blur(0);
  transition:opacity 600ms var(--jm-ease-title),top 600ms var(--jm-ease-title),filter 600ms var(--jm-ease-title);
  transition-delay:calc(var(--i,0) * 100ms + var(--d,0ms))}
/* 시작 상태에서 '원래 모습'으로 돌아오는 키프레임(끝 상태를 덮어쓰지 않음). 이동은 translate 속성만 → 기존 transform 과 겹치지 않음 */
html.jm-on [data-jm]:not(.is-in){opacity:0}
html.jm-on [data-jm=title].is-in{animation:jm-title 600ms var(--jm-ease-title) var(--d,0ms) backwards}
html.jm-on [data-jm=fade].is-in{animation:jm-fade 400ms var(--jm-ease-line) var(--d,0ms) backwards}
html.jm-on [data-jm=up].is-in{animation:jm-up 400ms var(--jm-ease-line) var(--d,0ms) backwards}
html.jm-on [data-jm=rise].is-in{animation:jm-rise 500ms var(--jm-ease-out) var(--d,0ms) backwards}
html.jm-on [data-jm=media].is-in{animation:jm-media 900ms var(--jm-ease-out) var(--d,0ms) backwards}
@keyframes jm-title{from{opacity:0;translate:0 24px;filter:blur(16px)}}
@keyframes jm-fade{from{opacity:0}}
@keyframes jm-up{from{opacity:0;translate:0 24px}}
@keyframes jm-rise{from{opacity:0;translate:0 60px}}
@keyframes jm-media{from{opacity:0;clip-path:inset(7% 7% 7% 7% round 32px)}to{clip-path:inset(0 0 0 0 round 0)}}

/* 머리말: ● 점(글자색을 따름) + 오른쪽으로 그어지는 1px 선 */
:root:not(#jm) .jm-eyebrow{display:flex;align-items:center;gap:10px;color:var(--jm-accent)!important;font-size:var(--font-body-large,18px)!important;font-weight:650!important}
:root:not(#jm) .jm-eyebrow::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor}
:root:not(#jm) .jm-eyebrow::after{content:"";flex:1 1 auto;min-width:24px;max-width:240px;height:1px;background:currentColor;opacity:.28;transform-origin:left center}
:root:not(#jm) .jm-eyebrow--center{justify-content:center}
:root:not(#jm) .jm-eyebrow--center::after,:root:not(#jm) .jm-eyebrow--noline::after{display:none}
html.jm-on .jm-eyebrow::after{transform:scaleX(0)}
html.jm-on .jm-eyebrow.is-in::after{transform:scaleX(1);transition:transform 1000ms var(--jm-ease-draw) calc(var(--d,0ms) + 150ms)}

/* ── 2. 첫 화면 (G1) ─────────────────────────────────────────── */
:root:not(#jm) .jm-hero-kicker+h1::before{display:none!important}
:root:not(#jm) .jm-hero-kicker::before{content:"";display:block;width:48px;height:4px;margin:0 0 22px;border-radius:2px;background:var(--art-accent,currentColor)}
:root:not(#jm) .jm-hero-kicker{display:block;margin:0 0 18px;font-size:clamp(15px,1.3vw,18px);line-height:1.45;font-weight:650;letter-spacing:-.01em;color:color-mix(in oklch,currentColor 72%,transparent)}
:root:not(#jm) .jm-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
:root:not(#jm) .jm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;
  font-size:17px;font-weight:650;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 400ms var(--jm-spring)}
:root:not(#jm) .jm-btn:active,:root:not(#jm) .jm-hero-cta>a:active,:root:not(#jm) .jm-consult__actions a:active{transform:scale(.97);transition-duration:120ms}
:root:not(#jm) .jm-btn--primary{background:var(--jm-ink);color:#fff}
:root:not(#jm) .jm-btn--primary:hover{background:color-mix(in oklch,var(--jm-ink) 82%,black)}
:root:not(#jm) .jm-hero-cta>a:not(.jm-btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;margin:0;border-radius:999px;
  background:color-mix(in oklch,currentColor 8%,transparent);color:inherit;font-size:17px;font-weight:600;text-decoration:none;border:0!important;box-shadow:none!important;
  transition:background-color 150ms ease,transform 400ms var(--jm-spring)}
:root:not(#jm) .jm-hero-cta>a:not(.jm-btn):hover{background:color-mix(in oklch,currentColor 14%,transparent)}
:root:not(#jm) .jm-on-dark .jm-btn--primary{background:#fff;color:var(--jm-ink)}
:root:not(#jm) .jm-on-dark .jm-btn--primary:hover{background:color-mix(in oklch,#fff 86%,var(--jm-ink))}
/* 핵심 숫자 */
:root:not(#jm) .jm-hero-stat{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:26px 0 0;padding:0}
:root:not(#jm) .jm-hero-stat b{font-size:clamp(40px,4.4vw,60px);line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--jm-accent);font-variant-numeric:tabular-nums}
:root:not(#jm) .jm-hero-stat>span{font-size:17px;line-height:1.45;font-weight:600;color:inherit;opacity:.85;max-width:22em;text-wrap:balance}
/* 작동 흐름: 누를 수 없는 정보 → 배경 없는 번호 점 + 글자 + 연결선 */
:root:not(#jm) .jm-hero-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin:26px 0 0;padding:0;list-style:none;counter-reset:jmf}
:root:not(#jm) .jm-hero-flow li{position:relative;display:inline-flex;align-items:center;gap:9px;padding:0;color:inherit;font-size:16px;font-weight:650;letter-spacing:-.01em;counter-increment:jmf}
:root:not(#jm) .jm-hero-flow li::before{content:counter(jmf);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid var(--jm-accent);color:var(--jm-accent);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  transition:background-color 300ms ease,color 300ms ease,box-shadow 300ms ease}
:root:not(#jm) .jm-hero-flow li+li{margin-left:40px}
:root:not(#jm) .jm-hero-flow li+li::after{content:"";position:absolute;left:-32px;top:50%;width:24px;height:1.5px;border-radius:2px;background:color-mix(in oklch,currentColor 30%,transparent)}
:root:not(#jm) .jm-hero-flow li.is-lit::before{background:var(--jm-accent);color:var(--jm-steps-ink,#fff);box-shadow:0 0 0 5px color-mix(in oklch,var(--jm-accent) 18%,transparent)}
:root:not(#jm) .jm-on-dark .jm-hero-flow li.is-lit::before{color:var(--jm-ink)}
/* 판매 포인트(기존 문구) */
:root:not(#jm) .jm-hero-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none}
:root:not(#jm) .jm-hero-facts li{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:inherit;opacity:.85}
:root:not(#jm) .jm-hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jm-accent)}
/* 가운데 정렬 첫 화면 */
:root:not(#jm) .jm-hero-center .jm-hero-cta,:root:not(#jm) .jm-hero-center .jm-hero-flow,:root:not(#jm) .jm-hero-center .jm-hero-facts{justify-content:center}
:root:not(#jm) .jm-hero-center .jm-hero-stat{flex-direction:column;align-items:center;text-align:center;gap:10px}
:root:not(#jm) .jm-hero-center .jm-hero-stat>span{max-width:none}
@media (max-width:767px){
  :root:not(#jm) .jm-hero-flow li{font-size:15px}
  :root:not(#jm) .jm-hero-flow{gap:10px 16px}
  :root:not(#jm) .jm-hero-flow li+li{margin-left:0}
  :root:not(#jm) .jm-hero-flow li+li::after{display:none}
  :root:not(#jm) .jm-hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  :root:not(#jm) .jm-hero-cta>a{width:100%;padding:0 18px!important;font-size:16px!important}
  :root:not(#jm) .jm-hero-stat b{font-size:44px}
  :root:not(#jm) .jm-hero-stat>span{font-size:16px}
}

/* ── 3. 시그니처: 작동 도식 장면 (G4, PC만) ──────────────────────
   원래 머리 묶음은 맨 위 원래 모습 그대로, 아래 왼쪽 고정 장면 + 오른쪽 원래 단계 글 */
.jm-scene{display:none}
@media (min-width:1024px){
  html.jm-on .jm-steps.jm-on-dark{--jm-accent:var(--jm-accent-dark,var(--mint-300))}
  html.jm-on :is(.jm-steps .jm-steps__grid,.jm-steps.jm-steps__grid){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;column-gap:clamp(40px,6vw,104px)!important;row-gap:0!important;align-items:start!important}
  html.jm-on :is(.jm-steps .jm-steps__grid,.jm-steps.jm-steps__grid)>*:not(.jm-scene):not(.jm-steps__list){grid-column:1/-1}
  html.jm-on .jm-steps .jm-scene{display:block;grid-column:1;position:sticky;top:calc(var(--header-height,64px) + 11vh);align-self:start;margin-top:9vh}
  html.jm-on .jm-steps .jm-steps__list{grid-column:2!important;display:flex!important;flex-direction:column!important;gap:0!important;grid-template-columns:none!important;margin-top:9vh!important;padding:0 0 0 44px!important;position:relative!important;
    border-left:1px solid color-mix(in oklch,currentColor 16%,transparent)!important;
    background:linear-gradient(var(--jm-accent),var(--jm-accent)) no-repeat -1px 0 / 2px var(--pl,0px)!important;transition:background-size 450ms var(--jm-ease-swap)}
  html.jm-on .jm-steps .jm-steps__list::before,html.jm-on .jm-steps .jm-steps__list::after,html.jm-on .jm-steps .jm-steps__list>*::after{display:none!important}
  html.jm-on .jm-steps .jm-steps__list>*{position:relative!important;min-height:60vh;display:flex!important;flex-direction:column;justify-content:center;max-width:none!important;width:auto!important;padding-top:0!important;border-top:0!important;
    opacity:.7;transition:opacity 450ms var(--jm-ease-swap)!important}
  html.jm-on .jm-steps .jm-steps__list>.is-active{opacity:1}
  html.jm-on .jm-steps .jm-steps__list>*>span:first-child{color:var(--jm-accent)!important}
  html.jm-on .jm-steps .jm-steps__list>*::before{display:none!important}
  html.jm-on .jm-steps .jm-steps__list>*>span:first-child{position:relative!important}
  html.jm-on .jm-steps .jm-steps__list>*>span:first-child::before{content:""!important;display:block!important;position:absolute!important;inset:auto!important;left:-51px!important;top:50%!important;
    width:13px!important;height:13px!important;margin:-6.5px 0 0!important;border-radius:50%!important;border:1.5px solid var(--jm-accent)!important;
    background:var(--jm-steps-bg,#0b1424)!important;transform:none!important;opacity:1!important;box-shadow:none!important;transition:background-color 300ms ease,box-shadow 300ms ease!important}
  html.jm-on .jm-steps .jm-steps__list>.is-active>span:first-child::before{background:var(--jm-accent)!important;box-shadow:0 0 0 6px color-mix(in oklch,var(--jm-accent) 22%,transparent)!important}
  /* 장면: 주체 노드 흐름도. 빛은 원형 radial(네모 잘림 없음) */
  .jm-scene__stage{position:relative;aspect-ratio:5/4;border-radius:32px;overflow:hidden;display:grid;place-items:center;
    background:color-mix(in oklch,currentColor 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,currentColor 10%,transparent)}
  .jm-scene__glow{position:absolute;left:var(--gx,16.7%);top:42%;width:340px;height:340px;translate:-50% -50%;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in oklch,var(--jm-accent) 26%,transparent),transparent);transition:left 700ms var(--jm-spring)}
  .jm-scene__flow{position:relative;display:flex;align-items:flex-start;justify-content:center;width:100%;padding:0 6%}
  .jm-scene__node{flex:0 0 auto;width:28%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;opacity:.38;transition:opacity 450ms var(--jm-ease-swap)}
  .jm-scene__node.is-past{opacity:.7}
  .jm-scene__node.is-active{opacity:1}
  .jm-scene__icon{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;color:var(--jm-accent);
    background:color-mix(in oklch,var(--jm-accent) 12%,transparent);box-shadow:0 0 0 1px color-mix(in oklch,var(--jm-accent) 30%,transparent);
    transition:transform 700ms var(--jm-spring),background-color 450ms ease,color 450ms ease}
  .jm-scene__icon svg{width:40px;height:40px}
  .jm-scene__node.is-active .jm-scene__icon{transform:scale(1.18);background:var(--jm-accent);color:var(--jm-steps-bg,#0b1424)}
  .jm-scene__node.is-active .jm-scene__icon{animation:jm-ring 2000ms ease-out 600ms 2}
  @keyframes jm-ring{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--jm-accent) 45%,transparent)}100%{box-shadow:0 0 0 26px color-mix(in oklch,var(--jm-accent) 0%,transparent)}}
  .jm-scene__no{margin-top:8px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--jm-accent);font-variant-numeric:tabular-nums}
  .jm-scene__actor{font-size:clamp(15px,1.2vw,18px);line-height:1.35;font-weight:700;letter-spacing:-.02em;word-break:keep-all}
  .jm-scene__link{position:relative;flex:1 1 auto;height:2px;margin-top:43px;border-radius:2px;background:color-mix(in oklch,currentColor 16%,transparent);overflow:visible}
  .jm-scene__link::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--jm-accent);transform-origin:left;transform:scaleX(0);transition:transform 600ms var(--jm-ease-out)}
  .jm-scene__link.is-on::before{transform:scaleX(1)}
  .jm-scene__link b{position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--jm-accent);opacity:0}
  .jm-scene__link.is-on b{animation:jm-travel 650ms var(--jm-ease-out) 1}
  @keyframes jm-travel{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
}

/* 단계 번호 색: 어두운 구간은 어두운 바탕용 강조색, 모든 폭 */
.jm-steps-color.jm-on-dark ol>li:not(.jm-own-bg)>span:first-child{color:var(--jm-accent)!important}

/* ── 3-2. 순서 강조(배치 유지, PC만) ── */
.jm-seq>*,.jm-seq-part{transition:opacity 450ms var(--jm-ease-swap),filter 450ms var(--jm-ease-swap)}
.jm-seq-run .jm-seq:not(.jm-seq--outline)>*:not(.is-active){opacity:.62}
.jm-seq-run .jm-seq-part:not(.is-on){opacity:.6}
.jm-seq--outline>*{transition:box-shadow 450ms var(--jm-ease-swap)!important}
.jm-seq-run .jm-seq--outline>.is-active{box-shadow:inset 0 0 0 1.5px var(--jm-accent),0 12px 28px -18px color-mix(in oklch,var(--jm-ink) 40%,transparent)!important}
.jm-seq-run .jm-seq-part.is-on{filter:drop-shadow(0 0 20px color-mix(in oklch,var(--brand-mint,#7fd6a8) 40%,transparent))}

/* ── 4. 숫자 굴림 (G6) ──────────────────────────────────────── */
.jm-count{display:inline-flex;align-items:baseline;white-space:nowrap;font-variant-numeric:tabular-nums}
.jm-count .jm-digit{display:inline-block;height:1.08em;line-height:1.08em;overflow:hidden;vertical-align:bottom}
.jm-count .jm-strip{display:flex;flex-direction:column;transform:translateY(0)}
.jm-count .jm-strip>span{height:1.08em}
.jm-count.is-pop{animation:jm-pop 300ms var(--jm-ease-pop)}
@keyframes jm-pop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ── 5. 링크 줄 (누를 수 없는 카드는 들어 올리지 않음) ─────────────── */
@media (hover:hover) and (pointer:fine){
  :root:not(#jm) .product-related a span:last-child{display:inline-block;transition:transform 300ms var(--jm-ease-out)}
  :root:not(#jm) .product-related a:hover span:last-child{transform:translate(3px,-3px)}
}

/* ── 6. 마무리 상담 (G10) ──────────────────────────────────── */
:root:not(#jm) .jm-consult{display:grid!important;grid-template-columns:minmax(0,1fr);justify-items:start!important;align-items:start!important;text-align:left!important;gap:28px!important}
:root:not(#jm) .jm-consult>*{margin-left:0!important;margin-right:0!important;max-width:none}
:root:not(#jm) .jm-consult .jm-consult__copy{max-width:640px;text-align:left!important}
@media (min-width:1024px){
  :root:not(#jm) .jm-consult{grid-template-columns:minmax(0,1fr) auto;align-items:end!important;column-gap:56px!important;padding-left:clamp(40px,5vw,72px)!important;padding-right:clamp(40px,5vw,72px)!important}
  :root:not(#jm) .jm-consult .jm-consult__actions{margin-top:0!important;justify-content:flex-end;justify-self:end}
}
:root:not(#jm) .jm-consult .jm-eyebrow{margin:0 0 var(--space-16,16px);color:var(--brand-green,var(--color-accent));font-size:var(--font-body-large,18px);font-weight:var(--weight-label,650);line-height:var(--line-eyebrow,1.4)}
:root:not(#jm) .jm-consult h2{margin:0;font-size:clamp(27px,2.8vw,40px)!important;font-weight:700!important;line-height:1.3;letter-spacing:-.03em}
:root:not(#jm) .jm-consult .jm-consult__lead{margin:18px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;font-weight:500}
:root:not(#jm) .jm-consult .jm-consult__note{margin:12px 0 0;font-size:15px;line-height:1.6;color:color-mix(in oklch,currentColor 72%,transparent)}
:root:not(#jm) .jm-consult__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:0;justify-content:flex-start}
:root:not(#jm) .jm-consult__actions a{margin:0;border-radius:999px!important;min-height:52px;padding:0 28px;font-size:17px;font-weight:650}
:root:not(#jm) .jm-consult__actions .button--primary{background:var(--jm-ink)!important;background-image:none!important;box-shadow:none!important;color:#fff!important;border-color:transparent!important}
:root:not(#jm) .jm-consult__actions .button--primary::before,:root:not(#jm) .jm-consult__actions .button--primary::after{display:none!important}
:root:not(#jm) .jm-consult__actions .button--primary:hover{background:color-mix(in oklch,var(--jm-ink) 82%,black)!important}
:root:not(#jm) .jm-consult__actions .jm-btn--line{background:transparent;color:inherit;border:1px solid color-mix(in oklch,currentColor 30%,transparent)}
:root:not(#jm) .jm-consult__actions .jm-btn--line:hover{border-color:currentColor}
@media (max-width:767px){
  :root:not(#jm) .jm-consult__actions{flex-direction:column;align-items:stretch;width:100%}
  :root:not(#jm) .jm-consult__actions a{width:100%;justify-content:center}
}

/* ── 7. 하단 상담 바 (G11): 떠 있는 조작 층 = 유리. 안쪽 버튼은 바깥 캡슐과 동심 ── */
.jm-bar{position:fixed;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));z-index:40;
  width:min(960px,calc(100vw - 32px));transform:translate(-50%,30px);opacity:0;pointer-events:none;
  transition:transform 800ms var(--jm-ease-out),opacity 400ms ease,width 560ms var(--jm-spring)}
.jm-bar.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.jm-bar.is-compact{width:min(360px,calc(100vw - 32px))}
.jm-bar__inner{--pad:6px;--h:56px;position:relative;display:flex;align-items:center;gap:6px;height:calc(var(--h) + var(--pad) * 2);
  padding:var(--pad) var(--pad) var(--pad) 28px;border-radius:999px;overflow:hidden;color:var(--jm-ink);
  background:var(--jm-glass);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 .5px rgba(255,255,255,.6),0 0 0 .5px rgba(0,27,55,.10),0 10px 36px -8px rgba(0,27,55,.22);
  transition:background-color 200ms ease,color 200ms ease,padding 560ms var(--jm-spring)}
.jm-bar__inner::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%);opacity:.9}
.jm-bar__name,.jm-bar__line{transition:opacity 260ms ease,max-width 560ms var(--jm-spring)}
.jm-bar__name{max-width:22em;font-size:16px;font-weight:750;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.jm-bar__line{flex:1;max-width:40em;min-width:0;padding-left:8px;font-size:15px;font-weight:500;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jm-bar__line.is-swap{opacity:0;transition-duration:150ms}
.jm-bar.is-compact .jm-bar__name,.jm-bar.is-compact .jm-bar__line{opacity:0;max-width:0;padding:0}
.jm-bar.is-compact .jm-bar__inner{padding-left:var(--pad)}
.jm-bar__tel,.jm-bar__cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);border-radius:999px;
  font-size:16px;text-decoration:none;white-space:nowrap;transition:background-color 150ms ease,color 150ms ease,transform 400ms var(--jm-spring)}
.jm-bar__tel{margin-left:auto;padding:0 20px;font-weight:650;color:inherit}
.jm-bar__tel svg{width:18px;height:18px;flex:0 0 auto}
.jm-bar__tel-num{display:none;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.jm-bar__tel-text{display:none}.jm-bar__tel-num{display:inline}}
.jm-bar__tel:hover{background:color-mix(in oklch,currentColor 8%,transparent)}
.jm-bar__cta{min-width:148px;padding:0 26px;font-weight:700;background:var(--jm-ink);color:#fff}
.jm-bar__cta:hover{background:color-mix(in oklch,var(--jm-ink) 84%,black)}
.jm-bar__tel:active,.jm-bar__cta:active{transform:scale(.96);transition-duration:120ms}
.jm-bar__contact,.jm-bar__call{display:none}
.jm-bar.is-compact .jm-bar__tel{margin-left:0;flex:1}
.jm-bar.is-compact .jm-bar__cta{flex:1.3;min-width:0}
/* 어두운 구간 위: 어두운 유리 */
.jm-bar.is-dark .jm-bar__inner{--jm-glass:var(--jm-glass-dark);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.16),0 10px 36px -8px rgba(0,0,0,.5)}
.jm-bar.is-dark .jm-bar__inner::before{opacity:.2}
.jm-bar.is-dark .jm-bar__cta{background:#fff;color:var(--jm-ink)}
.jm-bar.is-dark .jm-bar__cta:hover{background:rgba(255,255,255,.86)}
/* 기존 '모션 일시정지' 버튼: 44pt 이상, 바 위 12px */
:root:not(#jm) .j-motion-toggle{min-width:44px!important;min-height:44px!important}
html.jm-bar-on .j-motion-toggle{bottom:calc(max(20px,env(safe-area-inset-bottom) + 12px) + 80px)!important}
@media (max-width:767px){
  .jm-bar{width:calc(100vw - 24px);bottom:calc(env(safe-area-inset-bottom) + 10px)}
  .jm-bar.is-compact{width:248px}
  .jm-bar__inner{--h:50px;--pad:5px;padding-left:var(--pad)}
  .jm-bar__name,.jm-bar__line{display:none}
  .jm-bar__tel,.jm-bar__cta{display:none}
  .jm-bar__contact,.jm-bar__call{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);border-radius:999px;
    font-size:16px;font-weight:650;text-decoration:none;white-space:nowrap;transition:background-color 150ms ease,transform 400ms var(--jm-spring)}
  .jm-bar__contact{flex:1;color:inherit}
  .jm-bar__call{flex:1.5;font-weight:700;background:var(--jm-ink);color:#fff}
  .jm-bar.is-dark .jm-bar__call{background:#fff;color:var(--jm-ink)}
  .jm-bar__contact svg,.jm-bar__call svg{width:18px;height:18px}
  .jm-bar__contact:active,.jm-bar__call:active{transform:scale(.96);transition-duration:120ms}
  .jm-bar.is-compact .jm-bar__contact{flex:0 0 var(--h);width:var(--h);padding:0}
  .jm-bar.is-compact .jm-bar__contact span{display:none}
  .jm-bar.is-compact .jm-bar__call{flex:1}
  html.jm-bar-on .j-motion-toggle{bottom:calc(env(safe-area-inset-bottom) + 82px)!important}
}
/* 투명도 줄이기 · 대비 높이기 */
@media (prefers-reduced-transparency:reduce){
  .jm-bar__inner{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .jm-bar.is-dark .jm-bar__inner{background:#161b26}
  .jm-bar__inner::before{display:none}
}
@media (prefers-contrast:more){
  .jm-bar__inner{background:rgba(255,255,255,.97);box-shadow:0 0 0 1.5px currentColor,0 10px 36px -8px rgba(0,27,55,.3)}
  .jm-bar.is-dark .jm-bar__inner{background:#161b26}
  .jm-bar__line{opacity:1}
  .jm-bar__inner::before{display:none}
}

/* ── 9. 글자·여백 규칙 (기획 3-3, 사용자 결정 2026-10-05) ── */
:root:not(#jm) .dedicated-product-page section[class*="hero"] h1{font-size:clamp(40px,3.9vw,56px)!important;line-height:1.2!important;font-weight:700!important;letter-spacing:-.03em!important}
:root:not(#jm) .dedicated-product-page :is(#story,#highlights,#related) h2{font-size:clamp(30px,2.8vw,40px)!important;line-height:1.32!important;font-weight:700!important;letter-spacing:-.03em!important}
:root:not(#jm) .dedicated-product-page :is(#story,#highlights) p{line-height:1.65}
:root:not(#jm) .jm-gap{margin-top:clamp(16px,1.6vw,24px)!important}
@media (max-width:767px){
  :root:not(#jm) .dedicated-product-page section[class*="hero"] h1{font-size:32px!important}
  :root:not(#jm) .dedicated-product-page :is(#story,#highlights,#related) h2{font-size:27px!important}
  :root:not(#jm) .jm-pad-m{padding-top:64px!important;padding-bottom:64px!important}
}

/* ── 10. 고유 섹션 모양 다듬기(구조·문구 유지) ── */
/* 카드: 모서리 24, 주황 띠 제거 */
:root:not(#jm) #story [class$="__layout"]>article{border-radius:24px!important;border-left:0!important}
/* 첫 화면 사진 틀: 겹판·장식 걷어내고 사진만(동심 모서리) */
:root:not(#jm) .product-art-visual{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
:root:not(#jm) .product-art-visual::before,:root:not(#jm) .product-art-visual::after{display:none!important}
:root:not(#jm) .product-art-visual>.media-frame{border-radius:32px!important;border:0!important;box-shadow:none!important;overflow:hidden}
:root:not(#jm) .pas-hero__visual .media-frame{background:transparent!important;border:0!important;box-shadow:none!important}
:root:not(#jm) .fire-detection-hero__visual .media-frame{border-color:rgba(255,255,255,.12)!important}
@media (max-width:767px){:root:not(#jm) .product-art-visual>.media-frame{border-radius:24px!important}}
/* ir3 상태 칩: 판매 예정을 분명히 */
:root:not(#jm) .ir3-status{display:inline-flex!important;align-items:center;gap:8px;border:0!important;background:color-mix(in oklch,var(--jm-accent) 12%,transparent)!important;color:var(--jm-accent)!important;font-weight:700!important;font-size:14px!important}
:root:not(#jm) .ir3-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* 버튼 3단계: 주(채움 캡슐) / 보조(옅은 캡슐) / 문장 속 링크(밑줄) */
:root:not(#jm) #story .ir3-link,:root:not(#jm) #story .ir3-new-next a,:root:not(#jm) #story .ir3-video-grid a{display:inline-flex!important;align-items:center;gap:6px;min-height:46px;padding:0 20px!important;border-radius:999px!important;
  background:color-mix(in oklch,currentColor 9%,transparent)!important;color:inherit;font-size:16px!important;font-weight:650!important;text-decoration:none!important;border:0!important;box-shadow:none!important;transition:background-color 150ms ease}
:root:not(#jm) #story .ir3-link:hover,:root:not(#jm) #story .ir3-new-next a:hover,:root:not(#jm) #story .ir3-video-grid a:hover{background:color-mix(in oklch,currentColor 15%,transparent)!important}
:root:not(#jm) #story .ir3-check-action a{display:inline-flex!important;align-items:center;min-height:52px;padding:0 26px!important;border-radius:999px!important;background:var(--jm-ink)!important;color:#fff!important;font-size:17px!important;font-weight:650!important;text-decoration:none!important}
/* 비교표: 값 표시(점·선) + 열 비율 */
:root:not(#jm) #story table th{white-space:nowrap}
:root:not(#jm) #story table thead th:first-child,:root:not(#jm) #story table tbody th{width:40%}
:root:not(#jm) .jm-v{font-weight:650}
:root:not(#jm) .jm-v::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;vertical-align:.08em;box-sizing:border-box}
:root:not(#jm) .jm-v--yes{color:var(--jm-accent)}
:root:not(#jm) .jm-v--yes::before{background:currentColor}
:root:not(#jm) .jm-v--no{color:var(--jm-muted);opacity:.7;font-weight:500}
:root:not(#jm) .jm-v--no::before{height:2px;border-radius:2px;background:currentColor}
:root:not(#jm) .jm-v--check::before{border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
/* 관련 제품: 사진 + 이름 + 한 줄 소개 */
:root:not(#jm) .product-related a.jm-rel{display:grid!important;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"t n a" "t s a";column-gap:18px;row-gap:4px;align-items:center;min-height:96px;padding-top:12px!important;padding-bottom:12px!important}
:root:not(#jm) .jm-rel-thumb{grid-area:t;width:72px;height:72px;border-radius:18px;object-fit:cover;background:var(--color-paper-2,#f5f6f8)}
:root:not(#jm) .jm-rel-thumb--cut{object-fit:contain;padding:6px;box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(0,27,55,.08)}
:root:not(#jm) .product-related a.jm-rel>span:first-of-type{grid-area:n;align-self:end}
:root:not(#jm) .jm-rel-sub{grid-area:s;align-self:start;font-size:15px;line-height:1.5;font-weight:500;color:var(--jm-muted)}
:root:not(#jm) .product-related a.jm-rel>span:last-child{grid-area:a}

/* ── 11. 2차 검수 반영 ── */
.jm-nw{white-space:nowrap}
/* 제목 위계: 카드 h3 는 섹션 h2(40)보다 작게 */
:root:not(#jm) .dedicated-product-page #story h3{font-size:clamp(20px,1.95vw,28px)!important;line-height:1.35!important}
:root:not(#jm) .dedicated-product-page #story :is(.ir3-flow,.ir3-flow-origin) h3{font-size:clamp(20px,1.7vw,24px)!important}
:root:not(#jm) .jm-gap-s{margin-top:12px!important}
@media (max-width:767px){:root:not(#jm) .dedicated-product-page #story h3{font-size:20px!important}}
/* 첫 화면 사진 틀: 화재 아치·장식 걷기, 근력보조 제품 크게 */
:root:not(#jm) .fire-detection-hero__visual{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important}
:root:not(#jm) .fire-detection-hero__visual::before,:root:not(#jm) .fire-detection-hero__visual::after{display:none!important}
:root:not(#jm) .fire-detection-hero__visual .media-frame{border-radius:32px!important;border:0!important;overflow:hidden}
:root:not(#jm) .pas-hero__visual .media-frame{height:min(480px,62vh)!important;aspect-ratio:auto!important;max-height:none!important}
:root:not(#jm) .pas-hero__visual .media-frame img{width:100%!important;height:100%!important;object-fit:contain!important;padding:4%;box-sizing:border-box}
@media (max-width:767px){:root:not(#jm) .pas-hero__visual .media-frame{height:min(46vh,360px)!important}}
:root:not(#jm) .pas-device .media-frame{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:24px!important;overflow:hidden}
:root:not(#jm) .pas-device .media-frame img{border-radius:24px}
:root:not(#jm) .pas-structure__metric{font-size:clamp(32px,3vw,40px)!important;font-weight:800!important;letter-spacing:-.03em;color:var(--jm-accent-dark,var(--mint-300))!important}
/* 강점 첫 카드 광택(콘텐츠 층에 유리 표현) 제거 */
:root:not(#jm) .product-highlights__card--anchor{background-image:none!important;box-shadow:none!important}
/* 헤더: 첫 화면 위 회색 띠 없게 더 불투명하게(자동 숨김은 그대로) */
:root:not(#jm) .site-header[data-surface="glass"]{background-color:rgba(255,255,255,.94)!important}
/* AI형 */
@media (max-width:767px){:root:not(#jm) .product-art-visual{width:100%!important;max-width:none!important;margin-inline:0!important}:root:not(#jm) .product-art-visual>.media-frame{width:100%!important}}
/* ir3 */
@media (min-width:768px){:root:not(#jm) .ir3-hero h1 br,:root:not(#jm) #story thead br{display:none}}
:root:not(#jm) .ir3-lead{font-size:clamp(18px,1.6vw,22px)!important;line-height:1.5!important}
:root:not(#jm) .ir3-hero .ir3-product{margin-top:24px!important}
:root:not(#jm) .ir3-hero .ir3-product img{max-height:44vh;width:auto!important;margin-inline:auto}
:root:not(#jm) .ir3-hero .jm-hero-stat b{font-size:clamp(36px,3.1vw,44px)!important}
:root:not(#jm) .jm-hero-cta .ir3-link{min-height:52px!important;font-size:17px!important;padding:0 24px!important}
:root:not(#jm) :is(.ir3-note,.ir3-new-note,.ir3-specs small,.ir3-monitor figcaption,.ir3-new-flow small){font-size:14px!important;line-height:1.6!important}
:root:not(#jm) #story .ir3-video-grid a{color:inherit!important;background:rgba(255,255,255,.1)!important}
@media (max-width:767px){:root:not(#jm) #story .ir3-check-action a{width:100%;justify-content:center}}
:root:not(#jm) #story table :is(th:not(:first-child),td){text-align:left!important}
:root:not(#jm) .jm-v--no::before{vertical-align:.3em}
:root:not(#jm) .jm-v--check{color:var(--jm-accent)}
/* 접기: 기본 ▶ 대신 꺾쇠 */
:root:not(#jm) #story summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
:root:not(#jm) #story summary::-webkit-details-marker{display:none}
:root:not(#jm) #story summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:-45deg;transition:rotate 300ms var(--jm-ease-out)}
:root:not(#jm) #story details[open]>summary::after{rotate:45deg}
/* 휴대폰 첫 화면 칩·판매 포인트 세로 */
@media (max-width:767px){:root:not(#jm) .jm-hero-flow,:root:not(#jm) .jm-hero-facts{flex-direction:column;align-items:flex-start;gap:10px}}
:root:not(#jm) .jm-consult__lead{text-wrap:pretty}
/* 모션 정지 버튼: 반투명 회색 → 불투명 유리 */
:root:not(#jm) .j-motion-toggle{opacity:1!important;background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(0,27,55,.12),0 6px 18px -6px rgba(0,27,55,.25)!important;border:0!important}

/* ── 7-2. 한국어 줄바꿈: 낱말 중간에서 끊지 않음 ── */
:root:not(#jm) .dedicated-product-page :is(p,li,h3,dd,dt,td,th,small,summary,figcaption){word-break:keep-all;overflow-wrap:break-word}

/* ── 8. 움직임 줄이기 ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .jm-bar,.jm-bar__inner,.jm-bar__name,.jm-bar__line,.jm-steps__list,.jm-hero-flow li::before{transition:none!important}
  .jm-count.is-pop{animation:none}
}
.jm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 11. 새 장면 부품 (기획 11절, 2026-10-05) ──────────────────────────── */
/* 11-1. 시그니처 그림 모드: 현장 모형 + 대상 옆 번호 핀(가는 선으로 연결) + 신호 경로 점선.
   단계마다 카메라가 대상 쪽으로 다가감(확대 1.3, 가운데로 40% 끌어옴). 전환 470ms, 튕김 없음(토스 장면 교체 값) */
.jm-scene--art .jm-scene__stage{position:relative;display:block;aspect-ratio:4/3;border-radius:32px;overflow:hidden;background:#eef0f2;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.55);transition:--sx 470ms var(--jm-ease-out),--sy 470ms var(--jm-ease-out),--z 470ms var(--jm-ease-out)}
@property --sx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --sy{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --z{syntax:'<number>';inherits:true;initial-value:1}
.jm-scene__cam{position:absolute;inset:0;transform-origin:var(--sx) var(--sy);
  /* 대상 쪽으로 끌어오되, 확대된 그림의 가장자리 밖(빈 바탕)이 드러나지 않는 범위로 제한 */
  transform:translate(clamp((var(--sx) - 100%) * (var(--z) - 1),(50% - var(--sx)) * .4 * (var(--z) - 1) / .3,var(--sx) * (var(--z) - 1)),
    clamp((var(--sy) - 100%) * (var(--z) - 1),(50% - var(--sy)) * .4 * (var(--z) - 1) / .3,var(--sy) * (var(--z) - 1))) scale(var(--z))}
.jm-steps .jm-scene--art .jm-scene__stage{--z:1.3}
.jm-scene__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jm-scene__spot{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),transparent 0 13%,rgba(11,20,36,.22) 30%,rgba(11,20,36,.36) 70%)}
.jm-scene__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jm-scene__lines path,.jm-scene__lines line{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.jm-scene__lines .jm-path{vector-effect:none;stroke-width:.5!important}
.jm-path-base{stroke:rgba(15,27,45,.32);stroke-width:2;stroke-dasharray:2 6}
.jm-path{stroke:var(--jm-accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 600ms var(--jm-ease-out)}
.jm-path.is-on{stroke-dashoffset:0}
.jm-lead{stroke:rgba(15,27,45,.55);stroke-width:1.5;opacity:.5;transition:opacity 300ms ease,stroke 300ms ease}
.jm-lead.is-on{opacity:1;stroke:var(--jm-accent);stroke-width:2}
.jm-pin__target{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;translate:-50% -50%;scale:calc(1 / var(--z));border-radius:50%;
  border:2px solid rgba(255,255,255,.95);background:rgba(15,27,45,.55);box-shadow:0 2px 6px rgba(0,0,0,.3);transition:background-color 300ms ease}
.jm-pin__target.is-on{background:var(--jm-accent)}
.jm-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;opacity:1!important;scale:calc(1 / var(--z,1));transform-origin:0 0}
.jm-pin__dot{position:absolute;left:0;top:0;translate:-50% -50%;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-size:12px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#fff;background:rgba(15,27,45,.72);
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 16px -4px rgba(0,0,0,.4);transition:transform 470ms var(--jm-ease-out),background-color 300ms ease}
.jm-pin__tag{position:absolute;left:24px;top:0;translate:0 -50%;padding:7px 12px;border-radius:999px;white-space:nowrap;
  font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--jm-ink);background:rgba(255,255,255,.95);
  box-shadow:0 0 0 .5px rgba(0,27,55,.12),0 8px 20px -8px rgba(0,27,55,.35);opacity:0;scale:.94;transform-origin:left center;
  transition:opacity 300ms ease,scale 470ms var(--jm-ease-out)}
.jm-pin--left .jm-pin__tag{left:auto;right:24px;transform-origin:right center}
.jm-pin.is-active .jm-pin__dot{background:var(--jm-accent);color:var(--jm-pin-ink,#0b1424);transform:scale(1.15);animation:jm-ring 2000ms ease-out 500ms 2}
.jm-pin.is-active .jm-pin__tag{opacity:1;scale:1}
.jm-pin.is-past .jm-pin__dot{background:rgba(15,27,45,.86)}
.jm-scene__legend{display:none}
/* PC 고정: 화면 세로 가운데(장면 높이는 JS 가 --jm-scene-h 로 알려 줌), 그림 칸을 넓게, 단계 0.8화면 */
@media (min-width:1024px){
  html.jm-on :is(.jm-steps .jm-steps__grid,.jm-steps.jm-steps__grid):has(.jm-scene--art){grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important}
  html.jm-on .jm-steps .jm-scene--art{margin-top:6vh;top:max(calc(var(--header-height,64px) + 68px),calc(50vh - var(--jm-scene-h,420px) / 2))}
  html.jm-on .jm-steps:has(.jm-scene--art) .jm-steps__list>*{min-height:80vh}
}
/* 정지 그림(휴대폰·태블릿·움직임 줄이기): 단계 목록 바로 뒤, 확대 없이 핀 전부 + 아래 이름 목록 */
.jm-scene.jm-scene--still{display:block;margin-top:clamp(28px,5vw,48px);grid-column:1/-1}
.jm-scene--still .jm-scene__stage{border-radius:24px}
.jm-scene--still .jm-scene__spot,.jm-scene--still .jm-path-base{display:none}
.jm-scene--still .jm-path{stroke-dashoffset:0}
.jm-scene--still .jm-lead{opacity:1}
.jm-scene--still .jm-pin__target{background:var(--jm-accent)}
.jm-scene.jm-scene--still .jm-pin .jm-pin__dot{width:28px;height:28px;font-size:11px;background:var(--jm-accent);color:var(--jm-pin-ink,#0b1424);transform:none;animation:none}
.jm-scene--still .jm-pin__tag{display:none}
.jm-scene--still .jm-scene__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 2px 0;padding:0;list-style:none;font-size:15px;font-weight:650;line-height:1.4}
.jm-scene__legend li{display:inline-flex;align-items:center;gap:7px}
.jm-scene__legend b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:800;background:var(--jm-accent);color:var(--jm-pin-ink,#0b1424)}
@media (prefers-reduced-motion:reduce){.jm-scene--art .jm-scene__stage,.jm-path,.jm-lead,.jm-pin__target{transition:none}}

/* 11-2. 강점 카드 그림: 원래 카드 구조는 그대로, 그림은 카드 맨 위 가상 요소로 */
:root:not(#jm) .jm-hl-art{display:flex!important;flex-direction:column}
:root:not(#jm) .jm-hl-art::before{content:"";display:block;order:-1;flex:0 0 auto;width:100%;aspect-ratio:4/3;margin:0 0 20px;border-radius:16px;
  background:#fff var(--jm-art) center/contain no-repeat}
:root:not(#jm) .jm-hl-art.product-highlights__card--wide::before{aspect-ratio:16/9}
@media (max-width:767px){:root:not(#jm) .jm-hl-art::before{aspect-ratio:16/10;margin-bottom:16px}}

/* 11-3. 상담 확인표 */
:root:not(#jm) .jm-consult.jm-consult--check{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  :root:not(#jm) .jm-consult.jm-consult--check{grid-template-columns:minmax(0,1fr) minmax(360px,440px);grid-template-areas:"copy check" "act check";align-items:start!important;row-gap:32px!important}
  :root:not(#jm) .jm-consult--check .jm-consult__copy{grid-area:copy}
  :root:not(#jm) .jm-consult--check .jm-check{grid-area:check;align-self:center}
  :root:not(#jm) .jm-consult--check .jm-consult__actions{grid-area:act;justify-self:start;justify-content:flex-start}
}
.jm-check{width:100%;padding:22px 24px 10px;border-radius:24px;background:#fff;color:var(--jm-ink);
  box-shadow:0 0 0 1px rgba(15,27,45,.06),0 24px 48px -28px rgba(15,27,45,.35)}
.jm-check__head{display:flex;align-items:center;gap:14px;margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.jm-check__ring{--p:0;position:relative;display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto}
.jm-check__ring svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.jm-check__ring circle{fill:none;stroke-width:4}
.jm-check__ring .t{stroke:rgba(15,27,45,.1)}
.jm-check__ring .v{stroke:var(--jm-accent);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset 600ms var(--jm-ease-out)}
.jm-check__ring b{position:relative;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.jm-check__ring b small{font-size:11px;font-weight:700;opacity:.55}
.jm-check__list{list-style:none;margin:0;padding:0}
.jm-check__list li{border-top:1px solid rgba(15,27,45,.08)}
.jm-check__list li:first-child{border-top:0}
.jm-check__item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 4px;cursor:pointer;border-radius:12px;
  font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.01em;color:var(--jm-ink);-webkit-tap-highlight-color:transparent;transition:background-color 150ms ease}
.jm-check__item:hover{background:rgba(15,27,45,.035)}
.jm-check__item:focus-visible{outline:2px solid var(--jm-ink);outline-offset:2px}
.jm-check__item:active .jm-check__box{transform:scale(.9)}
.jm-check__box{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(15,27,45,.28);color:#fff;
  transition:background-color 250ms ease,border-color 250ms ease,transform 250ms var(--jm-ease-out)}
.jm-check__box svg{width:15px;height:15px;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 350ms var(--jm-ease-out) 80ms}
.jm-check__item[aria-pressed=true] .jm-check__box{background:var(--jm-ink);border-color:var(--jm-ink)}
.jm-check__item[aria-pressed=true] .jm-check__box svg{stroke-dashoffset:0}
.jm-check__item.is-hint:not([aria-pressed=true]) .jm-check__box{animation:jm-check-hint 1400ms ease-out 1}
@keyframes jm-check-hint{0%,100%{box-shadow:0 0 0 0 rgba(15,27,45,0)}40%{box-shadow:0 0 0 7px rgba(15,27,45,.12)}}
.jm-check__ring{width:64px;height:64px}
.jm-check__ring .v{stroke:var(--jm-ink)}
.jm-check__ring b{font-size:18px}
.jm-check__cta{display:flex;align-items:center;justify-content:center;min-height:52px;margin:6px 0 14px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;
  color:var(--jm-ink);background:rgba(15,27,45,.06);transition:background-color 250ms ease,color 250ms ease}
.jm-check__cta:hover{background:rgba(15,27,45,.1)}
.jm-check.is-full .jm-check__cta{background:var(--jm-ink);color:#fff}

/* 11-4. 위쪽 하위 메뉴(PC·태블릿): 헤더 바로 아래 붙는 얇은 유리 막대(왼쪽 제품명, 오른쪽 바로가기). 헤더가 숨으면 맨 위로 */
.jm-subnav{position:fixed;left:0;right:0;top:var(--header-height,64px);z-index:39;translate:0 -100%;opacity:0;pointer-events:none;
  background:var(--jm-glass);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 .5px 0 rgba(0,27,55,.12);transition:translate 400ms var(--jm-spring),opacity 250ms ease,top .3s cubic-bezier(0,0,.2,1)}
.jm-subnav.is-on{translate:0 0;opacity:1;pointer-events:auto}
.jm-subnav__inner{display:flex;align-items:center;gap:24px;width:min(1280px,calc(100% - 80px));height:56px;margin:0 auto}
.jm-subnav__name{flex:0 1 auto;min-width:0;font-size:16px;font-weight:750;letter-spacing:-.02em;color:var(--jm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jm-subnav ul{display:flex;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}
.jm-subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--jm-muted);text-decoration:none;white-space:nowrap;transition:background-color 200ms ease,color 200ms ease}
.jm-subnav a:hover{color:var(--jm-ink);background:rgba(15,27,45,.05)}
.jm-subnav a.is-cur{color:var(--jm-ink);background:rgba(15,27,45,.07);font-weight:700}
@media (max-width:1023px){.jm-subnav__inner{width:calc(100% - 48px)}.jm-subnav__name{display:none}.jm-subnav ul{margin:0 auto}}
@media (max-width:767px){.jm-subnav{display:none}}
@media (prefers-reduced-transparency:reduce){.jm-subnav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.jm-subnav{background:#fff;box-shadow:0 1.5px 0 currentColor}}
@media (prefers-reduced-motion:reduce){.jm-subnav,.jm-check__ring .v,.jm-check__box,.jm-check__box svg,.jm-pin__dot,.jm-pin__tag{transition:none}.jm-pin.is-active .jm-pin__dot{animation:none}}
/* 넓은·반폭 강점 카드: PC 에서는 그림을 글 오른쪽에, 그림이 카드 높이를 채움 → 옆 카드와 높이 균형 */
@media (min-width:1024px){
  :root:not(#jm) .jm-hl-art:is(.product-highlights__card--wide,.product-highlights__card--half){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:1fr auto;column-gap:28px;align-items:end}
  :root:not(#jm) .jm-hl-art:is(.product-highlights__card--wide,.product-highlights__card--half)>*{grid-column:1;margin-bottom:0}
  :root:not(#jm) .jm-hl-art:is(.product-highlights__card--wide,.product-highlights__card--half)::before{grid-column:2;grid-row:1/span 2;align-self:stretch;aspect-ratio:auto;min-height:200px;margin:0;background-size:cover}
}
/* 시그니처 단계가 카드 모양(ir3)일 때: 단계 모드에서는 카드 테두리·바탕을 걷어 글 단계로 */
@media (min-width:1024px){
  html.jm-on .jm-steps .jm-steps__list>article{background:none!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important;border-radius:0!important}
  html.jm-on .jm-steps .jm-steps__list>article>small{display:none!important}
}
/* 11-5. 그림 장면(섹션 사이 새 블록): 현장 모형 + 번호 핀·이름표(그 쪽 문장의 낱말) */
.jm-art{position:relative;margin:clamp(8px,2vw,24px) auto clamp(56px,8vw,112px)}
.jm-art__stage{position:relative;aspect-ratio:var(--ar,16/9);border-radius:32px;overflow:hidden;background:#eef0f2}
.jm-art__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jm-art .jm-pin .jm-pin__dot{background:var(--jm-accent);color:var(--jm-pin-ink,#fff);scale:.4;opacity:0;transition:scale 500ms var(--jm-ease-pop) calc(var(--i) * 260ms + 200ms),opacity 200ms ease calc(var(--i) * 260ms + 200ms)}
.jm-art .jm-pin .jm-pin__tag{transition:opacity 300ms ease calc(var(--i) * 260ms + 380ms),scale 400ms var(--jm-ease-pop) calc(var(--i) * 260ms + 380ms)}
.jm-art.is-lit .jm-pin .jm-pin__dot{scale:1;opacity:1}
.jm-art.is-lit .jm-pin .jm-pin__tag{opacity:1;scale:1}
.jm-art__legend{display:none}
@media (max-width:767px){
  .jm-art__stage{border-radius:20px}
  .jm-art .jm-pin__dot{width:26px;height:26px;font-size:11px}
  .jm-art .jm-pin__tag{display:none}
  .jm-art__legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 2px 0;padding:0;list-style:none;font-size:14px;font-weight:600;color:var(--jm-ink)}
  .jm-art__legend li{display:inline-flex;align-items:center;gap:6px}
  .jm-art__legend b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:800;background:var(--jm-accent);color:var(--jm-pin-ink,#fff)}
}
@media (prefers-reduced-motion:reduce){.jm-art .jm-pin .jm-pin__dot,.jm-art .jm-pin .jm-pin__tag{transition:none}}
.jm-subnav.is-dark{--jm-glass:var(--jm-glass-dark);box-shadow:0 .5px 0 rgba(255,255,255,.12)}
.jm-subnav.is-dark .jm-subnav__name{color:#fff}
.jm-subnav.is-dark a{color:rgba(255,255,255,.72)}
.jm-subnav.is-dark a:hover,.jm-subnav.is-dark a.is-cur{color:#fff;background:rgba(255,255,255,.12)}
/* 하위 메뉴가 보이는 동안 하단 바는 제품명·부제를 숨기고 버튼만(같은 말 반복 제거) */
@media (min-width:768px){
  html.jm-sub-on .jm-bar{width:max-content}
  html.jm-sub-on .jm-bar__name,html.jm-sub-on .jm-bar__line{display:none}
  html.jm-sub-on .jm-bar__inner{padding-left:var(--pad)}
}
/* 시그니처 머리 제목이 좁은 폭에 묶여 '대피 / 안내까지'처럼 끊기지 않게 */
html.jm-on .jm-steps h2{max-width:none!important;text-wrap:balance}
html.jm-on .jm-steps :is(header,[class*=__header]){max-width:none!important}
/* 밝은 강점 카드의 그림 바탕은 카드 바탕과 섞어 경계가 안 보이게(어두운 첫 카드는 흰 판 유지) */
:root:not(#jm) .jm-hl-art:not(.product-highlights__card--anchor)::before{background-color:transparent;mix-blend-mode:multiply}
/* 어두운 단계 구간의 단계 점 테두리도 쪽 강조색(원래 초록 고정) */
.jm-steps-color.jm-on-dark ol>li::before{border-color:var(--jm-accent)!important}
/* 바탕 판이 있는 첫 화면(화재): 바깥 판 32 > 안쪽 사진 24 (안쪽이 바깥보다 둥글지 않게) */
:root:not(#jm) .fire-detection-hero{border-radius:32px!important}
:root:not(#jm) .fire-detection-hero__visual .media-frame{border-radius:24px!important}
@media (max-width:767px){:root:not(#jm) .fire-detection-hero{border-radius:24px!important}:root:not(#jm) .fire-detection-hero__visual .media-frame{border-radius:16px!important}}
/* 형광 표시(mark)가 있는 제목: 40px 규칙에서 줄이 붙어 표시 상자가 윗줄에 닿지 않게 줄 간격 확보 */
html:root:not(#jm):not(#jm2) #story h2:has(mark),html:root:not(#jm):not(#jm2) #story h2:has(mark) .j-motion-word{line-height:1.38!important}
/* 단계 모드: 원래 단계 항목이 카드·고정 높이여도 글 단계로(바탕·테두리·그림자 제거, 높이 0.8화면) */
@media (min-width:1024px){
  html.jm-on .jm-steps .jm-steps__list>*{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;height:auto!important;max-height:none!important;padding-left:0!important;padding-right:0!important}
  html.jm-on .jm-steps:has(.jm-scene--art) .jm-steps__list>*{min-height:80vh!important}
}
/* 1묶음 검수 반영(2026-10-06) */
@media (min-width:1024px){
  /* 시그니처 머리 2단 틀: 아래쪽 정렬이면 한 줄 제목이 옆 문단 끝으로 내려가 머리말과 벌어짐 → 위쪽 정렬 */
  html.jm-on :is(.jm-steps .jm-steps__grid,.jm-steps.jm-steps__grid)>header{align-items:start!important}
  /* 단계 글은 항목 세로 가운데(원래 CSS 의 위쪽 붙임보다 우선) */
  html.jm-on .jm-steps .jm-steps__list>*{justify-content:center!important}
}
/* 확대 중 그림 가장자리에 걸린 비활성 핀은 숨김(JS 가 is-clip 부여) */
.jm-pin.is-clip:not(.is-active){opacity:0!important;transition:opacity 200ms ease}
/* 강점: 옆 카드에 그림이 들어가 키가 커지면 숫자 카드는 숫자 위·설명 아래로 펼쳐 빈 아래를 없앰 */
:root:not(#jm) .product-highlights__grid:has(.jm-hl-art) .product-highlights__card--metric{display:flex!important;flex-direction:column;justify-content:space-between}
:root:not(#jm) .product-highlights__grid:has(.jm-hl-art) .product-highlights__card--metric .product-highlights__metric{font-size:clamp(44px,4.4vw,64px)!important;line-height:1.05}
/* 확인표 고리 '/3' 대비 */
.jm-check__ring b small{opacity:.72}
/* 1묶음 재검수 반영: 밝은 구간의 지나간·다가올 단계 글은 덜 흐리게(대비 4.5:1 이상), 가운데 정렬 첫 화면의 판매 포인트도 가운데 */
@media (min-width:1024px){html.jm-on .jm-steps:not(.jm-on-dark) .jm-steps__list>*:not(.is-active){opacity:.9!important}}
:root:not(#jm) .jm-hero-center .jm-hero-facts{justify-content:center!important;align-items:center!important;text-align:center}
/* 그림 장면: 대상 점·연결선, 4:3 그림은 너비를 줄여 화면 한 장을 넘지 않게 */
.jm-art__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jm-art__lines line{stroke:rgba(15,27,45,.6);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity 300ms ease .3s}
.jm-art.is-lit .jm-art__lines line{opacity:1}
.jm-art .jm-pin__target{--z:1;background:var(--jm-accent)}
.jm-art.jm-art--43 .jm-art__stage{max-width:min(880px,100%);margin-inline:auto}
.jm-art.jm-art--43 .jm-art__legend{max-width:min(880px,100%);margin-inline:auto}
/* 가운데 정렬 첫 화면: 문단 폭 제한이 걸려도 숫자 묶음 상자 자체를 가운데로 */
:root:not(#jm) .jm-hero-center .jm-hero-stat{margin-inline:auto!important;width:fit-content;max-width:100%}
/* 3묶음 검수 반영: 단계 모드에서 목록 자체의 카드 장식(테두리·모서리·그림자, 원래 가로 타임라인 선)과 칸 안 장식 원을 걷음.
   왼쪽 진행선(border-left·배경 그라데이션)은 우리 것이라 유지 */
@media (min-width:1024px){
  html.jm-on .jm-steps .jm-steps__list{border-top:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important;box-shadow:none!important}
  html.jm-on .jm-steps .jm-steps__list>*>.jm-deco{display:none!important}
}
/* 강점 큰 카드 제목도 카드 h3 규칙(최대 28) */
:root:not(#jm) .product-highlights__card--anchor h3{font-size:clamp(22px,2.2vw,28px)!important}
/* 그림 장면: 앞 섹션과 위 여백을 아래 여백만큼 */
.jm-art{margin-top:clamp(48px,7vw,96px)}

/* 11-6. 제목 줄 고르게: 글자 크기가 바뀐 뒤 마지막 줄에 낱말 하나만 남거나 말 덩어리가 갈라지는 것 방지(재검수 L1) */
html.jm-on:root:not(#jm):not(#jm2) .dedicated-product-page :is(#story,#highlights) :is(h2,h3){text-wrap:balance;word-break:keep-all}