.lc-smt-line { color: #0f172a; }
.lc-line-scroll { overflow-x: auto; overflow-y: hidden; padding: 16px 8px 64px; }
.lc-line-track { position: relative; display: flex; align-items: end; gap: 0; min-width: 1180px; aspect-ratio: 5.78; border-bottom: 1px solid #ff9c57; isolation: isolate; background: radial-gradient(ellipse 48% 7% at 50% 99%, #627b941f, transparent); }
.lc-line-stage { position: relative; z-index: var(--stage-layer,0); flex: var(--stage-share) 1 0; height: 100%; min-width: 0; text-decoration: none; pointer-events: none; }
.lc-line-stage[data-line-asset="spi"] { --stage-layer: 1; }
.lc-line-stage:hover, .lc-line-track:not(:has(.lc-line-stage:hover)) .lc-line-stage:focus-visible { --stage-layer: 2; --stage-scale: 1.05; --stage-filter: drop-shadow(0 0 8px #ff660070); --marker-opacity: 0; --label-opacity: 1; }
.lc-line-visual { position: absolute; left: 0; bottom: 0; width: var(--image-width); pointer-events: auto; }
.lc-line-stage img { display: block; width: 100%; max-width: none; height: auto; transform: scale(var(--stage-scale,1)); transform-origin: center bottom; filter: var(--stage-filter,none); transition: transform .2s ease, filter .2s ease; pointer-events: none; }
.lc-line-stage:focus-visible { outline: 2px solid #ff6600; outline-offset: 5px; border-radius: 4px; }
.lc-line-marker { position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); box-sizing: border-box; width: 12px; height: 12px; background: #fff; border: 3px solid #ff6600; border-radius: 50%; opacity: var(--marker-opacity,1); box-shadow: 0 0 8px #ff660077; }
.lc-line-marker::after { content: ""; position: absolute; inset: -8px; border: 2px solid #ff6600; border-radius: 50%; box-shadow: 0 0 12px #ff660066; animation: lc-line-breathe 2s ease-in-out infinite; }
@keyframes lc-line-breathe { 0%,100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } }
.lc-line-label { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); padding: 3px 7px; color: #b44700; font-size: 13px; font-weight: 700; white-space: nowrap; background: #fff8f1; border-radius: 4px; opacity: var(--label-opacity,0); pointer-events: none; }
.lc-line-track:has([data-line-group="conveyor"]:hover),
.lc-line-track:not(:has(.lc-line-stage:hover)):has([data-line-group="conveyor"]:focus-visible) { --conveyor-scale: 1.05; --conveyor-filter: drop-shadow(0 0 8px #ff660070); --conveyor-marker: 0; --conveyor-active: 1; --conveyor-layer: 2; }
.lc-line-track:has([data-line-group="aoi"]:hover),
.lc-line-track:not(:has(.lc-line-stage:hover)):has([data-line-group="aoi"]:focus-visible) { --aoi-scale: 1.05; --aoi-filter: drop-shadow(0 0 8px #ff660070); --aoi-marker: 0; --aoi-active: 1; --aoi-layer: 2; }
.lc-line-stage[data-line-group="conveyor"] { --stage-scale: var(--conveyor-scale,1); --stage-filter: var(--conveyor-filter,none); --marker-opacity: var(--conveyor-marker,1); --stage-layer: var(--conveyor-layer,0); }
.lc-line-stage[data-line-group="aoi"] { --stage-scale: var(--aoi-scale,1); --stage-filter: var(--aoi-filter,none); --marker-opacity: var(--aoi-marker,1); --stage-layer: var(--aoi-layer,0); }
.lc-line-stage[data-line-group="conveyor"] .lc-line-marker { top: 12%; }
.lc-line-stage[data-line-group="conveyor"] .lc-line-label, .lc-line-stage[data-line-group="aoi"] .lc-line-label { display: none; }
.lc-line-group-link { position: absolute; top: calc(100% + 10px); height: 0; border-top: 2px solid #ff6600; z-index: 3; pointer-events: none; opacity: var(--label-opacity,0); }
.lc-line-group-link[data-line-annotation="conveyor"] { --label-opacity: var(--conveyor-active,0); }
.lc-line-group-link[data-line-annotation="aoi"] { --label-opacity: var(--aoi-active,0); }
.lc-line-group-tick { position: absolute; top: -10px; height: 9px; border-left: 2px solid #ff6600; }
.lc-line-group-link .lc-line-label { top: 8px; }
.lc-line-section { max-width: 1600px; margin: 36px auto; padding: 30px 36px; background: radial-gradient(ellipse at 18% 0%, #fff9 0%, transparent 65%), linear-gradient(180deg, #f4f8fb 0%, #eaf1f6 100%); border: 1px solid #d3dfeb; border-radius: 12px; }
.lc-line-section h1 { margin: 0 0 12px; font-size: clamp(26px,3vw,42px); text-align: center; }
@media (max-width: 640px) { .lc-line-section { margin: 24px 16px; padding: 24px 16px; } }
@media (prefers-reduced-motion: reduce) { .lc-line-stage img { transition: none; transform: none; } .lc-line-marker::after { animation: none; } }