.start {
  display: grid;
  justify-items: center;
  align-items: start;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.sidebar {  
  background-color: #f9f9f9;
  width: 240px;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;   /* <- 내용이 width 줄어들면서 잘리도록 */
}

.closed .sidebar {
  background-color: #fff;
  width: 52px;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.main {
  background-color: #ffffff;
  width: calc(100vw - 240px);
  height: 100vh;
  position: absolute;
  top: 0;
  left: 240px;
}

.closed .main {
  background-color: #ffffff;
  width: calc(100vw - 52px);
  height: 100vh;
  position: absolute;
  top: 0;
  left: 52px;
}

.sidebar, .sidebar-closed, .main, .main-closed {
  transition: all 0.3s ease;
}

/* ---------------------------------------------------------------------------------------------------------------------- */

.sidebar-top {
  width: 240px;
  height: 52px;
}

.sidebar-icon {
  width: 40px;
  height: 40px;
  color: rgba(0, 0, 0, 0.4);
  padding: 10px;
  margin: 6px;
  position: absolute;
  left: 188px;
  transition: left 0.3s ease var(--icon-delay, 0s);
  cursor: w-resize;
  border-radius: 6px; 
}

.closed .sidebar-icon { 
  left: 0;
  cursor: e-resize;
}

.sidebar-icon:hover {
  background-color: rgba(0, 0, 0, 0.08); /* 회색 박스 */
}

.excel-title {
  display: flex;
  align-items: center;

  width: 208px;
  height: 20px;
  margin: 9px 16px;

  font-family: "Sansation";
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}

.excel-name-wrapper {
  position: relative;
  margin: 0px 6px;
  padding: 9px 10px;
  
}

.excel-name-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 0.05s ease;
  pointer-events: none;
  border-radius: 6px; 
}

.excel-name {
  width: 208px;
  height: 20px;
  line-height: 20px;

  font-family: "Sansation";
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  
}

.excel-title,
.excel-name,
.excel-name-wrapper {
  visibility: visible;
  transition: opacity 0.3s ease, visibility linear 0.3s; 
}

.excel-name-wrapper:hover::after {
  opacity: 1;
}

.excel-name-wrapper:hover {
  cursor: pointer;
}

.closed .excel-title,
.closed .excel-name,
.closed .excel-name-wrapper {
  opacity: 0;                /* display: none 대신 */
  visibility: hidden;

}

/* ---------------------------------------------------------------------------------------------------------------------- */

.explain {
  height: 36px;
  position: absolute;
  top: 31%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Sansation";
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.welcome-text {
  height: 36px;
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Sansation";
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.intro {
  height: 36px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Sansation";
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.file-plus {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("https://c.animaapp.com/RFGozXPS/img/file-plus.svg") no-repeat center / contain;
  border: none;
  cursor: pointer;
}

.file-plus::after {
  content: "Upload Excel File";
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.05s ease;
}

.file-plus:hover::after {
  opacity: 1;
}

/* ---------------------------------------------------------------------------------------------------------------------- */

.ellipsis {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-size: 18px;
  line-height: 1;

  animation: fadeCycle 2s linear infinite;
  z-index: 5;

}

.ellipsis span {
  font-size: 28px;
  opacity: 0;                /* 기본은 꺼짐 */
  will-change: opacity;
}

/* 1번 점: 0%~75% 구간(=처음 1.5s) 켜짐 */
.d1 { animation: dot1 2s linear infinite; }

/* 2번 점: 25%~75% 구간(=0.5s~1.5s) 켜짐 */
.d2 { animation: dot2 2s linear infinite; }

/* 3번 점: 50%~75% 구간(=1.0s~1.5s) 켜짐 */
.d3 { animation: dot3 2s linear infinite; }

/* 컨테이너 페이드: 0%~74.999%는 불투명, 75%~100%는 1→0으로 페이드 */
@keyframes fadeCycle {
  0%, 74.999% { opacity: 1; }
  100%        { opacity: 0; }
}

/* 점 on/off 타이밍 (윈도우 호환을 위해 24.999/49.999 경계 사용) */
@keyframes dot1 {
  0%          { opacity: 1; }   /* 시작 즉시 켜짐 */
  74.999%     { opacity: 1; }   /* 페이드 시작 직전까지 유지 */
  100%        { opacity: 1; }   /* (컨테이너가 0으로 내려가므로 여기 1이어도 무방) */
}

@keyframes dot2 {
  0%, 24.999% { opacity: 0; }   /* 0.5s 전까지 꺼짐 */
  25%, 100%   { opacity: 1; }   /* 이후 켜짐(컨테이너 페이드에 의해 마지막에 함께 사라짐) */
}

@keyframes dot3 {
  0%, 49.999% { opacity: 0; }   /* 1.0s 전까지 꺼짐 */
  50%, 100%   { opacity: 1; }   /* 이후 켜짐 */
}

@media (prefers-reduced-motion: reduce) {
  .ellipsis, .d1, .d2, .d3 { animation: none; }
  .ellipsis span { opacity: 1; } /* 정지된 3점 표시(접근성 우선) */
}

.loader-explanation {
  text-align: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%);
  font-family: "Sansation";
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}