.tab-container {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--bs-gray-300);
 

  border-radius: 6px;
  padding: 4px;
  width: 100%;
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.tab-container::-webkit-scrollbar {
  height: 6px;
}
.tab-container::-webkit-scrollbar-thumb {
  background: var(--bs-primary);

 

  border-radius: 3px;
}

.tab {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border: 1px solid var(--bs-primary);

 

  border-radius: 4px;
  margin-right: 4px;
  padding: 4px 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}

.tab.active {
  /*
  background: #e6f0ff;
  border-color: #3b82f6;
*/
      
  background-color:var(--bs-primary-tint-90);
  color: var(--bs-primary);
  border: 2px solid var(--bs-primary);


}

.tab span {
  margin: 0 4px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab .close {
  display: none;
  margin-left: 6px;
  font-size: 14px;
  cursor: pointer;
  color: var(--bs-primary);
  flex-shrink: 0;
}
.tab:hover .close { display: inline; }

.tab .new-window {
  
  font-size: 12px;
  color: var(--bs-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.tab-add {
  background: #fff;
  border: 1px dashed #bbb;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}

/* ✅ iframe 영역 */
.iframe-container {
  position: relative;
}
#iframe-container iframe { 
display: none; 
}
#iframe-container iframe.active { 
display: block !important; 
}