NodeulsumNaru(비교)

== , ==

{{{#!style

/* 1. 전체 컨테이너: 가로(Flex) 배치 마법 */

table.firefox-vertical-ui {

display: flex; flex-direction: row; /* 표를 좌우로 쪼갬! */

width: min(650px, 100%); background: #ffffff;

margin: 20px auto; border-collapse: collapse;

border: 1px solid #dcdcdc; border-radius: 10px;

box-shadow: 0 4px 15px rgba(0,0,0,0.05);

overflow: hidden; /* 모서리 둥글게 깎기 */

}

/* 2. 좌측 사이드바 (파이어폭스 탭 영역) */

table.firefox-vertical-ui > thead {

display: block; width: 130px; /* 좌측 메뉴바 넓이 */

background: #f0f0f4; /* 파이어폭스 테마 특유의 연한 회색 */

padding: 12px 8px;

border-right: 1px solid #dcdcdc;

}

table.firefox-vertical-ui > thead > tr {

display: flex; flex-direction: column; gap: 6px; /* 탭을 세로로 쌓기 */

}

/* 개별 탭 버튼 디자인 (파이어폭스 둥근 알약 스타일) */

table.firefox-vertical-ui > thead > tr > th {

display: flex; align-items: center; justify-content: flex-start;

padding: 10px 12px !important;

cursor: pointer; transition: 0.15s;

font-size: 13px; color: #15141A !important; font-weight: 500;

border: none !important;

background: transparent;

border-radius: 6px; /* 둥근 네모 모양 */

}

/* 마우스 호버 시 탭 강조 */

table.firefox-vertical-ui > thead > tr > th:hover {

background: #e0e0e6 !important; /* 살짝 진해지는 회색 */

}

/* 정렬 화살표 제거 */

table.firefox-vertical-ui > thead > tr > th::before,

table.firefox-vertical-ui > thead > tr > th::after { display: none !important; }

/* 3. 우측 본문 영역 (정렬 기능 및 공간 차단) */

table.firefox-vertical-ui > tbody {

display: block; flex: 1; /* 남은 오른쪽 공간을 전부 차지함 */

background: #ffffff;

}

table.firefox-vertical-ui > tbody > tr { display: none; }

table.firefox-vertical-ui > tbody > tr:first-child { display: block; }

table.firefox-vertical-ui > tbody > tr > td {

display: block; border: none !important;

background: transparent; padding: 0 !important;

line-height: 0 !important; position: relative;

}

/* 정렬 숫자 격리 */

.sort-key { position: absolute; font-size: 0; opacity: 0; pointer-events: none; }

/* 4. 내부 실제 컨텐츠 상자 */

.content-wrapper {

display: block !important;

font-size: 14px !important; line-height: 1.6 !important;

color: #333 !important; padding: 30px; text-align: center;

min-height: 250px; /* 탭을 눌렀을 때 전체 창 크기가 덜렁거리지 않게 최소 높이 지정 */

}

/* 뱃지 스타일 */

.m-badge {

display: inline-block; padding: 3px 12px; margin: 4px 2px; border-radius: 20px;

font-size: 12px; font-weight: bold; color: #fff !important;

}

}}}

||<thead><tableclass=firefox-vertical-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||

||<class=content-wrapper> {{{#!wiki class="sort-key"

0}}} {{{#!wiki class="content-wrapper"

[[파일:스텔 1기.png|width=100%]]

{{{#!wiki style="margin-top: 15px;"

{{{#!wiki class="m-badge" style="background: #8182b8;"

[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge" style="background: #A2D0EF;"

[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge" style="background: #60497f;"

[[사키하네 후야|후야]]}}}

}}}

}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"

1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"

1}}} ||

||<class=content-wrapper> {{{#!wiki class="sort-key"

1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"

0}}} {{{#!wiki class="content-wrapper"

[[파일:스텔 2기.png|width=100%]]

{{{#!wiki style="margin-top: 15px;"

{{{#!wiki class="m-badge" style="background: #9EB5EE;"

[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge" style="background: #610A09;"

[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge" style="background: #ff9680;"

[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge" style="background: #65686a;"

[[네네코 마시로|시로]]}}}

}}}

}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"

1}}} ||

||<class=content-wrapper> {{{#!wiki class="sort-key"

1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"

1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"

0}}} {{{#!wiki class="content-wrapper"

[[파일:스텔 3기.png|width=100%]]

{{{#!wiki style="margin-top: 15px;"

{{{#!wiki class="m-badge" style="background: #B8A9CA;"

[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge" style="background: #BAC0E6;"

[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge" style="background: #8fe0b0;"

[[유즈하 리코|리코]]}}} {{{#!wiki class="m-badge" style="background: #B8A9CA;"

[[하나코 나나|나나]]}}}

}}}

}}} ||