미디어위키:Common.css: 두 판 사이의 차이

 :root {
 --wiki: #81b11f;
 
 --current: light-dark(#e0ffdb,#123a0d);
 
 --alternativehistorytab: light-dark(#f5efe3, #2b251e);
 --alternativehistoryborder: light-dark(#d1c4b6, #696058);
 --alternativehistorytext: light-dark(#524940, HSL(30, 12%, 75%));
 
 --usa: linear-gradient(120deg, #002664 0% 78%, #bb133e 78% 81%, #fff 81% 84%, #bb133e 84% 87%, #fff 87% 90%, #bb133e 90% 93%, #fff 93% 96%, #bb133e 96%);
 --korea: linear-gradient(120deg, #fff 5%, #000 5%, #000 9%, #fff 9%, #fff 10%, #000 10%, #000 14%, #fff 14%, #fff 15%, #000 15%, #000 19%, #fff 19%, #fff 81%, #cd313a 81%, #cd313a 90%, #0047a0 90%);
 --japan: radial-gradient(circle, #FE0000 69.9%, #fff 70.1%);
 --duan: linear-gradient(120deg, #b3344b 11%, #fff 11%, #fff 13%, #b3344b 13%, #b3344b 18%, #fff 18%, #fff 82%, #356c9c 82%, #356c9c 87%, #fff 87%, #fff 89%, #356c9c 89%);
 }

#daemunche1 {
background: url(https://w.halv.kr/images/e/ed/%EB%8C%80%EB%AC%B8%EC%A0%9C1.png) center no-repeat;
background-size: contain;
}
#daemunche2 {
background: url(https://w.halv.kr/images/2/26/%EB%8C%80%EB%AC%B8%EC%A0%9C2.png) center no-repeat;
background-size: contain;
}
#daemunche3 {
background: url(https://w.halv.kr/images/d/d5/%EB%8C%80%EB%AC%B8%EC%A0%9C3.png) center no-repeat;
background-size: contain;
}
#daemunche4 {
background: url(https://w.halv.kr/images/c/c5/%EB%8C%80%EB%AC%B8%EC%A0%9C4.png) center no-repeat;
background-size: contain;
}
#daemunche5 {
background: url(https://w.halv.kr/images/2/22/%EB%8C%80%EB%AC%B8%EC%A0%9C5.png) center no-repeat;
background-size: contain;
}
#daemunche6 {
background: url(https://w.halv.kr/images/8/8e/%EB%8C%80%EB%AC%B8%EC%A0%9C6.png) center no-repeat;
background-size: contain;
}
#daemunchett {
background: url(https://w.halv.kr/images/d/d0/%EB%8C%80%EB%AC%B8%EC%A0%9Ctt.png) center no-repeat;
background-size: contain;
}

.rt-target {
   background: light-dark(#eaf3ff, #273445) !important;
}

.table-wrap.scrolled #stickyparent {
  box-shadow: 3px 0 0 var(--text), -5px 0 0 var(--bg);
}

#stickyparent {
  position: sticky;
  left: 0px !important; 
  z-index: 3;
  background: var(--bg);
clip-path: inset(0.8px -1.25px 0.8px -3px);
  border-right: none !important;
  background-clip: padding-box;
}

/* 배지 공통 */
.badge{
  display:inline-block;
  width:1.9rem; height:1rem;
  border:1px solid var(--text);
  font-size:.75rem; line-height:1.1;
  vertical-align:middle; overflow:hidden; position:relative;
}
.badge--circle{ border-radius:40%; }
.badge--filled{ background:var(--text); color:var(--bg); }
.badge--tight{ width:1.8rem; height:.95rem; line-height:.9; }
.badge--num{
  font-family: SeoulAlrimTTF, "Zen Kaku Gothic Antique", CUSTOMFONT, TIMETABLEFONT, TIMETABLEFONT2 !important;
  line-height:1;
}

.timetable tr.forcetopalign > td {
vertical-align: top;
}

/* 아이콘 큰 사이즈(LEX/LSL/XSL 등에 사용) */
.icon-lg{
  font-size:1.8rem; display:inline-block; margin-top:7px;
}

/* 괄호/브래킷 기호 라인박스 보정 */
.bracket-open{ display:block; margin-top:-7.5px; height:0; margin-bottom:-0.15rem; }
.bracket-close{ display:block; margin-top:-3px; height:0; margin-bottom:-6px; }

/* (참고) 제목 등에서 이미 쓰던 클래스가 있다면 그대로 유지 */

.forcetopalign {
margin-bottom: 0.1rem;
}
/* 공통 스타일 */
/* 공통 스타일 */
.arrow{
--size: 20;
  --inner-scale: 0.92;
  position: relative;
  width: calc(var(--size)*1px);
  aspect-ratio: 1 / 2.5;
  display: inline-flex;
  place-items: center;
  font-size: calc(var(--size)*0.78px);
  z-index: 0;
font-family: "Zen Kaku Gothic Antique", "CUSTOMFONT","Pretendard", DiaPro, SUITE Variable, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji;
vertical-align: middle;
vertical-align: -webkit-baseline-middle;
justify-content: center;
}
.arrow{ color:var(--text); }                 /* 기본 글자색 */
.arrow::before,
.arrow::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;                        /* 글자 뒤로 */
}

/* 아래쪽 뾰족(하행) 오각형 */
.arrow--down::before,
.arrow--down::after{
  clip-path: polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
}
/* 위쪽 뾰족(상행) 오각형 */
.arrow--up::before,
.arrow--up::after{
  clip-path: polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%);
}

.arrow--up {
padding-top: 4px;
}

.arrow--down {
padding-bottom: 4px;
}

/* 테두리 있는 흰 배경(하행) */
.outline{ color:var(--text); }
.outline::before{ background:var(--text); }                  /* 바깥(테두리색) */
.outline::after{
  background:var(--bg);                                  /* 안쪽(배경색) */
  transform: scale(var(--inner-scale));               /* 수축해서 테두리 두께 생성 */
  transform-origin: 50% 50%;
}

/* 꽉 찬 검정 배경(상행) */
.solid{ color:var(--bg); }
.solid::before{ background:var(--text); }                    /* 단색 채움 */