@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/****************** sidebar의 폰트를 부여하기 위해서 사용 ******************/
.sidebar-container {
  font-family: "Pretendard", sans-serif !important;
}
.sidebar-container #storybook-explorer-menu {
  padding-bottom: 10px;
}

/****************** mdx 의 table, navigation에 폰트 적용 ******************/
body, h1, h2, h3, h4, h5, p, span, dt, dd, ul, li, div, #storybook-docs {
  font-family: "Pretendard", sans-serif !important;
}
table, .sb-mdx-list-item button {
  font-family: "Pretendard", sans-serif !important;
  table-layout: auto;
}
table td, table th {
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

/****************** storybook header 관련 css ******************/
.storybook-header {
  font-family: "Pretendard", sans-serif !important;
  color: #2E3438;
  background-color: #F6F9FC;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid hsla(203, 50%, 30%, 0.15);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.storybook-header img {
  height: 31px;
}
.storybook-header-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  font-size: 14px;
}
.storybook-version-area select {
  cursor: pointer;
}
.storybook-link-area a {
  color: #2E3438;
  cursor: pointer;
  text-decoration: none;
}
.storybook-link-area a:hover {
  color: #2E3438;
  cursor: pointer;
  text-decoration: underline;
}
.storybook-link-area .storybook-intro {
  all: unset; /* 기존 속성 초기화 */
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #2E3438;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  margin-right: 2px;
  cursor: pointer;
}

/****************** storybook intro.js 관련 css ******************/
/* Custom Tooltip Styles */
.customTooltip.introjs-tooltip {
  font-family: "Pretendard", sans-serif !important;
  background: #FAFBFC;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-width: 450px;
  min-width: 300px;
  padding: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Tooltip Header */
.customTooltip .introjs-tooltip-header {
  padding: 0;
  margin-bottom: 20px;
  position: relative;
}

.customTooltip .introjs-tooltip-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.5;
}

/* Close Button */
.customTooltip .introjs-skipbutton {
  position: absolute;
  right: -12px;
  top: -12px;
  color: #666;
  font-size: 20px;
  font-weight: normal;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition: color 0.2s;
}

.customTooltip .introjs-skipbutton:hover {
  color: #333;
}

/* Tooltip Content */
.customTooltip .introjs-tooltiptext {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  padding: 0 4px;
}

/* Navigation Bullets */
.customTooltip .introjs-bullets {
  margin-bottom: 24px;
}

.customTooltip .introjs-bullets ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.customTooltip .introjs-bullets ul li a {
  width: 8px;
  height: 8px;
  background: #ddd;
  border-radius: 50%;
  transition: all 0.2s;
}

.customTooltip .introjs-bullets ul li a.active {
  background: #2E5BFF;
  transform: scale(1.2);
}

/* Navigation Buttons */
.customTooltip .introjs-tooltipbuttons {
  padding: 0;
  border-top: none;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.customTooltip .introjs-prevbutton {
  margin-right: auto;
}

.customTooltip .introjs-nextbutton {
  margin-left: auto;
  background: #4A7AFF;
  color: white;
  border-color: #4A7AFF;
  min-width: 80px;
  text-align: center;
}

.customTooltip .introjs-button {
  font-family: "Pretendard", sans-serif;
  text-shadow: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #333;
  transition: all 0.2s;
  min-width: 80px;
  text-align: center;
}

.customTooltip .introjs-button:hover {
  background: #f8f9fa;
  border-color: #e0e0e0;
}

.customTooltip .introjs-nextbutton:hover {
  background: #5C87FF;
  border-color: #5C87FF;
}

.customTooltip .introjs-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Progress Bar */
.customTooltip .introjs-progress {
  background: #f0f0f0;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
}

.customTooltip .introjs-progressbar {
  background: #2E5BFF;
  border-radius: 2px;
}
/* Helper Layer 스타일 */
.introjs-helperLayer {
  border: 2px solid #FF4444 !important; /* 빨간색 테두리 */
  background-color: transparent !important;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6) !important;
}

