/* font */
/* flex */
/* flex align */
/* flex justify-content */
/* flex direction*/
/* flex row */
/* scrollbar mixin */
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  border: solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: rgb(166, 166, 166);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

pre {
  margin: 0;
  word-break: break-all;
  white-space: pre-line;
}

#root .hljs-copy-wrapper {
  white-space: inherit;
}
#root .styleguideRoot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* highlight js style */
  /* --- */
}
#root .styleguideRoot .hljs-keyword,
#root .styleguideRoot .hljs-literal,
#root .styleguideRoot .hljs-name,
#root .styleguideRoot .hljs-symbol {
  color: #569cd6;
}
#root .styleguideRoot .hljs-link {
  color: #569cd6;
  text-decoration: underline;
}
#root .styleguideRoot .hljs-built_in,
#root .styleguideRoot .hljs-type {
  color: #4ec9b0;
}
#root .styleguideRoot .hljs-class,
#root .styleguideRoot .hljs-number {
  color: #b8d7a3;
}
#root .styleguideRoot .hljs-meta .hljs-string,
#root .styleguideRoot .hljs-string {
  color: #d69d85;
}
#root .styleguideRoot .hljs-regexp,
#root .styleguideRoot .hljs-template-tag {
  color: #9a5334;
}
#root .styleguideRoot .hljs-formula,
#root .styleguideRoot .hljs-function,
#root .styleguideRoot .hljs-params,
#root .styleguideRoot .hljs-subst,
#root .styleguideRoot .hljs-title {
  color: #dcdcdc;
}
#root .styleguideRoot .hljs-comment,
#root .styleguideRoot .hljs-quote {
  color: #57a64a;
  font-style: italic;
}
#root .styleguideRoot .hljs-doctag {
  color: #608b4e;
}
#root .styleguideRoot .hljs-meta,
#root .styleguideRoot .hljs-meta .hljs-keyword,
#root .styleguideRoot .hljs-tag {
  color: #9b9b9b;
}
#root .styleguideRoot .hljs-template-variable,
#root .styleguideRoot .hljs-variable {
  color: #bd63c5;
}
#root .styleguideRoot .hljs-attr,
#root .styleguideRoot .hljs-attribute {
  color: #9cdcfe;
}
#root .styleguideRoot .hljs-section {
  color: gold;
}
#root .styleguideRoot .hljs-emphasis {
  font-style: italic;
}
#root .styleguideRoot .hljs-strong {
  font-weight: 700;
}
#root .styleguideRoot .hljs-bullet,
#root .styleguideRoot .hljs-selector-attr,
#root .styleguideRoot .hljs-selector-class,
#root .styleguideRoot .hljs-selector-id,
#root .styleguideRoot .hljs-selector-pseudo,
#root .styleguideRoot .hljs-selector-tag {
  color: #d7ba7d;
}
#root .styleguideRoot .hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%;
}
#root .styleguideRoot .hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%;
}
#root .styleguideRoot .hljs {
  line-height: normal;
  -webkit-transition: ease-in-out 0.2s;
  transition: ease-in-out 0.2s;
  cursor: text;
  background: #2b2b2b;
}
#root .styleguideRoot .hljs::-moz-selection {
  color: inherit;
}
#root .styleguideRoot .hljs::selection {
  color: inherit;
}
#root .styleguideRoot .hljs:hover {
  background-color: #000;
}
#root .styleguideRoot .hljs-comment,
#root .styleguideRoot .hljs-quote {
  font-style: normal;
}
#root .styleguideRoot .codeArea {
  width: 100%;
}
#root .styleguideRoot .codeArea pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background: #1e1e1e;
  color: #dcdcdc;
  font-size: 16px;
  border-radius: 8px;
}
#root .styleguideRoot .codeArea pre.hljs-sc:hover .hljs-copy-button {
  right: 3em !important;
}
#root .styleguideRoot .hljs-ln {
  width: auto;
}
#root .styleguideRoot .hljs-ln-numbers {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  color: #ccc;
  border-right: 1px solid #ccc;
  padding-right: 5px !important;
}
#root .styleguideRoot .hljs-ln-code {
  padding-left: 10px;
  white-space: pre-wrap;
}
#root .styleguideRoot .hljs-ln-n:before {
  white-space: nowrap;
}
#root .styleguideRoot code {
  overflow-y: auto;
  max-height: 400px;
}
#root .styleguideRoot .codeName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
}
#root .styleguideTable {
  border-top: 1px solid #222;
  width: 100%;
}
#root .styleguideTable table {
  width: 100%;
}
#root .styleguideTable th[scope=col],
#root .styleguideTable td {
  height: 40px;
  border: 1px solid #d8d8d8;
  border-top: 0;
  text-align: left;
  padding: 0 20px;
}
#root .styleguideTable th[scope=col]:first-of-type,
#root .styleguideTable td:first-of-type {
  border-left: 0;
}
#root .styleguideTable th[scope=col]:last-of-type,
#root .styleguideTable td:last-of-type {
  border-right: 0;
}
#root .styleguideTable th[scope=col] {
  font-size: 15px;
  color: #666;
  background-color: #eee;
}
#root .styleguideTable td {
  background-color: #fff;
}
#root .styleguideFont {
  font-size: 2.5rem;
  color: #111;
}
#root .styleguideHeadingText {
  color: #111;
}
#root .styleguideHeading01 {
  font-size: 1.625rem;
}
#root .styleguideHeading02 {
  font-size: 1.25rem;
}
#root .styleguideHeading03 {
  font-size: 1.125rem;
}
#root .styleguideBodyText {
  color: #111;
}
#root .styleguideBodyText.lg {
  font-size: 1rem;
}
#root .styleguideBodyText.m {
  font-size: 0.875rem;
}
#root .styleguideBodyText.ms {
  font-size: 0.8125rem;
}
#root .styleguideBodyText.sm {
  font-size: 0.75rem;
}
#root .styleguideBodyText.etc {
  font-size: 0.6875rem;
}
#root .styleguideContents {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #f4f6fa;
}
#root .styleguideContentsInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 30px;
  padding: 40px 45px;
  height: 100%;
}
#root .styleguideContentsHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#root .styleguideContentsHeaderText {
  font-size: 32px;
  font-weight: 700;
  color: #222;
}
#root .styleguideContentsBody {
  padding: 46px 117px 68px 0;
  border-radius: 14px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}
