body {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  background-color: #c3c0c050;
}

html {
   touch-action:  none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button {
    display: none;
} /*type="search x 숨기기 */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}/* Chrome, Safari, Edge, Opera */

/* Firefox */
input[type="number"] {
  appearance: textfield; 
} /*type="number 화살표 숨기기 */


.button-container {
  display: flex;
  justify-content: space-between;
  gap: 8px; /* 버튼 사이 공간*/
  width: 95%;
  border: none; /*테두리 제거*/
} /* 상, 하 버튼 가로정렬 틀 */

.btn-top,
.btn-bottom {
  background: linear-gradient(45deg, #36d1dc, #5b86e5);
  color: white;
  transition: all 0.3s ease;
  overflow: hidden; /*넘치는 내용 숨기기 */
  height: 35px;
  font-size: 14px;
  font-weight: bold;
  user-select: none;
}/* 상, 하 버튼 들 */

.btn-top,
.btn-bottom,
.delete-row,
.search-input {
  border-radius: 5px; /*모시리 둥글게*/
}

.btn-top:hover,
.btn-bottom:hover {
  background: linear-gradient(45deg, #5b86e5, #36d1dc);
}/* 호버 시 색 변경 */

.btn-top:active,
.btn-bottom:active {
  background: linear-gradient(45deg, #5b86e5, #36d1dc);
}/* 클릭(누른 상태) 시 다른 색 적용 */

.btn-top,
.btn-bottom {
  transition: background 0.3s ease;
}/* 클릭을 떼면 원래 색으로 복귀 (transition으로 부드럽게) */

.scroll-view {
  position: absolute; /* 위치 지정해서 고정(상위 항목에 가깝게)  */
  flex: 1; /* 가능한 높이만큼 확장 */
  top: 50px; /* 상단 위치를 + 버튼 아래로 설정*/
  bottom: 100px; /* 하단 위치를 플레이어 버튼 위 10px로 설정  */
  margin: 3px 0px;
  overflow-x: hidden; /* 가로 스크롤바 숨기기 */
  overflow-y: auto; 
  width: 95%;
  padding: 4px 0px; /* 내부 상하, 좌,우 여백*/
  min-height: 100px; /* 최소 높이 */
  border: none; /* 테두리 제거 */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3836363e;
  z-index: 999;
  opacity: 0; /* 초기 불투명도 0으로 설정 */
  backdrop-filter: blur(1px);
  transition: opacity 0.3s ease;
}

.overlay.fade-in {
  opacity: 0.8; /* fade-in 클래스가 추가되면 불투명도 0.5로 변경 */
}

.overlay.fade-out {
  opacity: 0;
}

.popup {
  display: none;
  position: fixed; /* 브라우저 창 기준으로 고정 */
  width: 96%;
  height: 86%;
  top: 8.5%;
  left: 2%;
  background-color: #ffffff;
  border: 0.2px solid #3636368f;
  z-index: 1000;
  box-shadow:
    rgba(0,0,0,0.1) 0 2px 2px,
    rgba(0,0,0,0.1) 0 4px 4px,
    rgba(0,0,0,0.1) 0 8px 8px,
    rgba(0,0,0,0.1) 0 16px 16px,
    rgba(0,0,0,0.1) 0 32px 32px,
    rgba(0,0,0,0.1) 0 64px 64px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden; /* 팝업 내부에서 스크롤 처리 */
} /* 창 */

.close-btn {
  position: fixed; /* 브라우저 창 기준으로 고정 */
  top: 5px; 
  right: 5px;  
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: transparent;
  text-shadow: 0 0 7px #c4b6b685, 0 0 10px #c4b6b685, 0 0 21px #c4b6b685;
  border: none; /* 테두리 제거 */
  z-index: 1001; /* 최상위 레이어에 위치하도록 설정 */
}

.close-btn:after {
  content: "\00d7"; /* '×' 닫기 버튼 표시 */
  font-size: 38px;
  color: #000000;
  line-height: 40px;
  cursor: pointer; /* 마우스 포인터 변경 */
}

.fade-in {
  opacity: 1;
  transform: scale(1);
}

.fade-out {
  opacity: 0;
  transform: scale(1);
}

.expand-down {
  animation: expandDown 0.4s forwards;
}

.collapse-up {
  animation: collapseUp 0.2s forwards;
}

@keyframes expandDown {
  from { height: 0; opacity: 0; }
  to { height: 84%; opacity: 1; }
}

@keyframes collapseUp {
  from { height: 84%; opacity: 1; }
  to { height: 0; opacity: 0; }
}

.show {
  display: block;
}

:root {
  --primary-color: #007bff;
  --blue-color: #0000ff;
  --dblue-color: #080867;
  --success-color: #28a745;
  --green-color: #00ff00;
  --Dgreen-color: #006400;
  --danger-color: #dc3545;
  --warning-color: #fbcc3e;
  --Yellow-color: #FFFF00;
  --Gold-color: #FFD700;
  --info-color: #17a2b8;
  --red-color: #ff0000;
  --lred-color: #e91111;
  --light-color: #f8f9fa;
  --secondary-color: #6c757d;
  --dark-color: #343a40;
  --default-color: #000000;
  --Lavender-color: #E6E6FA;
  --Magenta-color: #FF00FF;
  --Orange-color: #FF8C00;
  --DOrange-color: #a75c00;
  --Pink-color: #FF6EC7;
  --Lbrown-color: #93613d;
  --lbrown-color: #A52A2A;
  --brown-color: #8B4513;
  --dbrown-color: #5C4033;
  --lpurple-color: #D8BFD8;
  --dpurple-color: #4B0082;
  --Dpurple-color: #290840;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
.company-T-KE-1889,
.company-CPR-1882,
.company-AFG-1849,
.company-IOW-1860,
.company-PRR-1846 {
  color: var(--red-color);
}

.company-EUR-1862 {
  color: var(--lred-color);
}

.company-WStI-1862 {
  color: var(--Dpurple-color);
}

.company-WVR-1862 {
  color: var(--dpurple-color);
}

.company-EH-1862 {
  color: var(--warning-color);
}

.company-LE-1862 {
  color: var(--danger-color);
}

.company-BM-1830 {
  color: var(--dbrown-color);
}

.company-SVR-1862 {
  color: var(--Lbrown-color);
}

.company-ECR-1862 {
  color: var(--dblue-color);
}

.company-ENR-1862 {
  color: var(--Gold-color);
}

.company-NW-1830,
.company-WNR-1862 {
  color: var(--lbrown-color);
}

.company-NYC-1830,
.company-NB-1862 {
  color: var(--secondary-color);
}

.company-CPR-1830,
.company-FDR-1862 {
  color: var(--DOrange-color);
}

.company-CN-1860,
.company-COR-1846,
.company-CS-1800,
.company-PMQ-1830,
.company-NS-1862 {
  color: var(--info-color);
}

.company-IWNJ-1860,
.company-NYCR-1846,
.company-ERIE-1830,
.company-LB-1862 {
  color: var(--default-color);
}

.company-SFA-1849 {
  color: var(--Pink-color);
}

.company-TER-1889,
.company-GT-1882,
.company-VYSC-1860,
.company-CC-1800,
.company-PRR-1830,
.company-WF-1862 {
  color: var(--success-color);
}

.company-TKR-1889,
.company-BO-1830,
.company-LH-1862 {
  color: var(--primary-color);
}

.company-SR-1889,
.company-QLL-1882,
.company-BHIR-1860 {
  color: var(--Magenta-color);
}

.company-IR-1889,
.company-CNR-1882,
.company-RCS-1849,
.company-CTR-1846,
.company-DR-1800,
.company-NNH-1830,
.company-LD-1862 {
  color: var(--Orange-color);
}

.company-AR-1889,
.company-YN-1862,
.company-NE-1862 {
  color: var(--dark-color);
}

.company-UR-1889,
.company-HBR-1882,
.company-CTL-1849,
.company-NGStL-1860,
.company-ERIE-1846,
.company-CO-1830,
.company-NGC-1862 { 
  color: var(--Yellow-color);
}

.company-SC-1882,
.company-IFT-1849,
.company-SC-1860,
.company-BO-1846,
.company-NKP-1830 {
  color: var(--blue-color);
}

.company-CN-1882,
.company-FYN-1860 {
  color: var(--green-color);
}

.company-ATA-1849,
.company-ICR-1846,
.company-RDR-1830,
.company-ESR-1862 {
  color: var(--Dgreen-color);
}

.company-CS-1800, .company-CC-1800, .company-DR-1800,

.company-T-KE-1889, .company-TER-1889, .company-TKR-1889, .company-UR-1889,
.company-SR-1889, .company-IR-1889, .company-AR-1889, 

.company-GT-1882, .company-CPR-1882, .company-SC-1882, .company-CN-1882,
.company-QLL-1882, .company-CNR-1882, .company-HBR-1882, 

.company-AFG-1849, .company-CTL-1849, .company-RCS-1849, .company-SFA-1849, 
.company-IFT-1849, .company-ATA-1849,

.company-IOW-1860, .company-CN-1860, .company-IWNJ-1860, .company-VYSC-1860,
.company-BHIR-1860, .company-NGStL-1860, .company-SC-1860, .company-FYN-1860,

.company-EUR-1862, .company-WStI-1862, .company-WVR-1862, .company-EH-1862,
.company-LE-1862, .company-SVR-1862, .company-ECR-1862, .company-ENR-1862,
.company-LD-1862, .company-YN-1862, .company-NE-1862, .company-WNR-1862,
.company-NB-1862, .company-FDR-1862, .company-NS-1862, .company-LB-1862,
.company-WF-1862, .company-LH-1862, .company-NGC-1862, .company-ESR-1862,

.company-BM-1830, .company-NW-1830, .company-NYC-1830, .company-CPR-1830,
.company-PMQ-1830, .company-ERIE-1830, .company-PRR-1830, .company-BO-1830,
.company-NNH-1830, .company-CO-1830, .company-NKP-1830, .company-RDR-1830,

.company-COR-1846, .company-NYCR-1846, .company-NYCR-1846, .company-CTR-1846,
.company-PRR-1846, .company-ERIE-1846, .company-BO-1846, .company-ICR-1846{
  border-color: currentColor; 
  text-shadow: 0.5px 1px 1px rgba(160, 155, 155, 0.741), 0 0 0px rgb(255, 255, 255);
}