/* °ü¸®ÀÚ ·¹À̾ƿô ÆÐÄ¡(±â»çµî·Ï,È­¸éÆíÁý) */
/* side button */
.grid-side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  z-index: 99;
  inset: var(--nd-grid-side-btn-inset, 1.5rem 100% auto auto);
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--nd-white, #fff);
  background-color: var(--nd-secondary, #6c757d);
  border-radius: var(--nd-border-radius, 0.25rem) 0 0 var(--nd-border-radius, 0.25rem);
  transition: opacity .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out, right .15s ease-in-out;
}

@media screen and (min-width: 100em) {
  .grid-side-btn {
    visibility: hidden;
    opacity: 0;
  }
}

.grid-side-btn:hover {
  color: var(--nd-white, #fff);
  background-color: var(--nd-dark, #212529);
}

.grid-side-btn::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  background-color: currentColor;
  -webkit-mask-image: url("/icon/ndcon/nav-arrow-right.svg");
          mask-image: url("/icon/ndcon/nav-arrow-right.svg");
  -webkit-mask-size: cover;
          mask-size: cover;
  transition: transform 0.15s ease-in-out;
}

.is-folded .grid-side-btn::before {
  transform: scaleX(-1);
}

.is-folded .grid-side-btn {
  right: var(--nd-grid-side-btn-active-right, calc(100% - 1.25rem));
}

/* writing */
.writing.is-folded {
  --nd-editor-side-width: 1.25rem;
}

.writing-side {
	--nd-grid-side-btn-inset: 3.5rem 100% auto auto;
  --nd-grid-side-btn-active-right: calc(100% - var(--nd-editor-side-width, 1.25rem));
  overflow: visible;
	position: relative;
	transition: width 0.15s ease-in-out;
}

.writing-side-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  overflow: hidden;
  min-width: 22.5rem;
  height: 100%;
}

.is-folded .writing-side-inner {
  visibility: hidden;
}

/* design */
.dspan.split .dspan-side {
	position: relative;
}

.dspan-side-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

.is-folded .dspan-side-inner {
  visibility: hidden;
}

.dspan-side-inner .iframe-outer,
.dspan-side-inner .dspan-accordion {
  min-width: 22.5rem;
}


/* median outlink */
#median-outlink {
  margin: 3.125rem auto;
  padding: 1.375rem;
  background-color: var(--nd-light, #f8f9fa);
  border: 1px solid rgba(var(--nd-black-rgb, 0, 0, 0), 0.05);
}
#median-outlink .no-bullet {
  padding: 0;
  margin-bottom: 0;
  margin-left: 0;
  list-style: none;
}
#median-outlink .no-bullet li {
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  color: var(--nd-black, #000);
}
#median-outlink .no-bullet li + li {
  margin-top: 0.625rem;
}
#median-outlink .no-bullet li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  color: inherit;
}