/* GRID & SHAPE: Custom Spaces → 격자 안의 그래픽 작업. Individually editable composition. */
:root{--paper:#f6f7ff;--ink:#182e62;--accent:#345ce0;--surface:#dce3fc;--muted:color-mix(in srgb,var(--ink) 76%,var(--paper));--gutter:48px;--section:96px;--display:Albert,SUIT,sans-serif;--button-radius:2px}
.hero{padding:48px var(--gutter) 32px}.hero-copy{text-align:center;margin:0 auto 40px;max-width:720px}.hero-category{margin-bottom:16px}.hero h1{font-size:clamp(36px,4vw,56px)}.hero-lead{margin:20px auto 0;max-width:540px}.photo-ribbon{max-width:1600px;margin:auto;align-items:center;gap:24px}.photo-ribbon figure{flex-basis:calc((100% - 48px)/3)}.photo-ribbon figure:nth-child(2){flex-basis:calc((100% - 48px)/3 + 5%)}.photo-ribbon figure:first-child,.photo-ribbon figure:last-child{flex-shrink:1}.photo-ribbon img{height:380px}.photo-ribbon figure:nth-child(2) img{height:420px}.photo-ribbon figcaption{display:flex;justify-content:space-between;gap:16px}.photo-ribbon figcaption span{color:var(--muted)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;max-width:1360px;margin:24px auto 0;gap:24px;font-size:14px}@media(max-width:650px){.hero{padding-top:32px}.hero-copy{text-align:left;margin-bottom:32px}.hero-lead{margin:20px 0 0}.photo-ribbon{gap:12px;margin-right:-20px}.photo-ribbon figure,.photo-ribbon figure:nth-child(2){flex:0 0 85%}.photo-ribbon img,.photo-ribbon figure:nth-child(2) img{height:330px}.photo-ribbon figcaption{display:block}.photo-ribbon figcaption span{display:block}.hero-bottom{display:block}.hero-bottom>p{margin-top:16px}}
.entries{display:grid;grid-template-columns:1.25fr .75fr;gap:80px 6%;align-items:start}.entry:nth-child(2){padding-top:160px}.entry:nth-child(3){grid-column:1/-1;width:72%;margin:0 auto}.entry-media{aspect-ratio:5/4}.entry:nth-child(2) .entry-media{aspect-ratio:3/4}.entry:nth-child(3) .entry-media{aspect-ratio:16/9}.entry-copy{max-width:500px}.entry-copy h3{font-size:28px}@media(max-width:900px){.entries{gap:48px 32px}.entry:nth-child(2){padding-top:100px}}@media(max-width:650px){.entries{display:block}.entry,.entry:nth-child(2),.entry:nth-child(3){width:100%;padding:0;margin:0 0 40px}.entry:nth-child(2) .entry-media{aspect-ratio:5/4}.entry-copy h3{font-size:24px}}


@media(max-width:1000px){:root{--gutter:32px}}@media(max-width:650px){:root{--gutter:20px;--section:64px}}

/* Reviewed mobile and crop adjustments */
@media(max-width:650px){.photo-ribbon figure:first-child,.photo-ribbon figure:last-child{flex:0 0 85%}}
@media(max-width:400px){.hero h1{font-size:30px}}

/* Veyra Electric free prompt adaptation: product-explorer composition with a framed vehicle stage and control dock. */
:root{--paper:#6b879d;--ink:#fff;--accent:#edff39;--surface:#35586e;--muted:#e1eaf0;--gutter:clamp(20px,3vw,46px);--display:Inter,SUIT,sans-serif}
body{background:#6b879d;color:#fff}.brand-header{background:transparent;border:0;color:#fff}.brand-logo img{filter:brightness(0) invert(1)}.brand-header nav a{color:#fff}.hero{min-height:calc(100svh - 70px);padding:34px var(--gutter) 24px;display:grid;grid-template-columns:minmax(230px,.52fr) minmax(0,1.48fr);grid-template-rows:auto 1fr auto;gap:30px 5%;background:linear-gradient(145deg,#6b879d,#7897aa)}.hero-copy{text-align:left;max-width:500px;align-self:center;margin:0}.hero-category{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}.hero h1{font-size:clamp(46px,6.2vw,94px);line-height:.9;letter-spacing:-.07em;font-weight:500}.hero-lead{font-size:15px;line-height:1.6;max-width:320px;margin-top:24px;color:#e1eaf0}.photo-ribbon{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:1fr;max-width:none;gap:0;align-self:center;position:relative;border:3px solid #fff;border-radius:16px;overflow:hidden;background:#35586e;padding:0}.photo-ribbon figure{display:none}.photo-ribbon figure:first-child{display:block;flex-basis:auto}.photo-ribbon figure:first-child img{display:block;width:100%;height:clamp(390px,59vh,620px);object-fit:cover;filter:saturate(.72) contrast(.94)}.photo-ribbon figcaption{position:absolute;left:20px;bottom:16px;right:20px;display:flex;justify-content:space-between;color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.photo-ribbon:before,.photo-ribbon:after{content:'+';position:absolute;z-index:2;width:42px;height:42px;border:2px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:#10190c;background:#edff39;font-size:24px}.photo-ribbon:before{left:28%;top:44%}.photo-ribbon:after{right:22%;bottom:20%}.hero-bottom{grid-column:1/-1;grid-row:3;margin:0;max-width:none;border-top:1px solid #ffffff70;padding-top:14px;color:#e1eaf0}.hero-bottom .primary{background:#edff39;color:#10190c;border-radius:999px}.collection{background:#fff;color:#10190c;border-radius:36px 36px 0 0;padding-top:120px}.collection .section-top p{color:#53616c}.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.entry{background:#f3f5f6;padding:14px;border-radius:20px}.entry:nth-child(2),.entry:nth-child(3){padding-top:14px;width:auto;margin:0}.entry-media{aspect-ratio:1.2;background:#6b879d;border-radius:12px}.entry-copy h3{font-size:22px}.experience{background:#fff;color:#10190c}.story{background:#35586e;color:#fff}.brand-footer{background:#35586e;color:#fff}
@media(max-width:700px){.hero{display:flex;flex-direction:column;min-height:0;padding-top:24px;gap:22px}.hero-copy{order:1}.hero h1{font-size:52px}.photo-ribbon{order:2;width:100%}.photo-ribbon figure:first-child img{height:380px}.hero-bottom{order:3;display:flex;margin:0}.entries{display:block}.entry{margin-bottom:20px}.entry:nth-child(2),.entry:nth-child(3){padding-top:14px}.collection{padding-top:76px}}
