사용자

NodeulsumNaru(비교)

 r14 vs r15
 ...
 .stel-tab-container {
     margin: 20px auto; max-width: 540px;
     border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 35px; overflow: hidden;
-    background-color: #ff9a8b !important;
-    background-image:
-        radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
-        linear-gradient(45deg in oklch, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%, rgba(255,255,255,0.03)),
-        linear-gradient(160deg in oklch, #ffd3b6 0%, #ffaaa5 40%, #d4a5ff 80%, #a29bfe 100%) !important;
-    background-size: 15px 15px, 30px 30px, 100% 100%;
+    background: linear-gradient(160deg in oklch, #ffd3b6 0%, #ffaaa5 40%, #d4a5ff 80%, #a29bfe 100%) !important;
     box-shadow: 0 25px 50px rgba(255, 154, 139, 0.4);
 }
-/* 탭 네비게이션 */
+/* 상단 탭 버튼 영역 */
 .stel-tab-nav {
     display: flex; justify-content: center; background: rgba(0,0,0,0.1); backdrop-filter: blur(5px);
-    position: relative; z-index: 10;
+    position: sticky; top: 0; z-index: 10;
 }
 .stel-tab-btn {
     padding: 12px 20px; font-weight: bold; font-size: 14px; color: #fff !important; text-decoration: none;
 }
-/* 컨텐츠 박스: 그리드를 사용하여 모든 탭을 한 자리에 겹침 */
-.stel-content-box {
-    display: grid;
-    padding: 10px; text-align: center; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px);
+/* 🔥 핵심: 내용이 들어갈 상자 (높이를 고정하고 넘치는 부분을 숨김) */
+.stel-scroll-box {
+    height: 450px; /* 이 높이를 이미지/내용 크기에 맞춰 꼭 조절해주세요! */
+    overflow: hidden;
+    scroll-behavior: smooth; /* 부드럽게 넘어가게 함 */
 }
-.tab-item {
-    grid-area: 1 / 1 / 1 / 1; /* 모든 탭이 같은 칸에 위치함 */
-    visibility: hidden; /* 기본적으로 숨김 */
-    opacity: 0;
-    transition: opacity 0.3s;
+/* 각 기수별 컨텐츠 상자 (스크롤 상자와 높이를 맞춰야 함) */
+.tab-section {
+    height: 450px; /* 위 stel-scroll-box의 height와 동일하게 설정 */
+    padding: 15px 10px;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.05);
+    box-sizing: border-box;
 }
-/* 기본 상태: 1기생 노출 */
-#tab1 {
-    visibility: visible;
-    opacity: 1;
-    z-index: 1;
-}
-/* 클릭된 탭 노출 (2기, 3기 클릭 시) */
-#tab2:target, #tab3:target, #tab1:target {
-    visibility: visible !important;
-    opacity: 1 !important;
-    z-index: 5 !important;
-}
 /* 뱃지 스타일 */
 .m-badge-slim {
     display: inline-block; padding: 2px 10px; margin: 3px 1.5px; border-radius: 3px;
     font-size: 12px; font-weight: 800; color: #5a4fcf !important;
-    background: linear-gradient(to bottom in oklch, #fff, #f5f5ff);
-    border: 1px solid rgba(255, 255, 255, 0.8);
-    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
+    background: #fff; border: 1px solid rgba(255, 255, 255, 0.8);
 }
 }}}
 {{{#!wiki class="stel-tab-container"
 {{{#!wiki class="stel-tab-nav"
-[[#tab1|{{{#!wiki class="stel-tab-btn"
-기생}}}]] [[#tab2|{{{#!wiki class="stel-tab-btn"
-기생}}}]] [[#tab3|{{{#!wiki class="stel-tab-btn"
+[[#s-tab1|{{{#!wiki class="stel-tab-btn"
+기생}}}]] [[#s-tab2|{{{#!wiki class="stel-tab-btn"
+기생}}}]] [[#s-tab3|{{{#!wiki class="stel-tab-btn"
 기생}}}]]}}}
-{{{#!wiki class="stel-content-box"
-{{{#!wiki class="tab-item" id="tab1"
+{{{#!wiki class="stel-scroll-box"
+{{{#!wiki id="s-tab1" class="tab-section"
 [[파일:스텔 1기.png|width=100%]]
 {{{#!wiki style="margin-top: 15px;"
 {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #8182b8;"
 ...
 }}}
 }}}
-{{{#!wiki class="tab-item" id="tab2"
+{{{#!wiki id="s-tab2" class="tab-section"
 [[파일:스텔 2기.png|width=100%]]
 {{{#!wiki style="margin-top: 15px;"
 {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #9EB5EE;"
 ...
 }}}
 }}}
-{{{#!wiki class="tab-item" id="tab3"
+{{{#!wiki id="s-tab3" class="tab-section"
 [[파일:스텔 3기.png|width=100%]]
 {{{#!wiki style="margin-top: 15px;"
 {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #B8A9CA;"
 ...
 [[하나코 나나|나나]]}}}
 }}}
 }}}
 }}}
 }}}