/* ===== button ===== */
.btn {
  padding: var(--space-xxs);
  border-radius: var(--radius-m);
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  border: thin solid var(--color-border);
  cursor: pointer;
}

.btn.btn-text {
  width: 150px;
  padding: 5.0px 0 2.5px 0;
}

.btn:hover {
  border: thin solid var(--color-border-dark);
  background: var(--color-hover);
}

.btn-danger {
  color: var(--color-danger);
}

.btn-danger:hover {
  color: var(--color-text-white);
  border: thin solid var(--color-danger);
  background: var(--color-danger);
}

/* ===== table ===== */
.table-wrapper {
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
}

.table {
  text-align: center;
}

.table th {
  color: var(--color-text-light);
  background: var(--color-surface);
  padding: var(--space-m);
}

.table th:first-child {
  border-top-left-radius: var(--radius-m);
}

.table th:last-child {
  border-top-right-radius: var(--radius-m);
}

.table td {
  border-top: thin solid var(--color-border);
  padding: var(--space-m);
}

.table-lowlink {
  cursor: pointer;
}

.table-lowlink:hover {
  background: var(--color-hover);
}

.table-lowlink td:last-child {
  text-align: end;
  color: var(--color-border);
}

.table-lowlink:last-child:hover td:first-child {
  border-bottom-left-radius: calc(var(--radius-m) - 1px);
}

.table-lowlink:last-child:hover td:last-child {
  border-bottom-right-radius: calc(var(--radius-m) - 1px);
}

/* ===== input, select, textarea ===== */
.input {
  appearance: none;
  margin: 0;
  padding: 5px 8px 3px 8px;
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  background-color: var(--color-bg);
  cursor: pointer;
}

.input:focus {
  outline: medium solid var(--gray-500);
  outline-offset: 0;
}

.select {
  appearance: none;
  --webkit-appearance: none;
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  background-color: var(--color-bg);
  padding: 5px 8px 3px 8px;
  max-width: 150px;
  cursor: pointer;
}

.select:focus {
  outline: medium solid var(--gray-500);
  outline-offset: 0;
}

.textarea {
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  background-color: var(--color-surface);
  padding: var(--space-m);
  cursor: pointer;
}

.textarea:focus {
  outline: medium solid var(--gray-500);
  outline-offset: 0;
}

/* ===== card ===== */
.confirm-card {
  width: 100%;
  max-width: 450px;
  background-color: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.confirm-inner {
  display: flex;
  border-bottom: thin solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  line-height: 3.0;
  padding: 0 var(--space-m);
}

.confirm-inner.border-none {
  border: none;
}

.details-card {
  width: 100%;
  background-color: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.details-inner {
  display: flex;
  border-bottom: thin solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  line-height: 3.0;
  padding: 0 var(--space-m);
}

.details-inner.border-none {
  border: none;
}

.memo {
  white-space: pre-wrap;
  width: 100%;
  background-color: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
}

.form-card {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.form-inner {
  display: flex;
  flex-direction: column;
  border-bottom: thin solid var(--color-border);
  padding: var(--space-s);
  gap: var(--space-xxs);
}

.form-inner.border-none {
  border: none;
}

/* ===== avatar ===== */
.avatar-wrapper {
  position: relative;
  z-index: 10;
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: 0 auto;
}

.avatar-skeleton {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;

  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--color-text-light);

  background-color: var(--color-surface);
}

.avatar {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 1;
}

.avatar.hidden {
  opacity: 0;
}

.hover-area {
  position: absolute;
  z-index: 40;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.hover-area.left {
  border-radius: 150px 0 0 150px;
  left: 0;
}

.hover-area.right {
  border-radius: 0 150px 150px 0;
  right: 0;
}

.hover-area.left:hover, .hover-area.right:hover {
  opacity: 1;
}

.hover-area.hover-area--hidden {
  display: none;
}

.avatar-info {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 50;
  color: var(--color-text-light);
  cursor: pointer;
}

/* ===== トースト ===== */
.toast {
  position: absolute;
  right: 16px;
  padding: var(--space-xxs);
  background: var(--color-bg);
  border-radius: var(--radius-m);
  border: thin solid var(--color-border);
  opacity: 1;
  transition: opacity 0.3s, transform 0.3s;
}

.toast.hidden {
  opacity: 0;
  pointer-events: none;
}

.toast-icon-area {
  position: relative;
  z-index: 10;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.toast-success {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}

.toast-faile {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}

.toast-success.hidden, .toast-faile.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== バックドロップ ===== */
.backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop);
  z-index: 1001;
  opacity: 1;
}

.backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== ポップアップ ===== */
.popupmenu-card {
  position: absolute;
  top: 37;
  right: 0;
  background-color: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  padding: var(--space-xxs);
  z-index: 1002;

  transition: all 0.2s ease;
  opacity: 1;
  visibility: visible;
}

.popupmenu-card.hidden {
  opacity: 0;
  transform: translateY(-20px);
  visibility: hidden;
  pointer-events: none;
}

.popupmenu-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
  cursor: pointer;
}

.popupmenu-inner:hover {
  background-color: var(--color-hover);
  border-radius: var(--radius-m);
}

.popupinfo {
  position: absolute;
  top: 10px;
  right: 0;
  width: 145px;
  font-size: 0.6rem;
  list-style-position: inside;
  background-color: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-xxs);
  z-index: 1002;
  
  transition: all 0.2s ease;
  opacity: 1;
  visibility: visible;
}

.popupinfo.hidden {
  opacity: 0;
  transform: translate(-20px, 20px);
  visibility: hidden;
  pointer-events: none;
}