diff --git a/assets/media/local-election-2026-premium.webp b/assets/media/local-election-2026-premium.webp new file mode 100644 index 0000000..cf46cba Binary files /dev/null and b/assets/media/local-election-2026-premium.webp differ diff --git a/index.html b/index.html index 1f89959..1142f02 100644 --- a/index.html +++ b/index.html @@ -340,26 +340,8 @@
- - 2026 지방선거 지역민방 그래픽 쇼케이스 + 2026 지방선거 지역민방 방송 그래픽 운영 쇼케이스
-
-
- 2026 지방선거 지역민방 타이틀 그래픽 -
Title
-
-
- 2026 지방선거 광역단체장 1위 후보 그래픽 -
Candidate
-
-
- 2026 지방선거 기초단체장 판세 그래픽 -
Landscape
-
-
diff --git a/script.js b/script.js index aba3816..1cf9202 100644 --- a/script.js +++ b/script.js @@ -15,7 +15,7 @@ const caseData = { "채널별 스케줄 큐, 반복 컷, 다음/대기/송출 상태를 분리한 운영 UI 개발" ], images: [ - { src: "assets/media/local-election-2026-suite.webp", alt: "2026 지방선거 지역민방 그래픽 쇼케이스" }, + { src: "assets/media/local-election-2026-premium.webp", alt: "2026 지방선거 지역민방 방송 그래픽 운영 쇼케이스" }, { src: "assets/media/local-election-2026-race.webp", alt: "2026 지방선거 광역단체장 1위 후보 그래픽" }, { src: "assets/media/local-election-2026-landscape.webp", alt: "2026 지방선거 기초단체장 판세 그래픽" } ] diff --git a/styles.css b/styles.css index 7635e44..baac176 100644 --- a/styles.css +++ b/styles.css @@ -909,8 +909,8 @@ body.is-ready .loader { .election-spotlight__grid { display: grid; - grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr); - gap: 58px; + grid-template-columns: minmax(0, 0.72fr) minmax(580px, 1.12fr); + gap: 48px; align-items: center; } @@ -966,101 +966,22 @@ body.is-ready .loader { .election-showcase { position: relative; margin: 0; - border: 1px solid var(--line); + border: 1px solid rgba(241, 238, 230, 0.14); border-radius: 6px; background: #050505; overflow: hidden; - box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34); -} - -.election-showcase::before { - content: ""; - position: absolute; - inset: 14px; - z-index: 2; - pointer-events: none; - border: 1px solid rgba(200, 255, 73, 0.18); + box-shadow: + 0 32px 100px rgba(0, 0, 0, 0.42), + 0 0 0 1px rgba(200, 255, 73, 0.04); } .election-showcase img { + display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } -.election-showcase__bar { - position: absolute; - top: 14px; - left: 14px; - right: 14px; - z-index: 3; - display: flex; - align-items: center; - gap: 7px; - min-height: 34px; - padding: 0 12px; - border: 1px solid rgba(241, 238, 230, 0.18); - border-radius: 4px; - background: rgba(7, 7, 6, 0.7); - backdrop-filter: blur(10px); -} - -.election-showcase__bar span { - width: 7px; - height: 7px; - border-radius: 999px; - background: var(--muted-dark); -} - -.election-showcase__bar span:first-child { - background: var(--hot-2); -} - -.election-showcase__bar span:nth-child(2) { - background: var(--signal); -} - -.election-showcase__bar strong { - margin-left: auto; - color: var(--paper-2); - font-family: var(--mono); - font-size: 0.68rem; - font-weight: 600; -} - -.election-preview-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; -} - -.election-preview-grid figure { - position: relative; - margin: 0; - border: 1px solid var(--line); - border-radius: 5px; - background: #050505; - overflow: hidden; -} - -.election-preview-grid img { - width: 100%; - aspect-ratio: 16 / 9; - object-fit: cover; - opacity: 0.76; -} - -.election-preview-grid figcaption { - position: absolute; - left: 10px; - bottom: 8px; - color: var(--paper); - font-family: var(--mono); - font-size: 0.66rem; - font-weight: 600; - text-transform: uppercase; -} - .station-strip { display: grid; grid-template-columns: repeat(7, 1fr); @@ -1881,10 +1802,6 @@ html.js .reveal[data-delay="2"] { grid-template-columns: repeat(2, 1fr); } - .election-preview-grid { - grid-template-columns: 1fr; - } - .value-strip strong, .system-list div, .system-list div:nth-child(2n),