first commit 2

rb/rb.mod/banner/skin/border_anim/banner.skin.php

@@ -0,0 +1,20 @@
+<?php
+if (!defined('_GNUBOARD_')) exit;
+/**
+ * rb.mod.banner :: border_anim/banner.skin.php
+ * 배너 그룹 스킨 (래퍼)
+ */
+
+// CSS 로드
+add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/border_anim/style.css">', 0);
+
+// 배너 목록이 있으면 루프를 돌며 skin.php를 include
+if (isset($banners) && is_array($banners)) {
+    foreach ($banners as $banner) {
+        include(dirname(__FILE__).'/skin.php');
+    }
+} else if (isset($banner)) {
+    // 단일 배너인 경우
+    include(dirname(__FILE__).'/skin.php');
+}
+?>

rb/rb.mod/banner/skin/border_anim/skin.php

@@ -0,0 +1,24 @@
+<?php
+if (!defined('_GNUBOARD_')) exit;
+/**
+ * rb.mod.banner :: border_anim/skin.php
+ * 단일 배너 아이템 스킨
+ */
+?>
+<div class="rb-banner-border-anim">
+    <a href="<?php echo $banner['bn_url']; ?>" 
+       target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
+       onclick="banner_click_count(this); return true;"
+       data-banner-id="<?php echo $banner['bn_id']; ?>">
+        <div class="banner-image">
+            <?php echo $banner['bn_img']; ?>
+        </div>
+        <div class="banner-content">
+            <h3><?php echo get_text($banner['bn_alt']); ?></h3>
+        </div>
+        <div class="border-top-left"></div>
+        <div class="border-top-right"></div>
+        <div class="border-bottom-left"></div>
+        <div class="border-bottom-right"></div>
+    </a>
+</div>

rb/rb.mod/banner/skin/border_anim/style.css

@@ -0,0 +1,71 @@
+.rb-banner-border-anim {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.rb-banner-border-anim a {
+    display: block;
+    text-decoration: none;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.rb-banner-border-anim .banner-image {
+    width: 100%;
+    height: 100%;
+}
+
+.rb-banner-border-anim .banner-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.rb-banner-border-anim .banner-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    background: rgba(0,0,0,0.5);
+    padding: 10px 20px;
+    border-radius: 5px;
+    width: 90%;
+}
+
+.rb-banner-border-anim:hover .banner-content {
+    opacity: 1;
+}
+
+.rb-banner-border-anim h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.rb-banner-border-anim [class^="border-"] {
+    position: absolute;
+    background-color: #fff;
+    transition: all 0.3s ease-in-out;
+}
+.rb-banner-border-anim .border-top-left, .rb-banner-border-anim .border-top-right { height: 3px; width: 0; }
+.rb-banner-border-anim .border-bottom-left, .rb-banner-border-anim .border-bottom-right { width: 3px; height: 0; }
+
+.rb-banner-border-anim .border-top-left { top: 0; left: 0; }
+.rb-banner-border-anim .border-top-right { top: 0; right: 0; }
+.rb-banner-border-anim .border-bottom-left { bottom: 0; left: 0; }
+.rb-banner-border-anim .border-bottom-right { bottom: 0; right: 0; }
+
+.rb-banner-border-anim:hover .border-top-left, .rb-banner-border-anim:hover .border-top-right { width: 100%; }
+.rb-banner-border-anim:hover .border-bottom-left, .rb-banner-border-anim:hover .border-bottom-right { height: 100%; }