/* ********** */
/* Dialog     */
/* ********** */
ld-confirm {
  display: none;
}
ld-confirm[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9001;
  visibility: visible;
}
.dialog .dimmed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9002;
  background-color: var(--Dimed40);
}
.dialog .container {
  display: flex;
  flex-direction: column;
  z-index: 9003;
  row-gap: var(--Spacing12);
  position: relative;
  width: calc(100% - (var(--Spacing16) * 2));
  max-width: 343px;
  max-height: 75vh;
  padding: var(--Spacing24);
  border-radius: var(--BorderRadius16);
  background-color: var(--Bg);
  overflow-y: hidden;
}
.dialog .container .head .close {
  display: none;
}
.dialog[close="btn"] .container .head .close {
  position: absolute;
  top: var(--Spacing8);
  right: var(--Spacing8);
  z-index: 9004;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--Spacing40);
  height: var(--Spacing40);
  font-size: 32px;
  cursor: pointer;
}
.dialog .container .head .title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: var(--FontHeadingSSize);
  font-weight: var(--FontWeightBold);
  line-height: var(--FontHeadingSHeight);
  letter-spacing: var(--FontHeadingSSpacing);
  color: var(--TxtPrimary);
}
.dialog .container .contentsArea {
  display: flex;
  flex-direction: column;
  row-gap: var(--Spacing24);
  overflow-y: auto;
}
.dialog .container .contentsArea .content {
  font-size: var(--FontBodyMSize);
  font-weight: var(--FontWeightRegular);
  line-height: var(--FontBodyMHeight);
  letter-spacing: var(--FontBodyMSpacing);
  color: var(--TxtSubPrimary);
}
.dialog .container .contentsArea .cta:not(.bottom) {
  display: flex;
  align-items: center;
  column-gap: var(--Spacing8);
  width: 100%;
}
.dialog .container .contentsArea .cta:not(.bottom) .btn {
  width: 100%;
}

button.primary:not(.sns),
.btn.primary:not(.sns) {
  border-color: var(--Primary);
  background-color: var(--Primary);
  color: var(--White);
}

button.lg,
.btn.lg {
  column-gap: var(--Spacing6);
  height: var(--SizeL);
  padding: 0 var(--Spacing20);
  font-size: var(--FontBodyXLSize);
  line-height: var(--FontBodyXLHeight);
  letter-spacing: var(--FontBodyXLSpacing);
}

button.md,
.btn,
.btn.md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  column-gap: var(--Spacing4);
  height: var(--SizeM);
  background-color: var(--Bg);
  padding: 0 var(--Spacing16);
  border: 1px solid var(--BorderSecondary);
  border-radius: var(--BorderRadius8);
  font-size: var(--FontBodyMSize);
  font-weight: var(--FontWeightBold);
  line-height: var(--FontBodyMHeight);
  letter-spacing: var(--FontBodyMSpacing);
  color: var(--TxtSecondary);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

/* ********** */
/* Snackbar   */
/* ********** */
#snackbarArea {
  position: fixed;
  bottom: var(--Spacing16);
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  row-gap: var(--Spacing4);
  width: 100%;
  max-width: 475px;
  margin: 0 auto;
  padding-right: var(--Spacing16);
  padding-left: var(--Spacing16);
}
@media (hover: hover) and (pointer: fine) {
  #snackbarArea {
    height: 80vh;
  }
}
.snackbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--Spacing8);
  width: 100%;
  margin: 0;
  padding: var(--Spacing12) var(--Spacing20) var(--Spacing12) var(--Spacing12);
  background-color: var(--Gray900);
  border-radius: var(--BorderRadius8);
}
.snackbar .icon {
  font-size: 32px;
  color: var(--Info);
}
.snackbar.error .icon {
  color: var(--Error);
}
.snackbar.success .icon {
  color: var(--Success);
}
.snackbar .contents .title {
  font-size: var(--FontBodyMSize);
  font-weight: var(--FontWeightRegular);
  line-height: var(--FontBodyMHeight);
  letter-spacing: var(--FontBodyMSpacing);
  color: var(--InvertTxtDark);
}
.snackbar .contents .content {
  font-size: var(--FontBodyXSSize);
  font-weight: var(--FontWeightRegular);
  line-height: var(--FontBodyXSHeight);
  letter-spacing: var(--FontBodyXSSpacing);
  color: var(--TxtSubSecondary);
}
.snackbar .button {
  margin-left: auto;
  font-size: var(--FontBodyMSize);
  font-weight: var(--FontWeightBold);
  line-height: var(--FontBodyMHeight);
  letter-spacing: var(--FontBodyMSpacing);
  color: var(--InvertTxtDark);
  cursor: pointer;
}