/* 애니메이션 효과 */
.introjs-helperLayer {
  transition: all 0.3s ease-out !important;
}

/* 이중 테두리 효과 */
.introjs-helperLayer:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 4px;
  border: 2px solid rgba(255, 68, 68, 0.2);
  pointer-events: none;
}


/* toc-list */
#storybook-docs .sbdocs.sbdocs-wrapper{ padding: 4rem ;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content { width: calc( 100% - 240px);}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content h1 {margin-bottom: 20px;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content h2 {font-size: 20px;line-height: 40px;padding-left: 2px;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div { width: 240px;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div > div{ width: initial;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div > div > h4{ font-size: 18px; margin-bottom: 10px;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div > div > h4 svg {width: 24px; height: 24px;vertical-align: middle;}
.toc-wrapper {width: 240px; padding-left: 10px; overflow-x: hidden;}
.toc-wrapper .toc-list .toc-list-item {  padding-top:0; padding-bottom:0;margin-left:0}
.toc-wrapper .toc-list .toc-list-item a { padding: 8px 8px 8px 15px; font-weight: 500; line-height: 1.43; cursor: pointer; display: block; border-radius: 0px 5px 5px 0px;position: relative; color: #1a1a1a;}
.toc-wrapper .toc-list .toc-list-item.is-active-li a{ background-color: #f7fafc; font-weight: 600; color: #1a1a1a; }
.toc-wrapper .toc-list .toc-list-item.is-active-li::before{content: none;} 
.toc-wrapper .toc-list .toc-list-item a::before { content: ""; position: absolute; height: 100%; top: 0; left: 0; -webkit-transform: translateX(calc(-1px - 0px))!important; -moz-transform: translateX(calc(-1px - 0px))!important; -ms-transform: translateX(calc(-1px - 0px)); transform: translateX(calc(-1px - 0px))!important; border-left: solid 2px #029CFD; opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.toc-wrapper .toc-list .toc-list-item.is-active-li a::before { opacity: 1 !important; }

.toc-wrapper .toc-list .toc-list-item.is-active-li .toc-list .toc-list-item::before{content: none;} 
.toc-wrapper .toc-list .toc-list-item.is-active-li .toc-list .toc-list-item a::before{content: none;} 
.toc-wrapper .toc-list .toc-list-item.is-active-li .toc-list .toc-list-item a{ background-color: transparent;}
.toc-wrapper .toc-list .toc-list-item .toc-list .toc-list-item a,
.toc-wrapper .toc-list .toc-list-item .toc-list .toc-list-item.is-active-li .toc-list .toc-list-item a{ font-weight: 500; color: #605f60;letter-spacing: -0.3px;}

.toc-wrapper .toc-list .toc-list-item .toc-list .toc-list-item.is-active-li a{ font-weight: 600;color: #1a1a1a;  }
.toc-wrapper .toc-list .toc-list-item  .toc-list .toc-list-item .toc-list .toc-list-item.is-active-li a{ font-weight: 600;color: #1a1a1a;  }
.toc-wrapper .toc-list .toc-list-item .toc-list .toc-list-item a{ padding-left: 25px; font-size: 13px; }
.toc-wrapper .toc-list .toc-list-item .toc-list .toc-list-item .toc-list .toc-list-item a { padding-left: 35px; padding-top: 5px; padding-bottom: 5px; }
.toc-wrapper .toc-list .toc-list-item .toc-list .toc-list-item .toc-list{margin-bottom: 15px;margin-top:0;} 
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div > div > .toc-wrapper > .toc-list {border-left: 1px solid #e4e4e7;}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div > div > .toc-wrapper > .toc-list .toc-list{border-left: 0}
#storybook-docs .sbdocs.sbdocs-wrapper > .sbdocs-content + div > div > .toc-wrapper > .toc-list .toc-list .toc-list{border-left: 0}

.toc-wrapper .toc-list .toc-list .toc-list-item a::before  { content: ""; position: absolute; height: 100%; top: 0; left: 0; -webkit-transform: translateX(calc(-1px - 24px)); -moz-transform: translateX(calc(-1px - 24px)); -ms-transform: translateX(calc(-1px - 24px)); transform: translateX(calc(-1px - 24px)); border-left: solid 2px #029CFD; opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.toc-wrapper .toc-list .toc-list-item a.toc-link:hover{ color:  #1a1a1a; }
.toc-wrapper .toc-list .toc-list-item a.toc-link:focus{ color:  #1a1a1a;font-weight: 600; }
.toc-wrapper .toc-list .toc-list-item a.toc-link:active { color:  #1a1a1a; font-weight: 600;}

/* CardRow viewbox 오류수정*/
#story--core-component-layout-cardrow-cardcol--default,
#story--core-component-layout-cardrow--show,
#story--core-component-layout-cardrow-cardcol--show,
#story--core-component-layout-cardrow-cardcol--show-content,
#story--core-component-layout-viewbox--default,
#story--core-component-layout-viewbox--data-form,
#story--core-component-layout-viewbox--show-toggle,
#story--core-component-layout-viewbox--control-toggle-state{ width: 516px;}

/*funnel 오류수정*/
#story--core-component-widget-funnel--default,
#story--core-component-widget-funnel-funnel-header--default{ width: 516px;}
.sub-content .view-box > .cmm-funnel{padding: 0;}
.cmm-funnel .sub-content .view-box {position: initial;}
.cmm-funnel .sub-content .btn-box { right: 26px; height: 52px; display: flex; align-items: center; width: auto; padding: 0;}
.sub-content .view-box > .cmm-funnel p{ padding-left: 24px; font-size: 14px; margin-bottom: 20px;}
.sub-content .tit, .sub-content .s-tit, .sub-content .s-tit2, .sub-content .s-tit4, .sub-content .c-tit { font-size: 18px; font-weight: 600; }

/*Notification 오류수정*/
#storybook-root > .sub-content.noti-wrap  div.btn-box {margin: 0; float: left;}
#storybook-root > .sub-content.noti-wrap  div.btn-box button {margin-left: 0;}
#storybook-root > .sub-content.noti-wrap  div.btn-box button + button{margin-left: 4px;}

/*selectbox 오류수정*/
/* #story--core-component-control-selectbox--default,
#story--core-component-control-selectbox--rules,
#story--core-component-control-selectbox--list,
#story--core-component-control-selectbox--list-promise,
#story--core-component-control-selectbox--visible-code,
#story--core-component-control-selectbox--visible-name,
#story--core-component-control-selectbox--blank-type,
#story--core-component-control-selectbox--include,
#story--core-component-control-selectbox--exclude,
#story--core-component-control-selectbox--filter,
#story--core-component-control-selectbox--disabled,
#story--core-component-control-selectbox--on-change,
#story--core-component-control-selectbox--focus{ width: 350px;} */

/* #storybook-root .sub-content.selectbox-wrap{ width: 350px;margin-left: 100px;} */
/* .cmm-form select:disabled:hover, .cmm-form select:disabled:focus{ box-shadow:none; cursor: default;} */

/*tab 오류수정*/
#story--core-component-widget-tab-tabs--default,
#story--core-component-widget-tab-tabs--show,
#story--core-component-widget-tab-tabs--on-click,
#story--core-component-widget-tab-tabs--select-tab,
#story--core-component-widget-tab-tabs--get-selected-tab-index,
#story--core-component-widget-tab-tabs--set-tabs-visible,
#story--core-component-widget-tab--default { width: 900px; margin: 0 auto; min-height: 400px; }

#story--core-component-widget-tab-tabs--show-inner > .btn-box,
#story--core-component-widget-tab-tabs--get-selected-tab-index-inner > .btn-box,
#story--core-component-widget-tab-tabs--set-tabs-visible-inner > .btn-box,
#story--core-component-widget-tab-tabs--select-tab-inner > .btn-box {text-align: right;padding-right: 24px;}

#story--core-component-widget-tab-tabs--select-tab-inner > .btn-box button + button,
#story--core-component-widget-tab-tabs--set-tabs-visible-inner > .btn-box button + button{margin-left: 4px;}

.tab-wrap .sub-content .tit{ font-size: 16px !important; font-weight: 600; }

/*grid 오류수정*/
.ag-header.ag-header-allow-overflow .ag-header-row .ag-header-cell:last-child .ag-header-cell-resize::after{ display: none;}
#story--core-component-grid-grid--index-column .cmm-table {width: 900px !important ;}
#story--core-component-grid-grid--index-column,
#story--core-component-grid-grid--header-group {min-height: 400px;padding-top: 30px;}


/*Timeline 오류수정*/
#storybook-root .timeline-item-icon,
.docs-story .timeline-item-icon { width: 13px; height: 13px;left: -7px;}

#storybook-root .timeline-item-content,
.docs-story .timeline-item-content {margin-left: 0;font-family: "Pretendard", sans-serif; font-size: 15px; color: #1a1a1a;line-height: 22px;}

#storybook-root .timeline-item .timeline-item-icon:has( > svg),
.docs-story .timeline-item .timeline-item-icon:has( > svg){left: -9px;width: 16px; height: 16px; }

#storybook-root .timeline-item .timeline-item-icon > svg,
.docs-story .timeline-item .timeline-item-icon > svg{ width: 14px; height: 14px; fill: #ff8300;}

#storybook-root .timeline-item,
.docs-story .timeline-item{ position: relative; padding: 20px; border-left: 2px solid #d9d9d9; }

#storybook-root .timeline-item .timeline-item-label,
.docs-story .timeline-item .timeline-item-label { position: absolute; left: -220px; width: 200px; padding-right: 20px; text-align: right;font-family: "Pretendard", sans-serif;line-height: 22px;font-size: 12px;color: #605f60;}
#storybook-root:has(.timeline){ height: initial; min-height: 400px; padding-left: 220px !important;}
#storybook-root:has(.timeline-item .timeline-item-label){ height: initial; min-height: 400px; padding-left: 0 !important;}
#storybook-root:has(.timeline-item .timeline-item-label) .timeline{padding-left: 240px;} 


@media (max-width: 1560px) {
  #storybook-docs .sbdocs.sbdocs-wrapper{ padding: 4rem 0  4rem 4rem ;}
}

/****************** Overview 페이지를 위한 css 작성 start ******************/
.overview-component-area {
  padding: 20px 0px;
}

.overview-component-list {
  margin-bottom: 40px; /* Add spacing between different component groups */
}

.overview-component-list h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
  border-bottom: 2px solid #555; /* Optional: Adds a subtle underline for the title */
  padding-bottom: 5px;
}

.overview-component-card {
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex: 1 1 calc(50% - 20px); /* Two cards per row */
  max-width: calc(50% - 20px); /* Ensure cards don’t stretch too much */
  box-sizing: border-box;
  margin-bottom: 20px; /* Add spacing between cards in the same group */
  cursor: pointer;
}

.overview-component-card h1,
.overview-component-card h2,
.overview-component-card p {
  margin: 0;
  margin-bottom: 10px;
}

.overview-component-card h1,
.overview-component-card h2 {
  font-size: 1.2em;
}

.overview-component-card p {
  font-size: 0.9em;
  color: #bbb;
}

.overview-component-card:last-child {
  margin-bottom: 0;
}

.overview-component-image {
  margin-top: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  border-radius: 8px;
}

.overview-component-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Flex container for all cards inside a group */
.overview-component-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between cards */
}
/****************** Overview 페이지를 위한 css 작성 end ******************/