#root .styleguideContentsSection + .styleguideContentsSection {
  margin-top: 70px;
}
#root .styleguideContentsGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 100px;
  padding-top: 30px;
  padding-bottom: 70px;
  padding-left: 58px;
}
#root .styleguideContentsGroup:last-of-type {
  padding-bottom: 0;
}
#root .styleguideContentsGroup.row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  width: 100%;
}
#root .styleguideContentsGroup.row .icon.black {
  background-color: #000;
}
#root .styleguideContentsGroup.bg {
  padding: 10px !important;
  background-color: #446eff;
}
#root .styleguideContentsLabel {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 54px;
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 700;
  color: #111;
  border-radius: 0 50px 50px 0;
  background-color: #f0f0f0;
  padding-left: 58px;
}
#root .styleguideContentsLabel::before {
  content: "";
  width: 5px;
  height: 35px;
  border-radius: 0 5px 5px 0;
  background-color: #446eff;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#root .styleguideContentsBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 30px;
}
#root .styleguideRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  padding-top: 30px;
  padding-left: 58px;
}
#root .styleguideRow .styleguideContentsGroup {
  row-gap: 20px;
  padding: 0;
}
#root .styleguideRow.col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 20px;
}
#root .styleguideRow.col.type02 {
  row-gap: 100px;
}
#root .styleguideRow + .styleguideRow {
  padding-bottom: 70px;
}
#root .styleguideRowItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 20px;
}
#root .styleguideRowItem.full {
  width: 100%;
}
#root .styleguideColumn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 30px;
}
#root .styleguideColumnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 95px;
  -moz-column-gap: 95px;
  column-gap: 95px;
}
#root .styleguideSubTitle {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--krds-color-light-gray-95);
}
#root .styleguideSubTitle.fs20 {
  font-size: 1.25rem;
}
#root .styleguideSubTitle.fs24 {
  font-size: 1.5rem;
}
#root .styleguideSubTitle.blue {
  color: #157efb;
}
#root .styleguideText16 {
  font-size: 1rem;
  color: #111;
}
#root .styleguideColorList {
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 1px solid #dadff1;
}
#root .styleguideColorItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 8px;
}
#root .styleguideColorText {
  font-size: 0.875rem;
  color: #111;
  text-transform: uppercase;
}
#root .styleguideColorCircle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
#root .styleguideColorCircle.primary1 {
  background-color: #446eff;
}
#root .styleguideColorCircle.primary2 {
  background-color: #3259da;
}
#root .styleguideColorCircle.primary3 {
  background-color: #1e44c1;
}
#root .styleguideColorCircle.secondary1 {
  background-color: #964eff;
}
#root .styleguideColorCircle.secondary2 {
  background-color: #793fce;
}
#root .styleguideColorCircle.secondary3 {
  background-color: #22d357;
}
#root .styleguideColorCircle.error {
  background-color: #ff263c;
}
#root .styleguideColorCircle.gray-scale1 {
  background-color: #000;
}
#root .styleguideColorCircle.gray-scale2 {
  background-color: #111;
}
#root .styleguideColorCircle.gray-scale3 {
  background-color: #333;
}
#root .styleguideColorCircle.gray-scale4 {
  background-color: #666;
}
#root .styleguideColorCircle.gray-scale5 {
  background-color: #999;
}
#root .styleguideColorCircle.gray-scale6 {
  -webkit-box-shadow: 0 0 0 1px #eee;
  box-shadow: 0 0 0 1px #eee;
  background-color: #fff;
}
#root .styleguideColorCircle.gray-scale7 {
  background-color: #bbb;
}
#root .styleguideColorCircle.gray-scale8 {
  background-color: #ccc;
}
#root .styleguideColorCircle.gray-scale9 {
  background-color: #ddd;
}
#root .styleguideColorCircle.gray-scale10 {
  background-color: #eee;
}
#root .styleguideColorCircle.gray-scale11 {
  background-color: #444;
}
#root .styleguideColorCircle.bg1 {
  background-color: #f4f4f4;
}
#root .styleguideColorCircle.bg2 {
  background-color: #f8f8f8;
}
#root .styleguideColorCircle.bg3 {
  background-color: #f9f9f9;
}
#root .styleguideColorCircle.bg4 {
  background-color: #eaf9ff;
}
#root .styleguideColorCircle.bg5 {
  background-color: #edf4ff;
}
#root .styleguideColorCircle.bg6 {
  background-color: #f5edff;
}
#root .styleguideLeftAreaHead {
  padding: 35px 35px 22px 35px;
  background-color: #446eff;
}
#root .styleguideLeftAreaHeadBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 16px;
}
#root .styleguideLeftAreaHeadBox a {
  min-height: 32px;
}
#root .styleguideLeftAreaHeadBox img {
  display: none;
}
#root .styleguideLeftAreaBottom {
  position: relative; /*max-height: calc(100% - 244px); overflow-y: auto;*/
  padding: 28px 42px 28px 28px;
  background-color: #fff;
}
#root .styleguideTag {
  margin-top: 22px;
  padding: 10px 15px;
  max-width: 174px;
  border-radius: 23.5px;
  background-color: #fff;
}
#root .styleguideTagText {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}
#root .styleguideMenuList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 25px;
}
#root .styleguideMenuItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 54px;
  border-radius: 8px;
}
#root .styleguideMenuItem.active {
  font-weight: 700;
  background-color: #d9e1ff;
}
#root .styleguideMenuItem.active svg path {
  stroke: #2352f4;
}
#root .styleguideMenuItem.active .styleguideMenuText {
  color: #2352f4;
}
#root .styleguideMenuText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: #555;
  padding: 0 18px;
}
#root .styleguideMenuText svg {
  width: 25px;
  height: 25px;
}
#root .styleguideMenuText:focus {
  outline: 0;
  box-shadow: none;
}
#root .styleguideBtnCodingList {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 208px;
  height: 52px;
  padding: 0 20px 0 14px;
  border-radius: 15px;
  color: #fff;
  background-color: #454545;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
