/* Lucian UX/UI Prompt #318 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#318 */
.u318 { position:relative; width:100%; aspect-ratio:16/9; min-height:650px; margin-top:65px; color:var(--ink); background:var(--paper); }
.u318, .u318 * { box-sizing:border-box; }
.u318 .u318-hd { padding-top:30px; }
.u318 .u318-hd > p { font-size:13px; color:var(--blue); font-weight:700; letter-spacing:.025em; margin:0 0 20px; }
.u318 .u318-hd h3 { font-size:clamp(34px,3.5vw,60px); line-height:1.2; letter-spacing:-.04em; margin:0; display:inline-block; }
.u318 .u318-hd h3::after { content:""; display:block; width:48%; height:5px; background:var(--red); border-radius:50%; margin:8px 0 0 auto; transform:rotate(-1deg); }
.u318 .u318-map { position:absolute; top:28%; bottom:4%; left:0; right:0; }
.u318 .u318-map svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.u318 .u318-guide { fill:none; stroke:#c9c3f0; stroke-width:3; stroke-dasharray:8 10; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.u318 .u318-route { fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.u318 .u318-dot { fill:var(--paper); stroke:var(--blue); stroke-width:3; vector-effect:non-scaling-stroke; }
.u318 .u318-dotc { fill:var(--blue); transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .45s cubic-bezier(.34,1.45,.64,1); }
.u318 .u318-dotc.on { transform:scale(1); }
.u318 .u318-dot-label { fill:var(--blue); font-family:Arial,sans-serif; font-size:20px; font-weight:700; text-anchor:middle; dominant-baseline:central; }
.u318 .u318-dot-label.on { fill:white; }
.u318 .u318-pl { fill:var(--paper); stroke:var(--red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.u318 .u318-stops { list-style:none; padding:0; margin:0; }
.u318 .u318-card { position:absolute; top:0; width:18%; padding:0; }
.u318 .u318-card:nth-child(1) { left:0; }
.u318 .u318-card:nth-child(2) { left:20%; top:73%; }
.u318 .u318-card:nth-child(3) { left:40%; }
.u318 .u318-card:nth-child(4) { left:60%; top:73%; }
.u318 .u318-card:nth-child(5) { left:81%; width:19%; }
.u318 .u318-number { display:block; color:var(--red); font-size:clamp(27px,2.6vw,44px); font-weight:700; letter-spacing:-.035em; margin-bottom:4px; transition:color .3s; }
.u318 .u318-card.on .u318-number { color:var(--blue); }
.u318 .u318-card h4 { margin:0 0 10px; font-size:clamp(23px,2vw,34px); letter-spacing:-.025em; line-height:1.2; }
.u318 .u318-card p { color:var(--muted); font-size:clamp(15px,1.22vw,20px); line-height:1.6; margin:0; }
@media (max-width:1100px) and (min-width:961px) {
 .u318 { min-height:690px; }
 .u318 .u318-map { top:30%; }
 .u318 .u318-card { width:19%; }
 .u318 .u318-card h4 { font-size:22px; }
 .u318 .u318-card p { font-size:14px; }
}
@media (max-width:960px) {
 .u318 { aspect-ratio:auto; min-height:0; margin-top:40px; }
 .u318 .u318-hd { padding-top:15px; }
 .u318 .u318-hd h3 { font-size:clamp(28px,6.7vw,42px); }
 .u318 .u318-hd > p { font-size:11px; }
 .u318 .u318-map { position:relative; inset:auto; height:900px; margin-top:40px; }
 .u318 .u318-card:nth-child(n) { left:30%; top:0; width:70%; }
 .u318 .u318-card:nth-child(2) { top:20%; }
 .u318 .u318-card:nth-child(3) { top:40%; }
 .u318 .u318-card:nth-child(4) { top:60%; }
 .u318 .u318-card:nth-child(5) { top:80%; }
 .u318 .u318-card h4 { font-size:24px; }
 .u318 .u318-card p { font-size:15px; }
 .u318 .u318-number { font-size:28px; }
}
@media (prefers-reduced-motion:reduce) {
 .u318 * { transition:none !important; }
 .u318 .u318-pl { display:none; }
 .u318 .u318-dotc { transform:scale(1); }
}