.line-login-choice {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.line-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #96928b;
  font-size: 0.875rem;
}

.line-login-divider::before,
.line-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.line-login-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: #06c755;
  color: #071d0e;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 140ms ease, transform 140ms ease;
}

.line-login-button:hover {
  background: #18d565;
  transform: translateY(-1px);
}

.line-login-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.line-login-button.is-disabled,
button.line-login-button:disabled {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 227, 218, 0.14);
  border-radius: 9999px;
  color: #8e8d85;
  cursor: not-allowed;
  transform: none !important;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.line-login-button.is-disabled:hover,
button.line-login-button:disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: none;
}

.line-login-unavailable {
  margin: 0;
  color: #96928b;
  font-size: 0.875rem;
  text-align: center;
}