/* ════════════════════════════════════════════════════════════════
   GP WORKS — Banner v2 shared styles (1860×450 / 900×220)
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root{
  --navy:#1a2540;--navy-d:#0E1A33;--navy-l:#243A6E;--navy-x:#0A1426;
  --gold:#F4B84A;--gold-d:#C99334;--gold-l:#F8DFA0;
  --silver:#D5DCE6;--silver-d:#7E8A9B;
  --red:#E63946;--blue:#2C7BFF;--green:#4CC36A;
  --ink:#0B0B0C;--paper:#FFFFFF;
  --font-d:"Oswald",sans-serif;
  --font-c:"Barlow Condensed","Oswald",sans-serif;
  --font-s:"Noto Sans KR",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#000;color:#fff;font-family:var(--font-s);-webkit-font-smoothing:antialiased;}
img{display:block;}

/* Banner container — exact pixel size */
.banner{position:relative;width:100%;height:100%;overflow:hidden;background:var(--navy);}
.banner *{box-sizing:border-box;}

/* PC frame */
body.pc{width:1860px;height:450px;margin:0;}
body.pc .banner{width:1860px;height:450px;}

/* Mobile frame */
body.m{width:900px;height:220px;margin:0;}
body.m .banner{width:900px;height:220px;}

/* ─── Common background layers ─── */
.bg-base{position:absolute;inset:0;background:linear-gradient(180deg,#1F2D4D 0%,#1a2540 45%,#0E1A33 100%);}
.bg-photo{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}
.bg-photo.workshop{background-image:url("assets/workshop.jpeg");filter:grayscale(.8) brightness(.55) contrast(1.1);opacity:.22;}
.bg-photo.bushing{background-image:url("assets/bushing.jpg");filter:grayscale(.6) brightness(.55) contrast(1.15);opacity:.18;}
.bg-diagram{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140%;height:280%;
  background:url("assets/exploded.jpg") center/contain no-repeat;
  filter:invert(1) brightness(2) contrast(1.1) sepia(.2) hue-rotate(180deg) saturate(.4);
  opacity:.10;pointer-events:none;}
.bg-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(244,184,74,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,184,74,.05) 1px,transparent 1px);
  background-size:60px 60px;background-position:center;pointer-events:none;}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(10,20,38,.55) 100%);pointer-events:none;}

/* ─── Gold hairlines (top + bottom) ─── */
.hair{position:absolute;left:48px;right:48px;height:1px;background:var(--gold);box-shadow:0 0 8px rgba(244,184,74,.45);}
.hair.t{top:24px;}
.hair.b{bottom:24px;}
.hair::after{content:'';position:absolute;top:-1px;left:0;width:280px;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-l),#fff,var(--gold-l),transparent);
  filter:blur(2px);}
body.m .hair{left:24px;right:24px;}
body.m .hair.t{top:14px;}
body.m .hair.b{bottom:14px;}

/* ─── Brand marks ─── */
.fp-logo{position:absolute;top:34px;right:54px;height:38px;z-index:5;}
.fp-logo img{height:100%;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));}
body.m .fp-logo{top:22px;right:26px;height:22px;}

.gpw-wm{position:absolute;top:32px;left:54px;display:flex;flex-direction:column;gap:2px;line-height:1;z-index:5;}
.gpw-wm .w{font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--silver);text-shadow:0 2px 6px rgba(0,0,0,.5);}
.gpw-wm .s{font-family:var(--font-c);font-size:10px;font-weight:600;letter-spacing:.34em;color:var(--gold);}
body.m .gpw-wm{top:20px;left:26px;}
body.m .gpw-wm .w{font-size:18px;}
body.m .gpw-wm .s{font-size:8px;letter-spacing:.28em;}

/* ─── Dealer pill (used in genuine banners) ─── */
.dealer-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(244,184,74,.34);border-radius:99px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.dealer-pill img{height:18px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.dealer-pill img.daiwa{height:14px;}
.dealer-pill .lab{font-family:var(--font-s);font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1;}
.dealer-pill .lab .en{display:block;font-family:var(--font-c);font-size:9.5px;font-weight:600;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:2px;}

/* ─── CTA pill ─── */
.cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  background:var(--gold);color:var(--navy-d);font-family:var(--font-s);font-weight:900;font-size:14px;
  border-radius:99px;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(244,184,74,.34),inset 0 1px 0 rgba(255,255,255,.4);}
.cta .arr{font-family:var(--font-d);font-weight:700;font-size:16px;}

/* eyebrow */
.eye{font-family:var(--font-c);font-size:13px;font-weight:700;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;line-height:1;}
body.m .eye{font-size:10px;letter-spacing:.24em;}