#root .styleguideBtnCodingListText {
  margin-left: 10px;
  margin-right: auto;
  font-size: 18px;
  font-weight: 700;
  color: currentColor;
}
#root .styleguideBtnCodingList svg {
  color: currentColor;
}
#root .styleguideBtnCodingList::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ef4444;
}
#root #styleguideLeftArea {
  /*position: fixed;*/
  width: 300px;
  height: 100%;
}
#root #styleguideMenuLine {
  position: absolute;
  right: 0;
  width: 4px;
  height: 43px;
  border-radius: 58px 0 0 58px;
  background-color: #446eff;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#root .styleguideTitleBox {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
#root .styleguideDescription {
  font-size: 17px;
  color: var(--krds-color-light-gray-70);
}
#root .styleguideColorListContainer {
  padding: 40px;
}
#root .styleguideColorListContainer.light {
  border-radius: 12px 12px 0 0;
  background-color: var(--krds-color-light-gray-5);
}
#root .styleguideColorListContainer.light .styleguideColorListColumnTitle {
  color: var(var(--krds-color-light-gray-95));
}
#root .styleguideColorListContainer.dark {
  border-radius: 0 0 12px 12px;
  background-color: var(--krds-color-light-gray-95);
}
#root .styleguideColorListContainer.dark .styleguideColorList {
  border: 0;
}
#root .styleguideColorListContainer.dark .styleguideColorListColumnTitle {
  color: var(--krds-color-light-gray-10);
}
#root .styleguideColorName {
  font-size: 15px;
  color: var(--krds-color-light-gray-90);
}
#root .styleguideColorListColumn {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
#root .styleguideColorListColumnTitle {
  font-size: 17px;
  font-weight: 700;
}
#root .styleguideColorList {
  display: flex;
  align-items: center;
}
#root .styleguideRoot .krds-pagination {
  margin-top: 0;
}
#root .styleguideRoot .krds-pagination .page-navi,
#root .styleguideRoot.krds-pagination .page-link {
  height: auto;
}
#root .styleguideContentsGroup .krds-step-root {
  width: 100%;
}
#root .styleguideContentsGroup .krds-step-wrap {
  width: 100%;
}
#root .styleguideContentsGroup + .styleguideSubTitle {
  margin-top: 40px;
}
#root .styleguideContentsGroup .krds-step-wrap {
  margin-bottom: 0;
}
#root .styleguideColorItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  min-width: 63px;
  height: 80px;
}
#root .styleguideColorItem:first-child {
  background-color: #fff;
}
#root .styleguideColorItem[class*="50"] .styleguideColorName, #root .styleguideColorItem[class*="60"] .styleguideColorName, #root .styleguideColorItem[class*="70"] .styleguideColorName, #root .styleguideColorItem[class*="80"] .styleguideColorName, #root .styleguideColorItem[class*="90"] .styleguideColorName, #root .styleguideColorItem[class*="95"] .styleguideColorName {
  color: #fff;
}
#root .styleguideColorItem.primary5 {
  background-color: var(--krds-color-light-primary-5);
}
#root .styleguideColorItem.primary10 {
  background-color: var(--krds-color-light-primary-10);
}
#root .styleguideColorItem.primary20 {
  background-color: var(--krds-color-light-primary-20);
}
#root .styleguideColorItem.primary30 {
  background-color: var(--krds-color-light-primary-30);
}
#root .styleguideColorItem.primary40 {
  background-color: var(--krds-color-light-primary-40);
}
#root .styleguideColorItem.primary50 {
  background-color: var(--krds-color-light-primary-50);
}
#root .styleguideColorItem.primary60 {
  background-color: var(--krds-color-light-primary-60);
}
#root .styleguideColorItem.primary70 {
  background-color: var(--krds-color-light-primary-70);
}
#root .styleguideColorItem.primary80 {
  background-color: var(--krds-color-light-primary-80);
}
#root .styleguideColorItem.primary90 {
  background-color: var(--krds-color-light-primary-90);
}
#root .styleguideColorItem.primary95 {
  background-color: var(--krds-color-light-primary-95);
}
#root .styleguideColorItem.secondary5 {
  background-color: var(--krds-color-light-secondary-5);
}
#root .styleguideColorItem.secondary10 {
  background-color: var(--krds-color-light-secondary-10);
}
#root .styleguideColorItem.secondary20 {
  background-color: var(--krds-color-light-secondary-20);
}
#root .styleguideColorItem.secondary30 {
  background-color: var(--krds-color-light-secondary-30);
}
#root .styleguideColorItem.secondary40 {
  background-color: var(--krds-color-light-secondary-40);
}
#root .styleguideColorItem.secondary50 {
  background-color: var(--krds-color-light-secondary-50);
}
#root .styleguideColorItem.secondary60 {
  background-color: var(--krds-color-light-secondary-60);
}
#root .styleguideColorItem.secondary70 {
  background-color: var(--krds-color-light-secondary-70);
}
#root .styleguideColorItem.secondary80 {
  background-color: var(--krds-color-light-secondary-80);
}
#root .styleguideColorItem.secondary90 {
  background-color: var(--krds-color-light-secondary-90);
}
#root .styleguideColorItem.secondary95 {
  background-color: var(--krds-color-light-secondary-95);
}
#root .styleguideColorItem.gray0 {
  background-color: var(--krds-color-light-gray-0);
}
#root .styleguideColorItem.gray5 {
  background-color: var(--krds-color-light-gray-5);
}
#root .styleguideColorItem.gray10 {
  background-color: var(--krds-color-light-gray-10);
}
#root .styleguideColorItem.gray20 {
  background-color: var(--krds-color-light-gray-20);
}
#root .styleguideColorItem.gray30 {
  background-color: var(--krds-color-light-gray-30);
}
#root .styleguideColorItem.gray40 {
  background-color: var(--krds-color-light-gray-40);
}
#root .styleguideColorItem.gray50 {
  background-color: var(--krds-color-light-gray-50);
}
#root .styleguideColorItem.gray60 {
  background-color: var(--krds-color-light-gray-60);
}
#root .styleguideColorItem.gray70 {
  background-color: var(--krds-color-light-gray-70);
}
#root .styleguideColorItem.gray80 {
  background-color: var(--krds-color-light-gray-80);
}
#root .styleguideColorItem.gray90 {
  background-color: var(--krds-color-light-gray-90);
}
#root .styleguideColorItem.gray95 {
  background-color: var(--krds-color-light-gray-100);
}
#root .styleguideColorItem:last-child {
  background-color: #000;
}
#root .styleguideColorItem:last-child .styleguideColorName {
  color: #fff;
}
@media (hover: hover) {
  #root .styleguideBtnCodingList:hover {
    background-color: #000;
  }
}
#root .krds-btn.primary.hover {
  background-color: var(--krds-light-color-button-primary-fill-hover);
}
#root .krds-btn.primary.pressed {
  background-color: var(--krds-light-color-button-primary-fill-pressed);
}
#root .krds-btn.secondary.hover {
  background-color: var(--krds-light-color-button-secondary-fill-hover);
}
#root .krds-btn.secondary.pressed {
  background-color: var(--krds-light-color-button-secondary-fill-pressed);
}
#root .krds-btn.tertiary.hover {
  background-color: var(--krds-light-color-button-tertiary-fill-hover);
}
#root .krds-btn.tertiary.pressed {
  background-color: var(--krds-light-color-button-tertiary-fill-pressed);
}
#root .krds-btn.grayscale.hover {
  background-color: var(--krds-color-light-gray-90);
  border-color: var(--krds-color-light-gray-90);
}
#root .krds-btn.grayscale.pressed {
  background-color: var(--krds-color-light-gray-100);
  border-color: var(--krds-color-light-gray-100);
}
#root .krds-btn.excel.hover {
  background-color: #eaf6ec;
}
#root .krds-btn.excel.pressed {
  background-color: #d8eedd;
}
#root .btn-area {
  width: 100%;
  display: flex;
  gap: 80px;
}
#root .krds-form-select.focus {
  border-color: var(--krds-form-select--color-border-active);
  border-width: 2px;
  outline: none;
  box-shadow: none;
  color: var(--krds-form-select--color-text-active);
}
/*# sourceMappingURL=styleguide.css.map */